blog.grace.moe

commit b0f7b1ec7cb7ac34edd544df71cdb68dede79623
parent 722ce32f114f123a62ea244cad01658f4d94af0f
Author: gracefu <81774659+gracefuu@users.noreply.github.com>
Date:   Fri,  2 May 2025 20:46:44 +0800

Make header look nicer

Diffstat:
M
layouts/index.shtml
 | 
5
-----
M
layouts/page.raw.shtml
 | 
30
+++++++++++++++++++++++++-----
M
layouts/page.shtml
 | 
30
+++++++++++++++++++++++++-----
M
layouts/post.raw.shtml
 | 
33
+++++++++++++++++++++++++++------
M
layouts/post.shtml
 | 
33
+++++++++++++++++++++++++++------

5 files changed, 104 insertions(+), 27 deletions(-)
diff --git a/layouts/index.shtml b/layouts/index.shtml
@@ -1,10 +1,5 @@
 <extend template="base.shtml">
 <div id="content">
-  <style>
-    #post-header {
-      margin-block-end: 1.2em;
-    }
-  </style>
   <main>
     <article class="hierarchical limit-children" :html="$page.content()"></article>
   </main>
diff --git a/layouts/page.raw.shtml b/layouts/page.raw.shtml
@@ -7,17 +7,37 @@
       margin-top: 40px;
     }
 
-    #post-header>p>time,
-    #post-header>p>span {
+    main {
+      position: relative;
+    }
+    #post-header {
+      position: absolute;
+      top: -1.4em;
+      color: #711;
+    }
+    #post-header > p {
+      display: flex;
+      gap: 0.5ch;
       font-size: 0.8em;
     }
+    #post-header > p > * {
+      background: #ffe8c8;
+      border-radius: 5px;
+      padding-inline: 0.5ch;
+    }
+    #post-header > p > tag {
+      background: #cef;
+    }
   </style>
   <main>
-    <header id="post-header" class="non-hierarchical limit-children">
+    <header id="post-header" class="limit-children">
       <p>
         <time class="date" datetime="$page.date.format('2006-01-02 15:04:05MST')" :text="$page.date.format('2006-01-02')"></time>
-        ·
-        <span rel="author" :text="$page.author"></span>
+        <author :text="$page.author"></author>
+        <ctx :loop="$page.tags">
+          <tag :text="$loop.it">
+          </tag>
+        </ctx>
       </p>
     </header>
     <article id="post" class="hierarchical limit-children" :html="$page.content()"></article>
diff --git a/layouts/page.shtml b/layouts/page.shtml
@@ -8,17 +8,37 @@
       margin-top: 40px;
     }
 
-    #post-header>p>time,
-    #post-header>p>span {
+    main {
+      position: relative;
+    }
+    #post-header {
+      position: absolute;
+      top: -1.4em;
+      color: #711;
+    }
+    #post-header > p {
+      display: flex;
+      gap: 0.5ch;
       font-size: 0.8em;
     }
+    #post-header > p > * {
+      background: #ffe8c8;
+      border-radius: 5px;
+      padding-inline: 0.5ch;
+    }
+    #post-header > p > tag {
+      background: #cef;
+    }
   </style>
   <main>
-    <header id="post-header" class="non-hierarchical limit-children">
+    <header id="post-header" class="limit-children">
       <p>
         <time class="date" datetime="$page.date.format('2006-01-02 15:04:05MST')" :text="$page.date.format('2006-01-02')"></time>
-        ·
-        <span rel="author" :text="$page.author"></span>
+        <author :text="$page.author"></author>
+        <ctx :loop="$page.tags">
+          <tag :text="$loop.it">
+          </tag>
+        </ctx>
       </p>
     </header>
     <article id="post" class="hierarchical limit-children" :html="$page.content()"></article>
diff --git a/layouts/post.raw.shtml b/layouts/post.raw.shtml
@@ -8,20 +8,41 @@
       text-align: end;
     }
 
+    main {
+      position: relative;
+    }
     #post-header {
-      margin-block-end: 1.2em;
+      position: absolute;
+      top: -1.4em;
+      color: #711;
     }
-    #post-header>p>time,
-    #post-header>p>span {
+    #post-header > p {
+      display: flex;
+      gap: 0.5ch;
       font-size: 0.8em;
     }
+    #post-header > p > * {
+      background: #ffe8c8;
+      border-radius: 5px;
+      padding-inline: 0.5ch;
+    }
+    #post-header > p > tag {
+      background: #cef;
+    }
   </style>
   <main>
-    <header id="post-header" class="non-hierarchical limit-children">
+    <header id="post-header" class="limit-children">
       <p>
         <time class="date" datetime="$page.date.format('2006-01-02 15:04:05MST')" :text="$page.date.format('2006-01-02')"></time>
-        ·
-        <span rel="author" :text="$page.author"></span>
+        <author :text="$page.author"></author>
+        <reading-time>
+          <time :text="$page.wordCount().div(220).plus(1)"></time>
+          min read
+        </reading-time>
+        <ctx :loop="$page.tags">
+          <tag :text="$loop.it">
+          </tag>
+        </ctx>
       </p>
     </header>
     <article id="post" class="hierarchical limit-children" :html="$page.content()"></article>
diff --git a/layouts/post.shtml b/layouts/post.shtml
@@ -9,20 +9,41 @@
       text-align: end;
     }
 
+    main {
+      position: relative;
+    }
     #post-header {
-      margin-block-end: 1.2em;
+      position: absolute;
+      top: -1.4em;
+      color: #711;
     }
-    #post-header>p>time,
-    #post-header>p>span {
+    #post-header > p {
+      display: flex;
+      gap: 0.5ch;
       font-size: 0.8em;
     }
+    #post-header > p > * {
+      background: #ffe8c8;
+      border-radius: 5px;
+      padding-inline: 0.5ch;
+    }
+    #post-header > p > tag {
+      background: #cef;
+    }
   </style>
   <main>
-    <header id="post-header" class="non-hierarchical limit-children">
+    <header id="post-header" class="limit-children">
       <p>
         <time class="date" datetime="$page.date.format('2006-01-02 15:04:05MST')" :text="$page.date.format('2006-01-02')"></time>
-        ·
-        <span rel="author" :text="$page.author"></span>
+        <author :text="$page.author"></author>
+        <reading-time>
+          <time :text="$page.wordCount().div(220).plus(1)"></time>
+          min read
+        </reading-time>
+        <ctx :loop="$page.tags">
+          <tag :text="$loop.it">
+          </tag>
+        </ctx>
       </p>
     </header>
     <article id="post" class="hierarchical limit-children" :html="$page.content()"></article>