From 874ec4c434bc6f7b0036b776aba4431dee87673b Mon Sep 17 00:00:00 2001 From: Nathan Upchurch Date: Mon, 20 Apr 2026 12:07:55 -0500 Subject: [PATCH] Make CSS modular --- content/guestbook/index.njk | 3 +- public/css/audio-player.css | 48 ++++++++ public/css/blogroll.css | 13 +++ public/css/comments.css | 80 +++++++++++++ .../css/continue-discussion-on-mastodon.css | 7 ++ public/css/dropcap.css | 16 +++ public/css/fleuron.css | 20 ++++ public/css/gallery-images.css | 16 +++ public/css/guestbook.css | 39 +++++++ public/css/metadata.css | 32 ++++++ public/css/microblog.css | 61 ++++++++++ public/css/navigator.css | 46 ++++++++ public/css/post-list.css | 91 +++++++++++++++ public/css/profile-pic.css | 6 + public/css/quiz.css | 86 ++++++++++++++ public/css/tags.css | 45 ++++++++ public/css/toc.css | 6 + public/css/weather.css | 108 ++++++++++++++++++ public/css/woo-mode.css | 12 ++ 19 files changed, 734 insertions(+), 1 deletion(-) create mode 100644 public/css/audio-player.css create mode 100644 public/css/blogroll.css create mode 100644 public/css/comments.css create mode 100644 public/css/continue-discussion-on-mastodon.css create mode 100644 public/css/dropcap.css create mode 100644 public/css/fleuron.css create mode 100644 public/css/gallery-images.css create mode 100644 public/css/guestbook.css create mode 100644 public/css/metadata.css create mode 100644 public/css/microblog.css create mode 100644 public/css/navigator.css create mode 100644 public/css/post-list.css create mode 100644 public/css/profile-pic.css create mode 100644 public/css/quiz.css create mode 100644 public/css/tags.css create mode 100644 public/css/toc.css create mode 100644 public/css/weather.css create mode 100644 public/css/woo-mode.css diff --git a/content/guestbook/index.njk b/content/guestbook/index.njk index 42f29f7..505d239 100644 --- a/content/guestbook/index.njk +++ b/content/guestbook/index.njk @@ -2,7 +2,8 @@ layout: layouts/base.njk title: Nathan Upchurch | Guestbook structuredData: none -tag: guestbook +tags: + - guestbook ---

Sign My Guestbook

diff --git a/public/css/audio-player.css b/public/css/audio-player.css new file mode 100644 index 0000000..a0a849d --- /dev/null +++ b/public/css/audio-player.css @@ -0,0 +1,48 @@ +.albumCover { + object-fit: cover; +} + +.albumCover, +.coverContainer { + width: var(--space-4xl); + height: var(--space-4xl); + border-radius: var(--border-radius); +} + +.artist { + font-size: var(--meta-font-size); + margin-bottom: var(--space-s); +} + +.captionAndPlayer { + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + width: 100%; +} + +.mplayer { + background-color: var(--card-color); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow); + display: flex; + gap: var(--space-s); + margin: 0 0 var(--space-s) 0; + padding: var(--space-m); + width: 100%; +} + +.player { + align-self: flex-end; + border-radius: var(--border-radius); + width: 100%; +} + +.songTitle { + font-size: var(--step-1); + font-variation-settings: + "opsz" 50, + "wght" 350, + "SOFT" 20, + "WONK" 1; +} diff --git a/public/css/blogroll.css b/public/css/blogroll.css new file mode 100644 index 0000000..f058a83 --- /dev/null +++ b/public/css/blogroll.css @@ -0,0 +1,13 @@ +.blogroll { + display: inline; +} +.blogroll-category-group { + margin-bottom: var(--space-l); + margin-left: var(--space-m); + h3 { + display: inline; + } + p { + margin: var(--space-2xs) auto; + } +} diff --git a/public/css/comments.css b/public/css/comments.css new file mode 100644 index 0000000..9864694 --- /dev/null +++ b/public/css/comments.css @@ -0,0 +1,80 @@ +.isso-comment-header { + height: var(--space-2xl) !important; +} + +h4.isso-thread-heading { + color: var(--text-color) !important; + font-size: var(--step-2) !important; + font-variation-settings: + "opsz" 50, + "wght" 350, + "SOFT" 20, + "WONK" 1 !important; + line-height: calc(var(--step-2) * 0.25 + var(--step-2)) !important; + margin-bottom: var(--space-m) !important; + margin-top: var(--space-m) !important; + padding-bottom: 0 !important; + padding-top: 0 !important; + text-wrap: pretty !important; +} + +.isso-text > h1, +.isso-text > h2 { + padding: 0 0 0 0 !important; +} + +.isso-form-wrapper > .isso-auth-section > .isso-post-action > input { + background-color: var(--contrast-color) !important; + border: none !important; + border-radius: var(--border-radius) !important; + color: var(--background-color) !important; + font-family: var(--font-family-ui) !important; + font-size: var(--step--2) !important; + font-variation-settings: var(--font-variation-ui) !important; + height: var(--space-m-l) !important; + letter-spacing: var(--ui-letter-spacing) !important; + margin: var(--space-xs) 0 0 0 !important; + padding: 0 var(--space-xs) !important; + text-transform: uppercase !important; + transition: var(--transition-normal) !important; + white-space: nowrap !important; +} + +p.isso-input-wrapper { + display: block !important; + max-width: 100% !important; + & > label, + & > input { + font-family: var(--font-family-ui) !important; + font-size: var(--step--2) !important; + font-variation-settings: var(--font-variation-ui) !important; + } + & input { + margin-block: inherit !important; + } +} + +.isso-post-action { + display: inline-block !important; + float: inherit !important; + margin: 0 var(--space-2xs) 0 0 !important; + &::after { + content: "" !important; + } +} + +textarea.isso-textarea { + background-color: var(--background-color) !important; + border: var(--border-details) !important; + border-color: var(--contrast-color) !important; + border-radius: var(--border-radius) !important; + color: var(--text-color) !important; + font-family: var(--font-family) !important; + font-size: var(--step-0) !important; + font-variation-settings: var(--font-variation-default) !important; + margin-block: 0 1lh !important; + min-height: var(--space-l) !important; + padding: 0 var(--space-3xs) !important; + resize: vertical !important; + width: 100%; +} diff --git a/public/css/continue-discussion-on-mastodon.css b/public/css/continue-discussion-on-mastodon.css new file mode 100644 index 0000000..2e9eb75 --- /dev/null +++ b/public/css/continue-discussion-on-mastodon.css @@ -0,0 +1,7 @@ +.continue-discussion { + grid-column: var(--span-grid); +} +.continue-discussion button { + margin-top: calc(var(--space-s) * -1); + margin-bottom: var(--space-m); +} diff --git a/public/css/dropcap.css b/public/css/dropcap.css new file mode 100644 index 0000000..88e5239 --- /dev/null +++ b/public/css/dropcap.css @@ -0,0 +1,16 @@ +main > section > article.post > p:not(.nodropcap):first-of-type:first-letter { + float: left; + font-size: var(--step-5); + padding: var(--space-2xs); + color: var(--contrast-color); + border: solid 2px var(--contrast-color); + font-family: var(--font-family-headline); + font-variation-settings: + "opsz" 144, + "wght" 500, + "SOFT" 10, + "WONK" 0; + margin: 0.5rem 0.7rem 0 0; + border-radius: 0.2em; + border-top-left-radius: 0; +} diff --git a/public/css/fleuron.css b/public/css/fleuron.css new file mode 100644 index 0000000..ef508b8 --- /dev/null +++ b/public/css/fleuron.css @@ -0,0 +1,20 @@ +/* Add fleuron to last

in section */ +section > p:not(blockquote > p, p.isso-post-action):last-child:after { + content: "\2766"; + display: inline; + font-size: var(--step-1); +} + +/* Add fleuron after

in article when footnotes are present */ +p:has(+ hr.footnotes-sep):after { + content: "\2766"; + display: inline; + font-size: var(--step-1); +} + +/* Add fleuron after last

in article */ +article.post > p:not(blockquote > p):last-child:after { + content: "\2766"; + display: inline; + font-size: var(--step-1); +} diff --git a/public/css/gallery-images.css b/public/css/gallery-images.css new file mode 100644 index 0000000..9ad7566 --- /dev/null +++ b/public/css/gallery-images.css @@ -0,0 +1,16 @@ +.gallery-images { + display: flex; + flex-flow: row wrap; + row-gap: var(--space-xs-s); + column-gap: var(--space-m-l); + .gallery-image-container { + width: var(--space-7xl-8xl); + height: var(--space-7xl-8xl); + .gallery-image { + border-radius: var(--border-radius); + width: var(--space-7xl-8xl); + height: var(--space-7xl-8xl); + object-fit: cover; + } + } +} diff --git a/public/css/guestbook.css b/public/css/guestbook.css new file mode 100644 index 0000000..331f7e6 --- /dev/null +++ b/public/css/guestbook.css @@ -0,0 +1,39 @@ +.guestbook-message blockquote { + margin-bottom: var(--space-m); + margin-top: var(--space-3xs); +} +.guestbook-message p { + margin-block: 0 0; + position: relative; + z-index: 1; +} +.guestbook-message p b, +.guestbook-message p small { + font-family: var(--meta-font-family); + font-size: var(--meta-font-size); + font-variation-settings: var(--meta-font-variation-settings); +} +#guestbooks___challenge-answer-container br, +.guestbooks___input-container br { + display: none; +} +.guestbook-message-reply { + border-left: var(--border-details); + margin-left: var(--space-l); + margin-top: calc(var(--space-s) * -1); + opacity: 0.9; + padding-left: var(--space-s); + font-style: italic; + & blockquote { + margin-left: 0; + } + & blockquote::before { + content: ""; + } + & p::before { + content: "Reply from "; + font-family: var(--meta-font-family); + font-size: var(--meta-font-size); + font-variation-settings: var(--meta-font-variation-settings); + } +} diff --git a/public/css/metadata.css b/public/css/metadata.css new file mode 100644 index 0000000..16f2e53 --- /dev/null +++ b/public/css/metadata.css @@ -0,0 +1,32 @@ +.post-metadata { + display: flex; + flex-flow: row nowrap; + padding: 0 0 var(--space-l) 0; +} + +.post-metadata-copy { + display: flex; + flex-flow: column nowrap; + justify-content: center; +} + +.post-metadata p, +.post-metadata ul, +.post-metadata ul li, +time, +.metadata { + display: flex; + flex-flow: row wrap; + font-family: var(--meta-font-family); + font-size: var(--meta-font-size); + font-style: var(--meta-font-style); + font-variation-settings: var(--meta-font-variation-settings); + line-height: calc(var(--meta-font-size) * 0.5 + var(--meta-font-size)); + list-style: none; + margin: 0; + padding-left: 0em; +} + +.post-metadata { + padding-left: 0.15rem; +} diff --git a/public/css/microblog.css b/public/css/microblog.css new file mode 100644 index 0000000..da81b66 --- /dev/null +++ b/public/css/microblog.css @@ -0,0 +1,61 @@ +.microblog-comment { + p { + font-style: italic; + margin: 0; + padding: var(--space-s) 0 0 0; + } +} + +.microblog-emoji { + font-size: var(--step-6); + margin-right: var(--space-s); +} + +.microblog-icon { + filter: var(--logo-filter); + height: var(--space-4xl); + padding-right: var(--space-s); + width: var(--space-2xl); +} +.microblog-list { + .post-metadata { + padding: 0; + } +} +.microblog-post { + display: flex; + .microblog-comment { + p { + padding-top: 0; + padding-bottom: var(--space-2xs); + } + } +} + +.microblog-status { + &.card { + align-items: center; + padding: var(--space-s); + } + .microblog-status-copy { + align-items: center; + display: flex; + flex-flow: column nowrap; + p { + margin: 0; + } + .status-metadata { + font-family: var(--meta-font-family); + font-size: var(--meta-font-size); + font-style: var(--meta-font-style); + font-variation-settings: var(--meta-font-variation-settings); + line-height: calc(var(--meta-font-size) * 0.5 + var(--meta-font-size)); + } + } +} + +.postlist-item-container { + display: flex; + flex-flow: column nowrap; + gap: var(--space-s); +} diff --git a/public/css/navigator.css b/public/css/navigator.css new file mode 100644 index 0000000..bea63d1 --- /dev/null +++ b/public/css/navigator.css @@ -0,0 +1,46 @@ +.navigator { + display: grid; + gap: var(--space-2xs) var(--space-2xs); + grid-template-columns: repeat(auto-fill, minmax(var(--space-6xl), 1fr)); + width: 100%; + .navigatorItem { + background-color: var(--background-color); + border: 1.5px solid var(--color-gray-20); + border-radius: var(--border-radius); + color: var(--text-color); + display: flex; + flex-flow: column wrap; + height: var(--space-3xl); + text-align: center; + a { + height: 100%; + padding: var(--space-s) var(--space-xs); + text-decoration: none; + width: 100%; + img { + aspect-ratio: 1 / 1; + filter: var(--logo-filter); + width: var(--space-m); + } + } + &:hover { + background-color: var(--text-color); + border: 1.25px solid var(--text-color); + transition: var(--transition-normal); + a { + color: var(--background-color); + transition: var(--transition-normal); + img { + filter: none; + transition: var(--transition-normal); + } + @media (prefers-color-scheme: dark) { + img { + filter: brightness(0) saturate(100%) invert(16%) sepia(0%) + saturate(1024%) hue-rotate(177deg) brightness(99%) contrast(88%); + } + } + } + } + } +} diff --git a/public/css/post-list.css b/public/css/post-list.css new file mode 100644 index 0000000..337c681 --- /dev/null +++ b/public/css/post-list.css @@ -0,0 +1,91 @@ +/* Posts list */ +.postlist, +.links-nextprev { + container: postlist / inline-size; +} +.postlist-item { + align-items: flex-start; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + width: 100%; +} +.postlist-item-container { + display: flex; + flex-flow: column nowrap; + gap: var(--space-s); +} +.post-image { + width: var(--space-4xl); + height: var(--space-4xl); + object-fit: cover; + object-position: 50% 50%; +} +.post-image-container { + border-radius: var(--border-radius); + box-shadow: var(--box-shadow); + height: var(--space-4xl); + max-height: var(--space-4xl); + overflow: hidden; + width: var(--space-4xl); +} + +.postlist-date, +.postlist-item:before { + color: var(--color-gray-90); + font-size: var(--meta-font-size); +} +.postlist-date { + word-spacing: -0.5px; +} +.postlist-link { + font-size: var(--step-5); + padding-right: 0.5em; + text-decoration: none; +} + +.postlist-link p { + background-color: var(--color-gray-90); + border-radius: 100px; + color: var(--background-color); + font-family: var(--font-family-ui); + font-size: var(--step--2); + font-variation-settings: var(--font-variation-ui); + letter-spacing: var(--ui-letter-spacing); + margin-top: calc(var(--space-3xs) * -1); + padding-left: var(--space-xs); + padding-right: var(--space-xs); + text-transform: uppercase; + width: max-content; +} +.post-copy { + display: flex; + flex-flow: column wrap; +} + +@container postlist (max-width: 500px) { + .postlist-item { + flex-flow: column wrap; + } + .post-image-container { + margin-left: 0; + min-height: var(--space-10xl); + width: 100%; + } + .post-image-container img.post-image { + width: 100cqw; + height: var(--space-10xl); + } + .postlist-link { + padding: 0; + } + .postlist-link h3 { + padding-top: var(--space-m); + } + .postlist-link p { + margin-top: var(--space-xs); + } + .post-metadata { + padding-bottom: 0; + } +} diff --git a/public/css/profile-pic.css b/public/css/profile-pic.css new file mode 100644 index 0000000..26e06a1 --- /dev/null +++ b/public/css/profile-pic.css @@ -0,0 +1,6 @@ +.profilePic:not(.links-container > img.profilePic) { + border-radius: 100%; + height: var(--space-xl); + margin-right: var(--space-s); + width: var(--space-xl); +} diff --git a/public/css/quiz.css b/public/css/quiz.css new file mode 100644 index 0000000..69b6913 --- /dev/null +++ b/public/css/quiz.css @@ -0,0 +1,86 @@ +.answerBox { + margin-bottom: var(--space-3xs); + & > label { + display: inline; + } +} +.answersBox > input { + display: block; +} +details:not(.toc) { + background-color: var(--card-color); + border: var(--border-details); + border-radius: var(--border-radius); + color: var(--text-color); + margin-top: var(--space-s); + padding: var(--space-xs); + width: 100%; + font-size: var(--step--2); + font-variation-settings: var(--font-variation-ui); + text-transform: uppercase; + letter-spacing: var(--ui-letter-spacing); + font-family: var(--font-family-ui); + + ::marker { + content: "+ "; + } + &[open] p { + font-size: var(--step--2); + line-height: calc(var(--step--2) * 0.25 + var(--step--2)); + } + &[open] summary::marker { + content: "- "; + } + &[open] summary { + border-bottom: var(--border-details); + margin-bottom: var(--space-xs); + padding-bottom: var(--space-xs); + } + summary { + font-size: var(--step--2); + font-variation-settings: var(--font-variation-ui); + text-transform: uppercase; + letter-spacing: var(--ui-letter-spacing); + font-family: var(--font-family-ui); + } +} +dialog { + background-color: var(--card-color); + border: none; + border-radius: var(--border-radius); + box-shadow: var(--box-shadow); + width: var(--grid-max-width); + h2 { + padding-top: 0; + } + p { + color: var(--text-color); + } + &::backdrop { + background-color: var(--contrast-color); + opacity: 0.5; + } + img { + max-width: 100%; + padding-top: var(--space-s); + } +} +input.answer { + display: inline; +} +.questionBox { + margin: var(--space-s) 0; + figure { + padding-top: 0; + padding-bottom: 0; + } +} +.quizQuestion { + font-size: var(--step-2); + font-variation-settings: + "opsz" 50, + "wght" 350, + "SOFT" 20, + "WONK" 1; + line-height: calc(var(--step-2) * 0.25 + var(--step-2)); +} diff --git a/public/css/tags.css b/public/css/tags.css new file mode 100644 index 0000000..a13598d --- /dev/null +++ b/public/css/tags.css @@ -0,0 +1,45 @@ +a.post-tag { + background-color: var(--color-gray-20); + border-radius: 1rem; + color: var(--text-color); + font-family: var(--meta-font-family); + font-variation-settings: "wght" 300; + margin-top: var(--space-3xs); + margin-right: var(--space-3xs); + padding: 0 var(--space-3xs); + text-decoration: none; +} +a.post-tag:before { + content: "#"; +} +a.post-tag:visited { + color: var(--text-color); +} +a.post-tag:hover { + color: var(--text-color); +} +.tag-feed-icon { + fill: var(--rss-orange); + height: var(--space-m); + transition: var(--transition-normal); + width: var(--space-m); + &.small { + height: var(--space-s); + width: var(--space-s); + } +} +.taglist { + display: flex; + flex-flow: row wrap; + list-style-type: none; + padding-left: 0; +} +.taglist li a { + display: inline-block; + font-size: var(--step--1); + margin: 0 var(--space-2xs) var(--space-2xs) 0; +} + +.postlist-item > .post-tag { + align-self: center; +} diff --git a/public/css/toc.css b/public/css/toc.css new file mode 100644 index 0000000..f37abb0 --- /dev/null +++ b/public/css/toc.css @@ -0,0 +1,6 @@ +.toc { + & ol { + margin-top: 0; + padding-left: var(--space-m); + } +} diff --git a/public/css/weather.css b/public/css/weather.css new file mode 100644 index 0000000..2ac9637 --- /dev/null +++ b/public/css/weather.css @@ -0,0 +1,108 @@ +.fallingObject { + color: #fff; + font-size: 1em; + font-family: Arial; + pointer-events: none; + text-shadow: 0 0 1px #000; +} +@keyframes fallingObjects-fall { + 0% { + top: -10%; + } + 100% { + top: 100%; + } +} +@keyframes fallingObjects-shake { + 0% { + transform: translateX(0px); + } + 50% { + transform: translateX(80px); + } + 100% { + transform: translateX(0px); + } +} +.fallingObject { + position: fixed; + top: -10%; + z-index: 9999; + user-select: none; + cursor: default; + animation-name: fallingObjects-fall, fallingObjects-shake; + animation-duration: 10s, 3s; + animation-timing-function: linear, ease-in-out; + animation-iteration-count: infinite, infinite; + animation-play-state: running, running; +} +.fallingObject:nth-of-type(0) { + left: 1%; + animation-delay: 0s, 0s; + & > div { + transform: rotate(45deg); + } +} +.fallingObject:nth-of-type(1) { + left: 10%; + animation-delay: 1s, 1s; + & > div { + transform: rotate(10deg); + } +} +.fallingObject:nth-of-type(2) { + left: 20%; + animation-delay: 6s, 0.5s; + & > div { + transform: rotate(60deg); + } +} +.fallingObject:nth-of-type(3) { + left: 30%; + animation-delay: 4s, 2s; + & > div { + transform: rotate(84deg); + } +} +.fallingObject:nth-of-type(4) { + left: 40%; + animation-delay: 2s, 2s; + & > div { + transform: rotate(267deg); + } +} +.fallingObject:nth-of-type(5) { + left: 50%; + animation-delay: 8s, 3s; + & > div { + transform: rotate(200deg); + } +} +.fallingObject:nth-of-type(6) { + left: 60%; + animation-delay: 6s, 2s; + & > div { + transform: rotate(20deg); + } +} +.fallingObject:nth-of-type(7) { + left: 70%; + animation-delay: 2.5s, 1s; + & > div { + transform: rotate(78deg); + } +} +.fallingObject:nth-of-type(8) { + left: 80%; + animation-delay: 1s, 0s; + & > div { + transform: rotate(3120deg); + } +} +.fallingObject:nth-of-type(9) { + left: 90%; + animation-delay: 3s, 1.5s; + & > div { + transform: rotate(123deg); + } +} diff --git a/public/css/woo-mode.css b/public/css/woo-mode.css new file mode 100644 index 0000000..0727e0c --- /dev/null +++ b/public/css/woo-mode.css @@ -0,0 +1,12 @@ +body { + background: none; +} +canvas { + display: block; + opacity: 0.35; + pointer-events: none; + position: fixed; + top: 0; + left: 0; + z-index: -1; +}