From 1166807df37ce59e32fa7aa27aab9aafecace86a Mon Sep 17 00:00:00 2001 From: Devin Haska Date: Thu, 29 May 2025 22:05:22 -0700 Subject: [PATCH] feat: update all CSS to work with lilypad.css --- src/content/posts/2024-03-02-version-3.md | 4 +- src/includes/css/blocks/button.css | 6 +- src/includes/css/blocks/card.css | 6 +- src/includes/css/blocks/media-display.css | 40 +++----- src/includes/css/blocks/media-grid.css | 5 +- src/includes/css/blocks/pill.css | 6 +- src/includes/css/compositions/cluster.css | 4 +- src/includes/css/compositions/repel.css | 2 +- src/includes/css/global/global-styles.css | 30 +++--- src/includes/css/global/lilypad.css | 2 +- src/includes/css/utilities/image.css | 4 +- src/includes/layouts/base.html | 22 ++--- src/includes/layouts/book.html | 80 +++++++-------- src/includes/layouts/game.html | 88 ++++++++--------- src/includes/layouts/movie.html | 113 ++++++++++------------ src/includes/layouts/post.html | 6 +- src/includes/layouts/show.html | 99 ++++++++----------- src/includes/macros/date.njk | 2 +- src/includes/macros/media-grid.njk | 4 +- src/includes/macros/posts.njk | 2 +- src/includes/macros/utils.njk | 8 ++ src/includes/partials/footer.html | 6 +- src/includes/partials/header.html | 4 +- src/index.html | 12 +-- src/pages/books/tag.html | 4 +- src/pages/contact.html | 4 +- src/pages/games/tag.html | 4 +- src/pages/podroll.html | 6 +- src/pages/watching/movies/tag.html | 4 +- src/pages/watching/shows/tag.html | 4 +- 30 files changed, 275 insertions(+), 306 deletions(-) diff --git a/src/content/posts/2024-03-02-version-3.md b/src/content/posts/2024-03-02-version-3.md index 2358900..232b36c 100644 --- a/src/content/posts/2024-03-02-version-3.md +++ b/src/content/posts/2024-03-02-version-3.md @@ -296,7 +296,7 @@ module.exports = { linkTitle: "View book details", eleventyComputed: { tertiary: (data) => - `

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" %} -
- {{ content | safe }} -
- {% include "partials/footer.html" %} - + {% include "css/styles.css" %} + {% endcss %} + + + + {% include "partials/header.html" %} +
+ {{ content | safe }} +
+ {% include "partials/footer.html" %} + diff --git a/src/includes/layouts/book.html b/src/includes/layouts/book.html index f48f9d9..24c8949 100644 --- a/src/includes/layouts/book.html +++ b/src/includes/layouts/book.html @@ -3,47 +3,41 @@ layout: "layouts/base" --- {% from "macros/date.njk" import format %} -{% from "macros/utils.njk" import stars %} +{% from "macros/utils.njk" import stars, spoilerWarning %} {% from "macros/tags.njk" import tagList %} -
- {{ format(page.date) }} -

{{ title }}

- {% if pullquote %}

{{ pullquote }}

{% endif %} -
-{% if hasSpoilers %} -
- {% include "svgs/triangle-exclamation.svg" %} - Warning! - The following may contain spoilers! -
-{% endif %} -{% if content %} -
- {{ content | safe }} -
-{% endif %} -
- -
-{{ tagList(tags | filter("book") , "/books") }} +
+
+ {{ format(page.date) }} +

{{ title }}

+ {% if pullquote %}

{{ pullquote }}

{% endif %} +
+ {% if hasSpoilers %} + {{ spoilerWarning() }} + {% endif %} + {% if content %} +
+ {{ content | safe }} +
+ {% endif %} +
+
+ +
+
+

{{ title }}

+ {% if subtitle %}

{{ subtitle }}

{% endif %} + {% if rating %}{{ stars(rating) }}{% endif %} +
+ {% if author %} +
Author
+
{{ author }}
+ {% endif %} + {% if year %} +
Published
+
{{ year }}
+ {% endif %} +
+
+
+ {{ tagList(tags | filter("book") , "/books") }} +
diff --git a/src/includes/layouts/game.html b/src/includes/layouts/game.html index 7cac181..0b6ba0f 100644 --- a/src/includes/layouts/game.html +++ b/src/includes/layouts/game.html @@ -3,54 +3,44 @@ layout: "layouts/base" --- {% from "macros/date.njk" import format %} -{% from "macros/utils.njk" import stars %} +{% from "macros/utils.njk" import stars, spoilerWarning %} {% from "macros/tags.njk" import tagList %} -
- {{ format(page.date) }} -

{{ title }}

- {% if pullquote %}

{{ pullquote }}

{% endif %} -
-{% if hasSpoilers %} -
- {% include "svgs/triangle-exclamation.svg" %} - Warning! - The following may contain spoilers! -
-{% endif %} -{% if content %} -
- {{ content | safe }} -
-{% endif %} -
- -
-{{ tagList(tags | filter("game") , "/games") }} +
+

{{ title }}

+ {% if rating %}{{ stars(rating) }}{% endif %} +
+ {% if year %} +
Released
+
{{ year }}
+ {% endif %} + {% if platform %} +
Platform
+
{{ platform }}
+ {% endif %} + {% if playtime %} +
Playtime
+
{{ playtime }}
+ {% endif %} +
+
+ + {{ tagList(tags | filter("game") , "/games") }} + diff --git a/src/includes/layouts/movie.html b/src/includes/layouts/movie.html index 7dcf3d2..3f1f8e2 100644 --- a/src/includes/layouts/movie.html +++ b/src/includes/layouts/movie.html @@ -3,66 +3,57 @@ layout: "layouts/base" --- {% from "macros/date.njk" import format %} -{% from "macros/utils.njk" import stars %} +{% from "macros/utils.njk" import stars, spoilerWarning %} {% from "macros/tags.njk" import tagList %} -
- {{ format(page.date) }} -

{{ title }}

-

{{ pullquote }}

-
-{% if hasSpoilers %} -
- {% include "svgs/triangle-exclamation.svg" %} - Warning! - The following may contain spoilers! -
-{% endif %} -{% if watchHistory.length > 1 %} -

- {% include "svgs/circle-info.svg" %} - I've seen this movie {{ watchHistory.length }} {{ "time" | pluralize(watchHistory) }}! -

-{% endif %} -{% if favourite or isFavourite %} -

- {% include "svgs/star.svg" %} - This is one of my favourite movies! -

-{% endif %} -{% if content %} -
- {{ content | safe }} -
-{% endif %} -
- -
-{{ tagList(tags | filter("movie") , "/watching/movies") }} +
+

{{ title }}

+ {% if subtitle %}

{{ subtitle }}

{% endif %} + {% if rating %}{{ stars(rating) }}{% endif %} +
+ {% if year %} +
Released
+
{{ year }}
+ {% endif %} + {% if director %} +
Director
+
{{ director }}
+ {% endif %} + {% if runtime %} +
Runtime
+
{{ runtime }} minutes
+ {% endif %} +
+
+ + {{ tagList(tags | filter("movie") , "/watching/movies") }} + diff --git a/src/includes/layouts/post.html b/src/includes/layouts/post.html index 09860ee..396df09 100644 --- a/src/includes/layouts/post.html +++ b/src/includes/layouts/post.html @@ -4,11 +4,11 @@ layout: "layouts/base" {% from "macros/date.njk" import format %}
-
+
{{ format(page.date) }}

{{ title }}

-

{{ excerpt }}

-
diff --git a/src/includes/macros/date.njk b/src/includes/macros/date.njk index 21c70c2..c2ea240 100644 --- a/src/includes/macros/date.njk +++ b/src/includes/macros/date.njk @@ -1,5 +1,5 @@ {% macro format(dateString) %} - diff --git a/src/includes/macros/media-grid.njk b/src/includes/macros/media-grid.njk index ffc5816..234e807 100644 --- a/src/includes/macros/media-grid.njk +++ b/src/includes/macros/media-grid.njk @@ -1,10 +1,10 @@ {% macro grid(data, shape = "vertical") %} {% endmacro %} + +{% macro spoilerWarning() %} +
+ {% include "svgs/triangle-exclamation.svg" %} + Warning! + The following may contain spoilers! +
+{% endmacro %} diff --git a/src/includes/partials/footer.html b/src/includes/partials/footer.html index a38cb2a..d7864dd 100644 --- a/src/includes/partials/footer.html +++ b/src/includes/partials/footer.html @@ -1,4 +1,4 @@ -