summaryrefslogtreecommitdiff
path: root/assets/static/css
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--assets/static/css/.djlintrc14
-rw-r--r--assets/static/css/blog.css10
-rw-r--r--assets/static/css/categories.css61
-rw-r--r--assets/static/css/category.css17
-rw-r--r--assets/static/css/libre_baskerville.css73
-rw-r--r--assets/static/css/modern_normalize.css194
-rw-r--r--assets/static/css/style.css753
7 files changed, 1122 insertions, 0 deletions
diff --git a/assets/static/css/.djlintrc b/assets/static/css/.djlintrc
new file mode 100644
index 0000000..5882faa
--- /dev/null
+++ b/assets/static/css/.djlintrc
@@ -0,0 +1,14 @@
+{
+"blank_line_before_tag": "macro",
+"blank_line_after_tag": "endmacro,extends,import,from",
+"profile": "jinja",
+"format_css": true,
+"css": {
+"indent_size": 2
+},
+"format_js": true,
+"js": {
+"indent_size": 2
+},
+"indent": "2"
+}
diff --git a/assets/static/css/blog.css b/assets/static/css/blog.css
new file mode 100644
index 0000000..48a716b
--- /dev/null
+++ b/assets/static/css/blog.css
@@ -0,0 +1,10 @@
+@charset "UTF-8";
+
+article > p:first-of-type:first-letter {
+ color: var(--blue);
+ float: left;
+ font-weight: 700;
+ font-size: 3.8rem;
+ line-height: 3.8rem;
+ margin: 0.2em 0.1em 0 0;
+}
diff --git a/assets/static/css/categories.css b/assets/static/css/categories.css
new file mode 100644
index 0000000..5e26021
--- /dev/null
+++ b/assets/static/css/categories.css
@@ -0,0 +1,61 @@
+@charset "UTF-8";
+
+article > ul {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 0.5rem;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ @media (max-width: 500px) {
+ grid-template-columns: 1fr;
+ }
+
+ li {
+ max-inline-size: unset;
+ }
+
+ a {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ padding: 1rem;
+ border: 1px solid var(--foreground);
+ border-radius: 0.5rem;
+ height: 100%;
+
+ &:hover,
+ &:hover > dl {
+ border-color: var(--blue);
+ /*background-color: var(--blue);*/
+ color: var(--blue);
+ }
+
+ h3 {
+ margin: 0;
+ }
+
+ dl {
+ display: flex;
+ flex-direction: column;
+ color: var(--dim-foreground);
+ gap: 0.25rem;
+ font-size: 1.2rem;
+ font-style: italic;
+ line-height: initial;
+ margin: 0;
+
+ div {
+ display: flex;
+ flex-direction: row;
+ gap: 0.25rem;
+ }
+
+ dd {
+ margin: 0;
+ max-inline-size: unset;
+ }
+ }
+ }
+}
diff --git a/assets/static/css/category.css b/assets/static/css/category.css
new file mode 100644
index 0000000..e3567d8
--- /dev/null
+++ b/assets/static/css/category.css
@@ -0,0 +1,17 @@
+@charset "UTF-8";
+
+article > table {
+ border-collapse: collapse;
+
+ td {
+ vertical-align: top;
+ padding-bottom: 0.25rem;
+ }
+
+ td:first-child {
+ color: var(--dim-foreground);
+ font-style: italic;
+ padding-right: 2rem;
+ white-space: nowrap;
+ }
+}
diff --git a/assets/static/css/libre_baskerville.css b/assets/static/css/libre_baskerville.css
new file mode 100644
index 0000000..fa61e73
--- /dev/null
+++ b/assets/static/css/libre_baskerville.css
@@ -0,0 +1,73 @@
+@charset "UTF-8";
+
+@font-face {
+ font-display: swap;
+ font-family: "Libre Baskerville";
+ font-style: normal;
+ font-weight: 400;
+ src: url("/static/fonts/libre-baskerville-v24-latin_latin-ext-regular.woff2")
+ format("woff2");
+}
+
+@font-face {
+ font-display: swap;
+ font-family: "Libre Baskerville";
+ font-style: italic;
+ font-weight: 400;
+ src: url("/static/fonts/libre-baskerville-v24-latin_latin-ext-italic.woff2")
+ format("woff2");
+}
+
+@font-face {
+ font-display: swap;
+ font-family: "Libre Baskerville";
+ font-style: normal;
+ font-weight: 500;
+ src: url("/static/fonts/libre-baskerville-v24-latin_latin-ext-500.woff2")
+ format("woff2");
+}
+
+@font-face {
+ font-display: swap;
+ font-family: "Libre Baskerville";
+ font-style: italic;
+ font-weight: 500;
+ src: url("/static/fonts/libre-baskerville-v24-latin_latin-ext-500italic.woff2")
+ format("woff2");
+}
+
+@font-face {
+ font-display: swap;
+ font-family: "Libre Baskerville";
+ font-style: normal;
+ font-weight: 600;
+ src: url("/static/fonts/libre-baskerville-v24-latin_latin-ext-600.woff2")
+ format("woff2");
+}
+
+@font-face {
+ font-display: swap;
+ font-family: "Libre Baskerville";
+ font-style: italic;
+ font-weight: 600;
+ src: url("/static/fonts/libre-baskerville-v24-latin_latin-ext-600italic.woff2")
+ format("woff2");
+}
+
+@font-face {
+ font-display: swap;
+ font-family: "Libre Baskerville";
+ font-style: normal;
+ font-weight: 700;
+ src: url("/static/fonts/libre-baskerville-v24-latin_latin-ext-700.woff2")
+ format("woff2");
+}
+
+@font-face {
+ font-display: swap;
+ font-family: "Libre Baskerville";
+ font-style: italic;
+ font-weight: 700;
+ src: url("/static/fonts/libre-baskerville-v24-latin_latin-ext-700italic.woff2")
+ format("woff2");
+}
diff --git a/assets/static/css/modern_normalize.css b/assets/static/css/modern_normalize.css
new file mode 100644
index 0000000..708b6a2
--- /dev/null
+++ b/assets/static/css/modern_normalize.css
@@ -0,0 +1,194 @@
+/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
+/*
+Document
+========
+*/
+/**
+Use a better box model (opinionated).
+*/
+*,
+::before,
+::after {
+ box-sizing: border-box;
+}
+
+html {
+ /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
+ font-family:
+ system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+ "Apple Color Emoji", "Segoe UI Emoji";
+ line-height: 1.15;
+ /* 1. Correct the line height in all browsers. */
+ -webkit-text-size-adjust: 100%;
+ /* 2. Prevent adjustments of font size after orientation changes in iOS. */
+ tab-size: 4;
+ /* 3. Use a more readable tab size (opinionated). */
+}
+
+/*
+Sections
+========
+*/
+body {
+ margin: 0;
+ /* Remove the margin in all browsers. */
+}
+
+/*
+Text-level semantics
+====================
+*/
+/**
+Add the correct font weight in Chrome and Safari.
+*/
+b,
+strong {
+ font-weight: bolder;
+}
+
+/**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+code,
+kbd,
+samp,
+pre {
+ font-family:
+ ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+ /* 1 */
+ font-size: 1em;
+ /* 2 */
+}
+
+/**
+Add the correct font size in all browsers.
+*/
+small {
+ font-size: 80%;
+}
+
+/**
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/*
+Tabular data
+============
+*/
+/**
+Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
+table {
+ border-color: currentcolor;
+}
+
+/*
+Forms
+=====
+*/
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit;
+ /* 1 */
+ font-size: 100%;
+ /* 1 */
+ line-height: 1.15;
+ /* 1 */
+ margin: 0;
+ /* 2 */
+}
+
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+}
+
+/**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+legend {
+ padding: 0;
+}
+
+/**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+progress {
+ vertical-align: baseline;
+}
+
+/**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+[type="search"] {
+ -webkit-appearance: textfield;
+ /* 1 */
+ outline-offset: -2px;
+ /* 2 */
+}
+
+/**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ /* 1 */
+ font: inherit;
+ /* 2 */
+}
+
+/*
+Interactive
+===========
+*/
+/*
+Add the correct display in Chrome and Safari.
+*/
+summary {
+ display: list-item;
+}
diff --git a/assets/static/css/style.css b/assets/static/css/style.css
new file mode 100644
index 0000000..ca7443a
--- /dev/null
+++ b/assets/static/css/style.css
@@ -0,0 +1,753 @@
+@charset "UTF-8";
+
+/*
+=============================================================================
+CUSTOM PROPERTIES
+=============================================================================
+*/
+:root {
+ /* Named palette */
+ --black: light-dark(#575279, #393b44);
+ --red: light-dark(#b4637a, #c94f6d);
+ --green: light-dark(#618774, #81b29a);
+ --yellow: light-dark(#ea9d34, #dbc074);
+ --blue: light-dark(#286983, #719cd6);
+ --magenta: light-dark(#907aa9, #9d79d6);
+ --cyan: light-dark(#56949f, #63cdcf);
+ --white: light-dark(#e5e9f0, #dfdfe0);
+ --orange: light-dark(#d7827e, #f4a261);
+ --pink: light-dark(#d685af, #d67ad2);
+ /* Dim palette */
+ --dim-black: light-dark(#504c6b, #30323a);
+ --dim-red: light-dark(#a5576d, #ab435d);
+ --dim-green: light-dark(#597668, #6e9783);
+ --dim-yellow: light-dark(#dd9024, #baa363);
+ --dim-blue: light-dark(#295e73, #6085b6);
+ --dim-magenta: light-dark(#816b9a, #8567b7);
+ --dim-cyan: light-dark(#50848c, #54aeb0);
+ --dim-white: light-dark(#c8cfde, #bebebe);
+ --dim-foreground: light-dark(#4c4769, #aeafb0);
+ /* Bright palette */
+ --bright-black: light-dark(#5f5695, #575860);
+ --bright-red: light-dark(#c26d85, #d16983);
+ --bright-green: light-dark(#629f81, #8ebaa4);
+ --bright-yellow: light-dark(#eea846, #e0c989);
+ --bright-blue: light-dark(#2d81a3, #86abdc);
+ --bright-magenta: light-dark(#9a80b9, #baa1e2);
+ --bright-cyan: light-dark(#5ca7b4, #7ad5d6);
+ --bright-white: light-dark(#e6ebf3, #e4e4e5);
+ --bright-foreground: light-dark(#625c87, #d6d6d7);
+ /* Semantic */
+ --foreground: light-dark(#575279, #cdcecf);
+ --background: light-dark(#faf4ed, #192330);
+ /* Layout */
+ --measure: 60ch;
+ --column-min-width: calc(1/3 * 100vw);
+ --column-max-width: 100%;
+ /* Gradient border — reused in header, footer */
+ --gradient-border: linear-gradient(
+ to right,
+ var(--foreground),
+ var(--green),
+ var(--foreground)
+ );
+
+ /* Responsive layout */
+ @media (min-width: 500px) {
+ --column-max-width: var(--measure);
+ }
+
+ &:has(input[name="theme-switcher"][value="light dark"]:checked) {
+ color-scheme: light dark;
+ }
+
+ &:has(input[name="theme-switcher"][value="light"]:checked) {
+ color-scheme: light;
+ }
+
+ &:has(input[name="theme-switcher"][value="dark"]:checked) {
+ color-scheme: dark;
+ }
+}
+
+/*
+=============================================================================
+BASE
+=============================================================================
+ */
+html {
+ font-size: 14px;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ min-width: var(--column-min-width);
+ max-width: var(--column-max-width);
+ margin: 0 auto;
+ background-color: var(--background);
+ color: var(--foreground);
+ font-family: "Libre Baskerville", Georgia, serif;
+ font-size: clamp(1rem, 1.5vw, 1.4rem);
+ line-height: 1.6;
+
+ @media (max-width: 500px) {
+ padding: 0 1.5rem;
+ }
+
+ & > footer {
+ border-image-slice: 1;
+ border-image-source: var(--gradient-border);
+ border-image-width: 1px 0 0 0;
+ border-top: 1px solid;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ margin-bottom: 2rem;
+ margin-top: auto;
+ padding-top: 0.5rem;
+
+ @media (max-width: 500px) {
+ flex-direction: column;
+ gap: 2rem;
+ }
+
+ h2 {
+ font-size: clamp(1.2rem, 2.5vw, 1.7rem);
+ font-style: italic;
+ font-weight: 400;
+ line-height: 1;
+ }
+
+ section div {
+ display: flex;
+ flex-direction: row;
+ gap: 0.25rem;
+ }
+
+ & > section[aria-label="Follow me"] a {
+ background-color: var(--green);
+ display: inline-block;
+ height: 3rem;
+ mask-size: cover;
+ width: 3rem;
+
+ &:hover {
+ background-color: var(--blue);
+ }
+
+ &#atom {
+ mask-image: url("/static/images/rss.svg");
+ }
+
+ &#mastodon {
+ mask-image: url("/static/images/mastodon.svg");
+ }
+
+ &#xmpp {
+ mask-image: url("/static/images/xmpp.svg");
+ }
+
+ &#email {
+ mask-image: url("/static/images/email.svg");
+ }
+ }
+
+ ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+ }
+}
+
+/*
+=============================================================================
+TYPOGRAPHY
+=============================================================================
+*/
+
+/* --- Headings --- */
+h1 {
+ font-size: clamp(2rem, 4vw, 3.2rem);
+ font-weight: 700;
+ line-height: 1;
+ margin: 0 0 0.5rem 0;
+}
+
+h2 {
+ font-size: clamp(1.5rem, 3vw, 2.2rem);
+ font-style: italic;
+ font-weight: 500;
+ line-height: 1;
+ margin: 1rem 0;
+}
+
+h3 {
+ font-size: clamp(1.2rem, 2.5vw, 1.7rem);
+ font-style: italic;
+ font-weight: 400;
+ line-height: 1;
+ margin-bottom: 1rem;
+}
+
+/* --- Body text --- */
+p {
+ font-size: clamp(1rem, 1.5vw, 1.4rem);
+ line-height: 1.5em;
+ margin: 0;
+ text-align: justify;
+ text-wrap: pretty;
+ word-spacing: 0.16em;
+
+ &.center {
+ text-align: center;
+ }
+}
+
+blockquote {
+ font-style: italic;
+ border-left: 2px solid var(--blue);
+ margin: 1em 0 1em 0.5em;
+ padding-left: 0.5em;
+}
+
+/* --- Lists --- */
+ul,
+ol,
+dl {
+ font-size: clamp(1rem, 1.5vw, 1.4rem);
+ line-height: 2rem;
+}
+
+li,
+dd {
+ max-inline-size: var(--measure);
+}
+
+/* --- Rules --- */
+hr {
+ border: 0;
+ border-top: 2px solid var(--blue);
+ margin: 1em 0;
+}
+
+/* --- Links --- */
+a {
+ color: var(--green);
+ text-decoration: none;
+ text-decoration-thickness: 0.05em;
+ text-underline-offset: 0.1em;
+
+ &:hover {
+ color: var(--blue);
+ }
+}
+
+/*
+=============================================================================
+SKIP LINK (accessibility)
+=============================================================================
+ */
+.skip-link {
+ background: #fff;
+ color: #000;
+ left: 0;
+ padding: 0.5rem 1rem;
+ position: absolute;
+ text-decoration: none;
+ top: 0;
+ transform: translateY(-120%);
+ transition: transform 0.2s ease;
+ z-index: 1000;
+
+ &:focus,
+ &:focus-visible {
+ transform: translateY(0);
+ }
+}
+
+.visually-hidden {
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+}
+
+/*
+=============================================================================
+SITE HEADER
+=============================================================================
+*/
+body > header {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ justify-content: space-evenly;
+ margin-top: 4rem;
+ padding-bottom: 1rem;
+ border-bottom: 1px solid;
+ border-image-slice: 1;
+ border-image-source: var(--gradient-border);
+ border-image-width: 0 0 1px 0;
+
+ & > div {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ gap: 0.25rem;
+ }
+
+ svg {
+ max-width: 4em;
+ max-height: 4em;
+ fill: var(--green);
+
+ @media (max-width: 500px) {
+ display: none;
+ }
+ }
+
+ p {
+ font-size: clamp(1.1rem, 2vw, 1.75rem);
+ font-style: italic;
+ max-width: unset;
+ }
+
+ /* --- Navigation --- */
+ nav {
+ ul {
+ display: flex;
+ flex-direction: row;
+ gap: 1rem;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ a[aria-current="page"] {
+ color: var(--blue);
+
+ &:hover {
+ color: var(--bright-blue);
+ }
+ }
+ }
+
+ /* --- Theme switcher --- */
+ fieldset {
+ align-items: center;
+ border: 0;
+ display: flex;
+ flex-direction: row;
+ gap: 0.25rem;
+ justify-content: flex-start;
+ margin: 0;
+ padding: 0;
+
+ input[type="radio"] {
+ display: none;
+
+ &:checked + span {
+ background-color: var(--yellow);
+ }
+ }
+
+ label span {
+ background-color: var(--foreground);
+ cursor: pointer;
+ display: block;
+ height: 1.5rem;
+ mask-size: cover;
+ width: 1.5rem;
+ }
+ }
+}
+
+#lightmode + span,
+#automode + span,
+#darkmode + span {
+ mask-repeat: no-repeat;
+ mask-position: 50% 50%;
+}
+
+#lightmode + span {
+ mask-image: url("/static/images/light.svg");
+}
+
+#automode + span {
+ mask-image: url("/static/images/auto.svg");
+}
+
+#darkmode + span {
+ mask-image: url("/static/images/dark.svg");
+}
+
+/*
+=============================================================================
+MAIN
+=============================================================================
+*/
+main {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 2rem;
+ margin-top: 2rem;
+}
+
+/*
+=============================================================================
+ARTICLES
+=============================================================================
+*/
+article {
+ max-width: var(--column-max-width);
+ min-width: var(--column-min-width);
+
+ & > header {
+ display: flex;
+ flex-direction: row;
+ align-items: start;
+ justify-content: space-between;
+
+ &:not(:has(nav)) {
+ margin-bottom: 2rem;
+ }
+
+ & > div {
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+ max-width: calc(2 / 3 * 100%);
+
+ /* --- Article metadata --- */
+ & > dl {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ font-size: 1rem;
+ gap: calc(1 / 3 * 1rem);
+ margin: 0;
+
+ div {
+ align-items: center;
+ border: 1px solid var(--foreground);
+ border-radius: 0.5rem;
+ display: flex;
+ flex-direction: row;
+ }
+
+ dt {
+ color: var(--bright-blue);
+ padding-left: calc(1 / 3 * 1rem);
+ padding-right: calc(1 / 3 * 1rem);
+ }
+
+ dd {
+ margin: 0;
+ padding-right: calc(1 / 3 * 1rem);
+
+ a {
+ color: var(--green);
+ }
+ }
+
+ @media (max-width: 700px) {
+ margin-top: 2rem;
+ }
+
+ @media (max-width: 500px) {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ }
+ }
+
+ h2 {
+ margin-bottom: 0.25rem;
+ margin-top: 0;
+ }
+
+ /* --- TOC --- */
+ & > nav {
+ border: 1px solid var(--foreground);
+ border-radius: 0.5rem;
+ font-size: 1rem;
+ line-height: 1.4;
+ padding: 0.75rem;
+ max-width: calc(1 / 3 * 100%);
+
+ & > p {
+ color: var(--blue);
+ font-size: 1em;
+ font-weight: 700;
+ line-height: 1.2;
+ margin: 0 0 0.5rem 0;
+ }
+
+ ol {
+ font-size: 1em;
+ line-height: 1.4;
+ margin: 0;
+ padding-left: 1.5em;
+
+ ol {
+ margin-top: 0.25rem;
+ padding-left: 1.25em;
+ }
+ }
+
+ li {
+ max-inline-size: none;
+
+ & + li {
+ margin-top: 0.25rem;
+ }
+ }
+
+ a {
+ overflow-wrap: anywhere;
+ }
+
+ @media (max-width: 700px) {
+ margin-top: 2rem;
+ }
+ }
+ }
+
+ /* --- Article body --- */
+ p {
+ max-inline-size: var(--measure);
+
+ & + p {
+ margin-top: 2rem;
+ }
+ }
+
+ & > h3:not(:first-of-type) {
+ margin-top: 2rem;
+ }
+
+ & > footer {
+ color: var(--dim-foreground);
+ font-style: italic;
+ margin-top: 1.5rem;
+
+ p {
+ display: inline;
+ font-size: 1.2rem;
+ line-height: 1.5;
+ margin: 0;
+ padding: 0;
+ }
+
+ ul {
+ font-size: 1.2rem;
+ line-height: 1.5;
+ margin: 0;
+ padding: 0;
+ display: inline-flex;
+ flex-wrap: wrap;
+ list-style: none;
+ }
+
+ li {
+ display: flex;
+ max-inline-size: none;
+ }
+ }
+
+ /* --- Article separator --- */
+ & + hr {
+ align-items: center;
+ background: none;
+ border: 0;
+ display: flex;
+ height: 1em;
+ justify-content: center;
+ margin: 4em 0;
+ position: relative;
+ width: 100%;
+
+ &::before {
+ background-image: var(--gradient-border);
+ content: "";
+ height: 1px;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 50%;
+ }
+
+ &::after {
+ background-color: var(--background);
+ color: var(--blue);
+ content: "§";
+ padding: 0 1rem;
+ position: relative;
+ transform: rotate(90deg);
+ z-index: 1;
+ }
+ }
+}
+
+/*
+=============================================================================
+PAGINATION
+=============================================================================
+ */
+nav:is(
+ [aria-label="Page navigation"],
+ [aria-label="Year archive navigation"],
+ [aria-label="Monthly archive navigation"]
+) {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+
+ ol {
+ align-items: center;
+ border: 1px solid var(--foreground);
+ border-radius: 0.5rem;
+ display: flex;
+ flex-direction: row;
+ gap: 0.25rem;
+ list-style: none;
+ margin: 2rem 0;
+ padding: 0.25rem;
+ }
+
+ a,
+ span {
+ align-items: center;
+ display: flex;
+ height: 2rem;
+ justify-content: center;
+ min-width: 2rem;
+ padding-inline: 0.5rem;
+ }
+
+ & a {
+ border-radius: 0.5rem;
+
+ &:hover,
+ &[aria-current="page"]:hover {
+ background-color: var(--blue);
+ color: var(--foreground);
+ }
+
+ &[aria-current="page"] {
+ color: var(--blue);
+ }
+ }
+
+ span[aria-disabled="true"] {
+ color: var(--dim-foreground);
+ }
+}
+
+/*
+=============================================================================
+IMAGES
+=============================================================================
+*/
+img {
+ height: auto;
+ max-width: 100%;
+
+ &.center {
+ display: block;
+ margin-inline: auto;
+ }
+
+ &.round {
+ border-radius: 100%;
+ }
+
+ &.w25 {
+ width: 25%;
+ }
+
+ &.w33 {
+ width: calc(1 / 3 * 100%);
+ }
+
+ &.w50 {
+ width: 50%;
+ }
+
+ &.w66 {
+ width: calc(2 / 3 * 100%);
+ }
+
+ &.w75 {
+ width: 75%;
+ }
+
+ &.breakout-xs {
+ width: calc(100% + 16rem);
+ transform: translateX(-8rem);
+ }
+
+ &.breakout-sm {
+ width: calc(100% + 24rem);
+ transform: translateX(-12rem);
+ }
+
+ &.breakout-md {
+ width: calc(100% + 32rem);
+ transform: translateX(-16rem);
+ }
+
+ &.breakout-lg {
+ width: calc(100% + 48rem);
+ transform: translateX(-24rem);
+ }
+
+ &.breakout-xl {
+ width: calc(100% + 64rem);
+ transform: translateX(-32rem);
+ }
+
+ &.breakout-full {
+ width: 100vw;
+ margin-left: calc(50% - 50vw);
+ }
+
+ &.breakout-xs,
+ &.breakout-sm,
+ &.breakout-md,
+ &.breakout-lg,
+ &.breakout-xl,
+ &.breakout-full {
+ max-width: 100vw;
+ }
+
+ @media (max-width: 500px) {
+ &.breakout-xs,
+ &.breakout-sm,
+ &.breakout-md,
+ &.breakout-lg,
+ &.breakout-xl {
+ width: 100vw;
+ transform: none;
+ margin-left: calc(50% - 50vw);
+ }
+ }
+}
+
+.missing-publication-date-warning {
+ background: var(--red);
+ color: var(--foreground);
+ font-weight: 700;
+ font-size: 1.1rem;
+}
+
+.missing-publication-date-warning > dt {
+ color: var(--foreground);
+}
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-08 20:36:39 +0000