new branding

_includes/head.njk

@@ -23,9 +23,9 @@
 	<meta property="og:description" content="{{ metadata.description }}" />
 
 	<link rel="icon" type="image/x-icon" href="/favicon.ico">
-	<meta property="og:image" content="/img/2025-logo.png" />
+	<meta property="og:image" content="/img/2026-2027-logo-dark.png" />
 	<meta property="og:image:alt"
-	  content="a logo in dark purple and golden yellow. it looks sorta like a folded map, or like a single piece of printer paper that's been folded and cut into the format needed for an 8-page zine. the 8 panels read FEDI ZINE. next to this, a blue and green folded 8-page zine reads 'fest 2025'" />
+	  content="the logo of FediZineFest 2026-2027 which is a 4 by 4 grid of blocky letters reading fedi zine fest 26-27, randomly colored with the 26-27 palette" />
 
 	<meta name="generator" content="{{ eleventy.generator }}">
 

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-light: #f3ccfb;
-  --color-text-light: #640054;
+  --color-dark: #130b16;
-  --color-header-light: #185370;
+  --color-pink: #ea33d2;
-  --color-warn-light: #fbcc0a;
+  --color-blurple: #6d12e2;
 
-  --color-bg-dark: #1f1f1f;
+  --color-bg: light-dark(var(--color-light), var(--color-dark));
-  --color-text-dark: #91c73b;
+  --color-text: light-dark(var(--color-dark), var(--color-light));
-  --color-header-dark: #ff9b37;
+  --color-header: light-dark(var(--color-blurple), var(--color-pink));
-  --color-warn-dark: #540033;
+  --color-warn: light-dark(var(--color-pink), var(--color-blurple));
-
-  --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));
 }
 
 /* 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 {
-	.color {
+	border: .1rem solid var(--color-text);
-		border: .1rem solid var(--color-bg-dark);
-	}
 }
 
-@media (prefers-color-scheme: dark) {
+/* 2026-2027 */
-	.color {
+
-		border: .1rem solid var(--color-bg-light);
+#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);

eleventy.config.js

@@ -24,7 +24,10 @@ export default async function (eleventyConfig) {
 	});
 
 	/* Passthroughs */
-	eleventyConfig.addPassthroughCopy("./favicon.ico");
+	eleventyConfig
+		.addPassthroughCopy("favicon.ico")
+		.addPassthroughCopy("robots.txt")
+		.addPassthroughCopy("fonts");
 
 	/* Images */
 	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {

src/index.md

@@ -3,10 +3,16 @@ eleventyNavigation:
   key: home
   order: 1
 title: FediZineFest
+layout: base.njk
 ---
 
+<h1><span class="bloktype">F</span>edi<span class="bloktype"><wbr>Z</span>ine<span class="bloktype"><wbr>F</span>est</h1>
+
 FediZineFest ran in [2024](/years/2024) and [2025](/years/2025). We're now looking at [FediZineFest 2026-2027](/years/2026-2027).
 
+![the logo of FediZineFest 2026-2027 which is a 4 by 4 grid of blocky letters reading fedi zine fest 26-27, randomly colored with the 26-27 palette](/img/2026-2027-logo-dark.png){class="inset light-mode"}
+![the logo of FediZineFest 2026-2027 which is a 4 by 4 grid of blocky letters reading fedi zine fest 26-27, randomly colored with the 26-27 palette](/img/2026-2027-logo-light.png){class="inset dark-mode"}
+
 ## What
 
 A zine sharing and distribution project for the fediverse.

src/palette.md

@@ -4,6 +4,13 @@ title: Palette
 
 {% css %}{% include "css/palette.css" %}{% endcss %}
 
+## 2026-2027
+
+<p class="color" id="light-2026">#f3ccfb</p>
+<p class="color" id="dark-2026">#130b16</p>
+<p class="color" id="pink-2026">#ea33d2</p>
+<p class="color" id="blurple-2026">#6d12e2</p>
+
 ## 2025
 
 ### Light

src/years/2026-2027/guidelines.md

@@ -1,7 +1,10 @@
 ---
 title: FediZineFest 2026-2027 Guidelines
+layout: base.njk
 ---
 
+<h1><span class="bloktype">F</span>edi<span class="bloktype"><wbr>Z</span>ine<span class="bloktype"><wbr>F</span>est 2026-2027 Guidelines</h1>
+
 ## What
 
 A zine sharing and distribution project for the fediverse.

src/years/2026-2027/index.md

@@ -1,8 +1,12 @@
 ---
 title: FediZineFest 2026-2027
+layout: base.njk
 ---
 
-## Overview
+<h1><span class="bloktype">F</span>edi<span class="bloktype"><wbr>Z</span>ine<span class="bloktype"><wbr>F</span>est 2026-2027</h1>
+
+![the logo of FediZineFest 2026-2027 which is a 4 by 4 grid of blocky letters reading fedi zine fest 26-27, randomly colored with the 26-27 palette](/img/2026-2027-logo-dark.png){class="inset light-mode"}
+![the logo of FediZineFest 2026-2027 which is a 4 by 4 grid of blocky letters reading fedi zine fest 26-27, randomly colored with the 26-27 palette](/img/2026-2027-logo-light.png){class="inset dark-mode"}
 
 The interest form for 2026-2027 is open on the [signup page.](/signup)