buncha progress

css/home.css

@@ -0,0 +1,108 @@
+#ads {
+	columns: 3;
+}
+
+@media (max-width: 1050px) {
+	#ads {
+		columns: 2;
+	}
+}
+
+@media (max-width: 650px) {
+	#ads {
+		columns: 1;
+	}
+}
+
+/* jump links */
+#jump-links {
+	padding-bottom: 1rem;
+	margin-bottom: 1rem;
+	border-bottom: solid var(--color-purple);
+}
+
+#jump-links h2,
+#category-list li {
+	font-family: "Bebas Neue";
+	font-size: 1.3rem;
+	font-weight: normal;
+}
+
+#jump-links * {
+	display: inline;
+}
+
+#category-list li {
+	list-style: none;
+  margin: 0;
+}
+
+#category-list li:not(:last-child)::after {
+	content: "..." / "";
+}
+
+/* categories */
+
+.category {
+	break-inside: avoid;
+	border-bottom: solid var(--color-purple);
+	margin-bottom: 1rem;
+}
+
+.category-title {
+	background-color: var(--color-gray);
+	padding: .25rem;
+	margin-bottom: .5rem;
+}
+
+/* references highlighting */
+/* drawn from https://aarontgrogg.com/blog/2012/05/18/pure-css-highlight-for-link-target/ */
+.category-title:has(h2:target) {
+  animation: hilite 2.5s;
+}
+
+@keyframes hilite {
+	0% {background-color: var(--color-gray);}
+	10% {background-color: var(--color-cyan-flipped);}
+	100% {background-color: var(--color-gray);}
+}
+
+/* remove animation for reduced motion viewers */
+@media (prefers-reduced-motion: reduce) {
+	.category-title:has(h2:target) {
+		animation: none;
+		font-weight: bold;
+	}
+}
+
+.category-title h2 {
+	scroll-margin-top: 4rem;
+	font-family: "Bebas Neue";
+}
+
+.category-title p {
+	text-align: right;
+	font-weight: bold;
+}
+
+/* individual ads */
+
+.ad {
+	margin-bottom: 1rem;
+}
+.ad:not(:last-child) {
+	border-bottom: thin solid var(--color-purple);
+	padding-bottom: 1rem;
+}
+
+.blurb {
+	margin-bottom: .5rem;
+}
+.blurb a {
+	font-weight: bold;
+}
+
+.listed-on {
+	font-size: .85rem;
+	text-align: right;
+}

css/main.css

@@ -1,3 +1,21 @@
+:root {
+	color-scheme: light dark;
+
+	--color-dark: #222;
+	--color-light: #ddd;
+	--color-cyan-dark: #134947;
+	--color-cyan-light: #40c5be;
+	--color-purple-dark: #6007b1;
+	--color-purple-light: #ba99fe;
+
+	--color-text: light-dark(var(--color-dark), var(--color-light));
+	--color-bg: light-dark(var(--color-light), var(--color-dark));
+	--color-gray: rgb(0 0 0 / 15%);
+	--color-cyan: light-dark(var(--color-cyan-dark), var(--color-cyan-light));
+	--color-cyan-flipped: light-dark(var(--color-cyan-light), var(--color-cyan-dark));
+	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
+}
+
 * {
 	box-sizing: border-box;
 	margin: 0;
@@ -5,29 +23,87 @@
 }
 
 body {
+	color: var(--color-text);
+	background-color: var(--color-bg);
 	width: 65%;
+	max-width: 1400px;
 	margin: 0 auto;
+	font-family: "Fraunces";
+	font-weight: 300;
 }
 
-#ads {
-	columns: 3;
+main {
+	padding-bottom: 2rem;
+	border-bottom: solid var(--color-purple);
+}
+
+@media (max-width: 1050px) {
+	body {
+		width: 85%
+	}
+}
+
+@media (max-width: 650px) {
+	body {
+		width: 92%;
+	}
+}
+
+h1, h3 {
+	font-weight: 400;
 }
 
 h1 {
-	font-family: "Fraunces";
-	font-weight: 400;
 	text-align: center;
-	font-size: 4rem;
-	margin: 3rem auto 1rem;
+	font-size: 3rem;
+	margin: 3rem auto;
 }
 
-h2 {
-	font-family: "Bebas Neue";
-	background-color: lightgray;
+@media (max-width: 650px) {
+	h1 {
+		font-size: 2.4rem;
+		margin-top: 1rem;
+	}
 }
 
 h3 {
-	font-family: "Fraunces";
-	font-weight: 400;
 	text-transform: capitalize;
+	margin-bottom: .5rem;
+}
+
+a {
+	color: var(--color-cyan);
+}
+
+a:visited {
+	color: var(--color-purple);
+}
+
+main ul {
+	margin-left: 1rem;
+}
+
+main li {
+	margin-left: 1rem;
+}
+
+footer {
+	padding: 1rem 0;
+}
+
+footer ul {
+	list-style: none;
+	display: flex;
+	justify-content: space-around;
+}
+
+footer li {
+	display: inline;
+	font-family: "Bebas Neue";
+	font-size: 1.15rem;
+}
+
+/* iframe is on submission page */
+iframe {
+	margin: 2rem 0;
 }