change structure, update
This commit is contained in:
madrilene
parent
6b72aead90
commit
9a247b1f1c
50 changed files with 652 additions and 616 deletions
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.youtube-embed {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
24
src/assets/css/bundle/gallery.css
Normal file
24
src/assets/css/bundle/gallery.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
105
src/assets/css/components/custom-card.css
Normal file
105
src/assets/css/components/custom-card.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
29
src/assets/css/global/base/fonts.css
Normal file
29
src/assets/css/global/base/fonts.css
Normal file
|
|
@ -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');
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
144
src/assets/css/global/base/reset.css
Normal file
144
src/assets/css/global/base/reset.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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,
|
||||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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" */
|
||||
|
|
@ -4,3 +4,7 @@
|
|||
inline-size: 100%;
|
||||
fill: var(--spot-color, var(--color-bg));
|
||||
}
|
||||
|
||||
.section > .seperator {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
45
src/assets/css/global/blocks/site-footer.css
Normal file
45
src/assets/css/global/blocks/site-footer.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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));
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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%);
|
||||
|
|
@ -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');
|
||||
}
|
||||
|
|
@ -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';
|
||||
|
|
@ -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;
|
||||
}
|
||||
70
src/assets/css/global/tests/debug.css
Normal file
70
src/assets/css/global/tests/debug.css
Normal file
|
|
@ -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 <button>?';
|
||||
}
|
||||
|
||||
a[href^='javascript'] {
|
||||
outline: var(--error-outline);
|
||||
--error-javascript-href: 'The href does not appear to include a location. Did you mean to use a <button>?';
|
||||
}
|
||||
|
||||
a[disabled] {
|
||||
outline: var(--error-outline);
|
||||
--error-anchor-disabled: 'The disabled property is not valid on anchors (links). Did you mean to use a <button>?';
|
||||
}
|
||||
|
||||
label:not(:has(:is(input, output, textarea, select))):not([for]) {
|
||||
outline: var(--error-outline);
|
||||
--error-unassociated-label: 'The <label> neither uses the `for` attribute nor wraps an applicable form element';
|
||||
}
|
||||
|
||||
input:not(form input) {
|
||||
outline: var(--warning-outline);
|
||||
--warning-input-orphan: 'The input is outside a <form> element. Users may benefit from <form> semantics and behaviors.';
|
||||
}
|
||||
|
||||
figure[aria-label]:not(:has(figcaption)) {
|
||||
outline: var(--warning-outline);
|
||||
--warning-figure-label-not-visible: 'The labeling method used is not visible and only available to assistive software';
|
||||
}
|
||||
|
||||
figure[aria-label] figcaption {
|
||||
outline: var(--warning-outline);
|
||||
--warning-overridden-figcaption: 'The figure has a figcaption that is overridden by an ARIA label';
|
||||
}
|
||||
|
||||
ol[class*='breadcrumb']:not(:is(nav[aria-label], nav[aria-labelledby]) ol) {
|
||||
outline: var(--error-outline);
|
||||
--error-undiscoverable-breadcrumbs: 'It looks like you have provided breadcrumb navigation outside a labeled `<nav>` landmark';
|
||||
}
|
||||
#body
|
||||
:not(:is(header, nav, main, aside, footer)):not(:is(header, nav, main, aside, footer) *):not(.skip-link) {
|
||||
outline: var(--error-outline);
|
||||
--error-content-outside-landmark: 'You have some content that is not inside a landmark (header, nav, main, aside, or footer)';
|
||||
}
|
||||
|
||||
header nav:has(ul > ul) {
|
||||
outline: var(--warning-outline);
|
||||
--warning-nested-navigation: 'You appear to be using tiered/nested navigation in your header. This can be difficult to traverse. Index pages with tables of content are preferable.';
|
||||
}
|
||||
17
src/assets/css/global/tests/is-land.css
Normal file
17
src/assets/css/global/tests/is-land.css
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
:root {
|
||||
--island-ready: 0.25rem solid ForestGreen;
|
||||
--island-component: 0.25rem solid goldenrod;
|
||||
}
|
||||
|
||||
is-land[ready] {
|
||||
display: block;
|
||||
background-color: rgba(114, 233, 110, 0.2);
|
||||
outline: var(--island-outline);
|
||||
}
|
||||
is-land,
|
||||
.demo-component {
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
margin: 0.5em 0;
|
||||
outline: var(--island-component);
|
||||
}
|
||||
14
src/assets/css/global/utilities/spin.css
Normal file
14
src/assets/css/global/utilities/spin.css
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
.spin {
|
||||
animation: spin 30s linear infinite;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue