big ol pile

css/main.css

@@ -1,5 +1,25 @@
+@font-face {
+	font-family: "Elegant Typewriter";
+	src:
+		url("/fonts/elegant_typewriter/ELEGANT TYPEWRITER Regular.ttf");
+}
+
 :root {
 	color-scheme: light dark;
+
+	--color-light: #f5ecdf;
+	--color-dark: #11192c;
+	--color-nav-light: #e7d7bc;
+	--color-nav-dark: #2a244d;
+	--color-title-bg: #bc5b56;
+	--color-title-text: #09183b;
+
+	--color-bg: light-dark(var(--color-light), var(--color-dark));
+	--color-text: light-dark(var(--color-dark), var(--color-light));
+	--color-headers: light-dark(var(--color-nav-dark), var(--color-nav-light));
+
+	--font-headers: "Elegant Typewriter", serif;
+	--font-body: "Atkinson Hyperlegible Next", sans-serif;
 }
 
 /* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */
@@ -13,6 +33,11 @@
 
 *:not(dialog) {
   margin: 0; /* 2. Remove default margin */
+  padding: 0;
+}
+
+html {
+	height: 100%;
 }
 
 @media (prefers-reduced-motion: no-preference) {
@@ -22,8 +47,33 @@
 }
 
 body {
+	height: 100%;
+	min-height: 100%;
+	display: grid;
+	grid-template-rows: auto 1fr auto;
   line-height: 1.5; /* 4. Increase line-height */
   -webkit-font-smoothing: antialiased; /* 5. Improve text rendering */
+  color: var(--color-text);
+  background: var(--color-bg);
+  font-family: var(--font-body);
+}
+
+#content {
+	width: 65%;
+	max-width: 1800px;
+	margin: 1rem auto;
+}
+
+@media (max-width: 1100px) {
+	#content {
+		width: 85%;
+	}
+}
+
+@media (max-width: 650px) {
+	#content {
+		width: 92%;
+	}
 }
 
 img, picture, video, canvas, svg {
@@ -42,8 +92,55 @@ h1, h2, h3, h4, h5, h6, p {
 
 h1, h2, h3, h4, h5, h6 {
   text-wrap: balance; /* 9. Improve line wrapping */
+  font-family: var(--font-headers);
+}
+
+h1 {
+	color: var(--color-title-text);
+	background: var(--color-title-bg);
+	font-size: 3rem;
+	text-align: center;
+	padding-block: .4em;
+}
+
+h2, h3, h4, h5, h6 {
+	color: var(--color-headers);
+}
+
+h2 {
+	font-size: 2rem;
+}
+
+@media (max-width: 800px) {
+	h1 { font-size: 2rem; }
+	h2 { font-size: 1.5rem; }
 }
 
 p {
   text-wrap: pretty; /* 9. Improve line wrapping */
+  margin-block: 1.3rem;
+  line-height: 1.7em;
+}
+
+@media (max-width: 650px) {
+	p { font-size: .9rem; }
+}
+
+a {
+	color: var(--color-text);
+	text-decoration-line: underline;
+	text-decoration-style: solid;
+	text-decoration-thickness: .2em;
+	text-decoration-color: var(--color-title-bg);
+	transition: text-decoration-thickness .5s;
+}
+
+@media (any-hover: hover) {
+	a:hover {
+		text-decoration-thickness: .4em;
+	}
+}
+
+a:active {
+	text-decoration-thickness: .4em;
 }