hematite 0.0.1

data/_sass/_colors.scss

@@ -0,0 +1,73 @@
+:root {
+    --primary-text-color: black;
+    --secondary-text-color: black;
+    --text-color-faint: #444;
+    --link-color: #940;
+    --visited-link-color: #904;
+
+    --selected-item-fg-color: black;
+    --selected-item-bg-color: #ffaaaa;
+
+    --primary-background-color: white;
+    --secondary-background-color: #eee;
+
+    --color-alert-background: #ffb998;
+    --color-alert-foreground: black;
+
+    --shadow-color-light: rgba(0, 0, 0, 0.6);
+    --line-color-light: #eee;
+    --code-background-color: #fafafa;
+}
+
+@media screen {
+    :root {
+        --code-background-color: #f9f5f5;
+    }
+}
+
+:root {
+    // Syntax highlighting
+    --syntax-keyword-fg: #d00;
+    --syntax-string-fg: #c07;
+    --syntax-number-fg: #036;
+    --syntax-bracket-fg: #052;
+    --syntax-operator-fg: #046;
+    --syntax-comment-fg: #338;
+    --syntax-name-fg: #331;
+    --syntax-normal-fg: black;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+    :root {
+        --primary-text-color: white;
+        --secondary-text-color: white;
+        --text-color-faint: #ccc;
+        --link-color: #fa0;
+        --visited-link-color: #f0a;
+
+        --selected-item-fg-color: white;
+        --selected-item-bg-color: #530033;
+
+        --primary-background-color: black;
+        --secondary-background-color: #111;
+        --code-background-color: #222;
+        --line-color-light: #222;
+
+        --color-alert-background: #300;
+        --color-alert-foreground: white;
+
+        --shadow-color-light: rgba(200, 200, 200, 0.5);
+
+
+        // Syntax highlighting
+        --syntax-keyword-fg: pink;
+        --syntax-string-fg: #cfc;
+        --syntax-number-fg: #eef;
+        --syntax-bracket-fg: #faf;
+        --syntax-operator-fg: #aff;
+        --syntax-comment-fg: #aef;
+        --syntax-name-fg: #edf;
+        --syntax-normal-fg: white;
+    }
+}
+

data/_sass/_elements.scss

@@ -0,0 +1,125 @@
+
+a {
+    color: var(--link-color);
+}
+
+a:visited {
+    color: var(--visited-link-color);
+}
+
+button {
+    background-color: var(--secondary-background-color);
+    border-radius: 10px;
+    border: none;
+    box-shadow: 0 0 0px var(--shadow-color-light);
+    cursor: pointer;
+
+    color: var(--primary-text-color);
+
+    transition: box-shadow 0.5s ease;
+}
+
+button:hover {
+    box-shadow: 0px 0px 4px var(--shadow-color-light);
+}
+
+button[disabled] {
+    &:hover {
+        box-shadow: none;
+    }
+
+    opacity: 0.5;
+    filter: saturate(0);
+    cursor: not-allowed;
+}
+
+input {
+    color: var(--secondary-text-color);
+    background-color: var(--secondary-background-color);
+    border: 1px solid var(--line-color-light);
+    border-radius: 4px;
+    padding: 5px;
+
+    font-family: $serif-font;
+    font-size: $font-size-main;
+}
+
+input::placeholder {
+    color: var(--secondary-text-color);
+    opacity: 0.6;
+    font-style: italic;
+}
+
+.main-container code, .main-container pre {
+    background-color: var(--code-background-color);
+    padding: 4px;
+    border-radius: 4px;
+}
+
+.main-container pre {
+    padding: 6px;
+}
+
+.main-container details {
+    summary {
+        cursor: pointer;
+    }
+
+    break-inside: avoid;
+    transition: border 0.25s ease, padding 0.5s ease;
+}
+
+.main-container details[open] {
+    border: 1px solid var(--line-color-light);
+    border-radius: 10px;
+    padding: 10px;
+
+    > :not(summary) {
+        animation: fade-in 0.5s ease 1;
+    }
+}
+
+.main-container {
+    h1, h2, h3 {
+        break-before: auto;
+        break-after: avoid;
+    }
+
+    aside {
+        border-left: 2px solid var(--line-color-light);
+        padding-left: 13px;
+        padding-right: 13px;
+        padding-top: 5px;
+        padding-bottom: 5px;
+    }
+
+    aside.warning {
+        color: var(--color-alert-foreground);
+        background-color: var(--color-alert-background);
+        background-image: linear-gradient(rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.0));
+        box-shadow: 0px 0px 4px var(--shadow-color-light);
+
+        border-bottom-right-radius: 10px;
+        border-radius: 2px;
+
+        a {
+            background-color: var(--secondary-background-color);
+            border-radius: 4px;
+            padding: 4px;
+        }
+
+        code {
+            box-shadow: inset -1px -1px 4px var(--shadow-color-light);
+        }
+    }
+}
+
+// Markdown parsers may put `code` elements inside of `pre`
+// elements. We don't want the background color of the `code` element
+// to make parts of lines invisible.
+.main-container pre code {
+    background-color: transparent;
+
+    // Let the `pre` handle the padding
+    padding: 0;
+}

data/_sass/_layout.scss

@@ -0,0 +1,224 @@
+@charset "utf-8";
+
+@import "_nav";
+@import "_calendar";
+
+.main-container {
+    box-shadow: 1px 1px 3px var(--shadow-color-light);
+    background-color: var(--primary-background-color);
+
+    max-width: $site-content-preferred-width;
+    padding-left: $content-main-padding;
+    padding-right: $content-main-padding;
+    padding-top: 20px;
+    padding-bottom: 30px;
+
+    // Center
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 10px;
+
+    // Resize images to prevent overflow.
+    img {
+        max-width: $site-content-preferred-width;
+    }
+}
+
+:root {
+    background-color: var(--secondary-background-color);
+}
+
+body {
+    // Add additional padding — notifictions that appear at the bottom of the
+    // screen should be ignorable.
+    padding-bottom: 140px;
+    margin: 0;
+
+    font-size: $font-size-main;
+    font-family: $serif-font;
+    color: var(--primary-text-color);
+}
+
+nav#post_next_prev {
+    display: flex;
+    flex-direction: row;
+
+    & > a {
+        flex-grow: 1;
+        text-align: center;
+
+        // Show the top of the page, in addition to the
+        // link.
+        scroll-margin-top: calc(25vh + 2em);
+    }
+}
+
+.prev-post-link, .next-post-link, .post-tag, .tag {
+    border: none;
+    padding: 6px;
+    border-radius: 10px;
+    margin: 2px;
+
+    text-decoration: none;
+    font-weight: bold;
+    box-shadow: 0px 0px 3px var(--shadow-color-light);
+
+    background-color: var(--primary-background-color);
+    transition: background-color 0.5s ease;
+
+    &:hover, &:focus-visible {
+        background-color: var(--secondary-background-color);
+    }
+}
+
+.post-tag, .tag {
+    color: var(--primary-text-color);
+
+    &:visited {
+        color: var(--primary-text-color);
+    }
+}
+
+.post-assigned-date {
+    font-style: italic;
+    color: var(--text-color-faint);
+    text-align: end;
+}
+
+.next-post-link {
+    float: right;
+}
+
+.prev-post-link {
+    float: left;
+}
+
+.end-of-post-space {
+    height: 100px;
+    break-after: always;
+}
+
+.pageAlert {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 200;
+
+    box-shadow: 0px -1px 1px var(--shadow-color-light);
+    background-color: var(--color-alert-background);
+    color: var(--color-alert-foreground);
+
+    font-family: $serif-font;
+    font-size: 14pt;
+
+    padding: 20px;
+    animation: grow-in 0.7s ease 1;
+}
+
+.pageAlert:not(.hidden) > :first-child::before, aside.warning > :first-child::before {
+    content: "❕";
+    text-shadow: 0px 0px 1px var(--shadow-color-light);
+    box-shadow: inset 0px 1px 2px var(--shadow-color-light);
+    aspect-ratio: 1;
+
+    padding: 7px;
+    margin-right: 10px;
+    width: 15px;
+    height: 15px;
+
+    border-radius: 100%;
+    background-color: red;
+    color: white;
+    font-weight: bold;
+    font-size: 16pt;
+}
+
+.pageAlert.closing {
+    animation: shrink-out 0.5s ease 1;
+}
+
+.linkToHeaderContainer {
+    float: right;
+    opacity: 0.1;
+    cursor: pointer;
+
+    transition: opacity 0.2s ease;
+}
+
+.linkToHeaderContainer:hover, .linkToHeaderContainer:focus-within {
+    opacity: 1;
+}
+
+.spacer {
+    flex-grow: 1;
+}
+
+// On mobile devices,
+@media screen and (max-width: $site-content-preferred-width) {
+    .main-container {
+        box-shadow: none;
+        margin: 0;
+
+        img {
+            max-width: calc(100vw - 2 * #{$content-main-padding});
+        }
+    }
+
+    // Don't scroll if the sidebar is filling the screen.
+    :root.hasOpenSidebar, body.hasOpenSidebar {
+        overflow: hidden;
+    }
+
+    body, :root {
+        margin: 0;
+        padding: 0;
+
+        background-color: var(--primary-background-color);
+    }
+
+    body {
+        padding-bottom: 140px;
+    }
+
+    // Move the header links to the margin
+    .linkToHeaderContainer {
+        margin-right: -$content-main-padding;
+    }
+
+}
+
+// Printing?
+@media print {
+    .main-container {
+        box-shadow: none;
+        background: transparent;
+        margin: 0;
+        padding: 0;
+    }
+
+    :root {
+        background: transparent;
+    }
+
+    .linkToHeaderContainer {
+        display: none;
+    }
+
+    .pageAlert {
+        display: none;
+    }
+
+    nav.sidebar {
+        display: none;
+    }
+
+    nav#post_next_prev {
+        display: none;
+    }
+
+    .tag, .post-tag, .post-next-btn, .post-prev.btn {
+        box-shadow: none;
+        border: 1px solid var(--line-color-light);
+    }
+}

data/_sass/_nav.scss

@@ -0,0 +1,180 @@
+@charset "utf-8";
+
+$header-z-index: 100;
+
+header {
+    position: sticky;
+    top: 0;
+    z-index: $header-z-index;
+    height: var(--header-height);
+    overflow: hidden;
+
+    background-color: var(--primary-background-color);
+    font-size: var(--nav-font-size);
+    color: var(--primary-text-color);
+    display: flex;
+    flex-direction: row;
+    padding-right: 10px;
+
+    box-shadow: 0 0 2px var(--shadow-color-light);
+
+    margin: 0;
+
+    a, a:visited {
+        text-decoration: none;
+        color: var(--primary-text-color);
+
+        // Vertically center text
+        display: flex;
+        align-items: center;
+    }
+
+    #toggle_sidebar_btn {
+        margin-right: 10px;
+        background-color: var(--primary-background-color);
+    }
+
+    @media print {
+        #toggle_sidebar_btn {
+            display: none;
+        }
+    }
+}
+
+nav.sidebar {
+    position: fixed;
+    top: var(--header-height);
+    left: 0;
+    bottom: 0;
+
+    width: var(--nav-width);
+
+    display: flex;
+    flex-direction: column;
+
+    opacity: 0;
+    transform: scale(0, 1) translate(-30px, 0);
+
+    color: var(--primary-text-color);
+    background-color: var(--primary-background-color);
+    box-shadow: 0 0 2px var(--shadow-color-light);
+    padding: 10px;
+
+    z-index: $header-z-index - 1;
+
+    &.open {
+        transform: scale(1, 1);
+        opacity: 1;
+    }
+
+    transform-origin: left;
+    transition: opacity 0.5s ease, transform 0.5s ease, width 0.5s ease;
+
+
+    // Container with search box and button
+    > .search-container {
+        display: flex;
+        flex-direction: row;
+
+        input {
+            flex-grow: 1;
+            flex-shrink: 1;
+        }
+    }
+
+    & > .pinned-pages {
+        flex-grow: 1;
+        flex-shrink: 1;
+
+        min-height: 30px;
+    }
+
+    & > .search-results-container, & > .pinned-pages {
+        overflow: auto;
+    }
+
+    & > .search-results-container > .search-results {
+        &.hidden {
+            display: none;
+        }
+
+        .results-description {
+            color: var(--text-color-faint);
+            border-bottom: 1px solid var(--line-color-light);
+            margin-right: 30px;
+        }
+
+        // Context for each result.
+        .context {
+            margin-left: 15px;
+            margin-right: 20px;
+            padding-left: 5px;
+
+            color: var(--text-color-faint);
+            border-left: 1px solid var(--line-color-light);
+            text-decoration: none;
+
+            word-wrap: anywhere;
+        }
+
+        // Search result link
+        a {
+            background-color: transparent;
+            transition: background-color 0.2s ease;
+            display: list-item;
+            padding: 5px;
+            color: var(--primary-text-color);
+        }
+
+        a:hover, a:focus-visible {
+            background-color: var(--selected-item-bg-color);
+        }
+    }
+
+    & > .search-results-container > ul.search-results, & > ul.pinned-pages {
+        list-style: none;
+        padding-left: 0;
+
+        a {
+            text-decoration: none;
+            display: block;
+            color: var(--primary-text-color);
+        }
+
+
+        li, & > a {
+            padding: 4px;
+            border-bottom: 1px solid var(--line-color-light);
+
+            a:hover {
+                text-decoration: underline;
+            }
+
+            &.current_page {
+                background-color: var(--selected-item-bg-color);
+            }
+
+            &.current_page a {
+                color: var(--selected-item-fg-color);
+                font-weight: bold;
+                text-align: end;
+            }
+        }
+    }
+
+    footer {
+        font-style: italic;
+        margin-left: 22px;
+        margin-right: 22px;
+        margin-top: 30px;
+
+        color: var(--text-color-faint);
+    }
+}
+
+// To make space for the navigation bar, add padding to
+// hash links. See
+// https://gomakethings.com/how-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header-with-one-line-of-css/
+.main-container * {
+    scroll-margin-top: 2.5em;
+}

data/_sass/_rogue.scss

@@ -0,0 +1,50 @@
+
+// Created while referencing rouge-github.scss as published
+// at https://github.com/pages-themes/cayman/blob/master/_sass/rouge-github.scss
+
+.highlight {
+    color: var(--syntax-normal-fg);
+    display: block;
+    white-space: pre-wrap;
+
+    // Keywords
+    .k, .kn, .kc, .kd, .kt {
+        color: var(--syntax-keyword-fg);
+    }
+
+    // Strings
+    .s, .s1, .s2, .s3 {
+        color: var(--syntax-string-fg);
+    }
+
+    // Numbers
+    .mi, .mn, .mf {
+        color: var(--syntax-number-fg);
+    }
+
+    // Operators
+    .o {
+        font-weight: bold;
+        color: var(--syntax-operator-fg);
+    }
+
+    // Brackets and parentheticals
+    .p {
+        color: var(--syntax-bracket-fg);
+    }
+
+    // Comments
+    .c, .c1, .c2, .cm {
+        color: var(--syntax-comment-fg);
+        font-style: italic;
+    }
+
+    .cp {
+        font-style: italic;
+    }
+
+    // Variables/names
+    .n, .nv, .nf, .nt, .na, .nx, .nd {
+        color: var(--syntax-name-fg);
+    }
+}

data/_sass/_sizes.scss

@@ -0,0 +1,18 @@
+
+// Macro-like variables
+$site-content-preferred-width: 700px;
+$font-size-main: 12pt;
+$content-main-padding: 30px;
+
+// CSS variables
+:root {
+    --nav-font-size: 22pt;
+    --header-height: 30pt;
+    --nav-width: 300px;
+}
+
+@media (max-width: $site-content-preferred-width) {
+    :root {
+        --nav-width: 95vw;
+    }
+}

data/_sass/hematite.scss

@@ -0,0 +1,10 @@
+@charset "utf-8";
+
+$serif-font: 'FoulisGreek', 'EB Garamond', 'TeX Gyre Bonum', serif;
+
+@import "_colors";
+@import "_sizes";
+@import "_animations";
+@import "_layout";
+@import "_elements";
+@import "_rogue";

data/assets/html/all_tags.html

@@ -0,0 +1,26 @@
+---
+layout: default
+title: All Tags
+permalink: /assets/html/all_tags.html
+---
+
+<h1 id="all_tags_header"></h1>
+
+{% for tag in site.tags %}
+<details><summary><code>{{ tag[0] }}</code></summary>
+
+<ul id="tag__{{ tag[0] | escape }}">
+    {% for post in tag[1] %}
+        <li>
+            <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+        </li>
+    {% endfor %}
+</ul>
+</details>
+{% endfor %}
+
+<script type="module">
+    import stringLookup from "{{ 'assets/js/strings.mjs' | relative_url }}";
+    document.querySelector("#all_tags_header").innerText
+            = stringLookup(`all_tags_header`);
+</script>

data/assets/img/favicon.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512" height="512" version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+   <defs>
+      <filter id="filter7674" x="-.25" y="-.25" width="1.5" height="1.5" color-interpolation-filters="sRGB">
+         <feGaussianBlur stdDeviation="12.0308382"/>
+      </filter>
+   </defs>
+   <g>
+      <path d="m122.52 34.551-94.311 117.48 4.503 246.11 127.26 70.081 258.18-41.737 71.954-66.215-38.507-266.18s-1.2406-30.237-85.384-44.738-243.69-14.797-243.69-14.797z" fill="#9300cf" filter="url(#filter7674)" transform="scale(1.01) translate(2, 10)" transform-origin="center"/>
+      <path d="m122.52 34.551-94.311 117.48 4.503 246.11 127.26 70.081 258.18-41.737 71.954-66.215-38.507-266.18s-1.2406-30.237-85.384-44.738-243.69-14.797-243.69-14.797z" fill="#161616"/>
+   </g>
+</svg>