hematite 0.0.8 → 0.0.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ca054447d56a7d76f00b864906bce8cc2245ba03d089dca22246060f81142a2e
-  data.tar.gz: ba039823072585771bfcdd113454a3de8353219c935907b3b95ae9fb5e82cbe5
+  metadata.gz: c5f6a0cdf074d0025f0cf3031037a4dc365af38f99aa811578f3d88f0c356175
+  data.tar.gz: 533d5d2c8897c2985977971c5a6ca66552df1edee4bae22c9184750e97478007
 SHA512:
-  metadata.gz: a7d4189cc538c9fbd161458570fdeca378971746f33e9365e6ebe5b8806a754517424b1655cbd32994b206bcabd92440f5e462d89153584ee499cb4ccb5fa507
-  data.tar.gz: ca7eb2a71d1b4d6bc342fb2fec21e0bbd3628f78689f0d6728112b1a85842f26f3d90a51e58951e9a69c5871756a9840fc6d224abd600df3559c7bbbf33d276a
+  metadata.gz: be650d2182b5d2dccdc6bccc3837691246f94bf8271bda4343cd923e7da5eb2c9fa3ddc960f35d2711c13cf51b574f3b27eddd47f31afc3c8688e231ab22afe7
+  data.tar.gz: 7ebc7f1a7902040eb224a1adb08da8115207303e028e4bad22d608f061e11a3f5450da65c2e572da68a10317c835ba73469d1ebef1c7a9f2a182a5567eb4f80f

data/README.md

@@ -1,4 +1,5 @@
 # Hematite
+[![Gem Version](https://badge.fury.io/rb/hematite.svg)](https://badge.fury.io/rb/hematite)
 
 ![The dark variant of the Hematite Theme, showing a calendar](./screenshot.png)
 
@@ -50,7 +51,8 @@ Your theme is setup just like a normal Jekyll site! To test your theme, run `bun
 When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
 To add a custom directory to your theme-gem, please edit the regexp in `Hematite.gemspec` accordingly.
 
-**Note:** All user-facing strings in JavaScript should go in `assets/js/string_data.mjs` to permit future localization.
+**Note:** All user-facing strings that are distributed with the theme should go in
+[assets/string_data](https://github.com/personalizedrefrigerator/jekyll-hematite-theme/tree/main/assets/string_data) to permit future localization.
 
 ## License
 

data/_config.yml

@@ -33,6 +33,7 @@ hematite:
       month_first: true
 
   sidebar:
-    footer_html: 'This page was made with the Hematite Theme. <a href="https://github.com/personalizedrefrigerator/jekyll-hematite-theme">Contribute on GitHub</a>'
+    footer_html: 'This page was made with the Hematite Theme. <a href="https://github.com/personalizedrefrigerator/jekyll-hematite-theme">Contribute on GitHub.</a>'
+    show_settings_btn: true
 
 

data/_includes/footer.html

@@ -0,0 +1,6 @@
+{% comment %}
+ The contents of this file are included at the bottom of all pages, posts, etc.
+
+ This is different from the text included at the bottom of the sidebar. Change the sidebar footer
+ in your _config.yml.
+{% endcomment %}

data/_includes/nav/header.html

@@ -0,0 +1,5 @@
+{% comment %}
+This is the header that appears in the navigation bar (at the top of the page)!
+Customize it here.
+{% endcomment %}
+<a href="{{ "/" | absolute_url }}">{{ site.title | default "Untitled Site" }}</a>

data/_includes/nav/page_navigation.html

@@ -3,7 +3,7 @@
     <button class="toggle_sidebar" id="toggle_sidebar_btn">
         {% include img/hamburger_menu.svg %}
     </button>
-    <a href="{{ "/" | absolute_url }}">{{ site.title | default "Untitled Site" }}</a>
+    {% include nav/header.html %}
     <div class="spacer"></div>
 </header>
 

data/_includes/nav/sidebar.html

@@ -18,8 +18,22 @@
     </ul>
 
     <footer>
-        {% if site.hematite.sidebar.footer_html %}
-            {{ site.hematite.sidebar.footer_html }}
+        <div>
+            {% if site.hematite.sidebar.footer_html %}
+                {{ site.hematite.sidebar.footer_html }}
+            {% endif %}
+        </div>
+        {% if site.hematite.sidebar.show_settings_btn %}
+            <center>
+                <!-- Localized by JS -->
+                <a id="sidebar_settings_btn" class="settings-btn"
+                    {% if site.permalink == 'pretty' %}
+                        href="{{ 'assets/html/settings' | relative_url }}"
+                    {% else %}
+                        href="{{ 'assets/html/settings.html' | relative_url }}"
+                    {% endif %}
+                ></a>
+            </center>
         {% endif %}
     </footer>
 </nav>

data/_layouts/default.html

@@ -28,6 +28,8 @@ title: Untitled
             {% if page.layout == "default" %}
             </main>
             {% endif %}
+
+            {% include footer.html %}
         </div>
 
     </body>

data/_sass/_colors.scss

@@ -1,4 +1,4 @@
-:root {
+:root:not(.darkTheme), :root.lightTheme {
     --primary-text-color: black;
     --secondary-text-color: black;
     --text-color-faint: #444;
@@ -16,16 +16,10 @@
 
     --shadow-color-light: rgba(0, 0, 0, 0.6);
     --line-color-light: #eee;
+    --line-color-normal: #888;
     --code-background-color: #fafafa;
-}
 
-@media screen {
-    :root {
-        --code-background-color: #f9f5f5;
-    }
-}
 
-:root {
     // Syntax highlighting
     --syntax-keyword-fg: #d00;
     --syntax-string-fg: #c07;
@@ -37,37 +31,54 @@
     --syntax-normal-fg: black;
 }
 
+@media screen {
+    :root:not(.darkTheme), :root.lightTheme {
+        --code-background-color: #f9f5f5;
+    }
+}
+
+@mixin dark-theme-colors {
+    --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;
+    --line-color-normal: #aaa;
+
+    --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;
+}
+
 @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;
+    :root:not(.lightTheme) {
+        @include dark-theme-colors;
+    }
+}
+
+@media screen {
+    :root.darkTheme {
+        @include dark-theme-colors;
     }
 }
 

data/_sass/_elements.scss

@@ -33,15 +33,19 @@ button[disabled] {
     cursor: not-allowed;
 }
 
-input {
+input, select, textarea {
     color: var(--secondary-text-color);
     background-color: var(--secondary-background-color);
-    border: 1px solid var(--line-color-light);
+    border: 1px solid var(--line-color-normal);
     border-radius: 4px;
     padding: 5px;
 
-    font-family: $serif-font;
-    font-size: $font-size-main;
+    font-family: var(--main-font-family);
+    font-size: var(--main-font-size);
+}
+
+select {
+    cursor: pointer;
 }
 
 input::placeholder {
@@ -112,6 +116,15 @@ input::placeholder {
             box-shadow: inset -1px -1px 4px var(--shadow-color-light);
         }
     }
+
+    table td {
+        border: 1px solid var(--line-color-light);
+    }
+
+    fieldset {
+        border-color: var(--line-color-normal);
+        margin-bottom: 30px;
+    }
 }
 
 // Markdown parsers may put `code` elements inside of `pre`
@@ -123,3 +136,44 @@ input::placeholder {
     // Let the `pre` handle the padding
     padding: 0;
 }
+
+a.settings-btn {
+    color: var(--text-color-faint);
+    border-radius: 4px;
+    padding: 3px;
+    transition: box-shadow 0.5s ease, border 0.5s ease;
+    border: 1px solid transparent;
+
+    &:hover {
+        box-shadow: 0 0 4px var(--shadow-color-light);
+        border: 1px solid var(--line-color-light);
+    }
+}
+
+// Invert while trying to preserve color hue.
+@mixin img-invert {
+    filter: invert(1) hue-rotate(180deg);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not(.lightTheme) main img.auto-invert {
+        @include img-invert;
+    }
+}
+
+:root.darkTheme main img.auto-invert {
+    @include img-invert;
+}
+
+// Users can `include' this to invert images automatically in dark mode.
+@mixin auto-invert-images {
+    @media (prefers-color-scheme: dark) {
+        :root:not(.lightTheme) main img:not(.no-invert) {
+            @include img-invert;
+        }
+    }
+
+    :root.darkTheme main img:not(.no-invert) {
+        @include img-invert;
+    }
+}

data/_sass/_layout.scss

@@ -34,8 +34,8 @@ body {
     padding-bottom: 140px;
     margin: 0;
 
-    font-size: $font-size-main;
-    font-family: $serif-font;
+    font-size: var(--main-font-size);
+    font-family: var(--main-font-family);
     color: var(--primary-text-color);
 }
 
@@ -109,7 +109,7 @@ nav#post_next_prev {
     background-color: var(--color-alert-background);
     color: var(--color-alert-foreground);
 
-    font-family: $serif-font;
+    font-family: var(--main-font-family);
     font-size: 14pt;
 
     padding: 20px;

data/_sass/_nav.scss

@@ -2,7 +2,7 @@
 
 $header-z-index: 100;
 
-header {
+body > header {
     position: sticky;
     top: 0;
     z-index: $header-z-index;
@@ -41,6 +41,33 @@ header {
     }
 }
 
+:root.minimizedNavHeader body > header {
+    > *:not(#toggle_sidebar_btn) {
+        opacity: 0;
+        display: inline-block;
+        transition: opacity 0.5s ease;
+    }
+
+    word-wrap: break-word;
+    width: var(--header-height);
+    padding: 0;
+    transition: width 0.5s ease;
+
+    position: fixed;
+
+    // The minimizedNavHeader class is added after page load. Make the
+    // transition less jarring.
+    animation: fade-in 0.5s ease 1;
+}
+
+:root.minimizedNavHeader.hasOpenSidebar body > header {
+    > *:not(#toggle_sidebar_btn) {
+        opacity: 1;
+    }
+
+    width: calc(var(--nav-width) + #{2 * $navbar-padding});
+}
+
 nav.sidebar {
     position: fixed;
     top: var(--header-height);
@@ -58,7 +85,7 @@ nav.sidebar {
     color: var(--primary-text-color);
     background-color: var(--primary-background-color);
     box-shadow: 0 0 2px var(--shadow-color-light);
-    padding: 10px;
+    padding: $navbar-padding;
 
     z-index: $header-z-index - 1;
 
@@ -79,6 +106,9 @@ nav.sidebar {
         input {
             flex-grow: 1;
             flex-shrink: 1;
+
+            // Allow it to shrink
+            min-width: 20px;
         }
     }
 

data/_sass/_sizes.scss

@@ -1,11 +1,13 @@
 
-// Macro-like variables
 $site-content-preferred-width: 700px;
-$font-size-main: 12pt;
 $content-main-padding: 30px;
+$navbar-padding: 10px;
 
 // CSS variables
 :root {
+    // We want these variables to be changable dynamically,
+    // so they're CSS variables.
+    --main-font-size: 12pt;
     --nav-font-size: 22pt;
     --header-height: 30pt;
     --nav-width: 300px;

data/_sass/hematite.scss

@@ -1,6 +1,10 @@
 @charset "utf-8";
 
-$serif-font: 'FoulisGreek', 'EB Garamond', 'TeX Gyre Bonum', serif;
+:root {
+    --serif-font-family: 'FoulisGreek', 'EB Garamond', 'TeX Gyre Bonum', serif;
+    --sans-font-family: 'URW Gothic, Book', 'TeX Gyre Adventor', 'Ubuntu', sans-serif;
+    --main-font-family: var(--serif-font-family);
+}
 
 @import "_colors";
 @import "_sizes";

data/assets/html/settings.html

@@ -0,0 +1,103 @@
+---
+layout: default
+title: Settings
+noindex: true
+---
+
+<noscript>JavaScript is required to view this page's content!</noscript>
+
+<!-- So they can be localized, much of this page is filled by JavaScript -->
+<h1 id="settings_header">page_settings_header</h1>
+<p id="settings_description">page_settings_description</p>
+
+<!-- Organization inspired by https://www.w3.org/WAI/tutorials/forms/grouping/ -->
+<fieldset>
+    <legend id="font_legend">settings_font_legend</legend>
+    <div>
+        <label id="font_family_lbl" for="font_family">settings_font_family_label</label>
+        <select id="font_family"></select>
+    </div>
+    <div>
+        <label id="font_size_lbl" for="font_size">settings_font_size_label</label>
+        <select id="font_size">
+        </select>
+    </div>
+</fieldset>
+
+<fieldset>
+    <legend id="theme_legend">page_theme_legend</legend>
+    <div>
+        <label id="page_theme_lbl" for="page_theme">settings_theme_label</label>
+        <select id="page_theme"></select>
+    </div>
+    <div>
+        <label id="page_minimize_header_lbl" for="minimize_page_hdr">settings_minimize_header</label>
+        <input type="checkbox" id="minimize_page_hdr"/>
+</fieldset>
+
+<script type="module">
+import Settings from "{{ 'assets/js/Settings.mjs' | relative_url }}";
+import { stringLookup } from "{{ 'assets/js/strings.mjs' | relative_url }}";
+
+let settingsTextElemIDs = [
+    `settings_header`, `settings_description`, `font_legend`,
+    `font_family_lbl`, `font_size_lbl`, `theme_legend`,
+    `page_theme_lbl`, `page_minimize_header_lbl`,
+];
+
+// Localize all descriptive settings elements (each should contian the
+// name of its localization key).
+for (const id of settingsTextElemIDs) {
+    let elem = document.querySelector(`#${id}`);
+    elem.innerText = stringLookup(elem.innerText);
+}
+
+let fontSizeSelect = document.querySelector("#font_size");
+let fontFamilySelect = document.querySelector("#font_family");
+let pageThemeSelect = document.querySelector("#page_theme");
+let minimizeHeaderCheckbox = document.querySelector("#minimize_page_hdr");
+
+pageThemeSelect.innerHTML =
+`
+<option value='${Settings.THEME_AUTO}'>${stringLookup('page_theme_auto')}</option>
+<option value='${Settings.THEME_DARK}'>${stringLookup('page_theme_dark')}</option>
+<option value='${Settings.THEME_LIGHT}'>${stringLookup('page_theme_light')}</option>
+`;
+
+fontFamilySelect.innerHTML =
+`
+<option value='${Settings.FONT_DEFAULT}'>${stringLookup('page_font_default')}</option>
+<option value='${Settings.FONT_SERIF}'>${stringLookup('page_font_serif')}</option>
+<option value='${Settings.FONT_SANS}'>${stringLookup('page_font_sans')}</option>
+`;
+
+fontSizeSelect.innerHTML =
+`
+<option value='${Settings.FONT_SIZE_DEFAULT}'>${stringLookup('page_font_default')}</option>
+<option value='${Settings.FONT_SIZE_SMALL}'>${stringLookup('page_font_small')}</option>
+<option value='${Settings.FONT_SIZE_MEDIUM}'>${stringLookup('page_font_medium')}</option>
+<option value='${Settings.FONT_SIZE_LARGE}'>${stringLookup('page_font_large')}</option>
+`;
+
+fontSizeSelect.oninput = () => {
+    Settings.setFontSize(fontSizeSelect.value);
+};
+
+fontFamilySelect.oninput = () => {
+    Settings.setFontFamily(fontFamilySelect.value);
+};
+
+pageThemeSelect.oninput = () => {
+    Settings.setTheme(pageThemeSelect.value);
+};
+
+minimizeHeaderCheckbox.oninput = () => {
+    Settings.setHeaderMinimized(minimizeHeaderCheckbox.checked);
+};
+
+pageThemeSelect.value = Settings.getTheme();
+fontFamilySelect.value = Settings.getFontFamily();
+fontSizeSelect.value = Settings.getFontSize();
+minimizeHeaderCheckbox.checked = Settings.getHeaderMinimized();
+
+</script>

data/assets/js/Settings.mjs

@@ -0,0 +1,181 @@
+---
+---
+import AsyncUtil from "./AsyncUtil.mjs";
+import AnimationUtil from "./AnimationUtil.mjs";
+
+const THEME_TRANSITION_TIME = 500; // ms
+
+class Settings {
+    THEME_AUTO = 'auto';
+    THEME_DARK = 'dark';
+    THEME_LIGHT = 'light';
+
+    FONT_DEFAULT = 'default';
+    FONT_SANS = 'sans';
+    FONT_SERIF = 'serif';
+
+    FONT_SIZE_SMALL = 'small';
+    FONT_SIZE_MEDIUM = 'medium';
+    FONT_SIZE_LARGE = 'large';
+    FONT_SIZE_DEFAULT = 'default';
+
+    FONT_SIZE_KEY_ = 'hematite-setting-font-size';
+    FONT_FAMILY_KEY_ = 'hematite-setting-font-family';
+    THEME_KEY_ = 'hematite-setting-theme';
+    HEADER_MINIMIZED_KEY_ = 'hematite-setting-minimize-header';
+
+    constructor() {
+    }
+
+    getSetting_(key) {
+        return localStorage.getItem(key);
+    }
+
+    setSetting_(key, val) {
+        localStorage.setItem(key, val);
+        this.applySettings();
+    }
+
+    getTheme() {
+        return this.getSetting_(this.THEME_KEY_) ?? this.THEME_AUTO;
+    }
+
+    getFontFamily() {
+        return this.getSetting_(this.FONT_FAMILY_KEY_) ?? this.FONT_DEFAULT;
+    }
+
+    getFontSize() {
+        return this.getSetting_(this.FONT_SIZE_KEY_) ?? this.FONT_SIZE_DEFAULT;
+    }
+
+    getHeaderMinimized() {
+        let minimizedStr = this.getSetting_(this.HEADER_MINIMIZED_KEY_) ?? {{ site.hematite.minimize_header | default: "false" | jsonify }};
+        return minimizedStr == "true";
+    }
+
+    setFontSize(sizeOption) {
+        this.setSetting_(this.FONT_SIZE_KEY_, sizeOption);
+    }
+
+    setFontFamily(familyOption) {
+        this.setSetting_(this.FONT_FAMILY_KEY_, familyOption);
+    }
+
+    setTheme(themeOption) {
+        this.setSetting_(this.THEME_KEY_, themeOption);
+    }
+
+    setHeaderMinimized(minimize) {
+        this.setSetting_(this.HEADER_MINIMIZED_KEY_, `${minimize}`);
+    }
+
+    getFontSizePt_() {
+        let fontSizeOption = this.getFontSize();
+
+        if (fontSizeOption == this.FONT_SIZE_SMALL) {
+            return {{ site.hematite.user_config.font_size_small | default: "9" }};
+        }
+
+        if (fontSizeOption == this.FONT_SIZE_MEDIUM) {
+            return {{ site.hematite.user_config.font_size_medium | default: "13" }};
+        }
+
+        if (fontSizeOption == this.FONT_SIZE_LARGE) {
+            return {{ site.hematite.user_config.font_size_large | default: "16" }};
+        }
+    }
+
+    usingNonDefaultFontFamily_() {
+        return this.getFontFamily() != this.FONT_DEFAULT;
+    }
+
+    usingNonDefaultFontSize_() {
+        return this.getFontSize() != this.FONT_SIZE_DEFAULT;
+    }
+
+    forcingDarkTheme_() {
+        return this.getTheme() == this.THEME_DARK;
+    }
+
+    forcingLightTheme_() {
+        return this.getTheme() == this.THEME_LIGHT;
+    }
+
+    async applySettings() {
+        document.documentElement.classList.add("changingTheme");
+
+        // Clean up previous changes. We might be re-applying styles.
+        document.documentElement.classList.remove("lightTheme");
+        document.documentElement.classList.remove("darkTheme");
+
+        if (!this.style_) {
+            this.style_ = document.createElement("style");
+        } else {
+            this.style_.remove();
+        }
+
+
+        let styleHTML =
+        `
+            :root.changingTheme * {
+                transition: ${THEME_TRANSITION_TIME}ms ease all;
+            }
+        `;
+
+        // Font family
+        if (this.usingNonDefaultFontFamily_()) {
+            styleHTML +=
+            `
+                :root {
+                    --main-font-family: var(--${this.getFontFamily()}-font-family);
+                }
+            `;
+        }
+
+        // Font size
+        if (this.usingNonDefaultFontSize_()) {
+            styleHTML +=
+            `
+                :root {
+                    --main-font-size: ${this.getFontSizePt_()}pt;
+                }
+            `;
+        }
+
+        this.style_.innerHTML = styleHTML;
+        document.documentElement.appendChild(this.style_);
+
+        // Theme
+        if (this.forcingDarkTheme_()) {
+            document.documentElement.classList.add("darkTheme");
+        }
+        else if (this.forcingLightTheme_()) {
+            document.documentElement.classList.add("lightTheme");
+        }
+
+        if (this.getHeaderMinimized()) {
+            // Run roughly in parallel
+            (async () => {
+                let header = document.querySelector("body > header");
+                if (header) {
+                    await AnimationUtil.collapseOutVert(header, THEME_TRANSITION_TIME / 2);
+                }
+
+                document.documentElement.classList.add("minimizedNavHeader");
+
+                // Animate the header.
+                if (header) {
+                    await AnimationUtil.expandInVert(header, THEME_TRANSITION_TIME / 2);
+                }
+            })();
+        }
+        else {
+            document.documentElement.classList.remove("minimizedNavHeader");
+        }
+
+        await AsyncUtil.waitMillis(THEME_TRANSITION_TIME);
+        document.documentElement.classList.remove("changingTheme");
+    }
+}
+
+export default (new Settings());

data/assets/js/main.mjs

@@ -3,6 +3,7 @@ import { generateHeaderLinks } from "./linkButtonGenerator.mjs";
 import handleSidebar from "./sidebar.mjs";
 import handleSearch from "./search.mjs";
 import autoExpandDropdowns from "./dropdownExpander.mjs";
+import Settings from "./Settings.mjs";
 
 // After loading elements, images, css, etc.
 addEventListener("load", () => {
@@ -17,3 +18,6 @@ addEventListener("load", () => {
 addEventListener("DOMContentLoaded", () => {
     handleSidebar();
 });
+
+// Apply user-specified settings
+Settings.applySettings();

data/assets/js/sidebar.mjs

@@ -1,6 +1,7 @@
 import { stringLookup } from "./strings.mjs";
 import { announceForAccessibility } from "./PageAlert.mjs";
 
+
 function handleSidebar() {
     const toggleBtn = document.querySelector(`button#toggle_sidebar_btn`);
     const sidebar = document.querySelector(`nav#sidebar`);
@@ -16,11 +17,11 @@ function handleSidebar() {
     const setSidebarOpen = (open) => {
         if (!open) {
             sidebar.classList.remove(`open`);
-            document.scrollingElement?.classList.remove(`hasOpenSidebar`);
+            document.documentElement.classList.remove(`hasOpenSidebar`);
         }
         else {
             sidebar.classList.add(`open`);
-            document.scrollingElement?.classList.add(`hasOpenSidebar`);
+            document.documentElement.classList.add(`hasOpenSidebar`);
         }
     };
 
@@ -91,6 +92,17 @@ function handleSidebar() {
             }
         });
     }
+
+    localizeSettingsBtn();
+}
+
+// Localize the text in the sidebar's settings button, if it exists.
+function localizeSettingsBtn() {
+    let sidebarBtn = document.querySelector("#sidebar_settings_btn");
+
+    if (sidebarBtn) {
+        sidebarBtn.innerText = stringLookup(`open_settings_btn`);
+    }
 }
 
 export { handleSidebar };

data/assets/string_data/en.mjs

@@ -30,4 +30,26 @@ export default {
     all_tags_header: 'All Tags',
     prev_post: '← {0}',
     next_post: '{0} →',
+
+    open_settings_btn: 'Site Settings',
+    page_settings_header: 'Settings',
+    page_settings_description:
+          'Here, you can change settings that affect how this page looks. Changes'
+           + ' save automatically.',
+    settings_font_legend: 'Font Options',
+    settings_font_family_label: 'Font Family: ',
+    settings_font_size_label: 'Font Size: ',
+    settings_theme_label: 'Page Theme: ',
+    page_theme_legend: 'Theme Options',
+
+    page_font_sans: 'Sans',
+    page_font_serif: 'Serif',
+    page_font_default: 'Default',
+    page_font_small: 'Small',
+    page_font_medium: 'Medium',
+    page_font_large: 'Large',
+    page_theme_auto: 'Automatic',
+    page_theme_dark: 'Dark Theme',
+    page_theme_light: 'Light Theme',
+    settings_minimize_header: 'Hide Header: '
 };

data/assets/string_data/es.mjs

@@ -31,4 +31,23 @@ export default {
     all_tags_header: 'Todas las etiquetas',
     prev_post: '← {0}',
     next_post: '{0} →',
+
+    open_settings_btn: 'Ajustes de este sitio',
+    page_settings_header: 'Ajustes',
+    page_settings_description: 'Aquí, puede cambiar algunos aspectos de este sitio.'
+         + ' Cuando una ajuste cambia, lo debe estar guardado.',
+    settings_font_legend: 'Ajustes de fuente',
+    settings_font_family_label: 'Familia de fuente: ',
+    settings_font_size_label: 'Tamoño de fuente: ',
+    settings_theme_label: 'Color de la pagina: ',
+    page_theme_legend: 'Ajustes de tema',
+
+    page_font_default: 'Inicial',
+    page_font_small: 'Pequeño',
+    page_font_medium: 'Media',
+    page_font_large: 'Grande',
+    page_theme_auto: 'Automático',
+    page_theme_dark: 'Oscuro',
+    page_theme_light: 'Brillante',
+    settings_minimize_header: 'Título escondido: '
 };

data/assets/style.scss

@@ -6,10 +6,6 @@ styles: true
 @import "hematite";
 
 {% if site.hematite.auto_invert_imgs %}
-// Auto-invert images in dark mode!
-@media (prefers-color-scheme: dark) {
-    main img:not(.no-invert) {
-        filter: invert(1) hue-rotate(180deg);
-    }
-}
+// In dark mode, invert the brightness of images
+@include auto-invert-images;
 {% endif %}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hematite
 version: !ruby/object:Gem::Version
-  version: 0.0.8
+  version: 0.0.11
 platform: ruby
 authors:
 - Henry Heino
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-05-19 00:00:00.000000000 Z
+date: 2022-05-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -34,9 +34,11 @@ files:
 - LICENSE.txt
 - README.md
 - _config.yml
+- _includes/footer.html
 - _includes/img/hamburger_menu.svg
 - _includes/img/search_icon.svg
 - _includes/katex_includes.html
+- _includes/nav/header.html
 - _includes/nav/page_navigation.html
 - _includes/nav/pages_list.html
 - _includes/nav/pinned_page.html
@@ -56,11 +58,13 @@ files:
 - _sass/_sizes.scss
 - _sass/hematite.scss
 - assets/html/all_tags.html
+- assets/html/settings.html
 - assets/img/favicon.svg
 - assets/js/AnimationUtil.mjs
 - assets/js/AsyncUtil.mjs
 - assets/js/DateUtil.mjs
 - assets/js/PageAlert.mjs
+- assets/js/Settings.mjs
 - assets/js/UrlHelper.mjs
 - assets/js/assertions.mjs
 - assets/js/dropdownExpander.mjs