Add Zola templates and browser-tested site scaffold

static/style.css

@@ -0,0 +1,377 @@
+@font-face {
+  font-family: "Comic Neue";
+  src: url("/fonts/neue.ttf");
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Comic Neue";
+  src: url("/fonts/neue-bold.ttf");
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: "Comic Mono";
+  src: url("/fonts/comic.ttf");
+}
+
+:root {
+  font:
+    16px/1.5 "Comic Neue",
+    sans-serif;
+  color-scheme: light;
+  --paper: #f5f1e8;
+  --ink: #292828;
+  --muted: #69645f;
+  --rule: #cec7bc;
+  --band: #e7dfd2;
+  --link: #7b392c;
+  --good: #625d55;
+  --mixed: #b28032;
+  --down: #a83f32;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --paper: #181818;
+    --ink: #f3eee5;
+    --muted: #c0b9b0;
+    --rule: #67625c;
+    --band: #302e2b;
+    --link: #efb99b;
+    --good: #c0b9b0;
+    --mixed: #dfb366;
+    --down: #ed9986;
+  }
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --paper: #181818;
+  --ink: #f3eee5;
+  --muted: #c0b9b0;
+  --rule: #67625c;
+  --band: #302e2b;
+  --link: #efb99b;
+  --good: #c0b9b0;
+  --mixed: #dfb366;
+  --down: #ed9986;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0 1rem;
+  background: var(--paper);
+  color: var(--ink);
+}
+
+.shell {
+  max-width: 44rem;
+  min-height: 100svh;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+header,
+footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 0.75rem;
+  padding: 1rem 0;
+}
+
+header {
+  border-bottom: 1px solid var(--rule);
+  flex-wrap: wrap;
+}
+
+footer {
+  border-top: 1px solid var(--rule);
+  padding-block: 0.75rem;
+  color: var(--muted);
+  flex-wrap: wrap;
+}
+
+main {
+  flex: 1;
+  padding: 2rem 0;
+  min-width: 0;
+}
+
+h1 {
+  font-size: 1.5rem;
+  margin: 0 0 0.5rem;
+}
+
+h2 {
+  font-size: 1.2rem;
+}
+
+h3 {
+  font-size: 1.1rem;
+}
+
+p {
+  margin: 0 0 0.6rem;
+}
+
+a {
+  color: var(--link);
+  text-underline-offset: 0.15em;
+}
+
+header a {
+  text-decoration: none;
+}
+
+nav {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+nav span {
+  color: var(--rule);
+}
+
+.brand {
+  color: var(--ink);
+  font-weight: bold;
+}
+
+button,
+select {
+  font: inherit;
+  color: inherit;
+  background: var(--paper);
+  border: 1px solid var(--rule);
+  border-radius: 0;
+}
+
+button {
+  cursor: pointer;
+}
+
+#theme {
+  border: 0;
+  padding: 0 0.2rem;
+  line-height: 1;
+}
+
+#theme svg {
+  width: 0.8em;
+  height: 0.8em;
+  vertical-align: baseline;
+}
+
+:focus-visible {
+  outline: 2px solid var(--ink);
+  outline-offset: 3px;
+}
+
+code,
+pre,
+kbd,
+samp {
+  font-family: "Comic Mono", monospace;
+  font-size: 0.95em;
+}
+
+pre {
+  overflow-x: auto;
+  padding: 0.75rem;
+}
+
+blockquote {
+  margin-inline: 0;
+  padding-left: 1rem;
+  border-left: 2px solid var(--rule);
+}
+
+table {
+  border-collapse: collapse;
+  max-width: 100%;
+  display: block;
+  overflow-x: auto;
+}
+
+th,
+td {
+  padding: 0.4rem 0.7rem;
+  border-bottom: 1px solid var(--rule);
+  text-align: left;
+}
+
+.post {
+  max-width: 48rem;
+  line-height: 1.65;
+}
+
+.post h2,
+.post h3 {
+  margin-top: 1.5rem;
+}
+
+.post time {
+  color: var(--muted);
+}
+
+.post img,
+.mermaid svg {
+  max-width: 100%;
+  height: auto;
+}
+
+.posts {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.posts li {
+  border-bottom: 1px solid var(--rule);
+}
+
+.posts a {
+  display: flex;
+  align-items: start;
+  gap: 1rem;
+  padding: 1rem 0;
+  text-decoration: none;
+}
+
+.posts h2 {
+  margin: 0 0 0.25rem;
+}
+
+.posts p {
+  color: var(--ink);
+}
+
+.posts time {
+  color: var(--muted);
+}
+
+.posts img {
+  width: 25%;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+}
+
+.masthead {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  border-bottom: 3px double var(--ink);
+  padding-bottom: 1rem;
+  margin-bottom: 1rem;
+}
+
+.badge {
+  background: var(--ink);
+  color: var(--paper);
+  padding: 0.7rem;
+  white-space: nowrap;
+}
+
+.health-group {
+  margin-top: 1.25rem;
+}
+
+.health-group h2 {
+  font-size: 1rem;
+  background: var(--band);
+  border-block: 1px solid var(--ink);
+  padding: 0.35rem 0.5rem;
+}
+
+.health-row {
+  display: grid;
+  grid-template-columns: 12rem minmax(0, 1fr);
+  gap: 0.6rem;
+  padding: 0.6rem 0.5rem;
+  border-bottom: 1px solid var(--rule);
+}
+
+.health-row h3 {
+  font: inherit;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.bars {
+  display: grid;
+  grid-template-columns: repeat(30, minmax(0, 1fr));
+  gap: 3px;
+  align-items: center;
+}
+
+.bar {
+  border: 0;
+  height: 1.5rem;
+  min-width: 0;
+  padding: 0;
+}
+
+.good {
+  background: var(--good);
+}
+
+.mixed {
+  background: repeating-linear-gradient(
+    135deg,
+    var(--mixed) 0 3px,
+    var(--paper) 3px 5px
+  );
+}
+
+.down {
+  background: var(--down);
+}
+
+.unknown {
+  background: transparent;
+  box-shadow: inset 0 0 0 1px var(--muted);
+}
+
+.bar[aria-pressed="true"] {
+  outline: 2px solid var(--ink);
+  outline-offset: 2px;
+}
+
+.controls {
+  display: none;
+}
+
+#detail {
+  margin-top: 1rem;
+}
+
+@media (max-width: 600px) {
+  .health-row {
+    grid-template-columns: 1fr;
+  }
+
+  .controls:not([hidden]) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    margin-top: 1rem;
+  }
+
+  .controls label {
+    max-width: 100%;
+  }
+
+  select {
+    max-width: 100%;
+  }
+}