feat: even better css for basic templatet
This commit is contained in:
parent
ca9f5eef52
commit
4ac1edf168
@ -1,2 +1,5 @@
|
||||
title = "test site"
|
||||
about = "Simple test site"
|
||||
|
||||
[pages]
|
||||
about = "about.html"
|
||||
test = "404.html"
|
@ -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;
|
||||
|
2
tags.nix
2
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" ];
|
||||
|
@ -1,40 +1,56 @@
|
||||
{ utils, posts, pkgs, config, ... }@context:
|
||||
let
|
||||
inherit (utils) readFile mapAttrsToList tags fetchGit;
|
||||
inherit (pkgs.lib) flatten;
|
||||
inherit (utils) readFile mapAttrsToList tags fetchGit map;
|
||||
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 [
|
||||
(div { class = "about"; } [
|
||||
(a { href = "#About"; class = "postheader"; } (h1 "# About"))
|
||||
(p config.about)
|
||||
])
|
||||
(div { class = "posts"; } ([
|
||||
(a { href = "#Posts"; class = "postheader"; } (h1 "# Posts"))
|
||||
] ++ allPosts))
|
||||
])
|
||||
]))
|
||||
(body (sidebarSection ++ [ postsSection ]))
|
||||
];
|
||||
|
||||
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 {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
nav.sidebar {
|
||||
position: fixed;
|
||||
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;
|
||||
}
|
||||
}
|
||||
'';
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user