add HTMX and view transitions CSS for app-like feel

commit
f078c89
parent
ecf04d3
author
scooter
date
2026-04-11T04:54:22Z
1 files changed, +45, -6
M html/base.layout.tmpl
 1@@ -5,15 +5,50 @@
 2     <meta charset='utf-8'>
 3     <meta name="viewport" content="width=device-width, initial-scale=1" />
 4     <title>{{template "title" .}}</title>
 5-
 6     <meta name="keywords" content="git code forge repo repository" />
 7-
 8     {{template "meta" .}}
 9-
10-    <link rel="preload" href="{{.Repo.RootRelative}}{{.Repo.CSSFile}}" as="style" onload="this.rel='stylesheet'">
11-    <noscript><link rel="stylesheet" href="{{.Repo.RootRelative}}{{.Repo.CSSFile}}"></noscript>
12+    <style>
13+      /* Critical CSS - inlined to prevent FOUC */
14+      :root {
15+        --line-height: 1.3rem;
16+        --grid-height: 0.65rem;
17+        --bg-color: #282a36;
18+        --text-color: #f8f8f2;
19+        --border: #6272a4;
20+        --link-color: #8be9fd;
21+        --hover: #ff79c6;
22+        --visited: #8be9fd;
23+        --white: #f2f2f2;
24+        --white-light: #f2f2f2;
25+        --white-dark: #e8e8e8;
26+        --grey: #414558;
27+        --grey-light: #6a708e;
28+        --code: #414558;
29+        --pre: #252525;
30+        --blockquote: #bd93f9;
31+        --blockquote-bg: #353548;
32+        --text-red: #ff5555;
33+        --text-green: #50fa7b;
34+      }
35+      html {
36+        background-color: var(--bg-color);
37+        color: var(--text-color);
38+        font-size: 16px;
39+        line-height: var(--line-height);
40+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
41+        -webkit-text-size-adjust: 100%;
42+        -moz-tab-size: 4;
43+        tab-size: 4;
44+      }
45+      body {
46+        margin: 0 auto;
47+        max-width: 900px;
48+      }
49+      *, ::before, ::after { box-sizing: border-box; }
50+    </style>
51+    <link rel="stylesheet" href="{{.Repo.RootRelative}}{{.Repo.CSSFile}}">
52   </head>
53-  <body>
54+  <body hx-boost="true" hx-swap="innerHTML transition:true">
55     <header>{{template "header" .}}</header>
56     <main>{{template "content" .}}</main>
57     <hr />
58@@ -87,6 +122,10 @@
59       scheduleUpdate();
60     })();
61     </script>
62+    <script type="module"
63+        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/htmx.esm.min.js"
64+        integrity="sha384-PcS7xfab7VmrX3d1pc3sw10FpukcW7k3kZT2sFgm1lti8gAT/ti9n9KEq/qRnfLT"
65+        crossorigin="anonymous"></script>
66   </body>
67 </html>
68 {{end}}