html.nix/templaters/simple/stylesheet.nix
2023-04-06 05:43:25 +03:00

89 lines
2.0 KiB
Nix

{
css,
l,
...
}: let
colors = {
light = rec {
fg = "#000";
bg = "#faf9f6";
code-bg = fg;
code-fg = bg;
link = "#1f51ff";
link-visited = "#9d00ff";
};
dark = rec {
fg = "#eee";
bg = "#111";
code-bg = "#333";
code-fg = fg;
link = "#007fff";
link-visited = "#bf40bf";
};
};
headers = extra:
l.genAttrs
(l.map l.toString (l.range 1 6))
(n: "h${l.toString n}${extra}");
in
css [
(css (
l.mapAttrs'
(
name: value:
l.nameValuePair
value
{
content = ''"${l.concatStrings (l.map (_: "#") (l.range 1 (l.toInt name)))} "'';
}
)
(headers ":before")
))
(css (
l.mapAttrs'
(_: value: l.nameValuePair value {content = ''""'';})
(headers ".nohashtag:before")
))
(css {
body = {
font-family = ["sans-serif"];
color = colors.light.fg;
background = colors.light.bg;
max-width = "650px";
margin = "40px auto";
};
"pre,code" = {
font-family = ["monospace"];
background = colors.light.code-bg;
color = colors.light.code-fg;
padding = "4px";
border-radius = "4px";
};
"pre code" = {
padding = 0;
border-radius = 0;
};
a = {
color = colors.light.link;
text-decoration = "none";
};
"a:hover".text-decoration = "underline";
"a:visited".color = colors.light.link-visited;
"a.novisited:visited".color = colors.light.link;
"h1,h2,h3".line-height = "1.2";
})
(css.media "prefers-color-scheme: dark" {
body = {
color = colors.dark.fg;
background = colors.dark.bg;
};
"pre,code" = {
color = colors.dark.code-fg;
background = colors.dark.code-bg;
};
a.color = colors.dark.link;
"a:visited".color = colors.dark.link-visited;
"a.novisited:visited".color = colors.dark.link;
})
]