fix: Remove unnessecary usages of @apply

kiosion · Mar 3, 2024 · ac42151 · ac42151
1 parent 859a95c
commit ac42151
Show file tree

Hide file tree

Showing 42 changed files with 354 additions and 852 deletions.
diff --git a/svelte-app/src/app.scss b/svelte-app/src/app.scss
@@ -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;
-  }
-}
diff --git a/svelte-app/src/components/about/timeline-item.svelte b/svelte-app/src/components/about/timeline-item.svelte
@@ -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}
@@ -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 {
@@ -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>
diff --git a/svelte-app/src/components/about/timeline-section.svelte b/svelte-app/src/components/about/timeline-section.svelte
@@ -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,
@@ -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>
diff --git a/svelte-app/src/components/bullet-point.svelte b/svelte-app/src/components/bullet-point.svelte
@@ -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"
+/>
diff --git a/svelte-app/src/components/code-block.svelte b/svelte-app/src/components/code-block.svelte
@@ -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()}
     >
@@ -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

diff --git a/svelte-app/src/components/controls/arrow-button.svelte b/svelte-app/src/components/controls/arrow-button.svelte
@@ -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"
@@ -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>
diff --git a/svelte-app/src/components/controls/language-toggle.svelte b/svelte-app/src/components/controls/language-toggle.svelte
@@ -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'
       )}
@@ -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>