feat: better header styling for basic

This commit is contained in:
dusk 2021-05-17 18:41:37 +03:00
parent caf60bb107
commit 1a3b70b4c3
Signed by: dusk
GPG Key ID: 1D8F8FAF2294D6EA
3 changed files with 54 additions and 50 deletions

10
css.nix
View File

@ -3,18 +3,16 @@ let
inherit (utils) mapAttrsToList concatStringsSep isList toString map; inherit (utils) mapAttrsToList concatStringsSep isList toString map;
evalCssValue = value: if isList value then concatStringsSep ", " (map toString value) else toString value; 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: css = maybeAttrs:
if isList maybeAttrs if isList maybeAttrs
then concatStringsSep "\n" maybeAttrs then concatStringsSep " " maybeAttrs
else concatStringsSep "\n" (mapAttrsToList (name: inner: "${name} {\n${evalInner inner}\n}") maybeAttrs); else concatStringsSep " " (mapAttrsToList (name: inner: "${name} { ${evalInner inner} }") maybeAttrs);
in in
{ {
inherit css; inherit css;
media = rule: inner: '' media = rule: inner: ''
@media (${rule}) { @media (${rule}) { ${css inner} }
${css inner}
}
''; '';
} }

View File

@ -6,7 +6,7 @@ let
evalChildren = children: if isList children then concatStrings children else children; evalChildren = children: if isList children then concatStrings children else children;
tag = name: maybeAttrs: tag = name: maybeAttrs:
if isAttrs 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; else tag name { } maybeAttrs;
noChildrenTag = name: attrs: "<${name} ${evalAttrs attrs}>"; noChildrenTag = name: attrs: "<${name} ${evalAttrs attrs}>";

View File

@ -1,7 +1,7 @@
{ utils, posts, pkgs, config, pages, site, baseurl, ... }@context: { utils, posts, pkgs, config, pages, site, baseurl, ... }@context:
let let
inherit (utils) readFile mapAttrsToList mapAttrs tags fetchGit map elemAt foldl'; inherit (utils) readFile mapAttrsToList mapAttrs tags fetchGit map elemAt foldl' concatStrings genAttrs toString;
inherit (pkgs.lib) optional length splitString nameValuePair; inherit (pkgs.lib) optional length splitString nameValuePair toInt range mapAttrs';
stylesheets = map tags.mkStylesheet [ stylesheets = map tags.mkStylesheet [
"https://unpkg.com/purecss@2.0.6/build/pure-min.css" "https://unpkg.com/purecss@2.0.6/build/pure-min.css"
@ -15,8 +15,8 @@ let
id = elemAt parts 1; id = elemAt parts 1;
in in
with tags; article [ with tags; article [
(a { href = "#${id}"; class = "postheader"; } (h3 { inherit id; } ("## " + id))) (a { href = "#${id}"; class = "postheader"; } (h2 { inherit id; } id))
(h6 ("date: " + (elemAt parts 0))) (h3 ("date: " + (elemAt parts 0)))
value value
]; ];
@ -26,12 +26,12 @@ let
(mapAttrsToList (name: _: name) pages)) ++ [ (tags.div { class = "pure-u-1"; } (tags.a { href = "${baseurl}"; class = "pagelink"; } "posts")) ]; (mapAttrsToList (name: _: name) pages)) ++ [ (tags.div { class = "pure-u-1"; } (tags.a { href = "${baseurl}"; class = "pagelink"; } "posts")) ];
postsSectionContent = with tags; [ postsSectionContent = with tags; [
(a { href = "#posts"; class = "postheader"; } (h1 "# posts")) (a { href = "#posts"; class = "postheader"; } (h1 "posts"))
] ++ (map renderPost posts); ] ++ (map renderPost posts);
sidebarSection = optional ((length pagesSection) > 0) ( sidebarSection = optional ((length pagesSection) > 0) (
with tags; nav { class = "sidebar"; } ([ with tags; nav { class = "sidebar"; } ([
(a { href = "#pages"; class = "postheader"; } (h1 "# pages")) (a { href = "#pages"; class = "postheader"; } (h1 "pages"))
(div { class = "pure-g"; } pagesSection) (div { class = "pure-g"; } pagesSection)
]) ])
); );
@ -57,7 +57,12 @@ let
}; };
in in
css [ css [
(css { (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 = { body = {
font-family = [ "Raleway" "Helvetica" "Arial" "sans-serif" ]; font-family = [ "Raleway" "Helvetica" "Arial" "sans-serif" ];
background = "#111111"; background = "#111111";
@ -93,7 +98,8 @@ let
margin-left = "3%"; margin-left = "3%";
z-index = 1000; z-index = 1000;
}; };
}) }
))
(media "max-width: 48em" { (media "max-width: 48em" {
"nav.sidebar" = { "nav.sidebar" = {
position = "relative"; position = "relative";