From 9a247b1f1c2802be05bdd75031fb8043b5715504 Mon Sep 17 00:00:00 2001 From: madrilene Date: Mon, 3 Jun 2024 11:11:34 +0200 Subject: [PATCH] change structure, update --- src/assets/css/blocks/card.css | 51 ------- src/assets/css/blocks/dialog.css | 21 --- src/assets/css/blocks/grid-card.css | 14 -- src/assets/css/blocks/site-foot.css | 45 ------ src/assets/css/blocks/youtube.css | 3 - src/assets/css/{blocks => bundle}/details.css | 49 ++++-- src/assets/css/bundle/gallery.css | 24 +++ .../nav-drawer.css} | 87 ++++++----- .../site-nav.css => bundle/nav-pills.css} | 24 +-- .../css/{blocks => bundle}/pagination.css | 0 src/assets/css/components/custom-card.css | 105 +++++++++++++ src/assets/css/compositions/reel.css | 41 ----- src/assets/css/compositions/switcher.css | 34 ----- src/assets/css/global/base/fonts.css | 29 ++++ .../css/global/{ => base}/global-styles.css | 79 +++++----- src/assets/css/global/base/reset.css | 144 ++++++++++++++++++ .../css/global/{ => base}/variables.css | 60 ++------ src/assets/css/{ => global}/blocks/button.css | 0 src/assets/css/{ => global}/blocks/code.css | 1 + .../css/{ => global}/blocks/external-link.css | 10 +- .../css/{ => global}/blocks/footnotes.css | 0 src/assets/css/{ => global}/blocks/post.css | 15 +- src/assets/css/{ => global}/blocks/prose.css | 10 +- .../css/{ => global}/blocks/section.css | 0 .../css/{ => global}/blocks/seperator.css | 4 + src/assets/css/global/blocks/site-footer.css | 45 ++++++ .../css/{ => global}/blocks/site-logo.css | 2 - .../css/{ => global}/blocks/skip-link.css | 0 .../css/{ => global}/blocks/styleguide.css | 0 src/assets/css/{ => global}/blocks/table.css | 9 ++ src/assets/css/{ => global}/blocks/tag.css | 0 .../css/{ => global}/blocks/textgradient.css | 0 .../css/{ => global}/blocks/theme-switch.css | 11 +- .../css/{ => global}/compositions/cluster.css | 2 +- .../css/{ => global}/compositions/flow.css | 2 +- .../css/{ => global}/compositions/grid.css | 6 +- .../css/{ => global}/compositions/repel.css | 4 +- .../css/{ => global}/compositions/sidebar.css | 10 +- .../css/{ => global}/compositions/wrapper.css | 0 src/assets/css/global/fonts.css | 89 ----------- src/assets/css/{ => global}/global.css | 13 +- src/assets/css/global/reset.css | 124 --------------- src/assets/css/global/tests/debug.css | 70 +++++++++ src/assets/css/global/tests/is-land.css | 17 +++ .../css/{ => global}/utilities/blur.css | 0 .../{ => global}/utilities/heading-line.css | 0 .../css/{ => global}/utilities/ontop.css | 0 .../css/{ => global}/utilities/region.css | 0 src/assets/css/global/utilities/spin.css | 14 ++ .../utilities/visually-hidden.css | 0 50 files changed, 652 insertions(+), 616 deletions(-) delete mode 100644 src/assets/css/blocks/card.css delete mode 100644 src/assets/css/blocks/dialog.css delete mode 100644 src/assets/css/blocks/grid-card.css delete mode 100644 src/assets/css/blocks/site-foot.css delete mode 100644 src/assets/css/blocks/youtube.css rename src/assets/css/{blocks => bundle}/details.css (51%) create mode 100644 src/assets/css/bundle/gallery.css rename src/assets/css/{blocks/site-nav-drawer.css => bundle/nav-drawer.css} (67%) rename src/assets/css/{blocks/site-nav.css => bundle/nav-pills.css} (84%) rename src/assets/css/{blocks => bundle}/pagination.css (100%) create mode 100644 src/assets/css/components/custom-card.css delete mode 100644 src/assets/css/compositions/reel.css delete mode 100644 src/assets/css/compositions/switcher.css create mode 100644 src/assets/css/global/base/fonts.css rename src/assets/css/global/{ => base}/global-styles.css (68%) create mode 100644 src/assets/css/global/base/reset.css rename src/assets/css/global/{ => base}/variables.css (76%) rename src/assets/css/{ => global}/blocks/button.css (100%) rename src/assets/css/{ => global}/blocks/code.css (99%) rename src/assets/css/{ => global}/blocks/external-link.css (64%) rename src/assets/css/{ => global}/blocks/footnotes.css (100%) rename src/assets/css/{ => global}/blocks/post.css (82%) rename src/assets/css/{ => global}/blocks/prose.css (87%) rename src/assets/css/{ => global}/blocks/section.css (100%) rename src/assets/css/{ => global}/blocks/seperator.css (67%) create mode 100644 src/assets/css/global/blocks/site-footer.css rename src/assets/css/{ => global}/blocks/site-logo.css (67%) rename src/assets/css/{ => global}/blocks/skip-link.css (100%) rename src/assets/css/{ => global}/blocks/styleguide.css (100%) rename src/assets/css/{ => global}/blocks/table.css (99%) rename src/assets/css/{ => global}/blocks/tag.css (100%) rename src/assets/css/{ => global}/blocks/textgradient.css (100%) rename src/assets/css/{ => global}/blocks/theme-switch.css (76%) rename src/assets/css/{ => global}/compositions/cluster.css (97%) rename src/assets/css/{ => global}/compositions/flow.css (89%) rename src/assets/css/{ => global}/compositions/grid.css (91%) rename src/assets/css/{ => global}/compositions/repel.css (92%) rename src/assets/css/{ => global}/compositions/sidebar.css (82%) rename src/assets/css/{ => global}/compositions/wrapper.css (100%) delete mode 100644 src/assets/css/global/fonts.css rename src/assets/css/{ => global}/global.css (53%) delete mode 100644 src/assets/css/global/reset.css create mode 100644 src/assets/css/global/tests/debug.css create mode 100644 src/assets/css/global/tests/is-land.css rename src/assets/css/{ => global}/utilities/blur.css (100%) rename src/assets/css/{ => global}/utilities/heading-line.css (100%) rename src/assets/css/{ => global}/utilities/ontop.css (100%) rename src/assets/css/{ => global}/utilities/region.css (100%) create mode 100644 src/assets/css/global/utilities/spin.css rename src/assets/css/{ => global}/utilities/visually-hidden.css (100%) diff --git a/src/assets/css/blocks/card.css b/src/assets/css/blocks/card.css deleted file mode 100644 index 7534d62..0000000 --- a/src/assets/css/blocks/card.css +++ /dev/null @@ -1,51 +0,0 @@ -.card { - --gutter: var(--space-xs-s); - background-color: var(--color-bg-accent); - border: 4px solid var(--color-bg-accent); - color: var(--color-text); - padding: var(--space-s-m); - border-radius: var(--border-radius); - max-inline-size: unset; -} - -.card ::selection { - color: var(--color-dark); - background-color: var(--color-secondary); -} - -.card h2, -.card h3 { - font-family: var(--font-base); - font-size: var(--size-step-2); -} - -.card h2 a, -.card h3 a { - text-decoration: none; -} - -.card:hover, -.card:focus-within { - border: 4px solid var(--color-primary); -} - -/* 'clickable' */ - -.card:focus-within a:focus { - outline: none; -} -.card { - position: relative; -} -.card a:after { - bottom: 0; - content: ''; - left: 0; - position: absolute; - right: 0; - top: 0; -} - -.blogcards { - --gutter: var(--space-l); -} diff --git a/src/assets/css/blocks/dialog.css b/src/assets/css/blocks/dialog.css deleted file mode 100644 index 7ef4ea1..0000000 --- a/src/assets/css/blocks/dialog.css +++ /dev/null @@ -1,21 +0,0 @@ -dialog { - border: none; - border-radius: var(--border-radius); -} - -dialog + button { - all: unset; - cursor: pointer; -} - -dialog::backdrop { - background-image: var(--gradient-stripes); - opacity: 0.85; - filter: brightness(50%); -} - -/* Prevent page scroll: https://blog.mayank.co/is-dialog-enough */ - -html:has(dialog[open]:modal) { - overflow: hidden; -} diff --git a/src/assets/css/blocks/grid-card.css b/src/assets/css/blocks/grid-card.css deleted file mode 100644 index 7af5c29..0000000 --- a/src/assets/css/blocks/grid-card.css +++ /dev/null @@ -1,14 +0,0 @@ -.grid-card { - display: grid; - gap: 2ch; - grid-row: span 3; - grid-template-rows: subgrid; -} - -.grid-card img { - max-inline-size: var(--max-img-width, 100%); - block-size: auto; - aspect-ratio: 16/9; - object-fit: cover; - object-position: center; -} diff --git a/src/assets/css/blocks/site-foot.css b/src/assets/css/blocks/site-foot.css deleted file mode 100644 index 876f10f..0000000 --- a/src/assets/css/blocks/site-foot.css +++ /dev/null @@ -1,45 +0,0 @@ -.site-foot { - margin-block-start: var(--space-l-xl); - padding: var(--space-s-m); - color: var(--color-text); -} - -.site-foot__inner { - display: flex; - gap: var(--space-xs); - justify-content: center; - align-items: center; -} - -/* increase tab size */ -.site-foot__inner a { - padding: var(--space-xs); -} - -:not(nav#social).site-foot__inner { - flex-wrap: wrap; -} - -.site-foot svg { - inline-size: 1.1em; - block-size: 1em; -} - -.site-foot .creator { - text-decoration: none; -} - -.site-foot .creator { - text-decoration: none; -} -.site-foot .creator:hover { - color: transparent; - background-image: var(--gradient-rainbow); - background-size: 100%; - background-repeat: repeat; - background-clip: text; -} - -.site-foot .creator:hover svg { - color: var(--color-text); -} diff --git a/src/assets/css/blocks/youtube.css b/src/assets/css/blocks/youtube.css deleted file mode 100644 index 3e5a050..0000000 --- a/src/assets/css/blocks/youtube.css +++ /dev/null @@ -1,3 +0,0 @@ -.youtube-embed { - aspect-ratio: 16 / 9; -} diff --git a/src/assets/css/blocks/details.css b/src/assets/css/bundle/details.css similarity index 51% rename from src/assets/css/blocks/details.css rename to src/assets/css/bundle/details.css index 5fffd63..315eac0 100644 --- a/src/assets/css/blocks/details.css +++ b/src/assets/css/bundle/details.css @@ -1,23 +1,28 @@ -.control { +.details .control { --gutter: var(--space-xs-s); --cluster-horizontal-alignment: flex-end; border-block-start: 1px solid var(--color-bg-accent); padding-block-start: var(--space-xs); } -details > * + * { +/* Hide without JS */ +is-land:not(:defined) .details .control { + display: none; +} + +.details details > * + * { margin-block-start: var(--flow-space, 1em); } -details > p:last-child { +.details details > p:last-child { margin-block-end: var(--space-l); } -summary { +.details summary { grid-column: content; } -summary { +.details summary { display: flex; align-items: baseline; line-height: 1.2; @@ -28,13 +33,13 @@ summary { font-size: var(--size-step-1); } -summary:hover, -summary:focus-visible, -[open] > summary { +.details summary:hover, +.details summary:focus-visible, +.details[open] > summary { color: var(--color-primary); } -summary::before { +.details summary::before { content: '+'; display: block; color: var(--color-primary); @@ -47,21 +52,35 @@ summary::before { margin-inline-start: 0.2ch; } -[open] summary::before { - content: '-'; +.details details[open] summary::before { + content: '–'; +} + +.details details > :is(h2, h3) { + font-weight: var(--font-bold); + font-size: var(--size-step-0); + border-block-end: 1px solid var(--color-bg-accent); + padding-block-end: var(--space-xs); +} + +.details details > :is(h2, h3) { + font-weight: var(--font-bold); + font-size: var(--size-step-0); + border-block-end: 1px solid var(--color-bg-accent); + padding-block-end: var(--space-xs); } /* Hide default marker */ -summary::-webkit-details-marker, -summary::marker { +.details summary::-webkit-details-marker, +.details summary::marker { content: ''; display: none; } -summary + * { +.details summary + * { margin-block-start: var(--space-s-m); } -details > * + * { +.details details > * + * { margin-inline-start: 2.4ch; } diff --git a/src/assets/css/bundle/gallery.css b/src/assets/css/bundle/gallery.css new file mode 100644 index 0000000..645a641 --- /dev/null +++ b/src/assets/css/bundle/gallery.css @@ -0,0 +1,24 @@ +.gallery dialog { + border-radius: var(--border-radius); + inset: revert; +} + +.gallery dialog + button { + all: unset; + cursor: pointer; +} + +/* Don't indicate interactivity without JS */ +is-land:not(:defined) .gallery dialog + button { + cursor: default; +} + +.gallery dialog::backdrop { + background-image: var(--gradient-stripes); + opacity: 0.9; + filter: brightness(50%); +} + +.gallery dialog img { + max-block-size: 70vh; +} diff --git a/src/assets/css/blocks/site-nav-drawer.css b/src/assets/css/bundle/nav-drawer.css similarity index 67% rename from src/assets/css/blocks/site-nav-drawer.css rename to src/assets/css/bundle/nav-drawer.css index eba1ba4..a045318 100644 --- a/src/assets/css/blocks/site-nav-drawer.css +++ b/src/assets/css/bundle/nav-drawer.css @@ -1,45 +1,56 @@ -.site-nav-drawer { - position: var(--nav-position, absolute); - inset-inline-end: 0.1rem; -} - /* Remove default list styling and create layout for list */ -.site-nav-drawer ul { - z-index: 1; - --cluster-vertical-alignment: normal; - --gutter: var(--space-xs); +.mainnav ul { list-style: none; margin: 0; + --gutter: var(--space-xs); line-height: 0.5em; - padding: var(--nav-list-padding, var(--space-2xl) var(--space-s)); - background: var(--nav-list-background, var(--color-bg)); - box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2)); - flex-direction: var(--nav-list-layout, column); - block-size: var(--nav-list-height, 100vh); - position: var(--nav-list-position, fixed); - inset-block-start: 0; - inset-inline-end: 0; - inline-size: var(--nav-list-width, min(22rem, 100vw)); - visibility: var(--nav-list-visibility, visible); + padding-block-end: var(--space-s); } -.site-nav-drawer [aria-expanded='false'] + ul { +/* drawerif JS enabled */ +@media (scripting: enabled) { + .mainnav { + position: var(--nav-position, absolute); + inset-inline-end: 0.1rem; + } + + .mainnav ul { + --cluster-vertical-alignment: normal; + z-index: 1; + padding: var(--nav-list-padding, var(--space-2xl) var(--space-s)); + background: var(--nav-list-background, var(--color-bg)); + box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2)); + flex-direction: var(--nav-list-layout, column); + block-size: var(--nav-list-height, 100vh); + position: var(--nav-list-position, fixed); + inset-block-start: 0; + inset-inline-end: 0; + inline-size: var(--nav-list-width, min(18rem, 100vw)); + visibility: var(--nav-list-visibility, visible); + } +} + +.mainnav [aria-expanded='false'] + ul { transform: var(--nav-list-transform, translateX(100%)); visibility: var(--nav-list-visibility, hidden); } /* animates ul only when opening to avoid flash on page load, svg always */ @media (prefers-reduced-motion: no-preference) { - .site-nav-drawer [aria-expanded='true'] + ul, - .site-nav-drawer svg { + .mainnav [aria-expanded='true'] + ul, + .mainnav svg { transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), visibility 0.05s linear; } } +.mainnav [aria-expanded='true'] + ul { + padding-top: var(--space-2xl); +} + /* Basic link styling */ -.site-nav-drawer a { +.mainnav a { --text-color: var(--color-text); --background-color: var(--color-bg); --border-color: transparent; @@ -48,27 +59,27 @@ padding: var(--anchor-padding, var(--space-s)); text-decoration: none; display: block; - border-radius: var(--border-radius); + border: 1px solid var(--border-color); } /* Change the border-color on :hover and :focus */ -.site-nav-drawer a:where(:hover, :focus) { +.mainnav a:where(:hover, :focus) { --background-color: var(--color-bg-accent); --text-color: var(--color-text-accent); --border-color: var(--color-bg-accent); } /* Change border-color and color for the active page */ -.site-nav-drawer [aria-current='page'], -.site-nav-drawer [data-state='active'] { +.mainnav [aria-current='page'], +.mainnav [data-state='active'] { --background-color: var(--color-bg-accent); --text-color: var(--color-text); --border-color: var(--color-bg-accent); } /* Reset button styling */ -.site-nav-drawer button { +.mainnav button { all: unset; display: var(--nav-button-display, flex); align-items: center; @@ -79,31 +90,31 @@ padding: var(--space-xs) 0; } -.site-nav-drawer span { +.mainnav span { font-size: var(--size-step-min-1); font-weight: var(--font-bold); text-transform: uppercase; padding-inline-end: var(--space-2xs); } -.site-nav-drawer svg { +.mainnav svg { block-size: 100%; inline-size: auto; transform: translateY(-0.1em); color: var(--color-text); } -.site-nav-drawer [aria-expanded='true'] svg { +.mainnav [aria-expanded='true'] svg { transform: var(--nav-list-rotate, rotate(45deg)); } -@media screen(sm) { - .site-nav-drawer { +@media screen(navigation) { + .mainnav { --nav-button-display: none; --nav-position: static; } - .site-nav-drawer ul { + .mainnav ul { --nav-list-background: transparent; --nav-list-layout: row; --nav-list-position: static; @@ -115,7 +126,7 @@ --nav-list-visibility: visible; } - .site-nav-drawer a { + .mainnav a { --anchor-padding: var(--space-xs) 0.2em; --text-color: var(--color-text); --background-color: transparent; @@ -127,7 +138,7 @@ text-underline-offset: 0.2em; } - .site-nav-drawer a:where(:hover, :focus) { + .mainnav a:where(:hover, :focus) { --text-color: var(--color-text); --background-color: transparent; --border-color: transparent; @@ -135,8 +146,8 @@ } /* Change border-color and color for the active page */ - .site-nav-drawer [aria-current='page'], - .site-nav-drawer [data-state='active'] { + .mainnav [aria-current='page'], + .mainnav [data-state='active'] { --text-color: var(--color-primary); --background-color: transparent; --border-color: transparent; diff --git a/src/assets/css/blocks/site-nav.css b/src/assets/css/bundle/nav-pills.css similarity index 84% rename from src/assets/css/blocks/site-nav.css rename to src/assets/css/bundle/nav-pills.css index 5f2edb4..28518f4 100644 --- a/src/assets/css/blocks/site-nav.css +++ b/src/assets/css/bundle/nav-pills.css @@ -1,13 +1,13 @@ /* Basic link styling */ -.site-nav ul { +.mainnav ul { + --gutter: var(--space-xs); list-style: none; margin: 0; - gap: var(--space-xs); line-height: 0.5em; padding-block-end: var(--space-s); } -.site-nav a { +.mainnav a { --text-color: var(--color-text); --background-color: var(--color-bg); --border-color: var(--color-bg-accent-2); @@ -21,27 +21,27 @@ } /* Change the border-color on :hover and :focus */ -.site-nav a:where(:hover, :focus) { +.mainnav a:where(:hover, :focus) { --background-color: var(--color-text); --text-color: var(--color-bg); --border-color: var(--color-bg); } /* Change border-color and color for the active page. data-state='active' if a child is active. */ -.site-nav [aria-current='page'], -.site-nav [data-state='active'] { +.mainnav [aria-current='page'], +.mainnav [data-state='active'] { --background-color: var(--color-text); --text-color: var(--color-bg); --border-color: var(--color-bg); } -@media screen(md) { +@media screen(navigation) { /* Basic link styling */ - .site-nav ul { + .mainnav ul { padding-block-end: 0; } - .site-nav a { + .mainnav a { --text-color: var(--color-text); --background-color: transparent; --border-color: transparent; @@ -56,15 +56,15 @@ } /* Change the border-color on :hover and :focus */ - .site-nav a:where(:hover, :focus) { + .mainnav a:where(:hover, :focus) { --text-decoration: var(--color-text-accent); --text-color: var(--color-text); --background-color: transparent; } /* Change border-color and color for the active page */ - .site-nav [aria-current='page'], - .site-nav [data-state='active'] { + .mainnav [aria-current='page'], + .mainnav [data-state='active'] { --text-decoration: var(--color-primary); --text-color: var(--color-primary); --background-color: transparent; diff --git a/src/assets/css/blocks/pagination.css b/src/assets/css/bundle/pagination.css similarity index 100% rename from src/assets/css/blocks/pagination.css rename to src/assets/css/bundle/pagination.css diff --git a/src/assets/css/components/custom-card.css b/src/assets/css/components/custom-card.css new file mode 100644 index 0000000..d310aa8 --- /dev/null +++ b/src/assets/css/components/custom-card.css @@ -0,0 +1,105 @@ +custom-card { + --gutter: var(--space-xs-s); + background-color: var(--card-bg, var(--color-bg-accent)); + border: 4px solid var(--color-bg-accent); + color: var(--color-text); + padding: var(--space-s-m); + border-radius: var(--border-radius); + max-inline-size: unset; + display: grid; + grid-template-rows: [image] max-content [headline] max-content [meta] max-content [desc] auto [footer] max-content; +} + +/* avoid flow space being added to unused elements with nested slots */ +custom-card > :empty { + display: none; +} + +custom-card ::selection { + color: var(--color-dark); + background-color: var(--color-secondary); +} + +custom-card :is(h2, h3) { + --flow-space: var(--space-m); + grid-row: headline; + font-size: var(--size-step-2); +} + +custom-card :is(h2, h3) a { + text-decoration: none; +} + +custom-card > :is(picture, figure) { + grid-row: image; + --flow-space: 0; +} + +custom-card img { + max-inline-size: var(--max-img-width, 100%); + block-size: auto; + aspect-ratio: 16/9; + object-fit: cover; + object-position: center; +} + +custom-card > .meta { + grid-row: meta; + font-size: var(--size-step-min-1); +} + +custom-card > p { + grid-row: desc; +} + +custom-card > footer { + grid-row: footer; + font-size: var(--size-step-min-2); +} + +/* avoid overflow of long words */ + +custom-card :is(a, p, h2, h3) { + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; +} + +/* -------------------- variants -------------------- */ + +/* no padding */ + +custom-card[no-padding] { + background-color: transparent; + border: 4px solid var(--color-bg-accent); + padding: 0; + border-radius: none; +} + +/* squared image */ + +custom-card[img-square] img { + aspect-ratio: 1; +} + +/* clickable */ + +custom-card[clickable]:hover, +custom-card[clickable]:focus-within { + border: 4px solid var(--color-primary); +} + +custom-card[clickable]:focus-within a:focus { + outline: none; +} +custom-card[clickable] { + position: relative; +} +custom-card[clickable] a:after { + bottom: 0; + content: ''; + left: 0; + position: absolute; + right: 0; + top: 0; +} diff --git a/src/assets/css/compositions/reel.css b/src/assets/css/compositions/reel.css deleted file mode 100644 index ad4c59e..0000000 --- a/src/assets/css/compositions/reel.css +++ /dev/null @@ -1,41 +0,0 @@ -/* - REEL - A layout that creates a carousel-like element - - - CONFIGURATION - Add an attribute of data-scroll="snap" to the element - to enable scroll snapping -*/ - -.reel { - --reel-space: 2rem; - display: flex; - block-size: auto; - max-inline-size: 100%; - margin-inline: auto; - - /* Padding allows child element hover states to show */ - padding: 0.5rem; - overflow-x: auto; - -webkit-overflow-scrolling: touch; -} - -.reel > * { - flex-basis: var(--reel-item-width, calc(33.333% - var(--reel-space))); - flex-shrink: 0; -} - -.reel > * + * { - margin-inline-start: var(--reel-space); -} - -/* SCROLL TYPE EXCEPTION - Sets the reel to snap on each item on scroll */ -.reel[data-scroll='snap'] { - scroll-snap-type: x mandatory; -} - -.reel[data-scroll='snap'] > * { - scroll-snap-align: start; -} diff --git a/src/assets/css/compositions/switcher.css b/src/assets/css/compositions/switcher.css deleted file mode 100644 index 1478d94..0000000 --- a/src/assets/css/compositions/switcher.css +++ /dev/null @@ -1,34 +0,0 @@ -/* -SWITCHER -More info: https://every-layout.dev/layouts/switcher/ -A layout that allows you to lay **2** items next to each other -until there is not enough horizontal space to allow that. - -CUSTOM PROPERTIES AND CONFIGURATION ---gutter (var(--space-size-1)): This defines the space -between each item - ---switcher-target-container-width (40rem): How large the container -needs to be to allow items to sit inline with each other - ---switcher-vertical-alignment How items should align vertically. -Can be any acceptable flexbox alignment value. -*/ -.switcher { - display: flex; - flex-wrap: wrap; - gap: var(--gutter, var(--space-s-l)); - align-items: var(--switcher-vertical-alignment, flex-start); -} - -.switcher > * { - flex-grow: 1; - flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999); -} - -/* Max 2 items, -so we target everything *after* those */ -.switcher > :nth-last-child(n + 3), -.switcher > :nth-last-child(n + 3) ~ * { - flex-basis: 100%; -} diff --git a/src/assets/css/global/base/fonts.css b/src/assets/css/global/base/fonts.css new file mode 100644 index 0000000..d8ba012 --- /dev/null +++ b/src/assets/css/global/base/fonts.css @@ -0,0 +1,29 @@ +@font-face { + font-family: 'Inclusive Sans'; + font-style: normal; + font-display: swap; + font-weight: 400; + src: + local(''), + url('/assets/fonts/inclusive/inclusivesans-regular.woff2') format('woff2'); +} + +@font-face { + font-family: 'Inclusive Sans'; + font-style: italic; + font-display: swap; + font-weight: 400; + src: + local(''), + url('/assets/fonts/inclusive/inclusivesans-italic.woff2') format('woff2'); +} + +@font-face { + font-family: 'Redhat'; + font-style: normal; + font-display: swap; + font-weight: 900; + src: + local(''), + url('/assets/fonts/redhat/red-hat-display-v7-latin-900.woff2') format('woff2'); +} diff --git a/src/assets/css/global/global-styles.css b/src/assets/css/global/base/global-styles.css similarity index 68% rename from src/assets/css/global/global-styles.css rename to src/assets/css/global/base/global-styles.css index d5f4e86..d4eb6c4 100644 --- a/src/assets/css/global/global-styles.css +++ b/src/assets/css/global/base/global-styles.css @@ -1,35 +1,40 @@ /* - Global styles + Global styles - Low-specificity, global styles that apply to the whole - project: https://cube.fyi/css.html + Low-specificity, global styles that apply to the whole + project: https://cube.fyi/css.html */ +/* Base styles */ +html { + color-scheme: light dark; +} + body { - color: var(--color-text); - background-color: var(--color-bg); - font-size: var(--size-step-0); - font-family: var(--font-base); - line-height: 1.4; - letter-spacing: var(--tracking); display: flex; flex-direction: column; - font-weight: var(--font-medium); + font-family: var(--font-base); + font-size: var(--size-step-0); + font-weight: var(--font-regular); + line-height: var(--leading-standard); + color: var(--color-text); + background-color: var(--color-bg); accent-color: var(--color-primary); + letter-spacing: var(--tracking); } main { flex: auto; } -/* Base typesetting */ +/* Typography */ h1, h2, h3 { + font-family: var(--font-display); + font-weight: var(--font-extra-bold); line-height: 1.2; letter-spacing: var(--tracking-s); - font-weight: var(--font-bold); - font-family: var(--font-display); } h1 { @@ -44,7 +49,7 @@ h3 { font-size: var(--size-step-2); } -/* Set line lengths */ +/* Text formatting */ p, li, blockquote:not([class]) { @@ -52,8 +57,8 @@ blockquote:not([class]) { } blockquote { - border-inline-start: 0.5rem solid var(--color-primary); padding: var(--space-m-l); + border-inline-start: 0.5rem solid var(--color-primary); font-size: var(--size-step-2); } @@ -67,31 +72,37 @@ blockquote :last-child { font-size: var(--size-step-1); } +/* Form elements */ +input, +textarea { + caret-color: var(--color-primary); +} + +/* SVG */ svg { block-size: 2ex; inline-size: auto; flex: none; } +/* Text styling */ +b, strong { font-weight: var(--font-extra-bold); + font-family: var(--font-display); } +/* Horizontal rule */ hr { - border: 0; height: 1px; width: 10%; margin-block: var(--space-m-l); margin-inline-start: 0; background-color: var(--color-bg-accent-2); + border: 0; } -[role='list'] { - padding: 0; -} - -/* Base interactive elements */ - +/* Links */ a { color: currentcolor; text-decoration-thickness: 0.08em; @@ -101,36 +112,26 @@ a:hover { text-decoration: none; } +/* Focus styles */ :focus-visible { outline: 3px solid; outline-offset: 0.3ch; } -main:focus { - outline: none; -} - -/* Base selection styles that invert whatever colours are rendered */ +/* Text selection */ ::selection { background-color: var(--color-text); color: var(--color-bg); } +/* Transitions */ .preload-transitions * { transition: none !important; } -@media (prefers-reduced-motion: reduce) { - html:focus-within { - scroll-behavior: auto; - } - - *, - ::after, - ::before { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - scroll-behavior: auto !important; - transition-duration: 0.01ms !important; +/* Scripting */ +@media (scripting: none) { + .require-js { + display: none; } } diff --git a/src/assets/css/global/base/reset.css b/src/assets/css/global/base/reset.css new file mode 100644 index 0000000..64587ed --- /dev/null +++ b/src/assets/css/global/base/reset.css @@ -0,0 +1,144 @@ +/* inspired by: */ +/* https://piccalil.li/blog/a-modern-css-reset/ */ +/* https://keithjgrant.com/posts/2024/01/my-css-resets/ */ +/* https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/#css-reset-additions */ +/* https://github.com/mayank99/reset.css/blob/main/package/index.css */ +/* Box sizing rules */ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Typography */ +:where(*) { + text-wrap: pretty; +} + +:where(h1, h2, h3, h4) { + text-wrap: balance; +} + +/* Scroll behavior */ +:where(html:focus-within) { + scroll-behavior: smooth; +} + +/* Body defaults */ +:where(body) { + min-height: 100vh; + min-height: 100dvh; + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +/* Margins */ +:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) { + margin: 0; +} + +/* List styles */ +:where(ul[role='list'], ol[role='list']) { + list-style: none; +} + +/* Padding for lists */ +:where([role='list']) { + padding: 0; +} + +/* Anchor styles */ +:where(a:not([class])) { + text-decoration-skip-ink: auto; +} + +/* Image styles */ +:where(img, picture, svg, canvas) { + max-inline-size: 100%; + block-size: auto; + vertical-align: middle; + font-style: italic; + background-repeat: no-repeat; + background-size: cover; + shape-margin: 0.75rem; +} + +/* Button styles */ +:where(button) { + all: unset; +} + +/* Inherit fonts for inputs and buttons */ +:where(button, input, select, textarea) { + font: inherit; + color: inherit; +} + +/* Textarea styles */ +:where(textarea) { + resize: vertical; + resize: block; +} + +/* Textarea height */ +:where(textarea:not([rows])) { + min-height: 10em; +} + +/* Cursor styles */ +:where(button, label, select, summary, [role='button'], [role='option']) { + cursor: pointer; +} + +/* Scroll margin above anchor links */ +:where(:target) { + scroll-margin-block-start: 2ex; +} + +/* Scroll margin below focused elements */ +:where(:focus) { + scroll-margin-block-end: 8vh; +} + +:where(dialog) { + border: none; + background: none; + inset: unset; + max-width: unset; + max-height: unset; +} + +:where([popover]) { + border: none; + background: none; + inset: unset; + color: inherit; +} + +/* hide dialog elements without open or popover attributes, and elements with a popover attribute that are not in an open state. */ +:where(dialog:not([open], [popover])), +:where([popover]:not(:popover-open)) { + display: none !important; +} + +/* Prevent page scroll: https://blog.mayank.co/is-dialog-enough */ +:where(html:has(dialog[open]:modal)) { + overflow: hidden; +} + +/* Reduced motion */ +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + + *, + ::after, + ::before { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + scroll-behavior: auto !important; + transition-duration: 0.01ms !important; + } +} diff --git a/src/assets/css/global/variables.css b/src/assets/css/global/base/variables.css similarity index 76% rename from src/assets/css/global/variables.css rename to src/assets/css/global/base/variables.css index 046e85e..8d9f28b 100644 --- a/src/assets/css/global/variables.css +++ b/src/assets/css/global/base/variables.css @@ -1,11 +1,9 @@ /* Global variables. */ /* This turned out a little too complex, and probably is overly specific. I'm still fiddling with this. Should work by itself though, once you define your design token colors. -/* Feel free to delete the modern CSS enhancements starting on line 74. Adjust fallbacks if modern color syntax not supported for text and bg variants. */ +Adjust fallbacks if modern color syntax not supported for text and bg variants. */ /* Basic variable definitions for color schemes */ :root { - color-scheme: light dark; - --gutter: var(--space-m-l); --border-radius: 0.3rem; --transition-duration: 250ms; @@ -15,14 +13,7 @@ --tracking-s: -0.075ch; --tracking-wide: 0.05ch; - --gradient-rainbow: linear-gradient( - 90deg, - #cf4662 10%, - #fbbe25 30%, - #62c95c 50%, - #08bccb 75%, - #a977d5 90% - ); + --gradient-rainbow: linear-gradient(90deg, #cf4662 10%, #fbbe25 30%, #62c95c 50%, #08bccb 75%, #a977d5 90%); --gradient-conic: conic-gradient( var(--color-primary) 0 28%, var(--color-secondary) 0 67%, @@ -89,56 +80,31 @@ --color-text-accent: color-mix(in oklab, var(--color-base-dark) 80%, var(--color-bg)); --color-bg-accent: color-mix(in oklab, var(--color-bg) 90%, var(--color-text)); --color-bg-accent-2: color-mix(in oklab, var(--color-bg) 70%, var(--color-text)); + --color-primary-sub-20: color-mix(in oklab, var(--color-primary-highlight), var(--color-bg) 20%); + --color-secondary-sub-20: color-mix(in oklab, var(--color-secondary-highlight), var(--color-bg) 20%); + --color-tertiary-sub-20: color-mix(in oklab, var(--color-tertiary-highlight), var(--color-bg) 20%); } @media (prefers-color-scheme: dark) { :root { - --color-text-accent: color-mix( - in oklab, - var(--color-base-light) 70%, - var(--color-bg) - ); + --color-text-accent: color-mix(in oklab, var(--color-base-light) 70%, var(--color-bg)); --color-bg-accent: color-mix(in oklab, var(--color-bg) 92%, var(--color-text)); --color-bg-accent-2: color-mix(in oklab, var(--color-bg) 80%, var(--color-text)); /* add opacity with color-mix */ - --color-primary: color-mix( - in oklab, - var(--color-primary-highlight), - transparent 20% - ); - --color-secondary: color-mix( - in oklab, - var(--color-secondary-highlight), - transparent 20% - ); - --color-tertiary: color-mix( - in oklab, - var(--color-tertiary-highlight), - transparent 20% - ); + --color-primary: var(--color-primary-sub-20); + --color-secondary: var(--color-secondary-sub-20); + --color-tertiary: var(--color-tertiary-sub-20); } } :root[data-theme='dark'] { - --color-text-accent: color-mix( - in oklab, - var(--color-base-light) 70%, - var(--color-bg) - ); + --color-text-accent: color-mix(in oklab, var(--color-base-light) 70%, var(--color-bg)); --color-bg-accent: color-mix(in oklab, var(--color-bg) 92%, var(--color-text)); --color-bg-accent-2: color-mix(in oklab, var(--color-bg) 80%, var(--color-text)); /* add opacity with color-mix */ - --color-primary: color-mix(in oklab, var(--color-primary-highlight), transparent 20%); - --color-secondary: color-mix( - in oklab, - var(--color-secondary-highlight), - transparent 20% - ); - --color-tertiary: color-mix( - in oklab, - var(--color-tertiary-highlight), - transparent 20% - ); + --color-primary: var(--color-primary-sub-20); + --color-secondary: var(--color-secondary-sub-20); + --color-tertiary: var(--color-tertiary-sub-20); } } diff --git a/src/assets/css/blocks/button.css b/src/assets/css/global/blocks/button.css similarity index 100% rename from src/assets/css/blocks/button.css rename to src/assets/css/global/blocks/button.css diff --git a/src/assets/css/blocks/code.css b/src/assets/css/global/blocks/code.css similarity index 99% rename from src/assets/css/blocks/code.css rename to src/assets/css/global/blocks/code.css index 188497a..c8b54fc 100644 --- a/src/assets/css/blocks/code.css +++ b/src/assets/css/global/blocks/code.css @@ -10,6 +10,7 @@ code { pre { --dark-bg: color-mix(in oklab, var(--color-bg) 92%, black); grid-column: popout !important; + overflow-x: auto; } code, diff --git a/src/assets/css/blocks/external-link.css b/src/assets/css/global/blocks/external-link.css similarity index 64% rename from src/assets/css/blocks/external-link.css rename to src/assets/css/global/blocks/external-link.css index 9af757d..8549a3f 100644 --- a/src/assets/css/blocks/external-link.css +++ b/src/assets/css/global/blocks/external-link.css @@ -1,14 +1,12 @@ article - [href^='http']:not([href*='localhost:8080']):not( - [href*='eleventy-excellent.netlify.app'] - ):not(.button) { + a[href^='http']:not([href*='localhost:8080']):not([href*='eleventy-excellent.netlify.app']):not(.button) { padding-inline-end: 0.8em; } article - [href^='http']:not([href*='localhost:8080']):not( - [href*='eleventy-excellent.netlify.app'] - ):not(.no-indicator)::after { + a[href^='http']:not([href*='localhost:8080']):not([href*='eleventy-excellent.netlify.app']):not( + .no-indicator + )::after { position: absolute; display: inline-block; inline-size: 1em; diff --git a/src/assets/css/blocks/footnotes.css b/src/assets/css/global/blocks/footnotes.css similarity index 100% rename from src/assets/css/blocks/footnotes.css rename to src/assets/css/global/blocks/footnotes.css diff --git a/src/assets/css/blocks/post.css b/src/assets/css/global/blocks/post.css similarity index 82% rename from src/assets/css/blocks/post.css rename to src/assets/css/global/blocks/post.css index 5828ebb..38c6386 100644 --- a/src/assets/css/blocks/post.css +++ b/src/assets/css/global/blocks/post.css @@ -1,16 +1,16 @@ -.post h1 { +.post .prose h1 { font-size: var(--size-step-6); } -.post h2 { +.post .prose h2 { font-size: var(--size-step-3); } -.post h3 { +.post .prose h3 { font-size: var(--size-step-2); } -.post img { +.post .prose img { max-inline-size: var(--max-img-width, 100%); block-size: auto; aspect-ratio: 16/9; @@ -18,12 +18,12 @@ object-position: center; } -.date { +.post ..prose date { font-size: var(--size-step-1); color: var(--color-text-light); } -.credit { +.post .prose .credit { font-size: var(--size-step-min-1); color: var(--color-text-accent); background-color: var(--color-bg); @@ -33,7 +33,6 @@ max-inline-size: fit-content; } -.meta { +.post .prose .meta { font-size: var(--size-step-min-1); - margin-block-end: var(--space-m); } diff --git a/src/assets/css/blocks/prose.css b/src/assets/css/global/blocks/prose.css similarity index 87% rename from src/assets/css/blocks/prose.css rename to src/assets/css/global/blocks/prose.css index 864bab9..0fcb702 100644 --- a/src/assets/css/blocks/prose.css +++ b/src/assets/css/global/blocks/prose.css @@ -5,7 +5,7 @@ --wrapper-width: 64rem; } -.prose :is(pre, pre + *, figure, figure + *) { +.prose :where(pre, pre + *, figure, figure + *) { --flow-space: var(--space-m-l); } @@ -17,11 +17,11 @@ border-bottom: 1px solid var(--color-bg-accent); } -.prose :is(h2, h3, h4) { +:where(.prose :is(h2, h3, h4)) { --flow-space: var(--space-xl); } -.prose :is(h2 + *, h3 + *, h4 + *):not(figure) { +:where(.prose :is(h2 + *, h3 + *, h4 + *):not(figure)) { --flow-space: var(--space-m); } @@ -29,7 +29,7 @@ text-decoration: none; } -.prose .heading-anchor { +.heading-anchor { text-decoration: none; } @@ -45,7 +45,7 @@ /* inline space only for "regular lists" */ .prose :where(ul:not(.grid), ol:not(.grid)) { - padding-inline-start: 1.5ch; + padding-inline-start: 1.2ch; } /* marker only for "regular lists" */ diff --git a/src/assets/css/blocks/section.css b/src/assets/css/global/blocks/section.css similarity index 100% rename from src/assets/css/blocks/section.css rename to src/assets/css/global/blocks/section.css diff --git a/src/assets/css/blocks/seperator.css b/src/assets/css/global/blocks/seperator.css similarity index 67% rename from src/assets/css/blocks/seperator.css rename to src/assets/css/global/blocks/seperator.css index 59e85fd..ea9c3f8 100644 --- a/src/assets/css/blocks/seperator.css +++ b/src/assets/css/global/blocks/seperator.css @@ -4,3 +4,7 @@ inline-size: 100%; fill: var(--spot-color, var(--color-bg)); } + +.section > .seperator { + transform: translateY(-1px); +} diff --git a/src/assets/css/global/blocks/site-footer.css b/src/assets/css/global/blocks/site-footer.css new file mode 100644 index 0000000..e92f9eb --- /dev/null +++ b/src/assets/css/global/blocks/site-footer.css @@ -0,0 +1,45 @@ +.site-footer { + margin-block-start: var(--space-l-xl); + padding: var(--space-s-m); + color: var(--color-text); +} + +.site-footer .footer__meta { + --gutter: var(--space-xs); + --cluster-horizontal-alignment: center; +} + +/* increase tab size */ +.site-footer .footer__meta a { + padding: var(--space-xs); +} + +.site-footer svg { + inline-size: 1.1em; + block-size: 1em; +} + +.site-footer .creator { + font-size: var(--size-step-min-1); + margin-block-start: var(--space-xl); + display: grid; + place-items: center; +} + +.site-footer .creator a { + --gutter: var(--space-xs); + --cluster-horizontal-alignment: center; + text-decoration: none; +} + +.site-footer .creator a:hover { + color: transparent; + background-image: var(--gradient-rainbow); + background-size: 100%; + background-repeat: repeat; + background-clip: text; +} + +.site-footer .creator:hover svg { + color: var(--color-text); +} diff --git a/src/assets/css/blocks/site-logo.css b/src/assets/css/global/blocks/site-logo.css similarity index 67% rename from src/assets/css/blocks/site-logo.css rename to src/assets/css/global/blocks/site-logo.css index 5d1097e..8927eb3 100644 --- a/src/assets/css/blocks/site-logo.css +++ b/src/assets/css/global/blocks/site-logo.css @@ -2,7 +2,5 @@ --gutter: var(--space-xs); padding: var(--space-s) 0; font-size: var(--size-step-0); - font-weight: var(--font-bold); - text-transform: uppercase; text-decoration: none; } diff --git a/src/assets/css/blocks/skip-link.css b/src/assets/css/global/blocks/skip-link.css similarity index 100% rename from src/assets/css/blocks/skip-link.css rename to src/assets/css/global/blocks/skip-link.css diff --git a/src/assets/css/blocks/styleguide.css b/src/assets/css/global/blocks/styleguide.css similarity index 100% rename from src/assets/css/blocks/styleguide.css rename to src/assets/css/global/blocks/styleguide.css diff --git a/src/assets/css/blocks/table.css b/src/assets/css/global/blocks/table.css similarity index 99% rename from src/assets/css/blocks/table.css rename to src/assets/css/global/blocks/table.css index 7202e48..28f479a 100644 --- a/src/assets/css/blocks/table.css +++ b/src/assets/css/global/blocks/table.css @@ -2,6 +2,7 @@ table { border: 0; inline-size: 100%; } + table br { display: none; } @@ -34,11 +35,13 @@ td { display: block; text-align: start; } + td::before { content: attr(data-label); float: start; font-weight: var(--font-bold); } + td:last-child { border-block-end: 0; } @@ -50,17 +53,21 @@ td:last-child { padding: 0; table-layout: fixed; } + table br { display: block; } + thead { position: static; text-align: start; display: table-header-group; } + caption { margin: var(--space-xs) 0 var(--space-s); } + tr { border: 0; padding: var(--space-xs); @@ -75,9 +82,11 @@ td:last-child { td { border: none; } + td::before { display: none; } + th, td { padding: var(--space-s); diff --git a/src/assets/css/blocks/tag.css b/src/assets/css/global/blocks/tag.css similarity index 100% rename from src/assets/css/blocks/tag.css rename to src/assets/css/global/blocks/tag.css diff --git a/src/assets/css/blocks/textgradient.css b/src/assets/css/global/blocks/textgradient.css similarity index 100% rename from src/assets/css/blocks/textgradient.css rename to src/assets/css/global/blocks/textgradient.css diff --git a/src/assets/css/blocks/theme-switch.css b/src/assets/css/global/blocks/theme-switch.css similarity index 76% rename from src/assets/css/blocks/theme-switch.css rename to src/assets/css/global/blocks/theme-switch.css index b40f656..a3d7e74 100644 --- a/src/assets/css/blocks/theme-switch.css +++ b/src/assets/css/global/blocks/theme-switch.css @@ -14,13 +14,14 @@ } .theme-switch .button[aria-pressed='true'] { - --_color-primary-contrast: color-mix( - in oklab, - var(--color-primary) 85%, - var(--color-base-dark) - ); + --_color-primary-contrast: color-mix(in oklab, var(--color-primary) 85%, var(--color-base-dark)); --button-bg: var(--_color-primary-contrast); --button-text: var(--color-base-light); --button-border: var(--_color-primary-contrast); outline-color: var(--_color-primary-contrast); } + +/* Hide without JS */ +is-land:not(:defined) .theme-switch { + display: none; +} diff --git a/src/assets/css/compositions/cluster.css b/src/assets/css/global/compositions/cluster.css similarity index 97% rename from src/assets/css/compositions/cluster.css rename to src/assets/css/global/compositions/cluster.css index ca5dc9b..0d3df5d 100644 --- a/src/assets/css/compositions/cluster.css +++ b/src/assets/css/global/compositions/cluster.css @@ -15,7 +15,7 @@ horizontally. Can be any acceptable flexbox aligmnent value. Can be any acceptable flexbox alignment value. */ -.cluster { +:where(.cluster) { display: flex; flex-wrap: wrap; gap: var(--gutter, var(--space-s-l)); diff --git a/src/assets/css/compositions/flow.css b/src/assets/css/global/compositions/flow.css similarity index 89% rename from src/assets/css/compositions/flow.css rename to src/assets/css/global/compositions/flow.css index aea8326..7259304 100644 --- a/src/assets/css/compositions/flow.css +++ b/src/assets/css/global/compositions/flow.css @@ -3,6 +3,6 @@ FLOW UTILITY Like the Every Layout stack: https://every-layout.dev/layouts/stack/ Info about this implementation: https://piccalil.li/quick-tip/flow-utility/ */ -.flow > * + * { +:where(.flow) > * + * { margin-block-start: var(--flow-space, 1em); } diff --git a/src/assets/css/compositions/grid.css b/src/assets/css/global/compositions/grid.css similarity index 91% rename from src/assets/css/compositions/grid.css rename to src/assets/css/global/compositions/grid.css index e55e9dd..945ff12 100644 --- a/src/assets/css/compositions/grid.css +++ b/src/assets/css/global/compositions/grid.css @@ -14,7 +14,7 @@ ideally, as a minimum. --grid-placement (auto-fill): Set either auto-fit or auto-fill to change how empty grid tracks are handled */ -.grid { +:where(.grid) { display: grid; grid-template-columns: repeat( var(--grid-placement, auto-fill), @@ -23,12 +23,12 @@ to change how empty grid tracks are handled */ gap: var(--gutter, var(--space-s-m)); } -.grid[data-rows='masonry'] { +:where(.grid)[data-rows='masonry'] { grid-template-rows: masonry; align-items: start; } -.grid[data-layout='50-50'] { +:where(.grid)[data-layout='50-50'] { --grid-placement: auto-fit; --grid-min-item-size: clamp(16rem, 50vw, 28rem); } diff --git a/src/assets/css/compositions/repel.css b/src/assets/css/global/compositions/repel.css similarity index 92% rename from src/assets/css/compositions/repel.css rename to src/assets/css/global/compositions/repel.css index c079f05..4b7fbfc 100644 --- a/src/assets/css/compositions/repel.css +++ b/src/assets/css/global/compositions/repel.css @@ -11,7 +11,7 @@ between each item. Can be any acceptable flexbox alignment value. */ -.repel { +:where(.repel) { display: flex; flex-wrap: wrap; justify-content: space-between; @@ -19,6 +19,6 @@ Can be any acceptable flexbox alignment value. gap: var(--gutter, var(--space-s-l)); } -.repel[data-nowrap] { +:where(.repel)[data-nowrap] { flex-wrap: nowrap; } diff --git a/src/assets/css/compositions/sidebar.css b/src/assets/css/global/compositions/sidebar.css similarity index 82% rename from src/assets/css/compositions/sidebar.css rename to src/assets/css/global/compositions/sidebar.css index 364fea8..2e953f4 100644 --- a/src/assets/css/compositions/sidebar.css +++ b/src/assets/css/global/compositions/sidebar.css @@ -19,18 +19,18 @@ EXCEPTIONS .sidebar[data-direction='rtl']: flips the sidebar to be on the right */ -.sidebar { +:where(.sidebar) { display: flex; flex-wrap: wrap; gap: var(--gutter, var(--space-s-l)); } -.sidebar:not([data-direction]) > :first-child { +:where(.sidebar):not([data-direction]) > :first-child { flex-basis: var(--sidebar-target-width, 20rem); flex-grow: 1; } -.sidebar:not([data-direction]) > :last-child { +:where(.sidebar):not([data-direction]) > :last-child { flex-basis: 0; flex-grow: 999; min-inline-size: var(--sidebar-content-min-width, 50%); @@ -39,12 +39,12 @@ EXCEPTIONS /* A flipped version where the sidebar is on the right */ -.sidebar[data-direction='rtl'] > :last-child { +:where(.sidebar)[data-direction='rtl'] > :last-child { flex-basis: var(--sidebar-target-width, 20rem); flex-grow: 1; } -.sidebar[data-direction='rtl'] > :first-child { +:where(.sidebar)[data-direction='rtl'] > :first-child { flex-basis: 0; flex-grow: 999; min-inline-size: var(--sidebar-content-min-width, 50%); diff --git a/src/assets/css/compositions/wrapper.css b/src/assets/css/global/compositions/wrapper.css similarity index 100% rename from src/assets/css/compositions/wrapper.css rename to src/assets/css/global/compositions/wrapper.css diff --git a/src/assets/css/global/fonts.css b/src/assets/css/global/fonts.css deleted file mode 100644 index c3b0067..0000000 --- a/src/assets/css/global/fonts.css +++ /dev/null @@ -1,89 +0,0 @@ -/* Set up for old browsers. I set the medium Figtree as regular, as I prefer it a little bolder. */ -@supports not (font-variation-settings: normal) { - @font-face { - font-family: Figtree; - font-style: normal; - font-display: swap; - font-weight: 800; - src: - local(''), - url('/assets/fonts/figtree/figtree-extrabold.woff2') format('woff2'); - } - - @font-face { - font-family: Figtree; - font-style: normal; - font-display: swap; - font-weight: 700; - src: - local(''), - url('/assets/fonts/figtree/figtree-bold.woff2') format('woff2'); - } - - @font-face { - font-family: Figtree; - font-style: normal; - font-display: swap; - font-weight: 500; - src: - local(''), - url('/assets/fonts/figtree/figtree-medium.woff2') format('woff2'); - } - - @font-face { - font-family: Figtree; - font-style: italic; - font-display: swap; - font-weight: 500; - src: - local(''), - url('/assets/fonts/figtree/figtree-mediumitalic.woff2') format('woff2'); - } -} - -/* Set up for modern browsers, all weights */ -@supports (font-variation-settings: normal) { - @font-face { - font-family: 'Figtree'; - src: - url('/assets/fonts/figtree/figtree-variable[wght].woff2') - format('woff2 supports variations'), - url('/assets/fonts/figtree/figtree-variable[wght].woff2') format('woff2-variations'); - font-weight: 300 900; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: 'Figtree'; - src: - url('/assets/fonts/figtree/figtree-variable-italic[wght].woff2') - format('woff2 supports variations'), - url('/assets/fonts/figtree/figtree-variable-italic[wght].woff2') - format('woff2-variations'); - font-weight: 300 900; - font-style: italic; - font-display: swap; - } -} - -/* 900 weight is handled as if 700. */ -@font-face { - font-family: 'Redhat'; - font-style: normal; - font-display: swap; - font-weight: 700; - src: - local(''), - url(/assets/fonts/redhat/red-hat-display-v7-latin-900.woff2) format('woff2'); -} - -@font-face { - font-family: 'RobotoMono'; - font-style: normal; - font-display: swap; - font-weight: normal; - src: - local(''), - url(/assets/fonts/robotomono/robotomono-regular.woff2) format('woff2'); -} diff --git a/src/assets/css/global.css b/src/assets/css/global/global.css similarity index 53% rename from src/assets/css/global.css rename to src/assets/css/global/global.css index 7ffbdab..09ba94f 100644 --- a/src/assets/css/global.css +++ b/src/assets/css/global/global.css @@ -1,15 +1,18 @@ @import 'tailwindcss/base'; -@import 'global/reset.css'; -@import 'global/fonts.css'; +@import 'base/reset.css'; +@import 'base/fonts.css'; @import 'tailwindcss/components'; -@import 'global/variables.css'; -@import 'global/global-styles.css'; +@import 'base/variables.css'; +@import 'base/global-styles.css'; -@import-glob 'blocks/*.css'; @import-glob 'compositions/*.css'; +@import-glob 'blocks/*.css'; @import-glob 'utilities/*.css'; +/* debugging */ +/* @import-glob 'tests/*.css'; */ + @import 'tailwindcss/utilities'; diff --git a/src/assets/css/global/reset.css b/src/assets/css/global/reset.css deleted file mode 100644 index 6005cd7..0000000 --- a/src/assets/css/global/reset.css +++ /dev/null @@ -1,124 +0,0 @@ -/* inspired by: */ -/* Modern reset: https://piccalil.li/blog/a-modern-css-reset/ */ -/* https://keithjgrant.com/posts/2024/01/my-css-resets/ */ -/* https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/#css-reset-additions */ - -/* Box sizing rules */ -*, -*::before, -*::after { - box-sizing: border-box; -} - -/* Remove default margin */ -body, -h1, -h2, -h3, -h4, -p, -figure, -blockquote, -dl, -dd { - margin: 0; -} - -/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ -ul[role='list'], -ol[role='list'] { - list-style: none; -} - -/* Prevent zooming when orientation changes on some iOS devices */ -html { - text-size-adjust: none; - -webkit-text-size-adjust: none; -} - -/* Set core root defaults */ -html:focus-within { - scroll-behavior: smooth; -} - -/* Make gutter area stable and present on both edges of the scrollbar */ -html { - scrollbar-gutter: stable; -} - -/* Set core body defaults */ -body { - min-height: 100vh; - min-height: 100dvh; - text-rendering: optimizeSpeed; - line-height: 1.5; -} - -/* A elements that don't have a class get default styles */ -a:not([class]) { - text-decoration-skip-ink: auto; -} - -/* Make images easier to work with */ -img, -picture, -svg, -canvas { - max-inline-size: 100%; - block-size: auto; - vertical-align: middle; - font-style: italic; - background-repeat: no-repeat; - background-size: cover; - shape-margin: 0.75rem; -} - -/* remove default button styles */ -button { - all: unset; -} - -/* Inherit fonts for inputs and buttons */ -button, -input, -textarea, -select { - font: inherit; -} - -/* Make sure textareas without a rows attribute are not tiny */ -textarea:not([rows]) { - min-height: 10em; -} - -/* Adding cursor style to interactive elements */ -button, -label, -select, -summary, -[role='button'], -[role='option'] { - cursor: pointer; -} - -/* No typographic widows */ -* { - text-wrap: pretty; -} -h1, -h2, -h3, -h4 { - text-wrap: balance; -} - -/* Scroll margin allowance above anchor links */ -:target { - scroll-margin-block-start: 2ex; -} - -/* Scroll margin allowance below focused elements - to ensure they are clearly in view */ -:focus { - scroll-margin-block-end: 8vh; -} diff --git a/src/assets/css/global/tests/debug.css b/src/assets/css/global/tests/debug.css new file mode 100644 index 0000000..5805413 --- /dev/null +++ b/src/assets/css/global/tests/debug.css @@ -0,0 +1,70 @@ +/* https://heydonworks.com/article/testing-html-with-modern-css/ */ + +/* WIP */ + +:root { + --highlight-outline: 0.25rem solid cornflowerblue; + --warning-outline: 0.25rem solid orange; + --error-outline: 0.25rem solid red; +} + +/* outline all elements */ +* * * * * { + outline: var(--highlight-outline); +} + +/* highlight empty elements */ +*:empty:not(svg *) { + outline: var(--warning-outline); + --warning-empty-element: 'The element is empty'; +} + +a:not([href]) { + outline: var(--error-outline); + --error-not-href: 'The link does not have an href. Did you mean to use a