title styling, art series styling

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