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;
+}