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