Establish the publication foundation

2026-07-14 11:54:31 +01:00
commit 006955bfc8
46 changed files with 7704 additions and 0 deletions
@@ -0,0 +1,98 @@
+---
+import { site } from '../site.config';
+---
+
+<footer>
+  <div class="shell footer-grid">
+    <div>
+      <p class="footer-title">{site.title}</p>
+      <p>{site.description}</p>
+    </div>
+    <div>
+      <p class="footer-label">Read independently</p>
+      <a href="/rss.xml">RSS feed</a><br />
+      <a href={site.repositoryUrl}>Public repository</a>
+    </div>
+    <div>
+      <p class="footer-label">Editorial record</p>
+      <a href={`${site.repositoryUrl}/src/branch/main/EDITORIAL.md`}>Commitments</a><br />
+      <a href={`${site.repositoryUrl}/commits/branch/main`}>Revision history</a>
+    </div>
+  </div>
+  <div class="shell colophon">
+    <span>© {new Date().getFullYear()} Ana</span>
+    <span>Static HTML · no accounts · no tracking scripts</span>
+  </div>
+</footer>
+
+<style>
+  footer {
+    margin-top: 7rem;
+    padding: 3.5rem 0 1.5rem;
+    border-top: 1px solid var(--ink);
+    background: var(--ink);
+    color: var(--paper);
+  }
+
+  .footer-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    gap: 3rem;
+  }
+
+  p {
+    max-width: 38rem;
+    margin: 0.25rem 0;
+    color: #bcb8af;
+  }
+
+  .footer-title {
+    color: var(--paper);
+    font-family: 'Newsreader', Georgia, serif;
+    font-size: 2rem;
+    line-height: 1;
+  }
+
+  .footer-label {
+    margin-bottom: 0.75rem;
+    color: #8e8a82;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.68rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  a {
+    color: var(--paper);
+    font-size: 0.85rem;
+  }
+
+  a:hover {
+    color: #9fb8d4;
+  }
+
+  .colophon {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-top: 3rem;
+    padding-top: 1rem;
+    border-top: 1px solid #393937;
+    color: #8e8a82;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.66rem;
+    text-transform: uppercase;
+  }
+
+  @media (max-width: 700px) {
+    .footer-grid {
+      grid-template-columns: 1fr;
+      gap: 2rem;
+    }
+
+    .colophon {
+      align-items: flex-start;
+      flex-direction: column;
+    }
+  }
+</style>