From 37bdd49690d990ce004a8eb90e060e565a31ec65 Mon Sep 17 00:00:00 2001
From: lichenblankie <lichenblankie@derickphan.com>
Date: Fri, 5 Jun 2026 04:26:22 +0000
Subject: [PATCH] add tinyweb-site theme: clean, light, minimal

---
 themes/tinyweb-site.html | 282 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 282 insertions(+)
 create mode 100644 themes/tinyweb-site.html
diff --git a/themes/tinyweb-site.html b/themes/tinyweb-site.html
new file mode 100644
index 0000000..a2961cf
--- /dev/null
+++ b/themes/tinyweb-site.html
@@ -0,0 +1,282 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="referrer" content="no-referrer">
+    <meta http-equiv="x-dns-prefetch-control" content="off">
+    <style>
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body { min-height: 100vh; }
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
+        font-size: 18px;
+        line-height: 1.6;
+        color: #444;
+        background: #fff;
+        padding: 60px 40px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      a { color: #444; text-decoration: none; cursor: pointer; }
+      a:hover { color: #222; }
+      input, textarea {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
+      }
+      input[type="text"],
+      input[type="url"],
+      input[type="search"],
+      textarea, select {
+        border: 1px solid #ccc;
+        padding: 8px 12px;
+        font-size: 15px;
+        border-radius: 0;
+        background: #fff;
+        color: #444;
+      }
+      input:focus, textarea:focus {
+        outline: none;
+        border-color: #999;
+      }
+      button, input[type="submit"] {
+        border: 1px solid #ccc;
+        padding: 8px 18px;
+        font-size: 13px;
+        text-transform: uppercase;
+        background: #fff;
+        color: #444;
+        cursor: pointer;
+        border-radius: 0;
+        transition: background 0.2s;
+      }
+      button:hover, input[type="submit"]:hover {
+        background: #f5f5f5;
+      }
+      .shell {
+        width: 100%;
+        max-width: 650px;
+      }
+      nav {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        margin-bottom: 30px;
+        flex-wrap: wrap;
+        gap: 12px;
+      }
+      nav .site {
+        font-size: 28px;
+        font-weight: bold;
+        color: #222;
+        text-decoration: none;
+        border-bottom: none;
+      }
+      nav .site:hover { color: #222; }
+      nav .links { display: flex; gap: 8px; flex-wrap: wrap; }
+      nav .links a {
+        font-size: 13px;
+        text-transform: uppercase;
+        padding: 6px 14px;
+        border: 1px solid #ccc;
+        background: #fff;
+        color: #444;
+        text-decoration: none;
+        transition: background 0.2s;
+      }
+      nav .links a:hover {
+        background: #f5f5f5;
+        color: #444;
+      }
+      .content { width: 100%; }
+      h1 {
+        font-size: 32px;
+        font-weight: bold;
+        color: #222;
+        margin-bottom: 20px;
+        line-height: 1.2;
+      }
+      h1 a { color: #222; text-decoration: none; }
+      h2 {
+        font-size: 22px;
+        font-weight: bold;
+        color: #222;
+        margin: 24px 0 12px;
+      }
+      p { margin: 12px 0; color: #444; }
+      a { color: #444; text-decoration: none; border-bottom: 1px solid #ddd; }
+      a:hover { color: #222; border-bottom-color: #999; }
+      em { color: #666; }
+      .result {
+        padding: 20px 0;
+        border-bottom: 1px solid #eee;
+      }
+      .result:last-child { border-bottom: none; }
+      .result > a:first-child {
+        font-size: 18px;
+        color: #222;
+        border-bottom: none;
+      }
+      .result > a:first-child:hover { color: #222; }
+      .note { margin-top: 4px; font-size: 15px; color: #666; }
+      .meta {
+        font-size: 13px;
+        color: #999;
+      }
+      .pagination {
+        font-size: 13px;
+        color: #999;
+        margin: 24px 0;
+        text-align: center;
+      }
+      .pagination a {
+        color: #444;
+        border-bottom: 1px solid #ccc;
+      }
+      .pagination a:hover { color: #222; }
+      .success {
+        color: #444;
+        background: #f5f5f5;
+        border: 1px solid #ddd;
+        padding: 10px 16px;
+        font-size: 15px;
+      }
+      .tags { margin-top: 4px; }
+      .tag, .tags a {
+        font-size: 12px;
+        color: #999;
+        border: 1px solid #ddd;
+        padding: 2px 8px;
+        margin-right: 4px;
+        text-decoration: none;
+      }
+      .tag:hover, .tags a:hover {
+        color: #444;
+        border-color: #ccc;
+      }
+      details {
+        margin: 16px 0;
+        border: 1px solid #eee;
+        padding: 12px 16px;
+        background: #fafafa;
+      }
+      summary { font-size: 15px; color: #666; cursor: pointer; }
+      summary:hover { color: #444; }
+      details ul { margin-top: 8px; padding-left: 20px; }
+      details li { margin: 6px 0; font-size: 15px; }
+      ul, ol { padding-left: 20px; margin: 8px 0; }
+      li { margin: 6px 0; color: #444; }
+      li a { border-bottom: none; }
+      pre {
+        font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', Menlo, Consolas, monospace;
+        font-size: 14px;
+        background: #f5f5f5;
+        border: 1px solid #eee;
+        padding: 16px;
+        overflow-x: auto;
+        color: #444;
+        margin: 12px 0;
+      }
+      code {
+        font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', Menlo, Consolas, monospace;
+        font-size: 14px;
+        background: #f5f5f5;
+        padding: 2px 6px;
+        color: #444;
+      }
+      textarea {
+        font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', Menlo, Consolas, monospace;
+        font-size: 14px;
+        line-height: 1.6;
+        resize: vertical;
+        width: 100%;
+        border: 1px solid #ccc;
+        padding: 10px 12px;
+        background: #fff;
+        color: #444;
+      }
+      table { width: 100%; border-collapse: collapse; margin: 16px 0; }
+      th {
+        text-align: left;
+        font-size: 12px;
+        font-weight: 600;
+        color: #999;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        padding: 8px 12px;
+        border-bottom: 1px solid #eee;
+      }
+      td {
+        padding: 8px 12px;
+        border-bottom: 1px solid #f5f5f5;
+        font-size: 15px;
+      }
+      label { color: #666; }
+      input[type="checkbox"] { accent-color: #444; }
+      hr { border: none; border-top: 1px solid #eee; margin: 16px 0; }
+
+      small {
+        font-size: 13px;
+        color: #999;
+      }
+      footer {
+        width: 100%;
+        margin-top: 40px;
+        padding-top: 16px;
+        border-top: 1px solid #eee;
+        text-align: center;
+        color: #999;
+        font-size: 13px;
+      }
+      footer .clock {
+        font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', Menlo, Consolas, monospace;
+        font-size: 12px;
+        color: #ccc;
+        margin-top: 4px;
+      }
+      ::selection { background: #222; color: #fff; }
+      @media (max-width: 600px) {
+        body { padding: 30px 20px; font-size: 16px; }
+        h1 { font-size: 26px; }
+        nav { flex-direction: column; align-items: flex-start; }
+        nav .links { gap: 6px; }
+        nav .links a { padding: 5px 10px; font-size: 12px; }
+      }
+    </style>
+    </head>
+    <body>
+    <div class="shell">
+      <nav>
+        <a class="site" href="/">{{site_name}}</a>
+        <div class="links">
+          <a href="/pages">browse</a>
+          <a href="/tags">tags</a>
+          <a href="/subscriptions">network</a>
+          {{forum_link}}
+          <a href="/style">customize</a>
+          <a href="/about">about</a>
+        </div>
+      </nav>
+      <div class="content">
+        {{content}}
+      </div>
+      <footer>
+        <div>curated by hand &middot; shared over mesh</div>
+        <div class="clock" id="clock"></div>
+      </footer>
+    </div>
+    <script>
+    (function() {
+      var d = document.getElementById('clock');
+      if (d) {
+        function tick() {
+          var n = new Date();
+          d.textContent = n.toLocaleString();
+        }
+        tick();
+        setInterval(tick, 1000);
+      }
+    })();
+    </script>
+    </body>
+</html>
