first

css/main.css

@@ -1,60 +1,201 @@
 :root {
 	color-scheme: light dark;
+
+ 	--color-bg-light: #f0f0f0;
+  --color-text-light: #640054;
+  --color-header-light: #185370;
+  --color-warn-light: #fbcc0a;
+
+  --color-bg-dark: #1f1f1f;
+  --color-text-dark: #91c73b;
+  --color-header-dark: #ff9b37;
+  --color-warn-dark: #540033;
+
+  --color-text-main: #640054;
+  --color-text-header: #185370;
 }
 
 /* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */
-/* 1. Use a more-intuitive box-sizing model */
 *, *::before, *::after {
-  box-sizing: border-box;
+  box-sizing: border-box; /* 1. Use a more-intuitive box-sizing model */
 }
 
-/* 2. Remove default margin */
 *:not(dialog) {
-  margin: 0;
+  margin: 0; /* 2. Remove default margin */
+}
+
+*:focus-visible {
+	outline: .2rem solid light-dark(var(--color-header-light), var(--color-header-dark));
+  outline-offset: .15rem;
+  background-color: light-dark(var(--color-header-light), var(--color-header-dark));
+}
+
+html {
+	height: 100%;
 }
 
-/* 3. Enable keyword animations */
 @media (prefers-reduced-motion: no-preference) {
   html {
-    interpolate-size: allow-keywords;
+    interpolate-size: allow-keywords; /* 3. Enable keyword animations */
   }
 }
 
-body {
-  /* 4. Increase line-height */
-  line-height: 1.5;
-  /* 5. Improve text rendering */
-  -webkit-font-smoothing: antialiased;
-}
-
-/* 6. Improve media defaults */
-img, picture, video, canvas, svg {
-  display: block;
-  max-width: 100%;
-  height: auto;
-}
-
-/* 7. Inherit fonts for form controls */
-input, button, textarea, select {
-  font: inherit;
-}
-
-/* 8. Avoid text overflows */
-p, h1, h2, h3, h4, h5, h6 {
-  overflow-wrap: break-word;
-}
-
-/* 9. Improve line wrapping */
-p {
-  text-wrap: pretty;
-}
-h1, h2, h3, h4, h5, h6 {
-  text-wrap: balance;
-}
-
-/*
-  10. Create a root stacking context
-*/
 #root, #__next {
-  isolation: isolate;
+  isolation: isolate; /* 10. Create a root stacking context */
+}
+
+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));
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100%;
+}
+
+main {
+	width: 60%;
+	margin: 0 auto 2rem;
+}
+
+@media (max-width: 1100px) {
+	main {
+		width: 80%;
+	}
+}
+
+@media (max-width: 650px) {
+	main {
+		width: 92%;
+	}
+}
+
+img, picture, video, canvas, svg {
+  display: block; /* 6. Improve media defaults */
+  max-width: 100%; /* 6. Improve media defaults */
+  height: auto; /* 6. Improve media defaults */
+  margin: 0 auto;
+}
+
+input, button, textarea, select {
+  font: inherit; /* 7. Inherit fonts for form controls */
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word; /* 8. Avoid text overflows */
+}
+
+h1, h2, h3, h4, h5, h6 {
+  text-wrap: balance; /* 9. Improve line wrapping */
+  color: light-dark(var(--color-header-light), var(--color-header-dark));
+  font-weight: bold;
+  line-height: 105%;
+}
+
+h1 {
+	margin: 5rem 0 2rem;
+	font-size: 3rem;
+	text-align: center;
+}
+
+@media (max-width: 650px) {
+	h1 { margin: 2rem 0; }
+}
+
+h2 {
+  font-size: 2rem;
+  padding-top: 3rem;
+  border-top: solid;
+  margin: 1.4rem 0;
+}
+
+h3 {
+  font-size: 1.4rem;
+  margin-top: 1rem;
+}
+
+p {
+  text-wrap: pretty; /* 9. Improve line wrapping */
+}
+
+p, ul {
+  margin: 1.5rem 0;
+}
+
+ul ul {
+	margin: .5rem 0;
+}
+
+@media (max-width: 650px) {
+	ul {
+		padding-left: 1.5rem;
+	}
+}
+
+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));
+  font-weight: bold;
+  padding: 0 .2rem;
+  text-decoration: none;
+  border-radius: .2rem;
+}
+
+/* makes the years page prettier */
+h3 a:link,
+h3 a:visited {
+  background-color: light-dark(var(--color-header-light), var(--color-header-dark));
+}
+
+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));
+}
+
+/* Header nav */
+nav {
+  border-bottom: .25rem solid light-dark(var(--color-header-light), var(--color-header-dark));
+  font-size: 1.1rem;
+}
+
+#skip {
+	position: absolute;
+	left: -999px;
+	top: -999px;
+}
+
+#skip:focus-visible {
+	left: 1rem;
+	top: .5rem;
+}
+
+nav ul {
+	display: flex;
+ 	flex-flow: row wrap;
+  align-items: stretch;
+  justify-content: center;
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+nav li {
+	margin: .5rem .5rem;
+}
+
+footer {
+	display: flex;
+  justify-content: space-between;
+  margin: 1rem auto 0;
+  padding: 1rem .5rem;
+  width: 100%;
+  flex-wrap: wrap;
+  border-top: .25rem solid light-dark(var(--color-header-light), var(--color-header-dark));
+}
+
+footer p {
+	margin: 0.5rem 0;
 }

css/zines.css

@@ -0,0 +1,38 @@
+#zine-container {
+  padding: 0;
+}
+
+#zine-container li {
+  list-style: none;
+  border-bottom: solid;
+  border-left: solid;
+  border-radius: 4px;
+  padding: 0 .4rem .4rem;
+  margin-bottom: 1rem;
+}
+
+#zine-container h2,
+#zine-container p {
+  border: none;
+  display: inline;
+}
+
+#zine-container h2 a {
+  background-color: light-dark(var(--color-header-light), var(--color-header-dark));
+  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));
+  border-radius: 3px;
+  padding: 0 .2rem;
+  text-align: right;
+  line-height: 150%;
+  margin: .25rem 0 .75rem 0;
+}
+
+#zine-container blockquote {
+  margin: 0;
+  color: light-dark(var(--color-header-light), var(--color-header-dark));
+}