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; +}