blog.grace.moe

Source for the blog blog.grace.moe
git clone https://git.grace.moe/blog.grace.moe
Log | Files | Refs

post.shtml (1456B)


      1 <extend template="base.shtml">
      2 <div id="content">
      3   <style>
      4     #prev-next {
      5       padding-block: 15px;
      6       padding-inline: 15px;
      7     }
      8     #prev-next > a {
      9       display: block;
     10       text-wrap: balance;
     11     }
     12     #prev-next > a.next { text-align: end; }
     13     #prev-next > a.prev::before { content: "←"; }
     14     #prev-next > a.next::after { content: "→"; }
     15 
     16     #post-header > tags {
     17       flex-direction: column;
     18       align-items: end;
     19       text-align: right;
     20       width: min-content;
     21       float: right;
     22       padding-inline: 10px;
     23       padding-block-end: 10px;
     24     }
     25   </style>
     26   <main>
     27     <header id="post-header" class="limit-self">
     28       <tags>
     29         <time class="date" datetime="$page.date.format('2006-01-02 15:04:05MST')" :text="$page.date.format('2006-01-02')"></time>
     30         <author :text="$page.author"></author>
     31         <reading-time>
     32           <time :text="$page.wordCount().div(220).plus(1)"></time>
     33           min read<!---->
     34         </reading-time>
     35         <ctx :loop="$page.tags">
     36           <tag :text="$loop.it"></tag>
     37         </ctx>
     38       </tags>
     39     </header>
     40     <article id="post" class="hierarchical limit-children" :html="$page.content()"></article>
     41   </main>
     42   <footer id="prev-next">
     43     <ctx :if="$page.prevPage?()">
     44       <a class="prev" href="$if.link()" :text="$if.title"></a>
     45     </ctx>
     46     <ctx :if="$page.nextPage?()">
     47       <a class="next" href="$if.link()" :text="$if.title"></a>
     48     </ctx>
     49   </footer>
     50 </div>