generated from inherentlee/11ty
I won't even try to chunk this up
This commit is contained in:
+17
-15
@@ -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 {
|
||||
|
||||
@@ -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
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user