apophenia-news/apophenia.news
1
0
Fork 0
mirror of https://github.com/apophenia-news/apophenia.news.git synced 2026-03-17 11:21:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Article page template inspired by Lynchmark UI

Browse Source
This commit is contained in:
multipleof4
2026-02-24 18:39:11 -08:00
parent 0759dc6b47
commit 9e1d6d4fd4
1 changed files with 62 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
templates/article.html Normal file
View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>{{title}} — Apophenia News</title>
<meta name="description" content="{{excerpt}}">
<meta property="og:title" content="{{title}}">
<meta property="og:description" content="{{excerpt}}">
<meta property="og:type" content="article">
<meta property="og:url" content="https://apophenia.news/{{slug}}/">
<link rel="canonical" href="https://apophenia.news/{{slug}}/">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<style>
body{font-family:Inter,system-ui,-apple-system,sans-serif}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.prose h2{font-size:1.25rem;font-weight:700;margin-top:2rem;margin-bottom:.75rem;color:#111827}
.prose h3{font-size:1.1rem;font-weight:600;margin-top:1.5rem;margin-bottom:.5rem;color:#1f2937}
.prose p{margin-bottom:1rem;line-height:1.75;color:#374151}
.prose ul,.prose ol{margin-bottom:1rem;padding-left:1.5rem;color:#374151}
.prose li{margin-bottom:.375rem;line-height:1.7}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose blockquote{border-left:3px solid #d1d5db;padding-left:1rem;margin:1.5rem 0;color:#6b7280;font-style:italic}
.prose img{border-radius:.75rem;margin:1.5rem 0;max-width:100%}
.prose a{color:#3b82f6;text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:#1d4ed8}
.prose strong{color:#111827}
.prose hr{border:none;border-top:1px solid #e5e7eb;margin:2rem 0}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<main class="max-w-2xl mx-auto flex flex-col min-h-screen p-6 lg:p-8">
<nav class="mb-8">
<a href="/" class="inline-flex items-center gap-1.5 text-sm text-gray-400 hover:text-gray-700 transition-colors mono">
<span>←</span> apophenia.news
</a>
</nav>
<article>
<header class="mb-8">
<h1 class="text-3xl font-bold text-gray-900 mb-3">{{title}}</h1>
<div class="flex items-center gap-3 flex-wrap">
<time datetime="{{date_iso}}" class="mono text-xs text-gray-400">{{date}}</time>
<div class="flex gap-1.5">{{tags}}</div>
</div>
</header>
<div class="prose">
{{body}}
</div>
</article>
<footer class="mt-12 pt-8 border-t border-gray-200 flex justify-center">
<a href="https://github.com/apophenia-news/apophenia.news" class="inline-flex items-center gap-2 text-gray-400 hover:text-gray-700 transition-colors" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="w-4 h-4 fill-current"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52 0-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
<span class="mono text-xs font-medium">apophenia-news/apophenia.news</span>
</a>
</footer>
</main>
</body>
</html>