diff --git a/config.toml b/config.toml index 46390a6..03dfdec 100644 --- a/config.toml +++ b/config.toml @@ -7,7 +7,8 @@ compile_sass = true build_search_index = false generate_feed = true -theme = "apollo" +# theme is inlined +# theme = "apollo" taxonomies = [ { name = "tags" }, diff --git a/flake.nix b/flake.nix index fd129e1..8f9b0c3 100644 --- a/flake.nix +++ b/flake.nix @@ -6,13 +6,14 @@ flake-parts.url = "github:hercules-ci/flake-parts"; flake-parts.inputs.nixpkgs.follows = "nixpkgs"; - # theme + # theme - inlined now, not used apollo.url = "github:not-matthias/apollo"; apollo.flake = false; }; outputs = { self, flake-parts, ... }@inputs: let + themeEnabled = false; theme = inputs.apollo; themeName = ((builtins.fromTOML (builtins.readFile "${theme}/theme.toml")).name); in @@ -31,7 +32,7 @@ version = "2022-08-21"; src = ./.; nativeBuildInputs = [ optimize-images zola ]; - configurePhase = '' + configurePhase = lib.optionalString themeEnabled '' mkdir -p themes/${themeName} cp -r ${theme}/* themes/${themeName} '' + copyFonts; @@ -46,7 +47,7 @@ }; devShells.default = with pkgs; mkShell { packages = [ flyctl optimize-images zola ]; - shellHook = '' + shellHook = lib.optionalString themeEnabled '' mkdir -p themes ln -snf "${theme}" "themes/${themeName}" '' + linkFonts; diff --git a/sass/style/main.scss b/sass/style/main.scss index 1e7ddd3..7e7a84d 100644 --- a/sass/style/main.scss +++ b/sass/style/main.scss @@ -1,15 +1,16 @@ @import "parts/_code.scss"; -@import "../../themes/apollo/sass/parts/_header.scss"; -@import "../../themes/apollo/sass/parts/_image.scss"; -@import "../../themes/apollo/sass/parts/misc.scss"; -@import "../../themes/apollo/sass/parts/table.scss"; -@import "../../themes/apollo/sass/parts/tags.scss"; +@import "parts/_header.scss"; +@import "parts/_image.scss"; +@import "parts/misc.scss"; +@import "parts/table.scss"; +@import "parts/tags.scss"; :root { /* Used for: block comment, hr, ... */ --border-color: var(--bg-1); // Fonts defined via fonts.nix + --system-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } html { @@ -45,7 +46,6 @@ html { } // Logo - div.brand>* { padding: 0 0.25em; } @@ -88,65 +88,77 @@ footer { margin: 2em; color: var(--text-1); font-size: 0.75em; + display: flex; code { color: var(--text-0); + + &:hover { + background-color: var(--primary-color); + color: var(--hover-color); + border-radius: 0; + } } - code:hover { - background-color: var(--primary-color); - color: var(--hover-color); - border-radius: 0; + .privacy-note { + flex: 2 0; + padding-right: 1em; + } + + .powered-by { + flex: 1 0; } } // Different sized headers -.page-header { - font-size: 2.5em; - font-weight: 400; - line-height: 100%; - font-family: var(--header-font); - margin: 4rem 0px 1rem 0px; -} - -.page-header::before { - content: ""; +h1.page-header { + font-weight: normal; + max-width: 720px; } h2 { font-size: 1.4rem; margin-top: 1.4em; + + &::before { + content: "# "; + } } h3 { font-size: 1.3rem; margin-top: 1.3em; + + &::before { + content: "## "; + } } h4 { font-size: 1.2rem; margin-top: 1.2em; + + &::before { + content: "### "; + } } h5 { font-size: 1.1rem; margin-top: 1.1em; + + &::before { + content: "#### "; + } } h6 { font-size: 1rem; margin-top: 1em; -} -// Code fonts -pre, -code { - font-family: var(--code-font); -} - -// Page title width -.page-header { - max-width: 720px; + &::before { + content: "##### "; + } } // Tags @@ -163,10 +175,10 @@ ul.tags { } } -// Header dot -.header-dot { - font-size: 1.6em; -} +// // Header dot +// .header-dot { +// font-size: 1.6em; +// } // Meta .meta a:hover { @@ -174,7 +186,6 @@ ul.tags { } // Fixup grays -.meta, time { color: var(--text-1); } @@ -182,9 +193,4 @@ time { // Post list li.post-list-item { list-style-type: none; -} - -// Rounded image -img { - border-radius: 5px; } \ No newline at end of file diff --git a/sass/style/parts/_code.scss b/sass/style/parts/_code.scss index c85cc3c..2639cd3 100644 --- a/sass/style/parts/_code.scss +++ b/sass/style/parts/_code.scss @@ -3,6 +3,7 @@ code { padding: 0.1em 0.2em; border-radius: 5px; border: 1px solid var(--border-color); + font-family: var(--code-font); } pre { @@ -92,7 +93,6 @@ pre code[class*="language-go"]::before { color: royalblue; } -pre code[class*="language-md"]::before, pre code[class*="language-md"]::before { content: "Markdown"; background: royalblue; @@ -104,4 +104,10 @@ pre code[class*="language-rs"]::before { content: "rust"; background: #fff8f6; color: #ff4647; +} + +pre code[class*="language-nix"]::before { + content: "nix"; + background: #5277C3; + color: snow; } \ No newline at end of file diff --git a/sass/style/parts/_header.scss b/sass/style/parts/_header.scss new file mode 100644 index 0000000..f1ae61c --- /dev/null +++ b/sass/style/parts/_header.scss @@ -0,0 +1,95 @@ +.page-header { + font-size: 2.75em; + line-height: 100%; + font-family: var(--header-font); + margin: 4rem 0px 1rem 0px; +} + +.centered-header { + font-family: var(--header-font); + + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + font-size: 4em; +} + +header { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: 1em 0; +} + +header .main { + font-size: 1.5rem; + + /* Otherwise header and menu is too close on small screens*/ + margin-bottom: 10px; +} + +.meta { + color: var(--text-1); + letter-spacing: -0.5px; +} + +h2, +h3, +h4, +h5, +h6 { + margin-top: 1.5rem; +} + +h2 { + font-size: 1.5rem; + + &::before { + color: var(--primary-color); + content: "# "; + } +} + +h3 { + font-size: 1.4rem; + + &::before { + color: var(--primary-color); + content: "## "; + } +} + +h4 { + font-size: 1.3rem; + + &::before { + color: var(--primary-color); + content: "### "; + } +} + +h5 { + font-size: 1.2rem; + + &::before { + color: var(--primary-color); + content: "#### "; + } +} + +h6 { + font-size: 1.1rem; + + &::before { + color: var(--primary-color); + content: "##### "; + } +} + +.header-dot { + font-family: var(--system-font); + font-size: 5rem; + line-height: 1rem; +} \ No newline at end of file diff --git a/sass/style/parts/_image.scss b/sass/style/parts/_image.scss new file mode 100644 index 0000000..11cd73d --- /dev/null +++ b/sass/style/parts/_image.scss @@ -0,0 +1,36 @@ +img:not(.logo) { + border: 3px solid #ececec; + max-width: 100%; + border-radius: 5px; +} + +figure { + box-sizing: border-box; + display: inline-block; + margin: 0; + max-width: 100%; +} + +figure img { + max-height: 500px; +} + +@media screen and (min-width: 600px) { + figure { + padding: 0 40px; + } +} + +figure h4 { + font-size: 1rem; + margin: 0; + margin-bottom: 1em; +} + +figure h4::before { + content: "↳ "; +} + +svg { + max-height: 15px; +} \ No newline at end of file diff --git a/sass/style/parts/_misc.scss b/sass/style/parts/_misc.scss new file mode 100644 index 0000000..cecb254 --- /dev/null +++ b/sass/style/parts/_misc.scss @@ -0,0 +1,63 @@ +.primary-color { + color: var(--primary-color); +} + +.draft-label { + color: var(--hover-color); + text-decoration: none; + padding: 2px 4px; + border-radius: 4px; + margin-left: 6px; + background-color: var(--primary-color); +} + +::-moz-selection { + background: var(--primary-color); + color: var(--hover-color); + text-shadow: none; +} + +::selection { + background: var(--primary-color); + color: var(--hover-color); +} + +p { + line-height: 1.5; +} + +hr { + border: 0; + border-top: 3px solid var(--border-color); + margin: 1em 0; +} + +blockquote { + border-left: 3px solid var(--border-color); + color: #737373; + margin: 0; + padding-left: 1em; +} + +a { + border-bottom: 3px solid var(--primary-color); + color: inherit; + text-decoration: none; +} + +a:hover { + background-color: var(--primary-color); + color: var(--hover-color); +} + +time { + color: grey; +} + +/* Remove post list padding */ +@media screen and (max-width: 600px) { + .list>ul { + margin: 0; + padding: 0; + } +} \ No newline at end of file diff --git a/sass/style/parts/_table.scss b/sass/style/parts/_table.scss new file mode 100644 index 0000000..247db0f --- /dev/null +++ b/sass/style/parts/_table.scss @@ -0,0 +1,15 @@ +table { + border-spacing: 0; + border-collapse: collapse; +} + +table th { + padding: 6px 13px; + border: 1px solid #dfe2e5; + font-size: large; +} + +table td { + padding: 6px 13px; + border: 1px solid #dfe2e5; +} \ No newline at end of file diff --git a/sass/style/parts/_tags.scss b/sass/style/parts/_tags.scss new file mode 100644 index 0000000..461530c --- /dev/null +++ b/sass/style/parts/_tags.scss @@ -0,0 +1,12 @@ +.tags li::before { + content: "🏷 "; +} + +.tags a { + border-bottom: 3px solid var(--primary-color); +} + +.tags a:hover { + color: var(--hover_color); + background-color: var(--primary-color); +} \ No newline at end of file diff --git a/templates/page.html b/templates/page.html new file mode 100644 index 0000000..56cf252 --- /dev/null +++ b/templates/page.html @@ -0,0 +1,5 @@ +{% extends "base.html" %} + +{% block main_content %} +{{ post_macros::content(page=page)}} +{% endblock main_content %} \ No newline at end of file