add stylesheet for syntax highlighting and add toc

Signed-off-by: Amneesh Singh <natto@weirdnatto.in>
2022-05-13 07:41:43 +05:30
parent 0e6d6d79a2
commit 0c4333e325
15 changed files with 223 additions and 281 deletions
--- a/templates/archive.html
+++ b/templates/archive.html
@@ -1,3 +1,7 @@
-<p><a href="/archive/tags.html">Tags</a></p>
-Here you can find all my previous posts:
+<p>
+ <h3> Here you can find all my previous posts: </h3>
+</p>
 $partial("templates/post-list.html")$
+
+<h3>Tags</strong></h3>
+<div class="tags">$tags$</div>
--- a/templates/default.html
+++ b/templates/default.html
@@ -6,6 +6,7 @@
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>nattopages - $title$</title>
        <link rel="stylesheet" href="/css/default.css" />
+        <link rel="stylesheet" href="/css/highlight.css" />
    </head>
    <body>
        <header>
@@ -28,11 +29,13 @@
            <a href="https://git.weirdnatto.in/natto1784/nattopages">Source</a> available under MIT License<br>
            Site proudly generated by
            <a href="http://jaspervdj.be/hakyll">Hakyll</a><br>
-            PGP Fingerprint: 53EC 089E F230 E47A 83BA  8F81 9594 9BD4 B853 F559
-            <ul class="subdomains">
+            53EC 089E F230 E47A 83BA  8F81 9594 9BD4 B853 F559
+            <ul class="subdomains" style="list-style-type: none;">
                $for(subdomains)$
-                    <li>
-                      <a href="https://$name$.$domain$"> <img src="/images/logos/$name$.png" alt="https://$name$.$domain$"/> </a>
+                    <li style="display: inline-block;">
+                      <a href="https://$name$.$domain$">
+                        <img src="/images/logos/$name$.png" alt="https://$name$.$domain$" width="30" height="30"/>
+                      </a>
                    </li>
                $endfor$
            </ul>
--- a/templates/post-list.html
+++ b/templates/post-list.html
@@ -1,6 +1,6 @@
 <ul>
    $for(posts)$
-        <li>
+        <li class="post-item">
          <a href="$url$">$title$</a> - $date$
        </li>
    $endfor$
--- a/templates/post-preview-list.html
+++ b/templates/post-preview-list.html
@@ -0,0 +1,23 @@
+<ul>
+    $for(posts)$
+        <li class="post-item post-preview-item" style="list-style-type: none;" >
+            <article>
+                <h1 class="post-title">$title$</h1>
+                <div class="post-header">
+                    <div class="post-date" >
+                        Posted $date$
+                    </div>
+                    <div class="tags" >
+                        $if(tags)$
+                          Tags: $tags$
+                        $endif$
+                    </div>
+                </div>
+                <div class="post-teaser">
+                    $teaser$
+                </div>
+                <a href="$url$">Read more</a>
+            </article>
+        </li>
+    $endfor$
+</ul>
--- a/templates/post.html
+++ b/templates/post.html
@@ -1,5 +1,6 @@
 <article>
-    <section class="header">
+    <h1 class="post-title">$title$</h1>
+    <section class="post-header">
        Posted on $date$
        $if(author)$
            by $author$
@@ -8,6 +9,7 @@
            Tags: $tags$
        $endif$
    </section>
+    <hr>
    <section>
        $body$
    </section>
--- a/templates/tag.html
+++ b/templates/tag.html
@@ -1,2 +1,2 @@
-Here are all the posts marked with tag $tag$:
+Here are all the posts marked with tag <strong style="font-size: 3rem;">$tag$</strong>:
 $partial("templates/post-list.html")$
--- a/templates/tags.html
+++ b/templates/tags.html
@@ -1,6 +0,0 @@
-$if(tags)$
-    Here is a list of all the tags:
-    <div class="tags"><p>$tags$</p></div>
-$else$
-    There are no tags
-$endif$