new branding

css/main.css

@@ -1,20 +1,20 @@
+@font-face {
+	font-family: "Bloktype";
+	src: url("/fonts/BLOKTYPE.woff2");
+}
+
 :root {
 	color-scheme: light dark;
 
- 	--color-bg-light: #f0f0f0;
-  --color-text-light: #640054;
-  --color-header-light: #185370;
-  --color-warn-light: #fbcc0a;
+  --color-light: #f3ccfb;
+  --color-dark: #130b16;
+  --color-pink: #ea33d2;
+  --color-blurple: #6d12e2;
 
-  --color-bg-dark: #1f1f1f;
-  --color-text-dark: #91c73b;
-  --color-header-dark: #ff9b37;
-  --color-warn-dark: #540033;
-
-  --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));
+  --color-bg: light-dark(var(--color-light), var(--color-dark));
+  --color-text: light-dark(var(--color-dark), var(--color-light));
+  --color-header: light-dark(var(--color-blurple), var(--color-pink));
+  --color-warn: light-dark(var(--color-pink), var(--color-blurple));
 }
 
 /* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */
@@ -211,3 +211,33 @@ footer p {
 		text-align: center;
 	}
 }
+
+.bloktype {
+	font-family: "Bloktype";
+	font-size: 1.35em; /* because of the blocks the letters are rather small */
+	color: var(--color-text);
+}
+
+@media (prefers-color-scheme: light) {
+	.dark-mode {
+		display: none;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.light-mode {
+		display: none;
+	}
+}
+
+/* only float insets on larger screens */
+@media (min-width: 551px) {
+	.inset {
+		clear: both;
+		width: 40%;
+		padding-left: 1rem;
+		padding-bottom: .5rem;
+		float: right;
+		background-color: var(--color-bg);
+	}
+}

css/palette.css

@@ -9,24 +9,40 @@
   --color-header-dark-2025: #ff9b37;
   --color-warn-dark-2025: #540033;
 
+  --color-light-2026: #f3ccfb;
+  --color-dark-2026: #130b16;
+  --color-pink-2026: #ea33d2;
+  --color-blurple-2026: #6d12e2;
+
   border-radius: .5rem;
   padding: .5rem;
   text-align: center;
   font-weight: bold;
 }
 
-@media (prefers-color-scheme: light) {
-	.color {
-		border: .1rem solid var(--color-bg-dark);
-	}
+.color {
+	border: .1rem solid var(--color-text);
 }
 
-@media (prefers-color-scheme: dark) {
-	.color {
-		border: .1rem solid var(--color-bg-light);
-	}
+/* 2026-2027 */
+
+#light-2026,
+#pink-2026 {
+	color: var(--color-dark-2026);
 }
 
+#dark-2026,
+#blurple-2026 {
+	color: var(--color-light-2026);
+}
+
+#light-2026 { background-color: var(--color-light-2026); }
+#dark-2026 { background-color: var(--color-dark-2026); }
+#pink-2026 { background-color: var(--color-pink-2026); }
+#blurple-2026 { background-color: var(--color-blurple-2026); }
+
+/* 2025 */
+
 #bg-light-2025,
 #warn-light-2025 {
 	color: var(--color-text-light-2025);