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;
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} }
'';
}

View File

@ -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}>";

View File

@ -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";