feat: even better css for basic templatet

examples/site/config.toml

@@ -1,2 +1,5 @@
 title = "test site"
-about = "Simple test site"
+
+[pages]
+about = "about.html"
+test = "404.html"

flake.nix

@@ -24,7 +24,9 @@
         pkgs = import nixpkgs { inherit system; overlays = [ pkgsLib ]; };
       in
       {
-        inherit lib;
+        lib = lib // {
+          pkgsLib = import ./pkgs-lib.nix { inherit pkgs; utils = utils // { inherit (lib) tags; }; };
+        };
 
         overlays = {
           inherit pkgsLib;

tags.nix

@@ -10,7 +10,7 @@ let
     else tag name { } maybeAttrs;
   noChildrenTag = name: attrs: "<${name} ${evalAttrs attrs}>";
 
-  tagsToGen = [ "html" "head" "body" "div" "p" "a" "title" "code" "pre" ] ++ (map (n: "h${toString n}") (range 1 6));
+  tagsToGen = [ "html" "head" "body" "div" "p" "a" "title" "code" "pre" "nav" "article" ] ++ (map (n: "h${toString n}") (range 1 6));
   tags = genAttrs tag tagsToGen;
 
   noChildrenTagsToGen = [ "link" "meta" ];

templaters/basic.nix

@@ -1,40 +1,56 @@
 { utils, posts, pkgs, config, ... }@context:
 let
-  inherit (utils) readFile mapAttrsToList tags fetchGit;
+  inherit (utils) readFile mapAttrsToList tags fetchGit map;
-  inherit (pkgs.lib) flatten;
+  inherit (pkgs.lib) flatten optional length;
 
-  renderPost = name: value: with tags; [
+  stylesheets = map tags.mkStylesheet [ "https://unpkg.com/purecss@2.0.6/build/pure-min.css" "https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css" "css/mine.css" ];
+
+  renderPost = name: value: with tags; article [
     (a { href = "#${name}"; class = "postheader"; } (h3 { id = name; } ("## " + name)))
     (readFile value)
   ];
-
   allPosts = flatten (mapAttrsToList renderPost posts);
+  pages =
+    mapAttrsToList
+      (name: relPath: tags.div { class = "pure-u-1"; } (tags.a { href = "./${relPath}"; class = "postheader"; } name))
+      (config.pages or { });
+
+  postsSection = with tags; div { class = "posts"; } ([
+    (a { href = "#posts"; class = "postheader"; } (h1 "# posts"))
+  ] ++ allPosts);
+
+  sidebarSection = optional ((length pages) > 0) (
+    with tags; nav { class = "sidebar"; } ([
+      (a { href = "#pages"; class = "postheader"; } (h1 "# pages"))
+      (div { class = "pure-g"; } pages)
+    ])
+  );
 in
 {
   "index.html" = with tags;
     html [
-      (head [
+      (head (stylesheets ++ [
         (title config.title)
-        (mkStylesheet "https://unpkg.com/purecss@2.0.6/build/pure-min.css")
-        (mkStylesheet "https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css")
-        (mkStylesheet "css/mine.css")
         (meta { name = "viewport"; content = "width=device-width, initial-scale=1"; })
-      ])
+      ]))
-      (body [
+      (body (sidebarSection ++ [ postsSection ]))
-        (div { class = "about"; } [
-          (a { href = "#About"; class = "postheader"; } (h1 "# About"))
-          (p config.about)
-        ])
-        (div { class = "posts"; } ([
-          (a { href = "#Posts"; class = "postheader"; } (h1 "# Posts"))
-        ] ++ allPosts))
-      ])
     ];
 
   css = {
     "mine.css" = ''
+      body {
+        font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+      }
+      code {
+        font-family: "Iosevka Term", "Iosevka", monospace;
+        background: #000000cc;
+        color: #eeeeee;
+      }
       a.postheader,a.postheader:hover {
         color: inherit;
+        text-decoration: none;
+      }
+      a.postheader:hover {
         text-decoration: underline;
       }
       div.posts {
@@ -43,11 +59,24 @@ in
         margin-left: 20%;
         margin-right: 10%;
       }
-      div.about {
+      nav.sidebar {
-        position: -webkit-sticky;
+        position: fixed;
-        position: sticky;
         top: 0;
         margin-left: 3%;
+        z-index: 1000;
+      }
+      @media (max-width: 48em) {
+          nav.sidebar {
+            position: relative;
+            margin-top: 5%;
+            margin-left: 0;
+            margin-right: 0;
+          }
+          div.posts {
+            margin-top: 0;
+            margin-left: 0;
+            margin-right: 0;
+          }
       }
     '';
   };