From 1a3b70b4c3b609cbf52bffa83c2be652767efd9c Mon Sep 17 00:00:00 2001
From: Yusuf Bera Ertan <y.bera003.06@protonmail.com>
Date: Mon, 17 May 2021 18:41:37 +0300
Subject: [PATCH] feat: better header styling for basic

---
 css.nix              | 10 ++---
 tags.nix             |  2 +-
 templaters/basic.nix | 92 +++++++++++++++++++++++---------------------
 3 files changed, 54 insertions(+), 50 deletions(-)

diff --git a/css.nix b/css.nix
index 1a3756c..149bc0c 100644
--- a/css.nix
+++ b/css.nix
@@ -3,18 +3,16 @@ let
   inherit (utils) mapAttrsToList concatStringsSep isList toString map;
 
   evalCssValue = value: if isList value then concatStringsSep ", " (map toString value) else toString value;
-  evalInner = inner: concatStringsSep "\n" (mapAttrsToList (name: value: "${name}: ${evalCssValue value};") inner);
+  evalInner = inner: concatStringsSep " " (mapAttrsToList (name: value: "${name}: ${evalCssValue value};") inner);
   css = maybeAttrs:
     if isList maybeAttrs
-    then concatStringsSep "\n" maybeAttrs
-    else concatStringsSep "\n" (mapAttrsToList (name: inner: "${name} {\n${evalInner inner}\n}") maybeAttrs);
+    then concatStringsSep " " maybeAttrs
+    else concatStringsSep " " (mapAttrsToList (name: inner: "${name} { ${evalInner inner} }") maybeAttrs);
 in
 {
   inherit css;
 
   media = rule: inner: ''
-    @media (${rule}) {
-        ${css inner}
-    }
+    @media (${rule}) { ${css inner} }
   '';
 }
diff --git a/tags.nix b/tags.nix
index ed937b4..1df9111 100644
--- a/tags.nix
+++ b/tags.nix
@@ -6,7 +6,7 @@ let
   evalChildren = children: if isList children then concatStrings children else children;
   tag = name: maybeAttrs:
     if isAttrs maybeAttrs
-    then (children: "<${name}${evalAttrs maybeAttrs}>\n  ${evalChildren children}\n</${name}>\n")
+    then (children: "<${name}${evalAttrs maybeAttrs}>${evalChildren children}</${name}>")
     else tag name { } maybeAttrs;
   noChildrenTag = name: attrs: "<${name} ${evalAttrs attrs}>";
 
diff --git a/templaters/basic.nix b/templaters/basic.nix
index 0d6bd10..2808dc9 100644
--- a/templaters/basic.nix
+++ b/templaters/basic.nix
@@ -1,7 +1,7 @@
 { utils, posts, pkgs, config, pages, site, baseurl, ... }@context:
 let
-  inherit (utils) readFile mapAttrsToList mapAttrs tags fetchGit map elemAt foldl';
-  inherit (pkgs.lib) optional length splitString nameValuePair;
+  inherit (utils) readFile mapAttrsToList mapAttrs tags fetchGit map elemAt foldl' concatStrings genAttrs toString;
+  inherit (pkgs.lib) optional length splitString nameValuePair toInt range mapAttrs';
 
   stylesheets = map tags.mkStylesheet [
     "https://unpkg.com/purecss@2.0.6/build/pure-min.css"
@@ -15,8 +15,8 @@ let
       id = elemAt parts 1;
     in
     with tags; article [
-      (a { href = "#${id}"; class = "postheader"; } (h3 { inherit id; } ("## " + id)))
-      (h6 ("date: " + (elemAt parts 0)))
+      (a { href = "#${id}"; class = "postheader"; } (h2 { inherit id; } id))
+      (h3 ("date: " + (elemAt parts 0)))
       value
     ];
 
@@ -26,12 +26,12 @@ let
       (mapAttrsToList (name: _: name) pages)) ++ [ (tags.div { class = "pure-u-1"; } (tags.a { href = "${baseurl}"; class = "pagelink"; } "posts")) ];
 
   postsSectionContent = with tags; [
-    (a { href = "#posts"; class = "postheader"; } (h1 "# posts"))
+    (a { href = "#posts"; class = "postheader"; } (h1 "posts"))
   ] ++ (map renderPost posts);
 
   sidebarSection = optional ((length pagesSection) > 0) (
     with tags; nav { class = "sidebar"; } ([
-      (a { href = "#pages"; class = "postheader"; } (h1 "# pages"))
+      (a { href = "#pages"; class = "postheader"; } (h1 "pages"))
       (div { class = "pure-g"; } pagesSection)
     ])
   );
@@ -57,43 +57,49 @@ let
       };
     in
     css [
-      (css {
-        body = {
-          font-family = [ "Raleway" "Helvetica" "Arial" "sans-serif" ];
-          background = "#111111";
-          color = "#eeeeee";
-        };
-        pre = {
-          font-family = [ "Iosevka Term" "Iosevka" "monospace" ];
-          background = "#171A21";
-          color = "#eeeeee";
-        };
-        "a,a:hover" = {
-          color = "#ffd814";
-          text-decoration = "none";
-        };
-        "a:hover" = {
-          text-decoration = "underline";
-        };
-        "a.postheader,a.postheader:hover" = {
-          color = "#fc6711";
-        };
-        "a.pagelink,a.pagelink:hover" = {
-          color = "#ffd814";
-        };
-        "div.content" = {
-          margin-top = "5%";
-          margin-bottom = "5%";
-          margin-left = "20%";
-          margin-right = "10%";
-        };
-        "nav.sidebar" = {
-          position = "fixed";
-          top = 0;
-          margin-left = "3%";
-          z-index = 1000;
-        };
-      })
+      (css (
+        (
+          mapAttrs'
+            (name: value: nameValuePair value { content = "\"${concatStrings (map (_: "#") (range 1 (toInt name)))} \""; })
+            (genAttrs (n: "h${toString n}:before") (map toString (range 1 6)))
+        ) // {
+          body = {
+            font-family = [ "Raleway" "Helvetica" "Arial" "sans-serif" ];
+            background = "#111111";
+            color = "#eeeeee";
+          };
+          pre = {
+            font-family = [ "Iosevka Term" "Iosevka" "monospace" ];
+            background = "#171A21";
+            color = "#eeeeee";
+          };
+          "a,a:hover" = {
+            color = "#ffd814";
+            text-decoration = "none";
+          };
+          "a:hover" = {
+            text-decoration = "underline";
+          };
+          "a.postheader,a.postheader:hover" = {
+            color = "#fc6711";
+          };
+          "a.pagelink,a.pagelink:hover" = {
+            color = "#ffd814";
+          };
+          "div.content" = {
+            margin-top = "5%";
+            margin-bottom = "5%";
+            margin-left = "20%";
+            margin-right = "10%";
+          };
+          "nav.sidebar" = {
+            position = "fixed";
+            top = 0;
+            margin-left = "3%";
+            z-index = 1000;
+          };
+        }
+      ))
       (media "max-width: 48em" {
         "nav.sidebar" = {
           position = "relative";