From ea819d0f75b5ac2e03701d47a542544c77ad7635 Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Sat, 29 Mar 2025 11:50:00 +0100 Subject: [PATCH 01/32] Enhance SCSS breakpoints and font definitions for improved responsiveness and maintainability. Update .gitignore to include cursor rules. Refactor breakpoint mixins for consistency and clarity. --- .gitignore | 5 ++- src/assets/scss/base/_breakpoint.scss | 29 +++++++++------- src/assets/scss/base/_container.scss | 8 ++--- src/assets/scss/base/_font.scss | 44 ++++++++++++------------ src/assets/scss/base/_list.scss | 4 +-- src/assets/scss/base/_space-content.scss | 10 +++--- 6 files changed, 53 insertions(+), 47 deletions(-) diff --git a/.gitignore b/.gitignore index d574012f..8b5569b3 100644 --- a/.gitignore +++ b/.gitignore @@ -27,4 +27,7 @@ yarn-error.log* package-lock.json # astro build files -.astro \ No newline at end of file +.astro + +# cursor rules +.cursor/rules \ No newline at end of file diff --git a/src/assets/scss/base/_breakpoint.scss b/src/assets/scss/base/_breakpoint.scss index 70f6920f..83db8d33 100644 --- a/src/assets/scss/base/_breakpoint.scss +++ b/src/assets/scss/base/_breakpoint.scss @@ -1,26 +1,29 @@ -@use 'sass:map'; - -// | ------------------------------------------------------------- -// | Breakpoint -// | ------------------------------------------------------------- - $breakpoints: ( 'default': 0, - 'small': 24em, - 'medium': 48em, - 'large': 75em, + 'xs': 320px, + 's': 480px, + 'm': 768px, + 'l': 1024px, + 'xl': 1280px, + '2xl': 1536px, ) !default; @mixin breakpoint($breakpoint) { - @if map.has-key($breakpoints, $breakpoint) { - @media (min-width: map.get($breakpoints, $breakpoint)) { + @if map-has-key($breakpoints, $breakpoint) { + @media (min-width: map-get($breakpoints, $breakpoint)) { @content; } } @else if (type_of($breakpoint) == number) { - @media (min-width: $breakpoint+'px') { + @media (min-width: #{$breakpoint}px) { @content; } } @else { - @error "Not a correct value, check _base-breakpoints for available values."; + @error "Not a correct value"; } } + +// For reference +// 'default': 0, +// 'small': 24em, +// 'medium': 48em, +// 'large': 75em, diff --git a/src/assets/scss/base/_container.scss b/src/assets/scss/base/_container.scss index e76f0df2..41d09aa5 100644 --- a/src/assets/scss/base/_container.scss +++ b/src/assets/scss/base/_container.scss @@ -2,18 +2,18 @@ // | Container // | ------------------------------------------------------------- -@use "breakpoint" as *; +@use 'breakpoint' as *; .container { margin: 0 auto; padding: 0 calc(2rem / 2); max-width: 100%; - @include breakpoint(medium) { + @include breakpoint(m) { padding: 0 2rem; } - @include breakpoint(large) { + @include breakpoint(xl) { padding: 0 calc(2rem / 2); max-width: 1200px; } @@ -21,4 +21,4 @@ &.stretch { max-width: 100%; } -} \ No newline at end of file +} diff --git a/src/assets/scss/base/_font.scss b/src/assets/scss/base/_font.scss index 76d663bc..5c2109e5 100644 --- a/src/assets/scss/base/_font.scss +++ b/src/assets/scss/base/_font.scss @@ -5,60 +5,60 @@ @use 'breakpoint' as *; @font-face { - font-family: 'Open Sans'; + font-style: normal; + font-weight: bold; src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url('/fonts/OpenSans-ExtraBold.woff2') format('woff2'), url('/fonts/OpenSans-ExtraBold.woff') format('woff'); - font-weight: bold; - font-style: normal; + font-family: 'Open Sans'; font-display: swap; } @font-face { - font-family: 'Open Sans'; + font-style: normal; + font-weight: bold; src: local('Open Sans Bold'), local('OpenSans-Bold'), url('/fonts/OpenSans-Bold.woff2') format('woff2'), url('/fonts/OpenSans-Bold.woff') format('woff'); - font-weight: bold; - font-style: normal; + font-family: 'Open Sans'; font-display: swap; } @font-face { - font-family: 'Open Sans'; + font-style: italic; + font-weight: normal; src: local('Open Sans Italic'), local('OpenSans-Italic'), url('/fonts/OpenSans-Italic.woff2') format('woff2'), url('/fonts/OpenSans-Italic.woff') format('woff'); - font-weight: normal; - font-style: italic; + font-family: 'Open Sans'; font-display: swap; } @font-face { - font-family: 'Open Sans'; + font-style: normal; + font-weight: normal; src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/fonts/OpenSans-Regular.woff2') format('woff2'), url('/fonts/OpenSans-Regular.woff') format('woff'); - font-weight: normal; - font-style: normal; + font-family: 'Open Sans'; font-display: swap; } body { - font-family: var(--font-family-default); - text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px; - text-rendering: optimizeLegibility; - font-synthesis: none; font-size: 1rem; line-height: 1.5rem; + font-family: var(--font-family-default); + font-synthesis: none; + text-rendering: optimizeLegibility; + text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px; -webkit-text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -103,7 +103,7 @@ body { font-size: 2.25rem; line-height: 3.375rem; - @include breakpoint(medium) { + @include breakpoint(m) { font-size: 3rem; line-height: 3.625rem; } @@ -113,7 +113,7 @@ body { font-size: 1.875rem; line-height: 2.8125rem; - @include breakpoint(medium) { + @include breakpoint(m) { font-size: 2.25rem; line-height: 3.375rem; } @@ -123,7 +123,7 @@ body { font-size: 1.5rem; line-height: 2.25rem; - @include breakpoint(medium) { + @include breakpoint(m) { font-size: 1.875rem; line-height: 2.8125rem; } @@ -133,7 +133,7 @@ body { font-size: 1.25rem; line-height: 1.875rem; - @include breakpoint(medium) { + @include breakpoint(m) { font-size: 1.5rem; line-height: 2.25rem; } @@ -143,7 +143,7 @@ body { font-size: 1.125rem; line-height: 1.6875rem; - @include breakpoint(medium) { + @include breakpoint(m) { font-size: 1.25rem; line-height: 1.875rem; } @@ -153,7 +153,7 @@ body { font-size: 1rem; line-height: 1.5rem; - @include breakpoint(medium) { + @include breakpoint(m) { font-size: 1.125rem; line-height: 1.6875rem; } diff --git a/src/assets/scss/base/_list.scss b/src/assets/scss/base/_list.scss index a3ca0706..a2dd6978 100644 --- a/src/assets/scss/base/_list.scss +++ b/src/assets/scss/base/_list.scss @@ -41,13 +41,13 @@ ol.incremented { display: block; margin-bottom: 0.5rem; - @include breakpoint(medium) { + @include breakpoint(m) { margin-bottom: 0.75rem; } &::before { - content: counters(item, '.') '. '; counter-increment: item; + content: counters(item, '.') '. '; } &:last-child { diff --git a/src/assets/scss/base/_space-content.scss b/src/assets/scss/base/_space-content.scss index 888b3346..b5e55b3f 100644 --- a/src/assets/scss/base/_space-content.scss +++ b/src/assets/scss/base/_space-content.scss @@ -14,7 +14,7 @@ > h2 { margin-top: 3rem; - @include breakpoint(large) { + @include breakpoint(xl) { margin-top: 4rem; } } @@ -22,7 +22,7 @@ > h3 { margin-top: 2rem; - @include breakpoint(large) { + @include breakpoint(xl) { margin-top: 3rem; } } @@ -30,7 +30,7 @@ > h4 { margin-top: 1.5rem; - @include breakpoint(large) { + @include breakpoint(xl) { margin-top: 2rem; } } @@ -38,7 +38,7 @@ > h5 { margin-top: 1rem; - @include breakpoint(large) { + @include breakpoint(xl) { margin-top: 1.5rem; } } @@ -46,7 +46,7 @@ > h6 { margin-top: 1rem; - @include breakpoint(large) { + @include breakpoint(xl) { margin-top: 1.5rem; } } From a4f9343957d34eb16a26e526a8d976ed68cdea29 Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Sat, 29 Mar 2025 15:11:53 +0100 Subject: [PATCH 02/32] Replace color system by new OKLCH color system using light-dark(), with better incorperated custom properties. #105 #134 #136 --- src/assets/scss/base/_button.scss | 145 +++----------- src/assets/scss/base/_color.scss | 34 ---- src/assets/scss/base/_container.scss | 24 --- src/assets/scss/base/_font.scss | 94 +++------ src/assets/scss/base/_general.scss | 52 +++++ src/assets/scss/base/_kbd.scss | 19 ++ src/assets/scss/base/_list.scss | 64 +++---- src/assets/scss/base/_mixins.scss | 49 +++++ src/assets/scss/base/_reset.scss | 47 +++-- src/assets/scss/base/_root.scss | 178 +++++++++++++++-- src/assets/scss/base/_space-content.scss | 57 ------ src/assets/scss/base/_utility.scss | 234 +++++++++++++++++++++++ src/assets/scss/globals.scss | 7 +- src/components/CallToAction.astro | 26 ++- src/components/Counter.astro | 2 +- src/components/Feature.astro | 26 +-- src/components/Header.astro | 10 +- src/components/Hero.astro | 15 +- src/components/Navigation.astro | 28 +-- src/components/ResponsiveToggle.astro | 15 +- src/layouts/DefaultLayout.astro | 58 +----- 21 files changed, 695 insertions(+), 489 deletions(-) delete mode 100644 src/assets/scss/base/_color.scss delete mode 100644 src/assets/scss/base/_container.scss create mode 100644 src/assets/scss/base/_general.scss create mode 100644 src/assets/scss/base/_kbd.scss create mode 100644 src/assets/scss/base/_mixins.scss delete mode 100644 src/assets/scss/base/_space-content.scss create mode 100644 src/assets/scss/base/_utility.scss diff --git a/src/assets/scss/base/_button.scss b/src/assets/scss/base/_button.scss index b205d4ad..2013e2cd 100644 --- a/src/assets/scss/base/_button.scss +++ b/src/assets/scss/base/_button.scss @@ -3,129 +3,36 @@ // | ------------------------------------------------------------- .button { - display: inline-block; - padding: 0.75rem 1rem; - font-weight: bold; + display: inline-flex; + position: relative; + justify-content: center; + align-items: center; + transition: all var(--animation-speed-fast) var(--cubic-bezier); + cursor: pointer; + border: 3px solid light-dark(var(--color-primary-200), var(--color-primary-100)); + border-radius: 0.25rem; + background-color: light-dark(var(--color-primary-200), var(--color-primary-100)); + padding: 0.75rem 1.5rem; + width: fit-content; + color: var(--color-neutral-900); + font-weight: 700; text-decoration: none; - text-align: center; - color: var(--neutral-900); - background-color: var(--primary-100); - border: 3px solid var(--primary-100); - border-radius: 3px; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; - &:hover, - &:focus { + &:where(:hover, :focus-visible) { + border-color: light-dark(var(--color-primary-300), var(--color-primary-300)); + background-color: light-dark(var(--color-primary-300), var(--color-primary-300)); text-decoration: underline; - background-color: var(--primary-200); - border-color: var(--primary-200); - } - - &:visited { - color: var(--neutral-900); + text-decoration-thickness: 2px; + text-underline-offset: 0.25rem; } &.color-secondary { - background-color: var(--secondary-100); - border-color: (var(--secondary-100)); - - &:hover, - &:focus { - background-color: var(--secondary-400); - border-color: var(--secondary-400); - } - } - - &.color-neutral { - background-color: var(--neutral-500); - border-color: (var(--neutral-500)); - - &:hover, - &:focus { - background-color: var(--neutral-400); - border-color: var(--neutral-400); - } - } - - &.color-info { - background-color: var(--info-300); - border-color: (var(--info-300)); - - &:hover, - &:focus { - background-color: var(--info-200); - border-color: var(--info-200); - } - } - - &.color-success { - background-color: var(--success-400); - border-color: (var(--success-400)); - - &:hover, - &:focus { - background-color: var(--success-300); - border-color: var(--success-300); - } - } - - &.color-warning { - background-color: var(--warning-400); - border-color: (var(--warning-400)); - - &:hover, - &:focus { - background-color: var(--warning-300); - border-color: var(--warning-300); - } - } - - &.color-error { - background-color: var(--error-300); - border-color: (var(--error-300)); - - &:hover, - &:focus { - background-color: var(--error-200); - border-color: var(--error-200); - } - } - - &.size-tiny { - padding: 0.125rem 0.25rem; - font-size: 0.75rem; - line-height: 1.125rem; - } - - &.size-small { - padding: 0.25rem 0.5rem; - font-size: 0.875rem; - line-height: 1.3125rem; - } - - &.size-large { - padding: 0.75rem 1rem; - font-size: 1.125rem; - line-height: 1.6875rem; - } - - &.size-huge { - padding: 1rem 2rem; - font-size: 1.25rem; - line-height: 1.875rem; - } - - &.behavior-full { - display: block; - width: 100%; - } + border-color: light-dark(var(--color-secondary-100), var(--color-secondary-100)); + background-color: light-dark(var(--color-secondary-100), var(--color-secondary-100)); - &.type-secondary { - background-color: transparent; - - &:hover, - &:focus { - background-color: transparent; + &:where(:hover, :focus-visible) { + border-color: light-dark(var(--color-secondary-300), var(--color-secondary-300)); + background-color: light-dark(var(--color-secondary-300), var(--color-secondary-300)); } } @@ -135,12 +42,8 @@ gap: 0.5rem; [data-icon] { - height: auto; width: 30px; + height: auto; } } } - -.darkmode .button.type-secondary { - color: var(--neutral-100); -} diff --git a/src/assets/scss/base/_color.scss b/src/assets/scss/base/_color.scss deleted file mode 100644 index ef2e06e3..00000000 --- a/src/assets/scss/base/_color.scss +++ /dev/null @@ -1,34 +0,0 @@ -// | ------------------------------------------------------------- -// | Color -// | ------------------------------------------------------------- - -$colors: ( - primary: ( - 100: hsl(276, 100%, 79%), - 200: hsl(276, 79%, 69%), - 300: hsl(276, 53%, 49%), - 400: hsl(276, 64%, 48%), - 500: hsl(276, 96%, 20%), - ), - secondary: ( - 100: hsl(173, 81%, 68%), - 200: hsl(173, 80%, 63%), - 300: hsl(173, 72%, 57%), - 400: hsl(173, 75%, 47%), - 500: hsl(173, 90%, 30%), - ), - neutral: ( - 100: hsl(0 0% 100%), - 200: hsl(200 23% 97%), - 300: hsl(200 12% 95%), - 400: hsl(205 12% 88%), - 500: hsl(209 13% 83%), - 600: hsl(208 6% 55%), - 700: hsl(210 8% 31%), - 800: hsl(212 9% 22%), - 900: hsl(210 10% 14%), - ), - dark: ( - 100: hsl(240, 4%, 9%), - ), -); diff --git a/src/assets/scss/base/_container.scss b/src/assets/scss/base/_container.scss deleted file mode 100644 index 41d09aa5..00000000 --- a/src/assets/scss/base/_container.scss +++ /dev/null @@ -1,24 +0,0 @@ -// | ------------------------------------------------------------- -// | Container -// | ------------------------------------------------------------- - -@use 'breakpoint' as *; - -.container { - margin: 0 auto; - padding: 0 calc(2rem / 2); - max-width: 100%; - - @include breakpoint(m) { - padding: 0 2rem; - } - - @include breakpoint(xl) { - padding: 0 calc(2rem / 2); - max-width: 1200px; - } - - &.stretch { - max-width: 100%; - } -} diff --git a/src/assets/scss/base/_font.scss b/src/assets/scss/base/_font.scss index 5c2109e5..57f76825 100644 --- a/src/assets/scss/base/_font.scss +++ b/src/assets/scss/base/_font.scss @@ -54,37 +54,19 @@ body { font-size: 1rem; - line-height: 1.5rem; - font-family: var(--font-family-default); - font-synthesis: none; - text-rendering: optimizeLegibility; - text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px; - -webkit-text-size-adjust: 100%; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - - a:not(.button) { - color: var(--action-color); - text-decoration: underline; - - &:visited { - color: var(--action-color); - } - - &:hover, - &:focus { - color: var(--action-color-state); - text-decoration: none; - } - } - :where(main) a { - word-wrap: break-word; - word-break: break-word; + p { + text-wrap: pretty; } - :where(h1, h2) { - font-family: var(--font-family-special); + h1, + h2, + h3, + h4, + h5, + h6 { + font-family: var(--font-heading); + text-wrap: balance; } h1, @@ -96,66 +78,36 @@ body { h4, h5, h6 { - font-weight: 600; + font-weight: 500; } h1 { - font-size: 2.25rem; - line-height: 3.375rem; - - @include breakpoint(m) { - font-size: 3rem; - line-height: 3.625rem; - } + font-size: var(--font-size-6); + line-height: var(--font-size-7); } h2 { - font-size: 1.875rem; - line-height: 2.8125rem; - - @include breakpoint(m) { - font-size: 2.25rem; - line-height: 3.375rem; - } + font-size: var(--font-size-5); + line-height: var(--font-size-6); } h3 { - font-size: 1.5rem; - line-height: 2.25rem; - - @include breakpoint(m) { - font-size: 1.875rem; - line-height: 2.8125rem; - } + font-size: var(--font-size-4); + line-height: var(--font-size-5); } h4 { - font-size: 1.25rem; - line-height: 1.875rem; - - @include breakpoint(m) { - font-size: 1.5rem; - line-height: 2.25rem; - } + font-size: var(--font-size-3); + line-height: var(--font-size-4); } h5 { - font-size: 1.125rem; - line-height: 1.6875rem; - - @include breakpoint(m) { - font-size: 1.25rem; - line-height: 1.875rem; - } + font-size: var(--font-size-2); + line-height: var(--font-size-3); } h6 { - font-size: 1rem; - line-height: 1.5rem; - - @include breakpoint(m) { - font-size: 1.125rem; - line-height: 1.6875rem; - } + font-size: var(--font-size-1); + line-height: var(--font-size-2); } } diff --git a/src/assets/scss/base/_general.scss b/src/assets/scss/base/_general.scss new file mode 100644 index 00000000..c54c1add --- /dev/null +++ b/src/assets/scss/base/_general.scss @@ -0,0 +1,52 @@ +@use './mixins' as *; + +@view-transition { + navigation: auto; +} + +body { + font-weight: 400; + font-size: 1rem; + line-height: 1.5rem; + font-family: var(--font-body); + font-synthesis: none; + text-rendering: optimizeLegibility; + text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px; + -webkit-text-size-adjust: 100%; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: var(--background-color); + color: var(--text-color); +} + +a { + transition: color var(--animation-speed-fast) var(--cubic-bezier); + color: var(--link-color); + + &:where(:hover, :focus-visible) { + color: var(--link-hover-color); + } +} + +main a:not([class]) { + @include text-decoration; + + color: var(--link-color); + text-decoration-color: var(--link-color); + + &:where(:hover, :focus-visible) { + color: var(--link-hover-color); + text-decoration-color: var(--link-hover-color); + } + + &.external-link { + display: inline-flex; + align-items: center; + gap: var(--space-3xs); + + // small visual correction + svg { + margin-block-start: 3px; + } + } +} diff --git a/src/assets/scss/base/_kbd.scss b/src/assets/scss/base/_kbd.scss new file mode 100644 index 00000000..dc178788 --- /dev/null +++ b/src/assets/scss/base/_kbd.scss @@ -0,0 +1,19 @@ +kbd { + position: relative; + display: grid; + place-items: center; + min-inline-size: 12px; + padding: 0 var(--space-3xs); + inset-block-start: -1px; + aspect-ratio: var(--ratio-square); + color: var(--kbd-color-text); + background-color: var(--kbd-color-background); + border: 1px solid var(--kbd-color-border); + border-radius: var(--radius-s); + box-shadow: 0 2px 0 1px var(--kbd-color-border); + font-family: var(--font-family-sans-serif); + + &.flat { + box-shadow: none; + } +} diff --git a/src/assets/scss/base/_list.scss b/src/assets/scss/base/_list.scss index a2dd6978..7e7386fc 100644 --- a/src/assets/scss/base/_list.scss +++ b/src/assets/scss/base/_list.scss @@ -1,7 +1,3 @@ -// | ------------------------------------------------------------- -// | Lists -// | ------------------------------------------------------------- - @use 'breakpoint' as *; ul:not([class]), @@ -21,47 +17,47 @@ ol:not([class]) { ul:not([class]) { > li::marker { display: block; - color: var(--primary-800); + color: var(--color-primary-500); } } ol.incremented { counter-reset: item; +} - ol { - counter-reset: item; - } +ol.incremented ol { + counter-reset: item; +} - ol, - ul { - margin: 0.75rem 0 0 1rem; - } +ol.incremented ol, +ol.incremented ul { + margin: 0.75rem 0 0 1rem; +} - li { - display: block; - margin-bottom: 0.5rem; +ol.incremented li { + display: block; + margin-bottom: 0.5rem; +} - @include breakpoint(m) { - margin-bottom: 0.75rem; - } +@media screen and (max-width: 48rem) { + ol.incremented li { + margin-bottom: 0.75rem; + } +} - &::before { - counter-increment: item; - content: counters(item, '.') '. '; - } +ol.incremented li::before { + counter-increment: item; + content: counters(item, '.') '. '; +} - &:last-child { - margin-bottom: 0; - } +ol.incremented li:last-child { + margin-bottom: 0; +} - p { - display: inline; - } - } +ol.incremented li p { + display: inline; +} - ul { - li::before { - content: ''; - } - } +ol.incremented ul li::before { + content: ''; } diff --git a/src/assets/scss/base/_mixins.scss b/src/assets/scss/base/_mixins.scss new file mode 100644 index 00000000..eb31a2d6 --- /dev/null +++ b/src/assets/scss/base/_mixins.scss @@ -0,0 +1,49 @@ +@mixin text-decoration($color: var(--text-decoration-color), $hoverColor: var(--text-decoration-hover-color)) { + text-decoration: underline; + text-decoration-style: solid; + text-decoration-thickness: 2px; + text-decoration-color: $color; + text-decoration-skip-ink: none; + text-underline-offset: 4px; + transition: text-decoration, text-underline-offset, text-decoration-color, text-decoration-thickness; + transition-duration: var(--animation-speed-fast); + transition-timing-function: var(--cubic-bezier); + + &:where(:hover, :focus-visible) { + text-decoration-color: $hoverColor; + text-decoration-thickness: 1px; + text-underline-offset: 2px; + } +} + +@mixin outline { + outline: 2px dashed black; + outline-color: black; + outline-offset: 0; + -webkit-box-shadow: 0 0 0 2px white; + box-shadow: 0 0 0 2px white; +} + +@mixin visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +@mixin rotate-icon-on-hover { + .icon svg { + transition: rotate var(--animation-speed-fast) var(--cubic-bezier); + } + + &:where(:hover, :focus-visible) { + .icon svg { + rotate: -90deg; + } + } +} diff --git a/src/assets/scss/base/_reset.scss b/src/assets/scss/base/_reset.scss index fe59939c..72a943e4 100644 --- a/src/assets/scss/base/_reset.scss +++ b/src/assets/scss/base/_reset.scss @@ -1,19 +1,8 @@ -// | ------------------------------------------------------------- -// | > Reset -// | ------------------------------------------------------------- +/* reset */ html { box-sizing: border-box; scroll-behavior: smooth; - - @media (prefers-reduced-motion: reduce) { - scroll-behavior: auto; - - body * { - animation-duration: 0s !important; - animation-delay: 0s !important; - } - } } *, @@ -22,6 +11,20 @@ html { box-sizing: inherit; } +*:focus, +*:focus-visible { + outline: 2px dashed black; + outline-color: black; + outline-offset: 0; + -webkit-box-shadow: 0 0 0 2px white; + box-shadow: 0 0 0 2px white; +} + +*:focus:not(:focus-visible) { + outline: none; + box-shadow: none; +} + blockquote, body, figure, @@ -50,18 +53,18 @@ input, select, textarea { color: inherit; - letter-spacing: inherit; font: inherit; + letter-spacing: inherit; } -input[type="text"], +input[type='text'], textarea { width: 100%; } fieldset { - padding: 0; border: none; + padding: 0; } legend { @@ -69,17 +72,16 @@ legend { max-width: 100%; } -button, input, textarea { border: 1px solid gray; } button { - padding: 0.75em 1em; + border: none; border-radius: 0; background-color: transparent; - line-height: 1; + padding: 0; } button * { @@ -115,7 +117,14 @@ noscript { margin-bottom: 1em; } -[tabindex="-1"] { +[tabindex='-1'] { outline: none !important; box-shadow: none !important; } + +[popover] { + position: absolute; + inset: auto; + border: none; + padding: 0; +} diff --git a/src/assets/scss/base/_root.scss b/src/assets/scss/base/_root.scss index 52b7faba..18b1882a 100644 --- a/src/assets/scss/base/_root.scss +++ b/src/assets/scss/base/_root.scss @@ -1,16 +1,170 @@ -// | ------------------------------------------------------------- -// | Root -// | ------------------------------------------------------------- - -@use 'color' as *; - :root { - color-scheme: light dark; + color-scheme: light; interpolate-size: allow-keywords; - @each $color, $shades in $colors { - @each $shade, $value in $shades { - --#{$color}-#{$shade}: #{$value}; - } - } + // oklch colors + --lch-primary-100: 90% 0.3 310; + --lch-primary-200: 80% 0.3 310; + --lch-primary-300: 70% 0.3 310; + --lch-primary-400: 60% 0.3 310; + --lch-primary-500: 50% 0.3 310; + --lch-secondary-100: 90% 0.3 185; + --lch-secondary-200: 80% 0.3 185; + --lch-secondary-300: 70% 0.3 185; + --lch-secondary-400: 60% 0.3 185; + --lch-secondary-500: 50% 0.3 185; + --lch-background-light: 90% 0 0; + --lch-background-dark: 10% 0 0; + --lch-neutral-100: 100% 0 0; + --lch-neutral-200: 95% 0.01 250; + --lch-neutral-300: 90% 0.01 250; + --lch-neutral-400: 85% 0.01 250; + --lch-neutral-500: 80% 0.01 250; + --lch-neutral-600: 60% 0.01 250; + --lch-neutral-700: 40% 0.01 250; + --lch-neutral-800: 30% 0.01 250; + --lch-neutral-900: 15% 0.01 250; + + // colors brand + --color-primary-100: oklch(var(--lch-primary-100)); + --color-primary-200: oklch(var(--lch-primary-200)); + --color-primary-300: oklch(var(--lch-primary-300)); + --color-primary-400: oklch(var(--lch-primary-400)); + --color-primary-500: oklch(var(--lch-primary-500)); + --color-secondary-100: oklch(var(--lch-secondary-100)); + --color-secondary-200: oklch(var(--lch-secondary-200)); + --color-secondary-300: oklch(var(--lch-secondary-300)); + --color-secondary-400: oklch(var(--lch-secondary-400)); + --color-secondary-500: oklch(var(--lch-secondary-500)); + + // Add neutral colors from _color.scss + --color-neutral-100: oklch(var(--lch-neutral-100)); + --color-neutral-200: oklch(var(--lch-neutral-200)); + --color-neutral-300: oklch(var(--lch-neutral-300)); + --color-neutral-400: oklch(var(--lch-neutral-400)); + --color-neutral-500: oklch(var(--lch-neutral-500)); + --color-neutral-600: oklch(var(--lch-neutral-600)); + --color-neutral-700: oklch(var(--lch-neutral-700)); + --color-neutral-800: oklch(var(--lch-neutral-800)); + --color-neutral-900: oklch(var(--lch-neutral-900)); + + // theme settings + --radius-small: 3px; + --radius-large: 6px; + --gap-default: 2rem; + --font-measure: 70ch; + --font-family-default: 'Open Sans', sans-serif; + --font-family-special: 'Open Sans', sans-serif; + + // font families + --font-heading: 'Open Sans', sans-serif; + --font-body: 'Open Sans', sans-serif; + + // font sizes + // @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 + --font-size--2: clamp(0.6944rem, 0.6855rem + 0.0446vw, 0.72rem); + --font-size--1: clamp(0.8331rem, 0.8099rem + 0.1163vw, 0.9rem); + --font-size-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem); + --font-size-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem); + --font-size-2: clamp(1.44rem, 1.3293rem + 0.5533vw, 1.7581rem); + --font-size-3: clamp(1.7281rem, 1.5649rem + 0.8163vw, 2.1975rem); + --font-size-4: clamp(2.0738rem, 1.8396rem + 1.1707vw, 2.7469rem); + --font-size-5: clamp(2.4881rem, 2.1594rem + 1.6435vw, 3.4331rem); + --font-size-6: clamp(2.9863rem, 2.5323rem + 2.2696vw, 4.2913rem); + --font-size-7: clamp(3.5836rem, 2.9667rem + 3.0674vw, 5.3544rem); + + // space + // @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,18,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,&g=s,l,xl,12 + --space-4xs: clamp(0.125rem, 0.1131rem + 0.1087vw, 0.1563rem); + --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem); + --space-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem); + --space-xs: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem); + --space-s: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem); + --space-m: clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem); + --space-l: clamp(2rem, 1.913rem + 0.4348vw, 2.25rem); + --space-xl: clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem); + --space-2xl: clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem); + --space-3xl: clamp(6rem, 5.7391rem + 1.3043vw, 6.75rem); + --space-3xs-2xs: clamp(0.25rem, 0.1413rem + 0.5435vw, 0.5625rem); + --space-2xs-xs: clamp(0.5rem, 0.3696rem + 0.6522vw, 0.875rem); + --space-xs-s: clamp(0.75rem, 0.6196rem + 0.6522vw, 1.125rem); + --space-s-m: clamp(1rem, 0.7609rem + 1.1957vw, 1.6875rem); + --space-m-l: clamp(1.5rem, 1.2391rem + 1.3043vw, 2.25rem); + --space-l-xl: clamp(2rem, 1.5217rem + 2.3913vw, 3.375rem); + --space-xl-2xl: clamp(3rem, 2.4783rem + 2.6087vw, 4.5rem); + --space-2xl-3xl: clamp(4rem, 3.0435rem + 4.7826vw, 6.75rem); + + // grid + // https://utopia.fyi/grid/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12 + --grid-max-width: 90rem; + --grid-gutter: var(--space-s-l, clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem)); + --grid-columns: 12; + + // border radius + --radius-xs: 0.125rem; + --radius-s: 0.25rem; + --radius-m: 0.5rem; + --radius-l: 0.75rem; + --radius-h: 1rem; + + // elevations + --elevation-1: 0 1px 3px rgba(0 0 0 / 0.12); + --elevation-2: 0 3px 6px rgba(0 0 0 / 0.15); + --elevation-3: 0 10px 20px rgba(0 0 0 / 0.15); + --elevation-4: 0 15px 25px rgba(0 0 0 / 0.15); + --elevation-5: 0 20px 40px rgba(0 0 0 / 0.5); + + // z-index + --z-index--1: -1; + --z-index-0: 0; + --z-index-1: 10; + --z-index-2: 20; + --z-index-3: 30; + --z-index-4: 40; + --z-index-5: 50; + --z-index-6: 60; + --z-index-7: 70; + --z-index-8: 80; + --z-index-9: 90; + --z-index-10: 100; + + // aspects + --ratio-square: 1; + --ratio-landscape: 4/3; + --ratio-portrait: 3/4; + --ratio-widescreen: 16/9; + --ratio-ultrawide: 18/5; + + // animations + --cubic-bezier: cubic-bezier(0.1, 0.1, 0, 1); + --animation-speed-slow: 0.6s; + --animation-speed-medium: 0.4s; + --animation-speed-fast: 0.25s; + + // misc + --line-clamp: 3; + --target-size-min: 24px; + --target-size-max: 44px; + --backdrop-color: hsl(0deg 100% 0% / 0.75); + --backdrop-blur: blur(3px); + + // defaults + --icon-color: light-dark(var(--color-neutral-800), var(--color-neutral-100)); + --text-color: light-dark(var(--color-neutral-800), var(--color-neutral-100)); + --link-color: light-dark(var(--color-primary-400), var(--color-secondary-100)); + --link-hover-color: light-dark(var(--color-primary-300), var(--color-secondary-200)); + --border-color: light-dark(var(--color-neutral-900), var(--color-neutral-100)); + --background-color: light-dark(var(--color-neutral-100), var(--color-neutral-900)); + --text-decoration-color: light-dark(var(--color-neutral-700), var(--color-neutral-100)); + --text-decoration-color-hover: light-dark(var(--color-neutral-100), var(--color-neutral-200)); + + // kbd + --kbd-color-text: light-dark(var(--color-gray-200), var(--color-gray-800)); + --kbd-color-border: light-dark(var(--color-gray-700), var(--color-gray-300)); + --kbd-color-background: light-dark(var(--color-gray-1000), var(--color-gray-200)); +} + +// dark color scheme overrides +.darkmode { + color-scheme: dark; } diff --git a/src/assets/scss/base/_space-content.scss b/src/assets/scss/base/_space-content.scss deleted file mode 100644 index b5e55b3f..00000000 --- a/src/assets/scss/base/_space-content.scss +++ /dev/null @@ -1,57 +0,0 @@ -// | ------------------------------------------------------------- -// | Space Content -// | ------------------------------------------------------------- - -@use 'breakpoint' as *; - -.space-content { - > * + *, - > dl > * + * { - margin-top: 1.5rem; - margin-bottom: 0; - } - - > h2 { - margin-top: 3rem; - - @include breakpoint(xl) { - margin-top: 4rem; - } - } - - > h3 { - margin-top: 2rem; - - @include breakpoint(xl) { - margin-top: 3rem; - } - } - - > h4 { - margin-top: 1.5rem; - - @include breakpoint(xl) { - margin-top: 2rem; - } - } - - > h5 { - margin-top: 1rem; - - @include breakpoint(xl) { - margin-top: 1.5rem; - } - } - - > h6 { - margin-top: 1rem; - - @include breakpoint(xl) { - margin-top: 1.5rem; - } - } - - > *:first-child { - margin-top: 0; - } -} diff --git a/src/assets/scss/base/_utility.scss b/src/assets/scss/base/_utility.scss new file mode 100644 index 00000000..61a476eb --- /dev/null +++ b/src/assets/scss/base/_utility.scss @@ -0,0 +1,234 @@ +@use 'breakpoint' as *; + +.container { + margin-inline: auto; + padding-inline: var(--grid-gutter); + max-width: var(--grid-max-width); + + @include breakpoint(m) { + padding-inline: 2rem; + } + + @include breakpoint(xl) { + padding-inline: calc(2rem / 2); + max-width: 1200px; + } + + &.stretch { + max-width: 100%; + } +} + +.astro-text-center { + text-align: center; +} + +.astro-center-content { + display: grid; + place-items: center; +} + +.astro-flex-center { + display: flex; + justify-content: center; + align-items: center; +} + +.astro-horizontal-center { + margin: 0 auto; +} + +.h-stack { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + gap: var(--space-s); +} + +.v-stack { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: var(--space-s); +} + +.space-between { + justify-content: space-between; +} + +.align-start { + align-items: flex-start; +} + +.align-stretch { + align-items: stretch; +} + +.align-center { + align-items: center; +} + +.align-end { + align-items: flex-end; +} + +.wrap { + flex-wrap: wrap; +} + +.no-gap { + gap: 0; +} + +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.text-ellipsis { + display: -webkit-box; + -webkit-line-clamp: var(--line-clamp); + -webkit-box-orient: vertical; + overflow: hidden; +} + +.uppercase { + text-transform: uppercase; +} + +.sr-only { + position: absolute; + overflow: hidden; + clip: rect(0 0 0 0); + margin: 0; + border: 0; + padding: 0; + width: 1px; + height: auto; + white-space: nowrap; +} + +$space-map: ( + 3xs: var(--space-3xs), + 2xs: var(--space-2xs), + xs: var(--space-xs), + s: var(--space-s), + m: var(--space-m), + l: var(--space-l), + xl: var(--space-xl), +); + +@each $size, $value in $space-map { + .space-content-#{$size} > * + * { + margin-block-start: $value; + } +} + +$gap-map: ( + 3xs: var(--space-3xs), + 2xs: var(--space-2xs), + xs: var(--space-xs), + s: var(--space-s), + m: var(--space-m), + l: var(--space-l), + xl: var(--space-xl), +); + +@each $size, $value in $space-map { + .gap-#{$size} { + gap: $value; + } +} + +$font-map: ( + -2: ( + font-size: var(--font-size--2), + line-height: var(--font-size--2), + ), + -1: ( + font-size: var(--font-size--1), + line-height: var(--font-size--1), + ), + 0: ( + font-size: var(--font-size-0), + line-height: var(--font-size-0), + ), + 1: ( + font-size: var(--font-size-1), + line-height: var(--font-size-1), + ), + 2: ( + font-size: var(--font-size-2), + line-height: var(--font-size-2), + ), + 3: ( + font-size: var(--font-size-3), + line-height: var(--font-size-3), + ), + 4: ( + font-size: var(--font-size-4), + line-height: var(--font-size-4), + ), + 5: ( + font-size: var(--font-size-5), + line-height: var(--font-size-5), + ), + 6: ( + font-size: var(--font-size-6), + line-height: var(--font-size-6), + ) +); + +@each $size, $value in $font-map { + .font-#{$size} { + font-size: map-get($value, font-size); + line-height: map-get($value, line-height); + } +} + +.space-content { + > * + *, + > dl > * + * { + margin-top: 1.5rem; + margin-bottom: 0; + } + + > h2 { + margin-top: 3rem; + + @include breakpoint(xl) { + margin-top: 4rem; + } + } + + > h3 { + margin-top: 2rem; + + @include breakpoint(xl) { + margin-top: 3rem; + } + } + + > h4 { + margin-top: 1.5rem; + + @include breakpoint(xl) { + margin-top: 2rem; + } + } + + > h5, + > h6 { + margin-top: 1rem; + + @include breakpoint(xl) { + margin-top: 1.5rem; + } + } + + > *:first-child { + margin-top: 0; + } +} diff --git a/src/assets/scss/globals.scss b/src/assets/scss/globals.scss index b15c2088..7f4e59b2 100644 --- a/src/assets/scss/globals.scss +++ b/src/assets/scss/globals.scss @@ -6,9 +6,10 @@ @use 'base/root'; @use 'base/font'; @use 'base/list'; -@use 'base/container'; @use 'base/breakpoint'; @use 'base/button'; -@use 'base/color'; @use 'base/outline'; -@use 'base/space-content'; +@use 'base/general'; +@use 'base/kbd'; +@use 'base/mixins'; +@use 'base/utility'; diff --git a/src/components/CallToAction.astro b/src/components/CallToAction.astro index 5bcdd49b..13e4b884 100644 --- a/src/components/CallToAction.astro +++ b/src/components/CallToAction.astro @@ -1,5 +1,5 @@
-
+

Get this theme on GitHub

Use this theme
@@ -7,23 +7,31 @@ diff --git a/src/components/Feature.astro b/src/components/Feature.astro index 98cc7fb8..622d3f4f 100644 --- a/src/components/Feature.astro +++ b/src/components/Feature.astro @@ -19,49 +19,49 @@ const { icon = 'mdi:rocket', title = 'Title' } = Astro.props .feature { position: relative; - width: calc(100% - 0.5rem); padding: 2rem; + width: calc(100% - 0.5rem); > * { position: relative; z-index: 2; } - @include breakpoint(large) { + @include breakpoint(xl) { width: 100%; } &::before, &::after { - content: ''; position: absolute; + content: ''; } &::before { + z-index: 1; inset: 0; - background-color: var(--neutral-100); - border: 3px solid var(--neutral-700); + box-shadow: 0 0 0 6px var(--color-neutral-100); + border: 3px solid var(--color-neutral-700); border-radius: 1rem; - box-shadow: 0 0 0 6px var(--neutral-100); - z-index: 1; + background-color: var(--color-neutral-100); } &::after { - background-color: var(--action-color); + z-index: 0; inset: 1rem -0.85rem -0.85rem 1rem; border-radius: 1rem; - z-index: 0; + background-color: var(--link-color); } } :global(.feature [data-icon]) { - height: auto; width: 4rem; - color: var(--action-color); + height: auto; + color: var(--link-color); } :global(.darkmode .feature::before) { - background-color: var(--dark-100); - box-shadow: 0 0 0 6px var(--dark-100); + box-shadow: 0 0 0 6px var(--color-neutral-900); + background-color: var(--color-neutral-900); } diff --git a/src/components/Header.astro b/src/components/Header.astro index c7c198a7..e9c39ef3 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -42,25 +42,23 @@ import { Icon } from 'astro-icon/components' From 1f385ded3605a58e8ec1be7fad0c505e210242b8 Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Wed, 2 Apr 2025 19:36:38 +0200 Subject: [PATCH 03/32] refactor: improve menu items color and add highlighted menu item option - Fix TypeScript errors in Navigation.astro - Improve accessibility of ResponsiveToggle.astro by adding visible text --- src/components/Header.astro | 19 ++- src/components/Navigation.astro | 208 ++++++++++++++++---------- src/components/ResponsiveToggle.astro | 23 ++- 3 files changed, 154 insertions(+), 96 deletions(-) diff --git a/src/components/Header.astro b/src/components/Header.astro index e9c39ef3..b6c9910d 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,6 +1,6 @@ --- import Navigation from '../components/Navigation.astro' -import { SkipLink } from 'accessible-astro-components' +import { DarkMode, SkipLink } from 'accessible-astro-components' import { Icon } from 'astro-icon/components' --- @@ -30,26 +30,29 @@ import { Icon } from 'astro-icon/components' -
  • - Docs +
  • + Docs
    • -
  • +
    • +
  • + +
    • From 23b1e122ae0902ef30b5c40ba4940ab388b178ed Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Fri, 4 Apr 2025 13:38:21 +0200 Subject: [PATCH 06/32] feat: add ExternalLink component and enhance footer accessibility - Introduced a new ExternalLink component for better handling of external links. - Updated footer to utilize ExternalLink for resource links, improving accessibility and user experience. - Modified SCSS to apply text decoration styles to both main and footer links for consistency. --- src/assets/scss/base/_general.scss | 3 ++- src/components/ExternalLink.astro | 35 ++++++++++++++++++++++++++++++ src/components/Footer.astro | 21 ++++++++++++++---- src/pages/index.astro | 5 +++-- 4 files changed, 57 insertions(+), 7 deletions(-) create mode 100644 src/components/ExternalLink.astro diff --git a/src/assets/scss/base/_general.scss b/src/assets/scss/base/_general.scss index 415e4776..7de22458 100644 --- a/src/assets/scss/base/_general.scss +++ b/src/assets/scss/base/_general.scss @@ -28,7 +28,8 @@ a { } } -main a:not([class]) { +main a, +footer a { @include text-decoration; color: var(--link-color); diff --git a/src/components/ExternalLink.astro b/src/components/ExternalLink.astro new file mode 100644 index 00000000..99ceab5b --- /dev/null +++ b/src/components/ExternalLink.astro @@ -0,0 +1,35 @@ +--- +import { Icon } from 'astro-icon/components' + +/** + * ExternalLink Component + * + * @description ExternalLink description + */ +interface Props { + /** + * Additional classes to apply to the ExternalLink + */ + class?: string + /** + * The URL to link to + */ + href: string +} + +const { class: className, href } = Astro.props +--- + + + + + Opens in a new tab + + + diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 981d3a5a..9b613567 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -1,5 +1,6 @@ --- import CallToAction from './CallToAction.astro' +import ExternalLink from './ExternalLink.astro' const currentYear = new Date().getFullYear() --- @@ -30,10 +31,22 @@ const currentYear = new Date().getFullYear()

    Developer Tools

    diff --git a/src/pages/index.astro b/src/pages/index.astro index 9fa0d50b..7437ab07 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -4,6 +4,7 @@ import Hero from '../components/Hero.astro' import Feature from '../components/Feature.astro' import Counter from '../components/Counter.astro' import ContentMedia from '../components/ContentMedia.astro' +import ExternalLink from '../components/ExternalLink.astro' import { Accordion, AccordionItem } from 'accessible-astro-components' --- @@ -47,8 +48,8 @@ import { Accordion, AccordionItem } from 'accessible-astro-components'

    Accessible Components

    This theme provides plenty of tried and tested Accessible Astro Components. Some are native to this theme and a - lot of others are integrated using a separate packageseparate package. They'll get you up and running in building an accessible solution for your visitors.

    From a095b519e8333919ea20b35cd071327578300269 Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Fri, 11 Apr 2025 11:15:45 +0200 Subject: [PATCH 07/32] feat: introduce Logo component and enhance footer structure - Added a new Logo component for consistent branding across the website. - Updated the footer to include the Logo component. - Refactored Navigation component to utilize the new Logo component. --- src/components/Footer.astro | 3 ++- src/components/Logo.astro | 29 ++++++++++++++++++++++++ src/components/Navigation.astro | 39 +++++++++++---------------------- 3 files changed, 44 insertions(+), 27 deletions(-) create mode 100644 src/components/Logo.astro diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 9b613567..b202627c 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -1,6 +1,7 @@ --- import CallToAction from './CallToAction.astro' import ExternalLink from './ExternalLink.astro' +import Logo from './Logo.astro' const currentYear = new Date().getFullYear() --- @@ -50,7 +51,7 @@ const currentYear = new Date().getFullYear()
    -

    Accessibility Tip

    +

    Always test for screen reader support. Press ⌘ + F5 to start VoiceOver or Win + Ctrl + Enter for Narrator. diff --git a/src/components/Logo.astro b/src/components/Logo.astro new file mode 100644 index 00000000..7fcbdcf7 --- /dev/null +++ b/src/components/Logo.astro @@ -0,0 +1,29 @@ +--- +import { Image } from 'astro:assets' +import logo from '../assets/img/logo.svg' + +/** + * Logo Component + * + * @description Logo description + */ +interface Props { + /** + * Additional classes to apply to the Logo + */ + class?: string +} + +const { class: className } = Astro.props +--- + + + Your Logo + Accessible Astro + + + diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro index 97eeb74a..63c4a5e0 100644 --- a/src/components/Navigation.astro +++ b/src/components/Navigation.astro @@ -1,15 +1,11 @@ --- import ResponsiveToggle from './ResponsiveToggle.astro' -import { Image } from 'astro:assets' -import logo from '../assets/img/logo.svg' +import Logo from './Logo.astro' ---