diff --git a/_includes/head.njk b/_includes/head.njk
index 7ae7887..335fb7c 100644
--- a/_includes/head.njk
+++ b/_includes/head.njk
@@ -27,6 +27,8 @@
+
+
{#
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index c3cfb82..8e7d33a 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -2,13 +2,11 @@
{% include "head.njk" %}
-
- {% include "header.njk" %}
+ {% include "header.njk" %}
-
- {{ content | safe }}
-
-
+
+ {{ content | safe }}
+
{% include "footer.njk" %}
diff --git a/_includes/layouts/page.njk b/_includes/layouts/page.njk
index fd1aa7f..bdc08dc 100644
--- a/_includes/layouts/page.njk
+++ b/_includes/layouts/page.njk
@@ -2,10 +2,12 @@
layout: base.njk
---
-{{ title }}
-
{% if hero %}
- 
+
{% endif %}
-{{ content | safe }}
+
+
{{ title }}
+
+ {{ content | safe }}
+
diff --git a/css/main.css b/css/main.css
index b41005f..5b20fdd 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,5 +1,14 @@
:root {
color-scheme: light dark;
+
+ --color-light: #ddd;
+ --color-dark: #222;
+ --color-teal: #014d4e;
+ --color-pink: #ffb2d0;
+
+ --color-bg: light-dark(var(--color-light), var(--color-dark));
+ --color-text: light-dark(var(--color-dark), var(--color-light));
+ --color-accent: light-dark(var(--color-teal), var(--color-pink));
}
/* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */
@@ -25,6 +34,27 @@ body {
line-height: 1.5;
/* 5. Improve text rendering */
-webkit-font-smoothing: antialiased;
+ color: var(--color-text);
+ background-color: var(--color-bg);
+ font-family: sans-serif;
+}
+
+#content {
+ width: 65%;
+ max-width: 1800px;
+ margin: 1rem auto;
+}
+
+@media (max-width: 1100px) {
+ #content {
+ width: 85%;
+ }
+}
+
+@media (max-width: 650px) {
+ #content {
+ width: 92%;
+ }
}
/* 6. Improve media defaults */
@@ -32,6 +62,7 @@ img, picture, video, canvas, svg {
display: block;
max-width: 100%;
height: auto;
+ margin: 0 auto;
}
/* 7. Inherit fonts for form controls */
@@ -58,3 +89,27 @@ h1, h2, h3, h4, h5, h6 {
#root, #__next {
isolation: isolate;
}
+
+/* Basic elements */
+h1, h2, h3, h4, h5, h6 {
+ font-family: serif;
+}
+
+h1, h2, h3, h4, h5, h6,
+a {
+ color: var(--color-accent);
+}
+
+a {
+ padding: .1rem;
+ border-radius: .05rem;
+}
+
+a:focus-visible {
+ outline: solid var(--color-accent);
+}
+
+.hero {
+ aspect-ratio: 32 / 9;
+ object-fit: cover;
+}
diff --git a/css/nav.css b/css/nav.css
new file mode 100644
index 0000000..d137ba8
--- /dev/null
+++ b/css/nav.css
@@ -0,0 +1,34 @@
+/* Header, footer, nav */
+#skip {
+ background-color: var(--color-bg);
+ position: absolute;
+ left: -999px;
+ top: -999px;
+}
+
+#skip:focus-visible {
+ left: 10%;
+ top: 5%;
+}
+
+header a[aria-current="page"]::before,
+footer a[aria-current="page"]::before {
+ content: "> " / "";
+}
+
+header a[aria-current="page"]::after,
+footer a[aria-current="page"]::after {
+ content: " <" / "";
+}
+
+header h2 a {
+ text-decoration: none;
+}
+
+nav ul {
+ display: flex;
+ justify-content: center;
+ flex-flow: row wrap;
+ list-style: none;
+ gap: 1rem;
+}
diff --git a/css/print.css b/css/print.css
new file mode 100644
index 0000000..e4a75de
--- /dev/null
+++ b/css/print.css
@@ -0,0 +1,23 @@
+/* Print media */
+@media print {
+ header,
+ footer,
+ nav {
+ display: none;
+ }
+
+ body {
+ background-color: #fff;
+ width: 95vw;
+ }
+
+ body,
+ h1, h2, h3, h4, h5,
+ a {
+ color: #000;
+ }
+
+ a::after {
+ content: " (" attr(href) ")";
+ }
+}