design is now terminal alike

assets/views/pages/about.html

@@ -1,23 +1,35 @@
 {% extends "base.html" %}
 
 {% block title %}{{ page.title }}{% endblock title %}
+{% block crumb %}about{% endblock crumb %}
 
 {% block content %}
-<article class="space-y-2">
-  <div class="flex flex-wrap items-center justify-between gap-3">
-    <div>
-      <h1 class="text-2xl font-bold">{{ page.title }}</h1>
-      <p class="text-sm opacity-70">About this site.</p>
-    </div>
-    {% if logged_in_admin %}
-    <a href="/admin/about" class="btn btn-ghost btn-sm">Edit page</a>
-    {% endif %}
+<header class="term-cmd">
+  <div>
+    <p class="term-cmd-line">
+      <span class="t-green">visitor@universal-web</span><span class="t-dim">:</span><span class="t-blue">~</span><span class="t-dim">$</span>
+      cat about.txt
+    </p>
+    <h1 class="term-title">{{ page.title }}</h1>
+    <p class="term-sub">// about this site.</p>
   </div>
+  {% if logged_in_admin %}
+  <div class="term-cmd-actions">
+    <a href="/admin/about" class="btn btn-outline btn-sm">[ edit ]</a>
+  </div>
+  {% endif %}
+</header>
 
-  <div class="card border border-base-300 bg-base-100 shadow-sm">
-    <div class="card-body">
-      <div class="leading-relaxed whitespace-pre-line">{{ page.content }}</div>
-    </div>
+<article class="card">
+  <div class="term-head">
+    <span class="term-dots" aria-hidden="true">
+      <span class="term-dot r"></span><span class="term-dot y"></span><span class="term-dot g"></span>
+    </span>
+    <span class="term-head-name">~/about.txt</span>
+    <span class="term-head-meta term-tag is-blue">readonly</span>
+  </div>
+  <div class="card-body">
+    <div class="term-prose whitespace-pre-line">{{ page.content }}</div>
   </div>
 </article>
 {% endblock content %}