I won't even try to chunk this up

This commit is contained in:
2026-08-26 13:46:34 -07:00
parent 5796b1f07c
commit 4bf83db4a7
68 changed files with 768 additions and 71 deletions
+17 -15
View File
@@ -11,8 +11,10 @@
--color-header-dark: #ff9b37;
--color-warn-dark: #540033;
--color-text-main: #640054;
--color-text-header: #185370;
--color-bg: light-dark(var(--color-bg-light), var(--color-bg-dark));
--color-text: light-dark(var(--color-text-light), var(--color-text-dark));
--color-header: light-dark(var(--color-header-light), var(--color-header-dark));
--color-warn: light-dark(var(--color-warn-light), var(--color-warn-dark));
}
/* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */
@@ -25,9 +27,9 @@
}
*:focus-visible {
outline: .2rem solid light-dark(var(--color-header-light), var(--color-header-dark));
outline: .2rem solid var(--color-header);
outline-offset: .15rem;
background-color: light-dark(var(--color-header-light), var(--color-header-dark));
background-color: var(--color-header);
}
html {
@@ -47,9 +49,9 @@ html {
body {
line-height: 1.5; /* 4. Increase line-height */
-webkit-font-smoothing: antialiased; /* 5. Improve text rendering */
font-family: sans-serif;
background-color: light-dark(var(--color-bg-light), var(--color-bg-dark));
color: light-dark(var(--color-text-light), var(--color-text-dark));
font-family: "Atkinson Hyperlegible Next", sans-serif;
background-color: var(--color-bg);
color: var(--color-text);
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100%;
@@ -89,7 +91,7 @@ p, h1, h2, h3, h4, h5, h6 {
h1, h2, h3, h4, h5, h6 {
text-wrap: balance; /* 9. Improve line wrapping */
color: light-dark(var(--color-header-light), var(--color-header-dark));
color: var(--color-header);
font-weight: bold;
line-height: 105%;
}
@@ -136,8 +138,8 @@ ul ul {
a:link,
a:visited {
background-color: light-dark(var(--color-text-light), var(--color-text-dark));
color: light-dark(var(--color-bg-light), var(--color-bg-dark));
background-color: var(--color-text);
color: var(--color-bg);
font-weight: bold;
padding: 0 .2rem;
text-decoration: none;
@@ -147,17 +149,17 @@ a:visited {
/* makes the years page prettier */
h3 a:link,
h3 a:visited {
background-color: light-dark(var(--color-header-light), var(--color-header-dark));
background-color: var(--color-header);
}
h3 *:focus-visible {
outline: .2rem solid light-dark(var(--color-text-light), var(--color-text-dark));
background-color: light-dark(var(--color-text-light), var(--color-text-dark));
outline: .2rem solid var(--color-text);
background-color: var(--color-text);
}
/* Header nav */
nav {
border-bottom: .25rem solid light-dark(var(--color-header-light), var(--color-header-dark));
border-bottom: .25rem solid var(--color-header);
font-size: 1.1rem;
}
@@ -193,7 +195,7 @@ footer {
padding: 1rem .5rem;
width: 100%;
flex-wrap: wrap;
border-top: .25rem solid light-dark(var(--color-header-light), var(--color-header-dark));
border-top: .25rem solid var(--color-header);
}
footer p {
+58
View File
@@ -0,0 +1,58 @@
.color {
--color-bg-light-2025: #f0f0f0;
--color-text-light-2025: #640054;
--color-header-light-2025: #185370;
--color-warn-light-2025: #fbcc0a;
--color-bg-dark-2025: #1f1f1f;
--color-text-dark-2025: #91c73b;
--color-header-dark-2025: #ff9b37;
--color-warn-dark-2025: #540033;
border-radius: .5rem;
padding: .5rem;
text-align: center;
font-weight: bold;
}
@media (prefers-color-scheme: light) {
.color {
border: .1rem solid var(--color-bg-dark);
}
}
@media (prefers-color-scheme: dark) {
.color {
border: .1rem solid var(--color-bg-light);
}
}
#bg-light-2025,
#warn-light-2025 {
color: var(--color-text-light-2025);
}
#text-light-2025,
#header-light-2025 {
color: var(--color-bg-light-2025);
}
#bg-dark-2025,
#warn-dark-2025 {
color: var(--color-text-dark-2025);
}
#text-dark-2025,
#header-dark-2025 {
color: var(--color-bg-dark-2025);
}
#bg-light-2025 { background-color: var(--color-bg-light-2025); }
#text-light-2025 { background-color: var(--color-text-light-2025); }
#header-light-2025 { background-color: var(--color-header-light-2025); }
#warn-light-2025 { background-color: var(--color-warn-light-2025); }
#bg-dark-2025 { background-color: var(--color-bg-dark-2025); }
#text-dark-2025 { background-color: var(--color-text-dark-2025); }
#header-dark-2025 { background-color: var(--color-header-dark-2025); }
#warn-dark-2025 { background-color: var(--color-warn-dark-2025); }
+4 -4
View File
@@ -18,13 +18,13 @@
}
#zine-container h2 a {
background-color: light-dark(var(--color-header-light), var(--color-header-dark));
background-color: var(--color-header);
line-height: 135%;
}
#zine-container h3 {
background-color: light-dark(var(--color-warn-light), var(--color-warn-dark));
color: light-dark(var(--color-text-light), var(--color-text-dark));
background-color: var(--color-warn);
color: var(--color-text);
border-radius: 3px;
padding: 0 .2rem;
text-align: right;
@@ -34,5 +34,5 @@
#zine-container blockquote {
margin: 0;
color: light-dark(var(--color-header-light), var(--color-header-dark));
color: var(--color-header);
}