Build the first usable version of the blog

This adds the Lektor project structure, models, templates, styling,
feeds, categories, tags, archives, custom Markdown heading handling, and
the initial content needed to make the blog usable.

1 files changed, 753 insertions, 0 deletions

diff --git a/assets/static/css/style.css b/assets/static/css/style.css
new file mode 100644
index 0000000..ca7443a
--- /dev/null
+++ b/assets/static/css/style.css
@@ -0,0 +1,753 @@
+@charset "UTF-8";
+
+/* 
+=============================================================================
+CUSTOM PROPERTIES
+=============================================================================
+*/
+:root {
+  /* Named palette */
+  --black: light-dark(#575279, #393b44);
+  --red: light-dark(#b4637a, #c94f6d);
+  --green: light-dark(#618774, #81b29a);
+  --yellow: light-dark(#ea9d34, #dbc074);
+  --blue: light-dark(#286983, #719cd6);
+  --magenta: light-dark(#907aa9, #9d79d6);
+  --cyan: light-dark(#56949f, #63cdcf);
+  --white: light-dark(#e5e9f0, #dfdfe0);
+  --orange: light-dark(#d7827e, #f4a261);
+  --pink: light-dark(#d685af, #d67ad2);
+  /* Dim palette */
+  --dim-black: light-dark(#504c6b, #30323a);
+  --dim-red: light-dark(#a5576d, #ab435d);
+  --dim-green: light-dark(#597668, #6e9783);
+  --dim-yellow: light-dark(#dd9024, #baa363);
+  --dim-blue: light-dark(#295e73, #6085b6);
+  --dim-magenta: light-dark(#816b9a, #8567b7);
+  --dim-cyan: light-dark(#50848c, #54aeb0);
+  --dim-white: light-dark(#c8cfde, #bebebe);
+  --dim-foreground: light-dark(#4c4769, #aeafb0);
+  /* Bright palette */
+  --bright-black: light-dark(#5f5695, #575860);
+  --bright-red: light-dark(#c26d85, #d16983);
+  --bright-green: light-dark(#629f81, #8ebaa4);
+  --bright-yellow: light-dark(#eea846, #e0c989);
+  --bright-blue: light-dark(#2d81a3, #86abdc);
+  --bright-magenta: light-dark(#9a80b9, #baa1e2);
+  --bright-cyan: light-dark(#5ca7b4, #7ad5d6);
+  --bright-white: light-dark(#e6ebf3, #e4e4e5);
+  --bright-foreground: light-dark(#625c87, #d6d6d7);
+  /* Semantic */
+  --foreground: light-dark(#575279, #cdcecf);
+  --background: light-dark(#faf4ed, #192330);
+  /* Layout */
+  --measure: 60ch;
+  --column-min-width: calc(1/3 * 100vw);
+  --column-max-width: 100%;
+  /* Gradient border — reused in header, footer */
+  --gradient-border: linear-gradient(
+    to right,
+    var(--foreground),
+    var(--green),
+    var(--foreground)
+  );
+
+  /* Responsive layout */
+  @media (min-width: 500px) {
+    --column-max-width: var(--measure);
+  }
+
+  &:has(input[name="theme-switcher"][value="light dark"]:checked) {
+    color-scheme: light dark;
+  }
+
+  &:has(input[name="theme-switcher"][value="light"]:checked) {
+    color-scheme: light;
+  }
+
+  &:has(input[name="theme-switcher"][value="dark"]:checked) {
+    color-scheme: dark;
+  }
+}
+
+/*
+=============================================================================
+BASE
+=============================================================================
+ */
+html {
+  font-size: 14px;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  min-width: var(--column-min-width);
+  max-width: var(--column-max-width);
+  margin: 0 auto;
+  background-color: var(--background);
+  color: var(--foreground);
+  font-family: "Libre Baskerville", Georgia, serif;
+  font-size: clamp(1rem, 1.5vw, 1.4rem);
+  line-height: 1.6;
+
+  @media (max-width: 500px) {
+    padding: 0 1.5rem;
+  }
+
+  & > footer {
+    border-image-slice: 1;
+    border-image-source: var(--gradient-border);
+    border-image-width: 1px 0 0 0;
+    border-top: 1px solid;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 2rem;
+    margin-top: auto;
+    padding-top: 0.5rem;
+
+    @media (max-width: 500px) {
+      flex-direction: column;
+      gap: 2rem;
+    }
+
+    h2 {
+      font-size: clamp(1.2rem, 2.5vw, 1.7rem);
+      font-style: italic;
+      font-weight: 400;
+      line-height: 1;
+    }
+
+    section div {
+      display: flex;
+      flex-direction: row;
+      gap: 0.25rem;
+    }
+
+    & > section[aria-label="Follow me"] a {
+      background-color: var(--green);
+      display: inline-block;
+      height: 3rem;
+      mask-size: cover;
+      width: 3rem;
+
+      &:hover {
+        background-color: var(--blue);
+      }
+
+      &#atom {
+        mask-image: url("/static/images/rss.svg");
+      }
+
+      &#mastodon {
+        mask-image: url("/static/images/mastodon.svg");
+      }
+
+      &#xmpp {
+        mask-image: url("/static/images/xmpp.svg");
+      }
+
+      &#email {
+        mask-image: url("/static/images/email.svg");
+      }
+    }
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+  }
+}
+
+/*
+=============================================================================
+TYPOGRAPHY
+=============================================================================
+*/
+
+/* --- Headings --- */
+h1 {
+  font-size: clamp(2rem, 4vw, 3.2rem);
+  font-weight: 700;
+  line-height: 1;
+  margin: 0 0 0.5rem 0;
+}
+
+h2 {
+  font-size: clamp(1.5rem, 3vw, 2.2rem);
+  font-style: italic;
+  font-weight: 500;
+  line-height: 1;
+  margin: 1rem 0;
+}
+
+h3 {
+  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
+  font-style: italic;
+  font-weight: 400;
+  line-height: 1;
+  margin-bottom: 1rem;
+}
+
+/* --- Body text --- */
+p {
+  font-size: clamp(1rem, 1.5vw, 1.4rem);
+  line-height: 1.5em;
+  margin: 0;
+  text-align: justify;
+  text-wrap: pretty;
+  word-spacing: 0.16em;
+
+  &.center {
+    text-align: center;
+  }
+}
+
+blockquote {
+  font-style: italic;
+  border-left: 2px solid var(--blue);
+  margin: 1em 0 1em 0.5em;
+  padding-left: 0.5em;
+}
+
+/* --- Lists --- */
+ul,
+ol,
+dl {
+  font-size: clamp(1rem, 1.5vw, 1.4rem);
+  line-height: 2rem;
+}
+
+li,
+dd {
+  max-inline-size: var(--measure);
+}
+
+/* --- Rules --- */
+hr {
+  border: 0;
+  border-top: 2px solid var(--blue);
+  margin: 1em 0;
+}
+
+/* --- Links --- */
+a {
+  color: var(--green);
+  text-decoration: none;
+  text-decoration-thickness: 0.05em;
+  text-underline-offset: 0.1em;
+
+  &:hover {
+    color: var(--blue);
+  }
+}
+
+/* 
+=============================================================================
+SKIP LINK (accessibility)
+=============================================================================
+ */
+.skip-link {
+  background: #fff;
+  color: #000;
+  left: 0;
+  padding: 0.5rem 1rem;
+  position: absolute;
+  text-decoration: none;
+  top: 0;
+  transform: translateY(-120%);
+  transition: transform 0.2s ease;
+  z-index: 1000;
+
+  &:focus,
+  &:focus-visible {
+    transform: translateY(0);
+  }
+}
+
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+/* 
+=============================================================================
+SITE HEADER
+=============================================================================
+*/
+body > header {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  justify-content: space-evenly;
+  margin-top: 4rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid;
+  border-image-slice: 1;
+  border-image-source: var(--gradient-border);
+  border-image-width: 0 0 1px 0;
+
+  & > div {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 0.25rem;
+  }
+
+  svg {
+    max-width: 4em;
+    max-height: 4em;
+    fill: var(--green);
+
+    @media (max-width: 500px) {
+      display: none;
+    }
+  }
+
+  p {
+    font-size: clamp(1.1rem, 2vw, 1.75rem);
+    font-style: italic;
+    max-width: unset;
+  }
+
+  /* --- Navigation --- */
+  nav {
+    ul {
+      display: flex;
+      flex-direction: row;
+      gap: 1rem;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    a[aria-current="page"] {
+      color: var(--blue);
+
+      &:hover {
+        color: var(--bright-blue);
+      }
+    }
+  }
+
+  /* --- Theme switcher --- */
+  fieldset {
+    align-items: center;
+    border: 0;
+    display: flex;
+    flex-direction: row;
+    gap: 0.25rem;
+    justify-content: flex-start;
+    margin: 0;
+    padding: 0;
+
+    input[type="radio"] {
+      display: none;
+
+      &:checked + span {
+        background-color: var(--yellow);
+      }
+    }
+
+    label span {
+      background-color: var(--foreground);
+      cursor: pointer;
+      display: block;
+      height: 1.5rem;
+      mask-size: cover;
+      width: 1.5rem;
+    }
+  }
+}
+
+#lightmode + span,
+#automode + span,
+#darkmode + span {
+  mask-repeat: no-repeat;
+  mask-position: 50% 50%;
+}
+
+#lightmode + span {
+  mask-image: url("/static/images/light.svg");
+}
+
+#automode + span {
+  mask-image: url("/static/images/auto.svg");
+}
+
+#darkmode + span {
+  mask-image: url("/static/images/dark.svg");
+}
+
+/*
+=============================================================================
+MAIN
+=============================================================================
+*/
+main {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 2rem;
+  margin-top: 2rem;
+}
+
+/*
+=============================================================================
+ARTICLES
+=============================================================================
+*/
+article {
+  max-width: var(--column-max-width);
+  min-width: var(--column-min-width);
+
+  & > header {
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    justify-content: space-between;
+
+    &:not(:has(nav)) {
+      margin-bottom: 2rem;
+    }
+
+    & > div {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+      max-width: calc(2 / 3 * 100%);
+
+      /* --- Article metadata --- */
+      & > dl {
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        font-size: 1rem;
+        gap: calc(1 / 3 * 1rem);
+        margin: 0;
+
+        div {
+          align-items: center;
+          border: 1px solid var(--foreground);
+          border-radius: 0.5rem;
+          display: flex;
+          flex-direction: row;
+        }
+
+        dt {
+          color: var(--bright-blue);
+          padding-left: calc(1 / 3 * 1rem);
+          padding-right: calc(1 / 3 * 1rem);
+        }
+
+        dd {
+          margin: 0;
+          padding-right: calc(1 / 3 * 1rem);
+
+          a {
+            color: var(--green);
+          }
+        }
+
+        @media (max-width: 700px) {
+          margin-top: 2rem;
+        }
+
+        @media (max-width: 500px) {
+          flex-direction: column;
+          align-items: flex-start;
+        }
+      }
+    }
+
+    h2 {
+      margin-bottom: 0.25rem;
+      margin-top: 0;
+    }
+
+    /* --- TOC --- */
+    & > nav {
+      border: 1px solid var(--foreground);
+      border-radius: 0.5rem;
+      font-size: 1rem;
+      line-height: 1.4;
+      padding: 0.75rem;
+      max-width: calc(1 / 3 * 100%);
+
+      & > p {
+        color: var(--blue);
+        font-size: 1em;
+        font-weight: 700;
+        line-height: 1.2;
+        margin: 0 0 0.5rem 0;
+      }
+
+      ol {
+        font-size: 1em;
+        line-height: 1.4;
+        margin: 0;
+        padding-left: 1.5em;
+
+        ol {
+          margin-top: 0.25rem;
+          padding-left: 1.25em;
+        }
+      }
+
+      li {
+        max-inline-size: none;
+
+        & + li {
+          margin-top: 0.25rem;
+        }
+      }
+
+      a {
+        overflow-wrap: anywhere;
+      }
+
+      @media (max-width: 700px) {
+        margin-top: 2rem;
+      }
+    }
+  }
+
+  /* --- Article body --- */
+  p {
+    max-inline-size: var(--measure);
+
+    & + p {
+      margin-top: 2rem;
+    }
+  }
+
+  & > h3:not(:first-of-type) {
+    margin-top: 2rem;
+  }
+
+  & > footer {
+    color: var(--dim-foreground);
+    font-style: italic;
+    margin-top: 1.5rem;
+
+    p {
+      display: inline;
+      font-size: 1.2rem;
+      line-height: 1.5;
+      margin: 0;
+      padding: 0;
+    }
+
+    ul {
+      font-size: 1.2rem;
+      line-height: 1.5;
+      margin: 0;
+      padding: 0;
+      display: inline-flex;
+      flex-wrap: wrap;
+      list-style: none;
+    }
+
+    li {
+      display: flex;
+      max-inline-size: none;
+    }
+  }
+
+  /* --- Article separator --- */
+  & + hr {
+    align-items: center;
+    background: none;
+    border: 0;
+    display: flex;
+    height: 1em;
+    justify-content: center;
+    margin: 4em 0;
+    position: relative;
+    width: 100%;
+
+    &::before {
+      background-image: var(--gradient-border);
+      content: "";
+      height: 1px;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 50%;
+    }
+
+    &::after {
+      background-color: var(--background);
+      color: var(--blue);
+      content: "§";
+      padding: 0 1rem;
+      position: relative;
+      transform: rotate(90deg);
+      z-index: 1;
+    }
+  }
+}
+
+/*
+=============================================================================
+PAGINATION
+=============================================================================
+ */
+nav:is(
+  [aria-label="Page navigation"],
+  [aria-label="Year archive navigation"],
+  [aria-label="Monthly archive navigation"]
+) {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  ol {
+    align-items: center;
+    border: 1px solid var(--foreground);
+    border-radius: 0.5rem;
+    display: flex;
+    flex-direction: row;
+    gap: 0.25rem;
+    list-style: none;
+    margin: 2rem 0;
+    padding: 0.25rem;
+  }
+
+  a,
+  span {
+    align-items: center;
+    display: flex;
+    height: 2rem;
+    justify-content: center;
+    min-width: 2rem;
+    padding-inline: 0.5rem;
+  }
+
+  & a {
+    border-radius: 0.5rem;
+
+    &:hover,
+    &[aria-current="page"]:hover {
+      background-color: var(--blue);
+      color: var(--foreground);
+    }
+
+    &[aria-current="page"] {
+      color: var(--blue);
+    }
+  }
+
+  span[aria-disabled="true"] {
+    color: var(--dim-foreground);
+  }
+}
+
+/*
+=============================================================================
+IMAGES
+=============================================================================
+*/
+img {
+  height: auto;
+  max-width: 100%;
+
+  &.center {
+    display: block;
+    margin-inline: auto;
+  }
+
+  &.round {
+    border-radius: 100%;
+  }
+
+  &.w25 {
+    width: 25%;
+  }
+
+  &.w33 {
+    width: calc(1 / 3 * 100%);
+  }
+
+  &.w50 {
+    width: 50%;
+  }
+
+  &.w66 {
+    width: calc(2 / 3 * 100%);
+  }
+
+  &.w75 {
+    width: 75%;
+  }
+
+  &.breakout-xs {
+    width: calc(100% + 16rem);
+    transform: translateX(-8rem);
+  }
+
+  &.breakout-sm {
+    width: calc(100% + 24rem);
+    transform: translateX(-12rem);
+  }
+
+  &.breakout-md {
+    width: calc(100% + 32rem);
+    transform: translateX(-16rem);
+  }
+
+  &.breakout-lg {
+    width: calc(100% + 48rem);
+    transform: translateX(-24rem);
+  }
+
+  &.breakout-xl {
+    width: calc(100% + 64rem);
+    transform: translateX(-32rem);
+  }
+
+  &.breakout-full {
+    width: 100vw;
+    margin-left: calc(50% - 50vw);
+  }
+
+  &.breakout-xs,
+  &.breakout-sm,
+  &.breakout-md,
+  &.breakout-lg,
+  &.breakout-xl,
+  &.breakout-full {
+    max-width: 100vw;
+  }
+
+  @media (max-width: 500px) {
+    &.breakout-xs,
+    &.breakout-sm,
+    &.breakout-md,
+    &.breakout-lg,
+    &.breakout-xl {
+      width: 100vw;
+      transform: none;
+      margin-left: calc(50% - 50vw);
+    }
+  }
+}
+
+.missing-publication-date-warning {
+  background: var(--red);
+  color: var(--foreground);
+  font-weight: 700;
+  font-size: 1.1rem;
+}
+
+.missing-publication-date-warning > dt {
+  color: var(--foreground);
+}