From 9f1061f0312e7657a095fa5fe9125a4adb53d30e Mon Sep 17 00:00:00 2001 From: lemon Date: Sun, 22 Dec 2024 10:39:18 +0100 Subject: [PATCH 1/9] refactor(button): turn buttons into components removing the global CSS in favour of a component --- src/components/Button.svelte | 148 ++++++++++++++++++ src/data/icons.ts | 2 +- src/pages/index.astro | 22 +-- .../_components/CopyToClipboardButton.svelte | 21 ++- src/styles/_buttons.scss | 121 -------------- src/styles/global.scss | 1 - 6 files changed, 172 insertions(+), 143 deletions(-) create mode 100644 src/components/Button.svelte delete mode 100644 src/styles/_buttons.scss diff --git a/src/components/Button.svelte b/src/components/Button.svelte new file mode 100644 index 00000000..462a58b4 --- /dev/null +++ b/src/components/Button.svelte @@ -0,0 +1,148 @@ + + + + + + + + + diff --git a/src/data/icons.ts b/src/data/icons.ts index cb86083e..f62178d7 100644 --- a/src/data/icons.ts +++ b/src/data/icons.ts @@ -10,7 +10,7 @@ const phIcons = phIconsJson as IconifyJSONIconsData; const DEFAULT_VIEWBOX = 16; -const phosphorIcon = (name: string) => { +export const phosphorIcon = (name: string) => { const icon = phIcons.icons[name]; return { body: icon.body, diff --git a/src/pages/index.astro b/src/pages/index.astro index e62f78d0..2b17980b 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,7 +1,7 @@ --- import Landing from "@layouts/Landing.astro"; +import Button from "@components/Button.svelte"; import LaptopIllustration from "./_components/LaptopIllustration.astro"; -import { Icon } from "astro-icon/components"; --- A community-driven color scheme meant for coding, designing, and much more!

- + - + - + - +
diff --git a/src/pages/palette/_components/CopyToClipboardButton.svelte b/src/pages/palette/_components/CopyToClipboardButton.svelte index 5433bafc..539f245f 100644 --- a/src/pages/palette/_components/CopyToClipboardButton.svelte +++ b/src/pages/palette/_components/CopyToClipboardButton.svelte @@ -29,7 +29,7 @@ }; - diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 6da9de79..c69ea9bd 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -110,8 +110,8 @@ a { color: var(--blue); - &:hover, - &:focus { + &:not(:has(button)):hover, + &:not(:has(button)):focus { text-decoration: underline; } } From 2c864069cd24c52bc71bb3514c06e6ff208430ff Mon Sep 17 00:00:00 2001 From: lemon Date: Sun, 22 Dec 2024 17:49:45 +0100 Subject: [PATCH 4/9] refactor(CSS): add new utils --- src/styles/_utils.scss | 40 ------------- src/styles/utils.scss | 132 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 132 insertions(+), 40 deletions(-) delete mode 100644 src/styles/_utils.scss create mode 100644 src/styles/utils.scss diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 79cef97c..00000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,40 +0,0 @@ -@mixin containerPadding($size: md) { - @if $size == xxs { - padding: var(--space-xxs); - } - @if $size == xxs-y { - padding: var(--space-xxs) var(--space-xs); - } - @if $size == xs { - padding: var(--space-xs); - } - @if $size == xs-y { - padding: var(--space-xs) var(--space-md); - } - @if $size == sm { - padding: var(--space-sm); - } - @if $size == md { - padding: var(--space-md); - } - @if $size == lg { - padding: var(--space-lg); - } - @if $size == xl { - padding: var(--space-xl) var(--space-xxl); - } -} - -@mixin flex($direction: row, $gap: var(--space-md)) { - display: flex; - flex-direction: $direction; - flex-wrap: wrap; - gap: $gap; -} - -@mixin grid($column: 250px, $gap: var(--space-md)) { - display: grid; - grid-template-rows: auto; - grid-template-columns: repeat(auto-fit, minmax($column, 1fr)); - gap: $gap; -} diff --git a/src/styles/utils.scss b/src/styles/utils.scss new file mode 100644 index 00000000..0405d63b --- /dev/null +++ b/src/styles/utils.scss @@ -0,0 +1,132 @@ +@use "sass:math"; + +$base-size: 1em; + +@function border-radius($size: sm) { + @if $size == sm { + @return 6px; + } + @if $size == md { + @return 12px; + } +} + +@function space($size: md) { + @if $size == xs { + @return math.div($base-size, 10) * 1rem; + } + @if $size == sm { + @return math.div($base-size, 10) * 2rem; + } + @if $size == md { + @return math.div($base-size, 10) * 4rem; + } + @if $size == lg { + @return math.div($base-size, 10) * 8rem; + } + @if $size == xl { + @return math.div($base-size, 10) * 16rem; + } + @if $size == 2x { + @return math.div($base-size, 10) * 22rem; + } + @if $size == 3x { + @return math.div($base-size, 10) * 48rem; + } + @if $size == 4x { + @return math.div($base-size, 10) * 64rem; + } +} + +@function font-size($size: m) { + @if $size == xs { + @return 79%; + } + @if $size == sm { + @return 88%; + } + @if $size == md { + @return 100%; + } + @if $size == lg { + @return 112%; + } + @if $size == xl { + @return 126%; + } + @if $size == 2x { + @return 142%; + } + @if $size == 3x { + @return 160%; + } + @if $size == 4x { + @return 202%; + } + @if $size == 5x { + @return 248%; + } +} + +@mixin containerPadding($size: md) { + @if $size == xxs { + padding: var(--space-xxs); + } + @if $size == xxs-y { + padding: var(--space-xxs) var(--space-xs); + } + @if $size == xs { + padding: var(--space-xs); + } + @if $size == xs-y { + padding: var(--space-xs) var(--space-md); + } + @if $size == sm { + padding: var(--space-sm); + } + @if $size == md { + padding: var(--space-md); + } + @if $size == lg { + padding: var(--space-lg); + } + @if $size == xl { + padding: var(--space-xl) var(--space-xxl); + } +} + +// TODO: remove +@mixin flex($direction: row, $gap: var(--space-md)) { + display: flex; + flex-direction: $direction; + flex-wrap: wrap; + gap: $gap; +} + +@mixin flexbox($direction: row, $gap: space(md)) { + display: flex; + gap: $gap; + flex-direction: $direction; + @content; +} + +@mixin grid($column: 250px, $gap: var(--space-md)) { + display: grid; + grid-template-rows: auto; + grid-template-columns: repeat(auto-fit, minmax($column, 1fr)); + gap: $gap; +} + +@mixin auto-grid($column: 250px) { + grid-template-rows: auto; + grid-template-columns: repeat(auto-fit, minmax($column, 1fr)); +} + +@mixin grid2($gap: space(md), $column: null) { + display: grid; + gap: $gap; + @if $column { + @include auto-grid($column); + } + @content; +} From 0589ec387b680dd4bb434c4466f5c2ff6fce667f Mon Sep 17 00:00:00 2001 From: lemon Date: Sun, 22 Dec 2024 21:28:51 +0100 Subject: [PATCH 5/9] refactor(CSS): split and remove global _scaffolding.scss --- src/layouts/Default.astro | 26 ++++++++-- src/layouts/Landing.astro | 24 +++++++-- src/layouts/Skeleton.astro | 54 +++++++++++++++++++ src/layouts/components/Footer.astro | 5 +- src/styles/_scaffolding.scss | 80 ----------------------------- src/styles/global.scss | 2 - src/styles/utils.scss | 8 +-- 7 files changed, 102 insertions(+), 97 deletions(-) delete mode 100644 src/styles/_scaffolding.scss diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro index a70a0982..3b33da7d 100644 --- a/src/layouts/Default.astro +++ b/src/layouts/Default.astro @@ -23,7 +23,7 @@ const { title, description, ogImage, accent, enableViewTransition } = Astro.prop
-
+
@@ -33,7 +33,7 @@ const { title, description, ogImage, accent, enableViewTransition } = Astro.prop
-
+
@@ -41,9 +41,27 @@ const { title, description, ogImage, accent, enableViewTransition } = Astro.prop diff --git a/src/layouts/Landing.astro b/src/layouts/Landing.astro index d611adb5..621e0814 100644 --- a/src/layouts/Landing.astro +++ b/src/layouts/Landing.astro @@ -39,7 +39,7 @@ const { title, description, ogImage, accent } = Astro.props;
-
+
@@ -47,7 +47,21 @@ const { title, description, ogImage, accent } = Astro.props; diff --git a/src/layouts/components/Footer.astro b/src/layouts/components/Footer.astro index f8b546cf..318ac38b 100644 --- a/src/layouts/components/Footer.astro +++ b/src/layouts/components/Footer.astro @@ -50,11 +50,12 @@ import { footerLinks } from "@data/links";
diff --git a/src/layouts/components/AccentBar.astro b/src/layouts/components/AccentBar.astro index 9fdb3a85..32a14fd3 100644 --- a/src/layouts/components/AccentBar.astro +++ b/src/layouts/components/AccentBar.astro @@ -1,4 +1,4 @@ -
+
diff --git a/src/layouts/Landing.astro b/src/layouts/Landing.astro index 95ea8510..5b22b8b5 100644 --- a/src/layouts/Landing.astro +++ b/src/layouts/Landing.astro @@ -59,7 +59,7 @@ const { title, description, ogImage, accent } = Astro.props; } .footer-container { - margin-block-start: var(--space-xl); + margin-block-start: space(xl); background-color: var(--mantle); } @@ -82,7 +82,7 @@ const { title, description, ogImage, accent } = Astro.props; } .hero-logo { - @include flex($gap: var(--space-sm)); + @include flexbox($gap: space(md)); align-items: center; svg + svg { @@ -103,7 +103,7 @@ const { title, description, ogImage, accent } = Astro.props; } .hero-grid { - @include flex($direction: column, $gap: var(--space-lg)); + @include flexbox($direction: column, $gap: space(lg)); justify-content: space-between; flex-wrap: nowrap; @@ -120,14 +120,14 @@ const { title, description, ogImage, accent } = Astro.props; .hero-content-wrapper { display: grid; grid-template-rows: max-content auto; - gap: var(--space-xl); + gap: space(xl); container-type: inline-size; padding-block: var(--padding-body); } .hero-content { - @include flex($direction: column, $gap: var(--space-md)); + @include flexbox($direction: column, $gap: space(lg)); justify-content: center; align-items: flex-start; @@ -157,7 +157,7 @@ const { title, description, ogImage, accent } = Astro.props; max-height: 40vh; svg { - padding: var(--space-md); + padding: space(md); } @media (min-width: 800px) { @@ -165,11 +165,11 @@ const { title, description, ogImage, accent } = Astro.props; svg { @container (min-width: 400px) { - padding-inline-start: var(--space-lg); + padding-inline-start: space(lg); } @container (min-width: 500px) { - padding-inline-start: var(--space-xl); + padding-inline-start: space(xl); } } } diff --git a/src/layouts/Skeleton.astro b/src/layouts/Skeleton.astro index 8be02176..57fb9d04 100644 --- a/src/layouts/Skeleton.astro +++ b/src/layouts/Skeleton.astro @@ -27,16 +27,6 @@ import "@styles/global.scss"; --border-radius-normal: #{border-radius(sm)}; --border-radius-large: #{border-radius(lg)}; - - --base-unit: 1em; - - --space-xxs: calc(0.25 * var(--base-unit)); - --space-xs: calc(0.5 * var(--base-unit)); - --space-sm: calc(0.75 * var(--base-unit)); - --space-md: calc(1.25 * var(--base-unit)); - --space-lg: calc(2 * var(--base-unit)); - --space-xl: calc(3.25 * var(--base-unit)); - --space-xxl: calc(5.25 * var(--base-unit)); } *, diff --git a/src/layouts/components/Footer.astro b/src/layouts/components/Footer.astro index 318ac38b..d8bd88bd 100644 --- a/src/layouts/components/Footer.astro +++ b/src/layouts/components/Footer.astro @@ -53,7 +53,7 @@ import { footerLinks } from "@data/links"; @use "@styles/utils" as *; footer { - @include flex($gap: var(--space-md)); + @include flexbox($gap: space(md)); justify-content: space-between; padding-block: space(lg); @@ -62,7 +62,7 @@ import { footerLinks } from "@data/links"; } nav ul { - margin: 0 0 var(--space-xs) 0; + margin: 0 0 space(xs) 0; padding: 0; list-style: none; } @@ -99,7 +99,7 @@ import { footerLinks } from "@data/links"; } #vercel { - margin-block-start: var(--space-xs); + margin-block-start: space(xs); } diff --git a/src/layouts/components/Navigation.astro b/src/layouts/components/Navigation.astro index 5196b3dd..4be40416 100644 --- a/src/layouts/components/Navigation.astro +++ b/src/layouts/components/Navigation.astro @@ -25,9 +25,11 @@ import { navigationLinks } from "@data/links"; diff --git a/src/pages/palette/_components/CopyToClipboardButton.svelte b/src/pages/palette/_components/CopyToClipboardButton.svelte index 539f245f..e02ecf24 100644 --- a/src/pages/palette/_components/CopyToClipboardButton.svelte +++ b/src/pages/palette/_components/CopyToClipboardButton.svelte @@ -54,7 +54,7 @@ .btn { - @include utils.containerPadding(xxs); + padding: space(xs); border-radius: var(--border-radius-normal); border: none; diff --git a/src/pages/palette/index.astro b/src/pages/palette/index.astro index 11ad07f4..6839a4fa 100644 --- a/src/pages/palette/index.astro +++ b/src/pages/palette/index.astro @@ -104,7 +104,7 @@ const toHsl = (hsl: ColorFormat["hsl"]) => { diff --git a/src/styles/_tables.scss b/src/styles/_tables.scss index 0ff6dade..ffd57477 100644 --- a/src/styles/_tables.scss +++ b/src/styles/_tables.scss @@ -1,4 +1,4 @@ -@use "./utils"; +@use "./utils" as *; table { width: 100%; @@ -13,12 +13,12 @@ table { th, td { - @include utils.containerPadding(xs-y); + padding: space(xs) space(md); } th + th, td + td { - padding-inline-start: var(--space-lg); + padding-inline-start: space(lg); } th { diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index c69ea9bd..c91ba9c5 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,4 +1,4 @@ -@use "./utils"; +@use "./utils" as *; @font-face { font-family: "Inter"; @@ -61,7 +61,7 @@ h3, h4, h5 { margin: 0; - padding-block: var(--space-xs) var(--space-xs); + padding-block: space(xl) space(md); color: var(--text); } @@ -99,7 +99,7 @@ summary { p, ul, ol { - margin-block: 0 var(--space-xs); + margin-block: 0 space(sm); } li { margin: 0; @@ -158,7 +158,7 @@ blockquote cite { } code { - padding-inline: var(--space-xxs); + padding-inline: space(xs); max-width: 100%; border-radius: var(--border-radius-normal); @@ -192,7 +192,7 @@ code { } .rehype-heading { - padding-block: var(--space-md) var(--space-xs); + padding-block: space(md) space(xs); } .rehype-heading-link { diff --git a/src/styles/utils.scss b/src/styles/utils.scss index a350d810..98f98627 100644 --- a/src/styles/utils.scss +++ b/src/styles/utils.scss @@ -68,41 +68,6 @@ $base-size: 3; } } -@mixin containerPadding($size: md) { - @if $size == xxs { - padding: var(--space-xxs); - } - @if $size == xxs-y { - padding: var(--space-xxs) var(--space-xs); - } - @if $size == xs { - padding: var(--space-xs); - } - @if $size == xs-y { - padding: var(--space-xs) var(--space-md); - } - @if $size == sm { - padding: var(--space-sm); - } - @if $size == md { - padding: var(--space-md); - } - @if $size == lg { - padding: var(--space-lg); - } - @if $size == xl { - padding: var(--space-xl) var(--space-xxl); - } -} - -// TODO: remove -@mixin flex($direction: row, $gap: var(--space-md)) { - display: flex; - flex-direction: $direction; - flex-wrap: wrap; - gap: $gap; -} - @mixin flexbox($direction: row, $gap: space(md)) { display: flex; gap: $gap; @@ -110,7 +75,7 @@ $base-size: 3; @content; } -@mixin grid-old($column: 250px, $gap: var(--space-md)) { +@mixin grid-old($column: 250px, $gap: space(md)) { display: grid; grid-template-rows: auto; grid-template-columns: repeat(auto-fit, minmax($column, 1fr)); From 36e180c99f88a0100a9c1e4791d11edfca07da42 Mon Sep 17 00:00:00 2001 From: lemon Date: Wed, 25 Dec 2024 18:03:53 +0100 Subject: [PATCH 8/9] fix(CSS): fully smooth accent bar --- src/layouts/components/AccentBar.astro | 78 ++++++++++++++------------ 1 file changed, 43 insertions(+), 35 deletions(-) diff --git a/src/layouts/components/AccentBar.astro b/src/layouts/components/AccentBar.astro index 32a14fd3..56556b68 100644 --- a/src/layouts/components/AccentBar.astro +++ b/src/layouts/components/AccentBar.astro @@ -1,9 +1,51 @@