Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove unnessecary usages of @apply #1153

Merged
merged 1 commit into from
Mar 3, 2024
Merged

Remove unnessecary usages of @apply #1153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 1 addition & 127 deletions svelte-app/src/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,136 +1,10 @@

@tailwind base;
@tailwind components;
@tailwind utilities;

@import 'styles/breakpoints';
@import 'styles/animations';
@import 'styles/colors';
@import 'styles/fonts';
@import 'styles/utils';
@import 'styles/tw';

@import 'styles/components/code-block';

body,
html {
height: 100vh;
overflow: hidden;
transition: background 150ms ease;
}

body,
html,
div,
span,
p,
img {
box-sizing: border-box;
}

body {
@apply h-full w-full overflow-x-hidden;

background-color: $black;
--textColour: $light;

&.light {
background-color: $light;
--textColour: $dark;
}
&:not(.is-loaded) {
cursor: wait !important;

& a,
& button,
& [role='button'] {
cursor: not-allowed !important;
}
}
&.is-loading {
cursor: wait !important;

& a,
& button,
& [role='button'] {
cursor: not-allowed !important;
}
}
}

.not-allowed {
&,
& a,
& button,
& [role='button'] {
cursor: not-allowed !important;
}
}

::selection {
background: rgba($accent-light, 0.8);
color: $light;
}

.dark {
::selection {
background: rgba($accent-dark, 0.8);
color: $dark;
}
}

.click-through {
pointer-events: none;

a,
button,
[role='button'] {
pointer-events: visible;
}
}

.focus:ring-2 {
&,
&:focus {
outline: none !important;
}
}

.pt-ol,
.pt-ul {
li {
margin-bottom: 0.5rem;
line-height: 1.4rem;
}
}

.pt-ol {
li {
ol {
@apply list-[lower-alpha] my-3;
}
}
}

.pt-ul {
li {
ul {
@apply list-disc my-3;
}
}
}

.focusOutline {
@apply outline-offset-4;

&,
&-sm {
@apply focus-visible:outline outline-accent-light outline-2;

.dark & {
@apply outline-accent-dark;
}
}
&-sm {
@apply outline-offset-2;
}
}
53 changes: 14 additions & 39 deletions svelte-app/src/components/about/timeline-item.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,27 @@
last = false;
</script>

<div class:last class="item">
<span class="bullet" />
<div
class="relative flex flex-row items-start justify-start gap-x-6 pl-3"
class:last
class:pb-0={last}
class:pb-5={!last}
>
<span
class="bullet block flex-shrink-0 rounded-full bg-accent-light/80 dark:bg-accent-dark/80"
/>
<div class="content">
<h3>{title}</h3>
<p>
<h3 class="py-1 text-base font-bold text-dark transition-colors dark:text-white">
{title}
</h3>
<p class="font-mono text-sm text-dark/80 transition-colors dark:text-light/80">
{$displayRange(range.start, range.end)} &bull; {$displayMonthDuration(
range.start,
range.end
)}
</p>
{#if body}
<div class="body">
<div class="-mb-4">
<PortableText text={body} />
</div>
{/if}
Expand All @@ -37,32 +46,10 @@
$lineWidth: 2px;
$lineGap: 14px;

.item {
@apply relative flex flex-row items-start justify-start gap-x-6 pb-5 pl-3;

&.last {
@apply pb-0;
}
}

.bullet {
@apply block flex-shrink-0 rounded-full bg-accent-light/80;

margin-top: $bulletTopMargin;
width: $bulletSize;
height: $bulletSize;

@include dark {
@apply bg-accent-dark/80;
}
}

h3 {
@apply py-1 text-base font-bold text-dark transition-colors;

@include dark {
@apply text-white;
}
}

.content {
Expand All @@ -87,17 +74,5 @@
@apply bg-white/20;
}
}

p {
@apply font-mono text-sm text-dark/80 transition-colors;

@include dark {
@apply text-light/80;
}
}

.body {
@apply -mb-4;
}
}
</style>
44 changes: 12 additions & 32 deletions svelte-app/src/components/about/timeline-section.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,18 @@
id = Math.random().toString(36).substring(7);
</script>

<section role="group" aria-labelledby="{id}-heading">
<div>
<h2 id="{id}-heading">{title}</h2>
<p aria-label={$t('Duration')}>
<section class="my-6" role="group" aria-labelledby="{id}-heading">
<div class="pb-4">
<h2
class="pb-1 text-lg font-bold text-dark transition-colors dark:text-white"
id="{id}-heading"
>
{title}
</h2>
<p
class="font-mono text-sm text-dark/80 transition-colors dark:text-light/80"
aria-label={$t('Duration')}
>
{$displayRange(section[section.length - 1].range.start, section[0].range.end)} &bull;
{$displayMonthDuration(
section[section.length - 1].range.start,
Expand All @@ -33,31 +41,3 @@
/>
{/each}
</section>

<style lang="scss">
h2 {
@apply pb-1 text-lg font-bold text-dark transition-colors;
}

p {
@apply font-mono text-sm text-dark/80 transition-colors;
}

div {
@apply pb-4;
}

section {
@apply my-6;
}

:global(.dark) {
h2 {
@apply text-white;
}

p {
@apply text-light/80;
}
}
</style>
16 changes: 3 additions & 13 deletions svelte-app/src/components/bullet-point.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,3 @@
<span />

<style lang="scss">
span {
@apply mx-2 block h-1 w-1 flex-shrink-0 rounded-full bg-dark/80 transition-colors;
}

:global(.dark) {
span {
@apply bg-light/80;
}
}
</style>
<span
class="mx-2 block h-1 w-1 flex-shrink-0 rounded-full bg-dark/80 transition-colors dark:bg-light/80"
/>
4 changes: 2 additions & 2 deletions svelte-app/src/components/code-block.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@
{/if}
<Tooltip text={$t('Copy to clipboard')} delay={200} offset={[0, 2]}>
<button
class="focusOutline-sm absolute right-0 top-0 z-[2] cursor-pointer rounded-sm pb-3 pl-3 pr-4 pt-4 text-dark/60 hover:text-dark/80 dark:text-light/60 dark:hover:text-light/80"
class="focus-outline-sm absolute right-0 top-0 z-[2] cursor-pointer rounded-sm pb-3 pl-3 pr-4 pt-4 text-dark/60 hover:text-dark/80 dark:text-light/60 dark:hover:text-light/80"
on:click={() => copy()}
on:keydown={(e) => e.key === 'Enter' && copy()}
>
Expand All @@ -122,7 +122,7 @@
</button>
</Tooltip>
<div
class="focusOutline relative h-fit w-full overflow-hidden rounded-sm text-lg transition-[height,color]"
class="focus-outline relative h-fit w-full overflow-hidden rounded-sm text-lg transition-[height,color]"
bind:this={codeContainer}
>
<div
Expand Down
43 changes: 5 additions & 38 deletions svelte-app/src/components/controls/arrow-button.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,11 @@
<svelte:element
this={self}
href={$$props.href || undefined}
class:fullWidth
class:alignRight={align === 'right'}
class:alignLeft={align === 'left'}
class="arrowButton {$$props.class || ''}"
class:w-full={fullWidth}
class:text-right={align === 'right'}
class:text-left={align === 'left'}
class="focus-outline inline-block rounded-sm font-code text-accent-light hover:text-dark focus-visible:text-dark dark:text-accent-dark dark:hover:text-light dark:focus-visible:text-light {$$props.class ??
''}"
aria-label={$$props['aria-label'] || undefined}
role="button"
tabindex="0"
Expand All @@ -32,37 +33,3 @@
>
<slot />
</svelte:element>

<style lang="scss">
@import '@styles/mixins';

.arrowButton {
@apply inline-block rounded-sm font-code text-accent-light;

@include focus-state;

@include focused {
@apply text-dark;

@include dark {
@apply text-light;
}
}

&.fullWidth {
@apply w-full;
}

&.alignRight {
@apply text-right;
}

&.alignLeft {
@apply text-left;
}

@include dark {
@apply text-accent-dark;
}
}
</style>
22 changes: 1 addition & 21 deletions svelte-app/src/components/controls/language-toggle.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
text={$t($currentLang === APP_LANGS[0] ? 'Switch to French' : 'Switch to English')}
>
<button
class="focus-outline -m-1.5 flex h-6 w-6 items-center justify-center rounded-sm hover:text-accent-light focus-visible:text-accent-light dark:hover:text-accent-dark dark:focus-visible:text-accent-dark"
aria-label={$t(
$currentLang === APP_LANGS[0] ? 'Switch to French' : 'Switch to English'
)}
Expand All @@ -42,24 +43,3 @@
</button>
</Tooltip>
</Hoverable>

<style lang="scss">
@import '@styles/mixins';

button {
@apply -m-1.5 flex items-center justify-center rounded-sm;

height: 24px;
width: 24px;

@include focus-state;

@include focused {
@apply text-accent-light;

@include dark {
@apply text-accent-dark;
}
}
}
</style>
Loading
Loading