From 699e1556ee87e6c02a5d7dacdfe3d202b648dc7d Mon Sep 17 00:00:00 2001
From: Lee Cattarin <lee.cattarin@gmail.com>
Date: Thu, 15 Oct 2026 11:16:26 -0700
Subject: [PATCH] title styling, art series styling

---
 _includes/head.njk         |  1 +
 _includes/layouts/base.njk |  8 +++++-
 _includes/series.njk       | 18 +++++++-----
 css/art.css                | 47 +++++++++++++++++++++++--------
 css/main.css               |  2 --
 css/nav.css                |  1 +
 css/title.css              | 57 ++++++++++++++++++++++++++++++++++++++
 7 files changed, 112 insertions(+), 22 deletions(-)
 create mode 100644 css/title.css

diff --git a/_includes/head.njk b/_includes/head.njk
index 893cfdf..32f5662 100644
--- a/_includes/head.njk
+++ b/_includes/head.njk
@@ -31,6 +31,7 @@
 	<!-- CSS -->
 	<style>{% include "css/main.css" %}</style>
 	<style>{% include "css/nav.css" %}</style>
+	<style>{% include "css/title.css" %}</style>
 	<style>{% getBundle "css" %}</style>
 
   <!-- Fonts -->
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index 32a8378..b2470d3 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -6,7 +6,13 @@
 
 	<main id="main">
 
-	<h1>{{ title }}</h1>
+    <div id="title">
+      <div class="triangle triangle-up-left"></div>
+      <div class="triangle triangle-down-left"></div>
+      <div class="triangle triangle-up-right"></div>
+      <div class="triangle triangle-down-right"></div>
+      h1>{{ title }}</h1>
+    </div>
 
 		<div id="content">
   		{{ content | safe }}
diff --git a/_includes/series.njk b/_includes/series.njk
index 3fa8660..e03727b 100644
--- a/_includes/series.njk
+++ b/_includes/series.njk
@@ -1,9 +1,13 @@
-<h2>{{ series.data.title }}</h2>
+<div class="series">
+  <h2>{{ series.data.title }}</h2>
 
-<div class="imgset">
-  {% for img in series.data.imgs %}
-    <img src="/img/{{ img.src }}" alt="{{ img.alt }}">
-  {% endfor %}
+  <div class="imgset">
+    {% for img in series.data.imgs %}
+      <img src="/img/{{ img.src }}" alt="{{ img.alt }}">
+    {% endfor %}
+  </div>
+
+  <div class="blurb">
+    {{ series.content | safe }}
+  </div>
 </div>
-
-{{ series.content | safe }}
diff --git a/css/art.css b/css/art.css
index 60c4da9..ee5784a 100644
--- a/css/art.css
+++ b/css/art.css
@@ -1,16 +1,39 @@
-h2 {
-	text-align: center;
-}
-
-.imgset {
-	display: flex;
-	justify-content: center;
+.series {
+	display: grid;
 	gap: 1rem;
-	max-width: 100%;
-	flex-flow: row wrap;
 
-	img {
-		max-height: 33vh;
-		width: auto;
+	h2 {
+		text-align: center;
+		grid-area: h2;
+	}
+
+	.imgset {
+		grid-area: img;
+		display: flex;
+		justify-content: center;
+		gap: 1rem;
+		max-width: 100%;
+		flex-flow: row wrap;
+
+		img {
+			max-height: 33vh;
+			width: auto;
+		}
+	}
+
+	.blurb {
+		grid-area: blurb;
+	}
+}
+
+.series:nth-child(odd) {
+	grid-template-columns: 3fr 2fr;
+	grid-template-areas:
+		"h2 img"
+		"blurb img"
+		". img";
+
+	h2, .blurb {
+		text-align: right;
 	}
 }
diff --git a/css/main.css b/css/main.css
index 9a196f1..8d624c6 100644
--- a/css/main.css
+++ b/css/main.css
@@ -98,10 +98,8 @@ h1, h2, h3, h4, h5, h6 {
 
 h1 {
 	color: var(--color-title-text);
-	background: var(--color-title-bg);
 	font-size: 3rem;
 	text-align: center;
-	padding-block: .4em;
 }
 
 h2, h3, h4, h5, h6 {
diff --git a/css/nav.css b/css/nav.css
index 968cb95..439d205 100644
--- a/css/nav.css
+++ b/css/nav.css
@@ -66,6 +66,7 @@ header nav {
 		padding: 0;
 		margin-inline: 1rem;
 		gap: 2rem;
+		z-index: 999;
 	}
 
 	button {
diff --git a/css/title.css b/css/title.css
new file mode 100644
index 0000000..054a893
--- /dev/null
+++ b/css/title.css
@@ -0,0 +1,57 @@
+#title {
+	--height: 7rem;
+
+	height: var(--height);
+	width: 100%;
+	background: var(--color-title-bg);
+
+	h1 {
+		line-height: var(--height);
+	}
+
+	.triangle {
+		--color-triangle: rgba(from var(--color-nav-dark) r g b / .33);
+		width: 28vw;
+		height: var(--height);
+		position: absolute;
+	}
+
+	.triangle-up-left {
+		background-image: linear-gradient(to bottom right, var(--color-triangle) 50%, transparent 50.5%);
+	}
+
+	.triangle-down-left {
+		background-image: linear-gradient(to top right, var(--color-triangle) 50%, transparent 50.5%);
+	}
+
+	.triangle-up-right,
+	.triangle-down-right {
+		right: 0;
+	}
+
+	.triangle-up-right {
+		background-image: linear-gradient(to bottom left, var(--color-triangle) 50%, transparent 50.5%);
+	}
+
+	.triangle-down-right {
+		background-image: linear-gradient(to top left, var(--color-triangle) 50%, transparent 50.5%);
+	}
+}
+
+@media (max-width: 650px) {
+	#title {
+		--height: 5rem;
+
+		.triangle {
+			width: 17vw;
+		}
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	#title {
+		.triangle {
+			--color-triangle: rgba(from var(--color-nav-light) r g b / .33);
+		}
+	}
+}