by ${data.author}
`, + `by ${data.author}
`, }, }; ``` @@ -476,7 +476,7 @@ box-shadow: 1px 1px 0px var(--color-shadow), 2px 2px 0 var(--color-shadow); -border-radius: var(--spacing-0\.25); +border-radius: var(--spacing-1); border: 1px solid var(--color-shadow); transition: diff --git a/src/includes/css/blocks/button.css b/src/includes/css/blocks/button.css index d18d7aa..67a33f6 100644 --- a/src/includes/css/blocks/button.css +++ b/src/includes/css/blocks/button.css @@ -2,8 +2,8 @@ align-items: center; color: var(--color-text); display: inline-flex; - gap: var(--spacing-0\.5); - padding: var(--spacing-0\.5) var(--spacing-1); + gap: var(--spacing-2); + padding: var(--spacing-2) var(--spacing-4); position: relative; text-decoration: none; transition: transform 0.3s var(--transition-bounce); @@ -11,7 +11,7 @@ &::before, &::after { - border-radius: var(--spacing-0\.5); + border-radius: var(--spacing-2); position: absolute; inset: 0; content: ""; diff --git a/src/includes/css/blocks/card.css b/src/includes/css/blocks/card.css index 072c592..13b8e7c 100644 --- a/src/includes/css/blocks/card.css +++ b/src/includes/css/blocks/card.css @@ -1,7 +1,7 @@ .card { - border: 1px solid var(--color-shadow); - border-radius: var(--spacing-0\.5); - padding: var(--spacing-1); + border-radius: var(--spacing-2); + padding: var(--spacing-4); + background-color: var(--color-surface); } .card--secondary { diff --git a/src/includes/css/blocks/media-display.css b/src/includes/css/blocks/media-display.css index 2926f62..a109ca0 100644 --- a/src/includes/css/blocks/media-display.css +++ b/src/includes/css/blocks/media-display.css @@ -1,38 +1,30 @@ +.media-metadata-grid { + display: grid; + gap: var(--spacing-4); + + @container (min-width: 48rem) { + grid-template-columns: 200px 1fr; + } +} + +.media-metadata { + display: grid; + grid-template-columns: 150px 1fr; + row-gap: var(--spacing-1); +} + .media-image { --aspect-ratio: 0.8; - border: 1px solid var(--color-shadow); - border-radius: var(--spacing-0\.5); - overflow: hidden; - source, img { aspect-ratio: var(--aspect-ratio); height: auto; object-fit: cover; + border-radius: var(--spacing-1); } } .media-image--tall { --aspect-ratio: 0.67; } - -.media-meta-grid { - display: grid; - grid-template-columns: 225px 1fr; -} - -.meta-grid--full { - grid-column: 1/3; -} - -.media-meta { - display: grid; - grid-template-columns: 1fr 1fr; -} - -@container (max-width: 36rem) { - .media-meta-grid { - grid-template-columns: 1fr; - } -} diff --git a/src/includes/css/blocks/media-grid.css b/src/includes/css/blocks/media-grid.css index e9cff48..238b55d 100644 --- a/src/includes/css/blocks/media-grid.css +++ b/src/includes/css/blocks/media-grid.css @@ -4,7 +4,7 @@ display: grid; grid-template-columns: repeat(var(--column-count), minmax(0, 1fr)); - grid-gap: var(--spacing-0\.5); + grid-gap: var(--spacing-2); li { border: 1px solid var(--color-shadow); @@ -15,6 +15,7 @@ color: var(--color-white); picture { + border-radius: 0; height: 100%; img { @@ -62,7 +63,7 @@ .meta-text { transition-delay: 0.05s; - transform: translateY(var(--spacing-1)); + transform: translateY(var(--spacing-4)); } } } diff --git a/src/includes/css/blocks/pill.css b/src/includes/css/blocks/pill.css index e549622..32634c0 100644 --- a/src/includes/css/blocks/pill.css +++ b/src/includes/css/blocks/pill.css @@ -7,7 +7,7 @@ font-family: var(--font-family-body); font-weight: var(--font-weight-body-regular); line-height: 0.8rem; - padding-inline: var(--spacing-0\.5); - padding-block: var(--spacing-0\.25); - border-radius: var(--spacing-0\.5); + padding-inline: var(--spacing-2); + padding-block: var(--spacing-1); + border-radius: var(--spacing-2); } diff --git a/src/includes/css/compositions/cluster.css b/src/includes/css/compositions/cluster.css index a5258ac..b9d0205 100644 --- a/src/includes/css/compositions/cluster.css +++ b/src/includes/css/compositions/cluster.css @@ -6,10 +6,10 @@ spacing, regardless of their size */ .cluster { - --gap: var(--spacing-1); + --gap: var(--spacing-2); display: flex; flex-wrap: wrap; - gap: var(--gap, --spacing-1); + gap: var(--gap, --spacing-2); justify-content: flex-start; align-items: center; } diff --git a/src/includes/css/compositions/repel.css b/src/includes/css/compositions/repel.css index b5ad18e..f332549 100644 --- a/src/includes/css/compositions/repel.css +++ b/src/includes/css/compositions/repel.css @@ -8,7 +8,7 @@ there is space in the viewport and stacks on small viewports flex-wrap: wrap; justify-content: space-between; align-items: center; - gap: var(--spacing-0\.5); + gap: var(--spacing-2); } .repel[data-nowrap] { diff --git a/src/includes/css/global/global-styles.css b/src/includes/css/global/global-styles.css index 1756ccc..3e2b1fd 100644 --- a/src/includes/css/global/global-styles.css +++ b/src/includes/css/global/global-styles.css @@ -11,6 +11,8 @@ html { scrollbar-color: var(--color-primary) var(--color-surface); + scrollbar-gutter: stable; + scrollbar-width: thin; } body { @@ -103,9 +105,9 @@ blockquote { border-inline-start: 2px solid var(--color-primary); margin-inline-start: 0; margin-inline-end: 0; - padding: var(--spacing-1); + padding: var(--spacing-4); background-color: var(--color-surface); - border-radius: var(--spacing-0\.5); + border-radius: var(--spacing-2); } blockquote > * + * { @@ -138,7 +140,7 @@ code { :not(pre) > code { background-color: var(--color-surface); - border-radius: var(--spacing-0\.25); + border-radius: var(--spacing-1); padding-block: 0.15em; padding-inline: 0.25em; } @@ -153,7 +155,7 @@ picture { flex-direction: column; align-items: center; margin-inline: 0; - border-radius: var(--spacing-0\.5); + border-radius: var(--spacing-2); overflow: hidden; } @@ -172,20 +174,20 @@ picture img { aside { background-color: var(--color-surface); - padding: var(--spacing-1); - border-radius: var(--spacing-0\.5); - margin-inline: calc(-1 * var(--spacing-1)); + padding: var(--spacing-4); + border-radius: var(--spacing-2); + margin-inline: calc(-1 * var(--spacing-4)); } mark { background-color: var(--color-border); color: var(--color-text); - padding-block: var(--spacing-0\.25); + padding-block: var(--spacing-1); } [href="#main"] { background-color: var(--color-background); - margin-inline: var(--spacing-1); + margin-inline: var(--spacing-4); } [href="#main"]:not(:focus) { @@ -202,7 +204,7 @@ mark { table { border: 1px solid var(--color-border); - border-radius: var(--spacing-0\.5); + border-radius: var(--spacing-2); border-spacing: 0; overflow: hidden; width: 100%; @@ -218,8 +220,8 @@ table thead th { table th, table td { - padding-block: var(--spacing-0\.5); - padding-inline: var(--spacing-1); + padding-block: var(--spacing-2); + padding-inline: var(--spacing-4); } table tbody tr:first-child td { @@ -230,6 +232,10 @@ table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--color-border); } +dd { + margin-inline-start: 0; +} + /* * Snippet from: * https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025#transition-animation-for-%3Cdetails%3E diff --git a/src/includes/css/global/lilypad.css b/src/includes/css/global/lilypad.css index 73c3c02..f365180 100644 --- a/src/includes/css/global/lilypad.css +++ b/src/includes/css/global/lilypad.css @@ -1 +1 @@ -@font-face{font-display:swap;font-family:Atikinson Hyperlegible Next;font-stretch:75% 125%;font-style:normal;font-weight:125 950;src:local("Atikinson Hyperlegible Next"),local("AtikinsonHyperlegibleNext-Regular"),url(/assets/fonts/hyperlegible/AtkinsonHyperlegibleNextVF-Variable.woff2) format("woff2")}@font-face{font-display:swap;font-family:Atikinson Hyperlegible Mono;font-stretch:75% 125%;font-style:normal;font-weight:125 950;src:local("Atikinson Hyperlegible Mono"),local("AtikinsonHyperlegibleMono-Regular"),url(/assets/fonts/hyperlegible-mono/AtkinsonHyperlegibleMonoVF-Variable.woff2) format("woff2")}:root{--font-family-display:Atikinson Hyperlegible Next,ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-family-body:Atikinson Hyperlegible Next,ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-family-monospace:Atikinson Hyperlegible Mono,ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;--color-primary:oklch(0.6 0.1025 212.16);--color-secondary:oklch(0.61 0.2232 31.48);--color-background:oklch(0.98 0 0);--color-surface:oklch(0.96 0.0078 207.9);--color-border:oklch(0.87 0.045077 207.8465);--color-text:oklch(0.15 0 0);--color-fadeText:oklch(0.45 0.0214 207.84);--color-shadow:oklch(0.39 0.0688 212.35)}.text-primary{color:var(--color-primary)}.bg-primary{background-color:var(--color-primary)}.text-secondary{color:var(--color-secondary)}.bg-secondary{background-color:var(--color-secondary)}.text-background{color:var(--color-background)}.bg-background{background-color:var(--color-background)}.text-surface{color:var(--color-surface)}.bg-surface{background-color:var(--color-surface)}.text-border{color:var(--color-border)}.bg-border{background-color:var(--color-border)}.text-text{color:var(--color-text)}.bg-text{background-color:var(--color-text)}.text-fadeText{color:var(--color-fadeText)}.bg-fadeText{background-color:var(--color-fadeText)}.text-shadow{color:var(--color-shadow)}.bg-shadow{background-color:var(--color-shadow)}@media (prefers-color-scheme:dark){:root{--color-primary:oklch(0.57 0.0991 213.4);--color-secondary:oklch(0.55 0.1982 31.52);--color-background:oklch(0.2 0 0);--color-surface:oklch(0.26 0.0106 233.21);--color-border:oklch(0.27 0.0238 245.26);--color-text:oklch(0.98 0 0);--color-fadeText:oklch(0.78 0.018 207.85);--color-shadow:oklch(0.39 0.0688 212.35)}}:root{--spacing-0:0px;--spacing-1:4px;--spacing-2:8px;--spacing-3:16px;--spacing-4:24px;--spacing-5:32px;--spacing-6:48px;--spacing-7:64px;--spacing-8:80px}.m-0{margin:var(--spacing-0)}.my-0{margin-block-end:var(--spacing-0);margin-block-start:var(--spacing-0)}.mx-0{margin-inline-end:var(--spacing-0)}.ml-0,.mr-0,.mx-0{margin-inline-start:var(--spacing-0)}.mt-0{margin-block-start:var(--spacing-0)}.mb-0{margin-block-end:var(--spacing-0)}.p-0{padding:var(--spacing-0)}.py-0{padding-block-end:var(--spacing-0);padding-block-start:var(--spacing-0)}.px-0{padding-inline-end:var(--spacing-0)}.pl-0,.pr-0,.px-0{padding-inline-start:var(--spacing-0)}.pt-0{padding-block-start:var(--spacing-0)}.pb-0{padding-block-end:var(--spacing-0)}.w-0{width:var(--spacing-0)}.h-0,.size-0{height:var(--spacing-0)}.size-0{width:var(--spacing-0)}.radius-0{border-radius:var(--spacing-0)}.gap-0{gap:var(--spacing-0)}.row-gap-0{row-gap:var(--spacing-0)}.column-gap-0{column-gap:var(--spacing-0)}.flow-space-0{--flow-space:var(--spacing-0)}.m-1{margin:var(--spacing-1)}.my-1{margin-block-end:var(--spacing-1);margin-block-start:var(--spacing-1)}.mx-1{margin-inline-end:var(--spacing-1)}.ml-1,.mr-1,.mx-1{margin-inline-start:var(--spacing-1)}.mt-1{margin-block-start:var(--spacing-1)}.mb-1{margin-block-end:var(--spacing-1)}.p-1{padding:var(--spacing-1)}.py-1{padding-block-end:var(--spacing-1);padding-block-start:var(--spacing-1)}.px-1{padding-inline-end:var(--spacing-1)}.pl-1,.pr-1,.px-1{padding-inline-start:var(--spacing-1)}.pt-1{padding-block-start:var(--spacing-1)}.pb-1{padding-block-end:var(--spacing-1)}.w-1{width:var(--spacing-1)}.h-1,.size-1{height:var(--spacing-1)}.size-1{width:var(--spacing-1)}.radius-1{border-radius:var(--spacing-1)}.gap-1{gap:var(--spacing-1)}.row-gap-1{row-gap:var(--spacing-1)}.column-gap-1{column-gap:var(--spacing-1)}.flow-space-1{--flow-space:var(--spacing-1)}.m-2{margin:var(--spacing-2)}.my-2{margin-block-end:var(--spacing-2);margin-block-start:var(--spacing-2)}.mx-2{margin-inline-end:var(--spacing-2)}.ml-2,.mr-2,.mx-2{margin-inline-start:var(--spacing-2)}.mt-2{margin-block-start:var(--spacing-2)}.mb-2{margin-block-end:var(--spacing-2)}.p-2{padding:var(--spacing-2)}.py-2{padding-block-end:var(--spacing-2);padding-block-start:var(--spacing-2)}.px-2{padding-inline-end:var(--spacing-2)}.pl-2,.pr-2,.px-2{padding-inline-start:var(--spacing-2)}.pt-2{padding-block-start:var(--spacing-2)}.pb-2{padding-block-end:var(--spacing-2)}.w-2{width:var(--spacing-2)}.h-2,.size-2{height:var(--spacing-2)}.size-2{width:var(--spacing-2)}.radius-2{border-radius:var(--spacing-2)}.gap-2{gap:var(--spacing-2)}.row-gap-2{row-gap:var(--spacing-2)}.column-gap-2{column-gap:var(--spacing-2)}.flow-space-2{--flow-space:var(--spacing-2)}.m-3{margin:var(--spacing-3)}.my-3{margin-block-end:var(--spacing-3);margin-block-start:var(--spacing-3)}.mx-3{margin-inline-end:var(--spacing-3)}.ml-3,.mr-3,.mx-3{margin-inline-start:var(--spacing-3)}.mt-3{margin-block-start:var(--spacing-3)}.mb-3{margin-block-end:var(--spacing-3)}.p-3{padding:var(--spacing-3)}.py-3{padding-block-end:var(--spacing-3);padding-block-start:var(--spacing-3)}.px-3{padding-inline-end:var(--spacing-3)}.pl-3,.pr-3,.px-3{padding-inline-start:var(--spacing-3)}.pt-3{padding-block-start:var(--spacing-3)}.pb-3{padding-block-end:var(--spacing-3)}.w-3{width:var(--spacing-3)}.h-3,.size-3{height:var(--spacing-3)}.size-3{width:var(--spacing-3)}.radius-3{border-radius:var(--spacing-3)}.gap-3{gap:var(--spacing-3)}.row-gap-3{row-gap:var(--spacing-3)}.column-gap-3{column-gap:var(--spacing-3)}.flow-space-3{--flow-space:var(--spacing-3)}.m-4{margin:var(--spacing-4)}.my-4{margin-block-end:var(--spacing-4);margin-block-start:var(--spacing-4)}.mx-4{margin-inline-end:var(--spacing-4)}.ml-4,.mr-4,.mx-4{margin-inline-start:var(--spacing-4)}.mt-4{margin-block-start:var(--spacing-4)}.mb-4{margin-block-end:var(--spacing-4)}.p-4{padding:var(--spacing-4)}.py-4{padding-block-end:var(--spacing-4);padding-block-start:var(--spacing-4)}.px-4{padding-inline-end:var(--spacing-4)}.pl-4,.pr-4,.px-4{padding-inline-start:var(--spacing-4)}.pt-4{padding-block-start:var(--spacing-4)}.pb-4{padding-block-end:var(--spacing-4)}.w-4{width:var(--spacing-4)}.h-4,.size-4{height:var(--spacing-4)}.size-4{width:var(--spacing-4)}.radius-4{border-radius:var(--spacing-4)}.gap-4{gap:var(--spacing-4)}.row-gap-4{row-gap:var(--spacing-4)}.column-gap-4{column-gap:var(--spacing-4)}.flow-space-4{--flow-space:var(--spacing-4)}.m-5{margin:var(--spacing-5)}.my-5{margin-block-end:var(--spacing-5);margin-block-start:var(--spacing-5)}.mx-5{margin-inline-end:var(--spacing-5)}.ml-5,.mr-5,.mx-5{margin-inline-start:var(--spacing-5)}.mt-5{margin-block-start:var(--spacing-5)}.mb-5{margin-block-end:var(--spacing-5)}.p-5{padding:var(--spacing-5)}.py-5{padding-block-end:var(--spacing-5);padding-block-start:var(--spacing-5)}.px-5{padding-inline-end:var(--spacing-5)}.pl-5,.pr-5,.px-5{padding-inline-start:var(--spacing-5)}.pt-5{padding-block-start:var(--spacing-5)}.pb-5{padding-block-end:var(--spacing-5)}.w-5{width:var(--spacing-5)}.h-5,.size-5{height:var(--spacing-5)}.size-5{width:var(--spacing-5)}.radius-5{border-radius:var(--spacing-5)}.gap-5{gap:var(--spacing-5)}.row-gap-5{row-gap:var(--spacing-5)}.column-gap-5{column-gap:var(--spacing-5)}.flow-space-5{--flow-space:var(--spacing-5)}.m-6{margin:var(--spacing-6)}.my-6{margin-block-end:var(--spacing-6);margin-block-start:var(--spacing-6)}.mx-6{margin-inline-end:var(--spacing-6)}.ml-6,.mr-6,.mx-6{margin-inline-start:var(--spacing-6)}.mt-6{margin-block-start:var(--spacing-6)}.mb-6{margin-block-end:var(--spacing-6)}.p-6{padding:var(--spacing-6)}.py-6{padding-block-end:var(--spacing-6);padding-block-start:var(--spacing-6)}.px-6{padding-inline-end:var(--spacing-6)}.pl-6,.pr-6,.px-6{padding-inline-start:var(--spacing-6)}.pt-6{padding-block-start:var(--spacing-6)}.pb-6{padding-block-end:var(--spacing-6)}.w-6{width:var(--spacing-6)}.h-6,.size-6{height:var(--spacing-6)}.size-6{width:var(--spacing-6)}.radius-6{border-radius:var(--spacing-6)}.gap-6{gap:var(--spacing-6)}.row-gap-6{row-gap:var(--spacing-6)}.column-gap-6{column-gap:var(--spacing-6)}.flow-space-6{--flow-space:var(--spacing-6)}.m-7{margin:var(--spacing-7)}.my-7{margin-block-end:var(--spacing-7);margin-block-start:var(--spacing-7)}.mx-7{margin-inline-end:var(--spacing-7)}.ml-7,.mr-7,.mx-7{margin-inline-start:var(--spacing-7)}.mt-7{margin-block-start:var(--spacing-7)}.mb-7{margin-block-end:var(--spacing-7)}.p-7{padding:var(--spacing-7)}.py-7{padding-block-end:var(--spacing-7);padding-block-start:var(--spacing-7)}.px-7{padding-inline-end:var(--spacing-7)}.pl-7,.pr-7,.px-7{padding-inline-start:var(--spacing-7)}.pt-7{padding-block-start:var(--spacing-7)}.pb-7{padding-block-end:var(--spacing-7)}.w-7{width:var(--spacing-7)}.h-7,.size-7{height:var(--spacing-7)}.size-7{width:var(--spacing-7)}.radius-7{border-radius:var(--spacing-7)}.gap-7{gap:var(--spacing-7)}.row-gap-7{row-gap:var(--spacing-7)}.column-gap-7{column-gap:var(--spacing-7)}.flow-space-7{--flow-space:var(--spacing-7)}.m-8{margin:var(--spacing-8)}.my-8{margin-block-end:var(--spacing-8);margin-block-start:var(--spacing-8)}.mx-8{margin-inline-end:var(--spacing-8)}.ml-8,.mr-8,.mx-8{margin-inline-start:var(--spacing-8)}.mt-8{margin-block-start:var(--spacing-8)}.mb-8{margin-block-end:var(--spacing-8)}.p-8{padding:var(--spacing-8)}.py-8{padding-block-end:var(--spacing-8);padding-block-start:var(--spacing-8)}.px-8{padding-inline-end:var(--spacing-8)}.pl-8,.pr-8,.px-8{padding-inline-start:var(--spacing-8)}.pt-8{padding-block-start:var(--spacing-8)}.pb-8{padding-block-end:var(--spacing-8)}.w-8{width:var(--spacing-8)}.h-8,.size-8{height:var(--spacing-8)}.size-8{width:var(--spacing-8)}.radius-8{border-radius:var(--spacing-8)}.gap-8{gap:var(--spacing-8)}.row-gap-8{row-gap:var(--spacing-8)}.column-gap-8{column-gap:var(--spacing-8)}.flow-space-8{--flow-space:var(--spacing-8)}.w-full{width:100%}.h-full{height:100%}.w-fit{width:fit-content}.w-max{width:max-content}.w-min{width:min-content}.flex{display:flex}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flow>*+*{margin-block-start:var(--flow-space,1em)}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.list-decimal{list-style-type:decimal}.visually-hidden{border:0;clip:rect(0 0 0 0);height:0;margin:0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px} +@font-face{font-display:swap;font-family:Atikinson Hyperlegible Next;font-stretch:75% 125%;font-style:normal;font-weight:125 950;src:local("Atikinson Hyperlegible Next"),local("AtikinsonHyperlegibleNext-Regular"),url(/assets/fonts/hyperlegible/AtkinsonHyperlegibleNextVF-Variable.woff2) format("woff2")}@font-face{font-display:swap;font-family:Atikinson Hyperlegible Mono;font-stretch:75% 125%;font-style:normal;font-weight:125 950;src:local("Atikinson Hyperlegible Mono"),local("AtikinsonHyperlegibleMono-Regular"),url(/assets/fonts/hyperlegible-mono/AtkinsonHyperlegibleMonoVF-Variable.woff2) format("woff2")}:root{--font-family-display:Atikinson Hyperlegible Next,ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-family-body:Atikinson Hyperlegible Next,ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-family-monospace:Atikinson Hyperlegible Mono,ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;--color-primary:oklch(0.6 0.1025 212.16);--color-secondary:oklch(0.61 0.2232 31.48);--color-background:oklch(0.98 0 0);--color-surface:oklch(0.96 0.0078 207.9);--color-border:oklch(0.87 0.045077 207.8465);--color-text:oklch(0.15 0 0);--color-fadeText:oklch(0.45 0.0214 207.84);--color-shadow:oklch(0.39 0.0688 212.35)}.text-primary{color:var(--color-primary)}.bg-primary{background-color:var(--color-primary)}.text-secondary{color:var(--color-secondary)}.bg-secondary{background-color:var(--color-secondary)}.text-background{color:var(--color-background)}.bg-background{background-color:var(--color-background)}.text-surface{color:var(--color-surface)}.bg-surface{background-color:var(--color-surface)}.text-border{color:var(--color-border)}.bg-border{background-color:var(--color-border)}.text-text{color:var(--color-text)}.bg-text{background-color:var(--color-text)}.text-fadeText{color:var(--color-fadeText)}.bg-fadeText{background-color:var(--color-fadeText)}.text-shadow{color:var(--color-shadow)}.bg-shadow{background-color:var(--color-shadow)}@media (prefers-color-scheme:dark){:root{--color-primary:oklch(0.57 0.0991 213.4);--color-secondary:oklch(0.55 0.1982 31.52);--color-background:oklch(0.2 0 0);--color-surface:oklch(0.26 0.0106 233.21);--color-border:oklch(0.27 0.0238 245.26);--color-text:oklch(0.98 0 0);--color-fadeText:oklch(0.78 0.018 207.85);--color-shadow:oklch(0.39 0.0688 212.35)}}:root{--spacing-0:0px;--spacing-1:4px;--spacing-2:8px;--spacing-3:12px;--spacing-4:16px;--spacing-5:20px;--spacing-6:24px;--spacing-7:28px;--spacing-8:32px;--spacing-9:36px;--spacing-10:40px}.m-0{margin:var(--spacing-0)}.my-0{margin-block-end:var(--spacing-0);margin-block-start:var(--spacing-0)}.mx-0{margin-inline-end:var(--spacing-0)}.ml-0,.mr-0,.mx-0{margin-inline-start:var(--spacing-0)}.mt-0{margin-block-start:var(--spacing-0)}.mb-0{margin-block-end:var(--spacing-0)}.p-0{padding:var(--spacing-0)}.py-0{padding-block-end:var(--spacing-0);padding-block-start:var(--spacing-0)}.px-0{padding-inline-end:var(--spacing-0)}.pl-0,.pr-0,.px-0{padding-inline-start:var(--spacing-0)}.pt-0{padding-block-start:var(--spacing-0)}.pb-0{padding-block-end:var(--spacing-0)}.w-0{width:var(--spacing-0)}.h-0,.size-0{height:var(--spacing-0)}.size-0{width:var(--spacing-0)}.radius-0{border-radius:var(--spacing-0)}.gap-0{gap:var(--spacing-0)}.row-gap-0{row-gap:var(--spacing-0)}.column-gap-0{column-gap:var(--spacing-0)}.flow-space-0{--flow-space:var(--spacing-0)}.m-1{margin:var(--spacing-1)}.my-1{margin-block-end:var(--spacing-1);margin-block-start:var(--spacing-1)}.mx-1{margin-inline-end:var(--spacing-1)}.ml-1,.mr-1,.mx-1{margin-inline-start:var(--spacing-1)}.mt-1{margin-block-start:var(--spacing-1)}.mb-1{margin-block-end:var(--spacing-1)}.p-1{padding:var(--spacing-1)}.py-1{padding-block-end:var(--spacing-1);padding-block-start:var(--spacing-1)}.px-1{padding-inline-end:var(--spacing-1)}.pl-1,.pr-1,.px-1{padding-inline-start:var(--spacing-1)}.pt-1{padding-block-start:var(--spacing-1)}.pb-1{padding-block-end:var(--spacing-1)}.w-1{width:var(--spacing-1)}.h-1,.size-1{height:var(--spacing-1)}.size-1{width:var(--spacing-1)}.radius-1{border-radius:var(--spacing-1)}.gap-1{gap:var(--spacing-1)}.row-gap-1{row-gap:var(--spacing-1)}.column-gap-1{column-gap:var(--spacing-1)}.flow-space-1{--flow-space:var(--spacing-1)}.m-2{margin:var(--spacing-2)}.my-2{margin-block-end:var(--spacing-2);margin-block-start:var(--spacing-2)}.mx-2{margin-inline-end:var(--spacing-2)}.ml-2,.mr-2,.mx-2{margin-inline-start:var(--spacing-2)}.mt-2{margin-block-start:var(--spacing-2)}.mb-2{margin-block-end:var(--spacing-2)}.p-2{padding:var(--spacing-2)}.py-2{padding-block-end:var(--spacing-2);padding-block-start:var(--spacing-2)}.px-2{padding-inline-end:var(--spacing-2)}.pl-2,.pr-2,.px-2{padding-inline-start:var(--spacing-2)}.pt-2{padding-block-start:var(--spacing-2)}.pb-2{padding-block-end:var(--spacing-2)}.w-2{width:var(--spacing-2)}.h-2,.size-2{height:var(--spacing-2)}.size-2{width:var(--spacing-2)}.radius-2{border-radius:var(--spacing-2)}.gap-2{gap:var(--spacing-2)}.row-gap-2{row-gap:var(--spacing-2)}.column-gap-2{column-gap:var(--spacing-2)}.flow-space-2{--flow-space:var(--spacing-2)}.m-3{margin:var(--spacing-3)}.my-3{margin-block-end:var(--spacing-3);margin-block-start:var(--spacing-3)}.mx-3{margin-inline-end:var(--spacing-3)}.ml-3,.mr-3,.mx-3{margin-inline-start:var(--spacing-3)}.mt-3{margin-block-start:var(--spacing-3)}.mb-3{margin-block-end:var(--spacing-3)}.p-3{padding:var(--spacing-3)}.py-3{padding-block-end:var(--spacing-3);padding-block-start:var(--spacing-3)}.px-3{padding-inline-end:var(--spacing-3)}.pl-3,.pr-3,.px-3{padding-inline-start:var(--spacing-3)}.pt-3{padding-block-start:var(--spacing-3)}.pb-3{padding-block-end:var(--spacing-3)}.w-3{width:var(--spacing-3)}.h-3,.size-3{height:var(--spacing-3)}.size-3{width:var(--spacing-3)}.radius-3{border-radius:var(--spacing-3)}.gap-3{gap:var(--spacing-3)}.row-gap-3{row-gap:var(--spacing-3)}.column-gap-3{column-gap:var(--spacing-3)}.flow-space-3{--flow-space:var(--spacing-3)}.m-4{margin:var(--spacing-4)}.my-4{margin-block-end:var(--spacing-4);margin-block-start:var(--spacing-4)}.mx-4{margin-inline-end:var(--spacing-4)}.ml-4,.mr-4,.mx-4{margin-inline-start:var(--spacing-4)}.mt-4{margin-block-start:var(--spacing-4)}.mb-4{margin-block-end:var(--spacing-4)}.p-4{padding:var(--spacing-4)}.py-4{padding-block-end:var(--spacing-4);padding-block-start:var(--spacing-4)}.px-4{padding-inline-end:var(--spacing-4)}.pl-4,.pr-4,.px-4{padding-inline-start:var(--spacing-4)}.pt-4{padding-block-start:var(--spacing-4)}.pb-4{padding-block-end:var(--spacing-4)}.w-4{width:var(--spacing-4)}.h-4,.size-4{height:var(--spacing-4)}.size-4{width:var(--spacing-4)}.radius-4{border-radius:var(--spacing-4)}.gap-4{gap:var(--spacing-4)}.row-gap-4{row-gap:var(--spacing-4)}.column-gap-4{column-gap:var(--spacing-4)}.flow-space-4{--flow-space:var(--spacing-4)}.m-5{margin:var(--spacing-5)}.my-5{margin-block-end:var(--spacing-5);margin-block-start:var(--spacing-5)}.mx-5{margin-inline-end:var(--spacing-5)}.ml-5,.mr-5,.mx-5{margin-inline-start:var(--spacing-5)}.mt-5{margin-block-start:var(--spacing-5)}.mb-5{margin-block-end:var(--spacing-5)}.p-5{padding:var(--spacing-5)}.py-5{padding-block-end:var(--spacing-5);padding-block-start:var(--spacing-5)}.px-5{padding-inline-end:var(--spacing-5)}.pl-5,.pr-5,.px-5{padding-inline-start:var(--spacing-5)}.pt-5{padding-block-start:var(--spacing-5)}.pb-5{padding-block-end:var(--spacing-5)}.w-5{width:var(--spacing-5)}.h-5,.size-5{height:var(--spacing-5)}.size-5{width:var(--spacing-5)}.radius-5{border-radius:var(--spacing-5)}.gap-5{gap:var(--spacing-5)}.row-gap-5{row-gap:var(--spacing-5)}.column-gap-5{column-gap:var(--spacing-5)}.flow-space-5{--flow-space:var(--spacing-5)}.m-6{margin:var(--spacing-6)}.my-6{margin-block-end:var(--spacing-6);margin-block-start:var(--spacing-6)}.mx-6{margin-inline-end:var(--spacing-6)}.ml-6,.mr-6,.mx-6{margin-inline-start:var(--spacing-6)}.mt-6{margin-block-start:var(--spacing-6)}.mb-6{margin-block-end:var(--spacing-6)}.p-6{padding:var(--spacing-6)}.py-6{padding-block-end:var(--spacing-6);padding-block-start:var(--spacing-6)}.px-6{padding-inline-end:var(--spacing-6)}.pl-6,.pr-6,.px-6{padding-inline-start:var(--spacing-6)}.pt-6{padding-block-start:var(--spacing-6)}.pb-6{padding-block-end:var(--spacing-6)}.w-6{width:var(--spacing-6)}.h-6,.size-6{height:var(--spacing-6)}.size-6{width:var(--spacing-6)}.radius-6{border-radius:var(--spacing-6)}.gap-6{gap:var(--spacing-6)}.row-gap-6{row-gap:var(--spacing-6)}.column-gap-6{column-gap:var(--spacing-6)}.flow-space-6{--flow-space:var(--spacing-6)}.m-7{margin:var(--spacing-7)}.my-7{margin-block-end:var(--spacing-7);margin-block-start:var(--spacing-7)}.mx-7{margin-inline-end:var(--spacing-7)}.ml-7,.mr-7,.mx-7{margin-inline-start:var(--spacing-7)}.mt-7{margin-block-start:var(--spacing-7)}.mb-7{margin-block-end:var(--spacing-7)}.p-7{padding:var(--spacing-7)}.py-7{padding-block-end:var(--spacing-7);padding-block-start:var(--spacing-7)}.px-7{padding-inline-end:var(--spacing-7)}.pl-7,.pr-7,.px-7{padding-inline-start:var(--spacing-7)}.pt-7{padding-block-start:var(--spacing-7)}.pb-7{padding-block-end:var(--spacing-7)}.w-7{width:var(--spacing-7)}.h-7,.size-7{height:var(--spacing-7)}.size-7{width:var(--spacing-7)}.radius-7{border-radius:var(--spacing-7)}.gap-7{gap:var(--spacing-7)}.row-gap-7{row-gap:var(--spacing-7)}.column-gap-7{column-gap:var(--spacing-7)}.flow-space-7{--flow-space:var(--spacing-7)}.m-8{margin:var(--spacing-8)}.my-8{margin-block-end:var(--spacing-8);margin-block-start:var(--spacing-8)}.mx-8{margin-inline-end:var(--spacing-8)}.ml-8,.mr-8,.mx-8{margin-inline-start:var(--spacing-8)}.mt-8{margin-block-start:var(--spacing-8)}.mb-8{margin-block-end:var(--spacing-8)}.p-8{padding:var(--spacing-8)}.py-8{padding-block-end:var(--spacing-8);padding-block-start:var(--spacing-8)}.px-8{padding-inline-end:var(--spacing-8)}.pl-8,.pr-8,.px-8{padding-inline-start:var(--spacing-8)}.pt-8{padding-block-start:var(--spacing-8)}.pb-8{padding-block-end:var(--spacing-8)}.w-8{width:var(--spacing-8)}.h-8,.size-8{height:var(--spacing-8)}.size-8{width:var(--spacing-8)}.radius-8{border-radius:var(--spacing-8)}.gap-8{gap:var(--spacing-8)}.row-gap-8{row-gap:var(--spacing-8)}.column-gap-8{column-gap:var(--spacing-8)}.flow-space-8{--flow-space:var(--spacing-8)}.m-9{margin:var(--spacing-9)}.my-9{margin-block-end:var(--spacing-9);margin-block-start:var(--spacing-9)}.mx-9{margin-inline-end:var(--spacing-9)}.ml-9,.mr-9,.mx-9{margin-inline-start:var(--spacing-9)}.mt-9{margin-block-start:var(--spacing-9)}.mb-9{margin-block-end:var(--spacing-9)}.p-9{padding:var(--spacing-9)}.py-9{padding-block-end:var(--spacing-9);padding-block-start:var(--spacing-9)}.px-9{padding-inline-end:var(--spacing-9)}.pl-9,.pr-9,.px-9{padding-inline-start:var(--spacing-9)}.pt-9{padding-block-start:var(--spacing-9)}.pb-9{padding-block-end:var(--spacing-9)}.w-9{width:var(--spacing-9)}.h-9,.size-9{height:var(--spacing-9)}.size-9{width:var(--spacing-9)}.radius-9{border-radius:var(--spacing-9)}.gap-9{gap:var(--spacing-9)}.row-gap-9{row-gap:var(--spacing-9)}.column-gap-9{column-gap:var(--spacing-9)}.flow-space-9{--flow-space:var(--spacing-9)}.m-10{margin:var(--spacing-10)}.my-10{margin-block-end:var(--spacing-10);margin-block-start:var(--spacing-10)}.mx-10{margin-inline-end:var(--spacing-10)}.ml-10,.mr-10,.mx-10{margin-inline-start:var(--spacing-10)}.mt-10{margin-block-start:var(--spacing-10)}.mb-10{margin-block-end:var(--spacing-10)}.p-10{padding:var(--spacing-10)}.py-10{padding-block-end:var(--spacing-10);padding-block-start:var(--spacing-10)}.px-10{padding-inline-end:var(--spacing-10)}.pl-10,.pr-10,.px-10{padding-inline-start:var(--spacing-10)}.pt-10{padding-block-start:var(--spacing-10)}.pb-10{padding-block-end:var(--spacing-10)}.w-10{width:var(--spacing-10)}.h-10,.size-10{height:var(--spacing-10)}.size-10{width:var(--spacing-10)}.radius-10{border-radius:var(--spacing-10)}.gap-10{gap:var(--spacing-10)}.row-gap-10{row-gap:var(--spacing-10)}.column-gap-10{column-gap:var(--spacing-10)}.flow-space-10{--flow-space:var(--spacing-10)}.w-full{width:100%}.h-full{height:100%}.w-fit{width:fit-content}.w-max{width:max-content}.w-min{width:min-content}.flex{display:flex}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flow>*+*{margin-block-start:var(--flow-space,1em)}.flow-space-default{--flow-space:1em}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.list-decimal{list-style-type:decimal}.visually-hidden{border:0;clip:rect(0 0 0 0);height:0;margin:0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px} diff --git a/src/includes/css/utilities/image.css b/src/includes/css/utilities/image.css index cde6df8..c740465 100644 --- a/src/includes/css/utilities/image.css +++ b/src/includes/css/utilities/image.css @@ -1,11 +1,11 @@ .image-shrink { max-width: 50%; - border-radius: var(--spacing-0\.5); + border-radius: var(--spacing-2); overflow: hidden; } .image-tiny { max-width: 25%; - border-radius: var(--spacing-0\.5); + border-radius: var(--spacing-2); overflow: hidden; } diff --git a/src/includes/layouts/base.html b/src/includes/layouts/base.html index 66e4e61..07cd978 100644 --- a/src/includes/layouts/base.html +++ b/src/includes/layouts/base.html @@ -22,15 +22,15 @@ {% endif %} {% css %} - {% include "css/styles.css" %} - {% endcss %} - - - - {% include "partials/header.html" %} -