init - PoC

theme/tavern/assets/style.css

@@ -0,0 +1,231 @@
+body {
+    max-width: 1200px;
+    margin: 40px auto;
+    padding: 0 20px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    line-height: 1.6;
+    color: #333;
+}
+
+header {
+    border: 1px solid #efefef;
+    padding: 20px;
+    margin-bottom: 40px;
+    border-radius: 4px;
+    text-align: center;
+}
+
+img {
+    max-width: 100%;
+}
+
+hr {
+	border: 1px solid #efefef;
+}
+
+h1 {
+    margin: 0;
+}
+main {
+  max-width: 900px;
+  margin: auto;
+}
+
+.header-logo {
+    vertical-align: middle;
+}
+
+.blog-description {
+    margin: 10px 0 0 0;
+    color: #666;
+    font-size: 0.9em;
+}
+
+.main-nav {
+    margin-top: 15px;
+    font-weight: bold;
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.nav-item {
+   color: black;
+   text-decoration: none;
+  padding: 10px;
+  font-weight: bold;
+  border: 1px solid #e7e7e7;
+    border-left-width: 1px;
+    border-left-style: solid;
+    border-left-color: rgb(231, 231, 231);
+  border-left: 10px solid #e46a67;
+  margin: 5px; 
+  border-radius: 4px;
+}
+
+.nav-item:hover {
+    border-color: #e46a67;
+    color: #e46a67;
+}
+
+a {
+    color: #0066cc;
+    text-decoration: none;
+    font-size: 0.95em;
+}
+
+.post-content a {
+    text-decoration: none;
+    border-bottom: 2px dashed #fbb000;
+    color: black;
+}
+
+.post-content h1,
+.post-content h2,
+.post-content h3,
+.post-content h4,
+.post-content h5,
+.post-content h6 {
+    border-left: 5px solid #fbb000;
+    border-bottom: 5px solid #fbb000;
+    padding-left: 15px;
+    padding-right: 15px;
+    border-radius: 5px;
+}
+
+.tile-content h1,
+.tile-content h2,
+.tile-content h3,
+.tile-content h4,
+.tile-content h5,
+.tile-content h6 {
+    border: none;
+    padding-left: 15px;
+  padding-right: 15px;
+  border-radius: 5px;
+}
+
+
+/* Grid layout for post tiles */
+.post-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 20px;
+    margin-top: 40px;
+    grid-auto-rows: auto;
+}
+
+/* Individual post tile */
+.post-tile {
+    border: 1px solid #efefef;
+    border-radius: 4px;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    border-left: 10px solid #fbb000;
+}
+
+.post-tile:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    border-color: #fbb000;
+}
+
+/* Tile link wrapper */
+.tile-link {
+    text-decoration: none;
+    color: inherit;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
+/* Content section */
+.tile-content {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
+.post-meta {
+    color: #666;
+    font-size: 0.85em;
+    margin-bottom: 12px;
+    font-weight: 500;
+    border: 1px solid #efefef;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 5px;
+}
+
+.post-title {
+    margin: 0 0 12px 0;
+    font-size: 1.25em;
+    color: #333;
+    line-height: 1.4;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 5px;
+  text-align: center;
+}
+
+pre {
+    margin-left: 10px;
+  border: 1px solid #d3d3d3;
+  padding: 10px;
+}
+
+.tile-link:hover .post-title {
+    color: #fbb000;
+}
+
+.post-excerpt {
+    color: #666;
+    font-size: 0.9em;
+    line-height: 1.6;
+    margin-top: 10px;
+}
+
+.post-excerpt ul,
+.post-excerpt ol {
+    margin: 10px 0;
+    padding-left: 20px;
+}
+
+.post-excerpt li {
+    margin: 5px 0;
+}
+
+.post-excerpt p {
+    margin: 10px 0;
+}
+
+.post-excerpt a {
+    pointer-events: auto;
+    position: relative;
+    z-index: 10;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .post-grid {
+        grid-template-columns: 1fr;
+        gap: 15px;
+    }
+}
+
+footer {
+    margin-top: 60px;
+    padding-top: 20px;
+    border-top: 1px solid #efefef;
+    text-align: center;
+    color: #666;
+    font-size: 0.9em;
+}
+
+footer p {
+    font-size: 0.7rem;
+}

theme/tavern/templates/feeds.tmpl

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    {% include 'meta.tmpl' %}
+</head>
+<body>
+    {% include 'header.tmpl' %}
+
+    <main>
+        <h2>Feeds</h2>
+        <ul>
+            {% for feed in feeds %}
+            <li><a href="/feed/{{ feed.name }}/">{{ feed.name }}</a> ({{ feed.count }} posts)</li>
+            {% endfor %}
+        </ul>
+    </main>
+
+    {% include 'footer.tmpl' %}
+</body>
+</html>

theme/tavern/templates/footer.tmpl

@@ -0,0 +1,3 @@
+<footer>
+    <p>Generated with <a href="https://git.uphillsecurity.com/cf7/picopaper">picopaper</a></p>
+</footer>

theme/tavern/templates/header.tmpl

@@ -0,0 +1,18 @@
+<header>
+    <h1>
+        <a href="/" style="color: #333; text-decoration: none;">
+            {% if not hide_logo %}
+            <img src="{{ logo_path }}" alt="{{ blog_title }}" class="header-logo">
+            {% endif %}
+            {% if not hide_title %}
+            {{ blog_title }}
+            {% endif %}
+        </a>
+    </h1>
+    <p class="blog-description">{{ blog_description }}</p>
+    <nav class="main-nav">
+        {% for item in navbar_items %}
+        <a href="{{ item.url }}" class="nav-item">{{ item.text }}</a>
+        {% endfor %}
+    </nav>
+</header>

theme/tavern/templates/index.tmpl

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    {% include 'meta.tmpl' %}
+</head>
+<body>
+    {% include 'header.tmpl' %}
+
+    <main class="post-grid">
+        {% for post in posts %}
+        <article class="post-tile">
+            <a href="{{ post.url }}" class="tile-link">
+                <div class="tile-content">
+                    <div class="post-meta">{{ post.date }}</div>
+                    <h2 class="post-title">{{ post.title }}</h2>
+                    {% if post.type == 'short' and post.content %}
+                    <div class="post-excerpt">
+                        {{ post.content | safe }}
+                    </div>
+                    {% endif %}
+                </div>
+            </a>
+        </article>
+        {% endfor %}
+    </main>
+
+    {% include 'footer.tmpl' %}
+</body>
+</html>

theme/tavern/templates/meta.tmpl

@@ -0,0 +1,6 @@
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="description" content="{{ blog_description }}">
+<title>{{ title }}</title>
+<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
+<link rel="stylesheet" href="/assets/style.css">

theme/tavern/templates/post.tmpl

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    {% include 'meta.tmpl' %}
+</head>
+<body>
+    {% include 'header.tmpl' %}
+
+    <main>
+        <article class="post">
+            <div class="post-meta">{{ post.date }}</div>
+            <h2>{{ post.title }}</h2>
+            <div class="post-content">
+                {{ post.content | safe }}
+            </div>
+        </article>
+
+        {% include 'random_posts.tmpl' %}
+    </main>
+
+    {% include 'footer.tmpl' %}
+</body>
+</html>

theme/tavern/templates/random_posts.tmpl

@@ -0,0 +1,23 @@
+{% if all_posts %}
+{# Filter out pages and current post, then randomly select 5 #}
+{% set available_posts = all_posts | selectattr('type', 'ne', 'page') | list %}
+{% if post %}
+  {% set available_posts = available_posts | rejectattr('slug', 'equalto', post.slug) | list %}
+{% endif %}
+{% if available_posts %}
+  {% set random_posts = available_posts | random_sample(5) %}
+  {% if random_posts %}
+<div class="random-posts">
+  <h3>More Posts</h3>
+  <ul>
+    {% for p in random_posts %}
+    <li>
+      <a href="{{ p.url }}">{{ p.title }}</a>
+      <span class="date">{{ p.date }}</span>
+    </li>
+    {% endfor %}
+  </ul>
+</div>
+  {% endif %}
+{% endif %}
+{% endif %}