Inline theme

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" },

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;

sass/style/main.scss

@@ -1,15 +1,16 @@
 @import "parts/_code.scss";
-@import "../../themes/apollo/sass/parts/_header.scss";
+@import "parts/_header.scss";
-@import "../../themes/apollo/sass/parts/_image.scss";
+@import "parts/_image.scss";
-@import "../../themes/apollo/sass/parts/misc.scss";
+@import "parts/misc.scss";
-@import "../../themes/apollo/sass/parts/table.scss";
+@import "parts/table.scss";
-@import "../../themes/apollo/sass/parts/tags.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 {
+  .privacy-note {
-    background-color: var(--primary-color);
+    flex: 2 0;
-    color: var(--hover-color);
+    padding-right: 1em;
-    border-radius: 0;
+  }
+
+  .powered-by {
+    flex: 1 0;
   }
 }
 
 // Different sized headers
-.page-header {
+h1.page-header {
-  font-size: 2.5em;
+  font-weight: normal;
-  font-weight: 400;
+  max-width: 720px;
-  line-height: 100%;
-  font-family: var(--header-font);
-  margin: 4rem 0px 1rem 0px;
-}
-
-.page-header::before {
-  content: "";
 }
 
 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
+  &::before {
-pre,
+    content: "##### ";
-code {
+  }
-  font-family: var(--code-font);
-}
-
-// Page title width
-.page-header {
-  max-width: 720px;
 }
 
 // Tags
@@ -163,10 +175,10 @@ ul.tags {
   }
 }
 
-// Header dot
+// // Header dot
-.header-dot {
+// .header-dot {
-  font-size: 1.6em;
+//   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;
 }

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

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

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

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

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

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);
+}

templates/page.html

@@ -0,0 +1,5 @@
+{% extends "base.html" %}
+
+{% block main_content %}
+{{ post_macros::content(page=page)}}
+{% endblock main_content %}