From ec1413d0e70660e5c396c50220c7339b52546107 Mon Sep 17 00:00:00 2001 From: kiosion Date: Sun, 3 Mar 2024 02:50:53 -0500 Subject: [PATCH] fix: Remove unnessecary usages of `@apply` --- svelte-app/src/app.scss | 128 +----------------- .../src/components/about/timeline-item.svelte | 53 ++------ .../components/about/timeline-section.svelte | 44 ++---- svelte-app/src/components/bullet-point.svelte | 16 +-- svelte-app/src/components/code-block.svelte | 4 +- .../components/controls/arrow-button.svelte | 43 +----- .../controls/language-toggle.svelte | 22 +-- .../components/controls/theme-toggle.svelte | 27 +--- svelte-app/src/components/divider.svelte | 16 +-- .../components/document/content/header.svelte | 22 +-- .../src/components/empty-content.svelte | 17 +-- svelte-app/src/components/footer.svelte | 35 ++--- svelte-app/src/components/header.svelte | 51 ++----- .../components/headings/headed-block.svelte | 28 +--- svelte-app/src/components/hoverable.svelte | 8 +- .../src/components/images/image-modal.svelte | 17 +-- svelte-app/src/components/images/image.svelte | 69 ++++------ .../components/layouts/constrain-width.svelte | 7 +- .../components/layouts/page-content.svelte | 8 +- .../layouts/scroll-container.svelte | 16 +-- svelte-app/src/components/link.svelte | 2 +- .../src/components/lists/document-list.svelte | 8 +- .../src/components/lists/list-item.svelte | 73 +++------- .../src/components/nav/base-link.svelte | 18 +-- .../src/components/nav/confetti-piece.svelte | 4 +- svelte-app/src/components/nav/confetti.svelte | 11 +- .../src/components/nav/header-logo.svelte | 23 +--- .../portable-text/image-carousel.svelte | 2 +- .../image-carousel/scroll-button.svelte | 30 +--- .../serializers/custom-heading.svelte | 111 ++++++--------- .../serializers/custom-paragraph.svelte | 8 +- .../serializers/ol-wrapper.svelte | 8 +- .../serializers/ul-wrapper.svelte | 8 +- .../src/components/tooltips/inner.svelte | 28 ++-- svelte-app/src/routes/+error.svelte | 16 +-- svelte-app/src/routes/+layout.svelte | 37 +---- .../src/routes/[[lang=lang]]/+page.svelte | 20 +-- svelte-app/src/styles/_animations.scss | 38 ------ svelte-app/src/styles/_mixins.scss | 22 +-- svelte-app/src/styles/_tw.scss | 101 ++++++++++++++ svelte-app/src/styles/_utils.scss | 0 svelte-app/src/styles/_variables.scss | 2 - 42 files changed, 346 insertions(+), 855 deletions(-) delete mode 100644 svelte-app/src/styles/_animations.scss create mode 100644 svelte-app/src/styles/_tw.scss delete mode 100644 svelte-app/src/styles/_utils.scss delete mode 100644 svelte-app/src/styles/_variables.scss diff --git a/svelte-app/src/app.scss b/svelte-app/src/app.scss index fdeb0a020..8d3e63149 100644 --- 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 index 0dd544b53..84f613a6a 100644 --- a/svelte-app/src/components/about/timeline-item.svelte +++ b/svelte-app/src/components/about/timeline-item.svelte @@ -11,18 +11,27 @@ last = false; -
- +
+
-

{title}

-

+

+ {title} +

+

{$displayRange(range.start, range.end)} • {$displayMonthDuration( range.start, range.end )}

{#if body} -
+
{/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; - } } diff --git a/svelte-app/src/components/about/timeline-section.svelte b/svelte-app/src/components/about/timeline-section.svelte index bdffa5d9b..a13ec2fd8 100644 --- 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); -
-
-

{title}

-

+

+
+

+ {title} +

+

{$displayRange(section[section.length - 1].range.start, section[0].range.end)} • {$displayMonthDuration( section[section.length - 1].range.start, @@ -33,31 +41,3 @@ /> {/each}

- - diff --git a/svelte-app/src/components/bullet-point.svelte b/svelte-app/src/components/bullet-point.svelte index c89212cf7..1a46f2013 100644 --- a/svelte-app/src/components/bullet-point.svelte +++ b/svelte-app/src/components/bullet-point.svelte @@ -1,13 +1,3 @@ - - - + diff --git a/svelte-app/src/components/code-block.svelte b/svelte-app/src/components/code-block.svelte index 711e3e960..af0583b95 100644 --- a/svelte-app/src/components/code-block.svelte +++ b/svelte-app/src/components/code-block.svelte @@ -112,7 +112,7 @@ {/if}
- - diff --git a/svelte-app/src/components/controls/language-toggle.svelte b/svelte-app/src/components/controls/language-toggle.svelte index 19e256bdb..ce3999b63 100644 --- 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')} > - - diff --git a/svelte-app/src/components/portable-text/serializers/custom-heading.svelte b/svelte-app/src/components/portable-text/serializers/custom-heading.svelte index 5cabb176b..d847be493 100644 --- a/svelte-app/src/components/portable-text/serializers/custom-heading.svelte +++ b/svelte-app/src/components/portable-text/serializers/custom-heading.svelte @@ -10,13 +10,16 @@ @@ -25,7 +28,7 @@ @import '@styles/mixins'; :global(.link-icon) { - @apply absolute -left-5 top-1/2 hidden -translate-y-1/2; + @apply absolute -left-4 top-1/2 hidden -translate-y-1/2; :hover &, :focus-visible &, @@ -34,71 +37,41 @@ } } - a { - @apply relative block w-full rounded-sm font-extrabold; - - @include focus-state(sm); - - h1, - h2, - h3, - h4, - h5, - h6 { - @apply inline font-bold text-black transition-[color]; - - @include dark { - @apply text-light; - } - } - - &.h1 { - @apply mb-6 mt-14; - } - &.h2 { - @apply mb-6 mt-12; - } - &.h3 { - @apply mb-5 mt-10; - } - &.h4 { - @apply mb-4 mt-8; - } - &.h5 { - @apply mb-4 mt-6; - } - &.h6 { - @apply mb-3 mt-5; - } - - &.h1, - &.h2, - &.h3, - &.h4, - &.h5, - &.h6 { - &.first { - @apply mt-5; - } - } + .h1 { + @apply mb-6 mt-14; + } + .h2 { + @apply mb-6 mt-12; + } + .h3 { + @apply mb-5 mt-10; + } + .h4 { + @apply mb-4 mt-8; + } + .h5 { + @apply mb-4 mt-6; + } + .h6 { + @apply mb-3 mt-5; + } - h1 { - @apply text-5xl; - } - h2 { - @apply text-4xl; - } - h3 { - @apply text-3xl; - } - h4 { - @apply text-2xl; - } - h5 { - @apply text-xl; - } - h6 { - @apply text-lg; - } + h1 { + @apply text-5xl; + } + h2 { + @apply text-4xl; + } + h3 { + @apply text-3xl; + } + h4 { + @apply text-2xl; + } + h5 { + @apply text-xl; + } + h6 { + @apply text-lg; } diff --git a/svelte-app/src/components/portable-text/serializers/custom-paragraph.svelte b/svelte-app/src/components/portable-text/serializers/custom-paragraph.svelte index 328f49e03..89a046c1c 100644 --- a/svelte-app/src/components/portable-text/serializers/custom-paragraph.svelte +++ b/svelte-app/src/components/portable-text/serializers/custom-paragraph.svelte @@ -6,10 +6,4 @@ $: ({ value: _value } = portableText); -

- - +

diff --git a/svelte-app/src/components/portable-text/serializers/ol-wrapper.svelte b/svelte-app/src/components/portable-text/serializers/ol-wrapper.svelte index 108b47508..00f3332f5 100644 --- a/svelte-app/src/components/portable-text/serializers/ol-wrapper.svelte +++ b/svelte-app/src/components/portable-text/serializers/ol-wrapper.svelte @@ -6,10 +6,4 @@ $: ({ value: _value } = portableText); -
- - +
diff --git a/svelte-app/src/components/portable-text/serializers/ul-wrapper.svelte b/svelte-app/src/components/portable-text/serializers/ul-wrapper.svelte index ea3601b3a..569f93ac4 100644 --- a/svelte-app/src/components/portable-text/serializers/ul-wrapper.svelte +++ b/svelte-app/src/components/portable-text/serializers/ul-wrapper.svelte @@ -6,10 +6,4 @@ $: ({ value: _value } = portableText); -
- - +
diff --git a/svelte-app/src/components/tooltips/inner.svelte b/svelte-app/src/components/tooltips/inner.svelte index 2c1eb1f1a..21a043bac 100644 --- a/svelte-app/src/components/tooltips/inner.svelte +++ b/svelte-app/src/components/tooltips/inner.svelte @@ -138,26 +138,18 @@ $: style = `left: ${position.x}px; top: ${position.y}px;`; -
- +
+ {content.trim().length >= MAX_LENGTH ? `${content.trim().slice(0, MAX_LENGTH - 3)}...` : content.trim()}
- - diff --git a/svelte-app/src/routes/+error.svelte b/svelte-app/src/routes/+error.svelte index 085583de0..295f585f0 100644 --- a/svelte-app/src/routes/+error.svelte +++ b/svelte-app/src/routes/+error.svelte @@ -89,10 +89,10 @@
-

+

{$page.error?.message && $page.status !== 404 ? $page.error.message : $t(message)}

-

+

{$t('Please')} window.history.back()}>{$t('go back')}, or window.location.reload()}>{$t('refresh the page')} (showStack = !showStack)} fullWidth> -

{$t('See more')}

+

{$t('See more')}

- - diff --git a/svelte-app/src/routes/+layout.svelte b/svelte-app/src/routes/+layout.svelte index 872c49eaa..992d50027 100644 --- a/svelte-app/src/routes/+layout.svelte +++ b/svelte-app/src/routes/+layout.svelte @@ -120,6 +120,7 @@ {$t('Skip to content')} -
+
@@ -146,34 +150,3 @@
- - diff --git a/svelte-app/src/routes/[[lang=lang]]/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/+page.svelte index 3c192ca20..cac3a1973 100644 --- a/svelte-app/src/routes/[[lang=lang]]/+page.svelte +++ b/svelte-app/src/routes/[[lang=lang]]/+page.svelte @@ -43,7 +43,11 @@ {#if data.posts.length} -
+
{#each data.posts as post} {/each} @@ -55,18 +59,8 @@ {:else} -
-

{$t('No content')}

+
+

{$t('No content')}

{/if} - - diff --git a/svelte-app/src/styles/_animations.scss b/svelte-app/src/styles/_animations.scss deleted file mode 100644 index d68f61db6..000000000 --- a/svelte-app/src/styles/_animations.scss +++ /dev/null @@ -1,38 +0,0 @@ -@keyframes bounceUp { - 0%, - 20%, - 50%, - 80%, - 100% { - transform: translateY(0); - } - 40% { - transform: translateY(-3px); - } - 60% { - transform: translateY(-1.5px); - } -} -@keyframes bounceDown { - 0%, - 20%, - 50%, - 80%, - 100% { - transform: translateY(0); - } - 40% { - transform: translateY(3px); - } - 60% { - transform: translateY(1.5px); - } -} - -.scroll-hover-up svg { - animation: bounceUp 2s infinite; -} - -.scroll-hover-down svg { - animation: bounceDown 2s infinite; -} diff --git a/svelte-app/src/styles/_mixins.scss b/svelte-app/src/styles/_mixins.scss index b57905311..15389c9f5 100644 --- a/svelte-app/src/styles/_mixins.scss +++ b/svelte-app/src/styles/_mixins.scss @@ -1,24 +1,4 @@ -@import 'variables'; - -/** - * Focus state mixin - * @param {string} $size - 'sm' or 'lg' - */ -@mixin focus-state($size: 'lg') { - @apply outline-offset-4 outline-2 outline-accent-light; - - &:focus-visible { - @apply outline; - } - - @if $size == 'sm' { - @apply outline-offset-2; - } - - :global(.dark) & { - @apply outline-accent-dark; - } -} +@import 'breakpoints'; @mixin media($key) { @if not map-has-key($breakpoints, $key) { diff --git a/svelte-app/src/styles/_tw.scss b/svelte-app/src/styles/_tw.scss new file mode 100644 index 000000000..dc3b3ce99 --- /dev/null +++ b/svelte-app/src/styles/_tw.scss @@ -0,0 +1,101 @@ +@layer base { + body { + @apply h-full w-full overflow-x-hidden; + } + + @layer base { + body, + html { + height: 100vh; + overflow: hidden; + transition: background 150ms ease; + } + + body, + html, + div, + span, + p, + img { + box-sizing: border-box; + } + + body { + @apply bg-black text-light; + + &.light { + @apply bg-light text-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; + } + } + } + + ::selection { + @apply bg-accent-light/80 text-light; + } + + .dark { + ::selection { + @apply bg-accent-dark/80 text-dark; + } + } + } +} + +@layer utilities { + .focus-outline { + @apply outline-offset-4; + + &, + &-sm { + @apply focus-visible:outline outline-accent-light outline-2 dark:outline-accent-dark; + } + + &-sm { + @apply outline-offset-2; + } + } +} + +@layer components { + .pt-ol, + .pt-ul { + li { + @apply mb-2 leading-6; + } + } + + .pt-ol { + li { + ol { + @apply list-[lower-alpha] my-3; + } + } + } + + .pt-ul { + li { + ul { + @apply list-disc my-3; + } + } + } +} diff --git a/svelte-app/src/styles/_utils.scss b/svelte-app/src/styles/_utils.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/svelte-app/src/styles/_variables.scss b/svelte-app/src/styles/_variables.scss deleted file mode 100644 index 5f9bbb078..000000000 --- a/svelte-app/src/styles/_variables.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import 'colors'; -@import 'breakpoints';