hematite 0.0.9 → 0.0.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3d623b260279dabc636598983bebf15e547d963ead82e21b5e8357572597bb48
-  data.tar.gz: 00bba21df3b38ea1db9bf57d631b3ce2da97c5f077c0680831550192cc4c58d7
+  metadata.gz: 8ba3735a0bf64aa9c895fc9622e0370b0827c80386469ccb4c5172058f91db97
+  data.tar.gz: e6f824c10b0febde44d427ee0528681f756cc59bff67a3362e256d77d5be3650
 SHA512:
-  metadata.gz: 51bc1b4fbea55a7bf316d03ac9c291c3f233ab7e91fe163dd3412f23518e3f4b247c3aeafd0cc1b72bb941ec3f721b90dc949bed6cfb3572ee8a4b6ae5fff182
-  data.tar.gz: fe620903b815435c84c0a2d45b3edb1ca10c9d2727eb129ca24c0837b55adbf5fc384086feb0228b164084616419048fec8df8c62138ad976d4a8db990a1d79b
+  metadata.gz: 958067abc2e83cbecc509dc7c31c2eb711c2116ea201a27c28f6a89bc0f0a6658d34532433596b989178ab070d686c2a5de0d26781ff6b92d73fdc6416f9608f
+  data.tar.gz: e01cb8c28899e24135e832ef89543c9266e66db13d9a53f40327d6c32b6d8ed815d5da7247a63fd88ca94dc762180ab752fb8494c2d9e31d3ae2ed13fdda6297

data/_config.yml

@@ -1,9 +1,6 @@
 
 # Settings for the demo site.
 # `jekyll serve` does not auto-reload this file.
-#
-# See https://leo3418.github.io/collections/multilingual-jekyll-site/localize-strings
-# for how localization works.
 
 title: Hematite Theme
 description: A Jekyll theme intended for course websites
@@ -12,6 +9,9 @@ permalink: pretty
 hematite:
   auto_invert_imgs: true
 
+  # Set to true to minimize the header by default
+  minimize_header: false
+
   # Date options are as specified here:
   # https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
   date_format:

data/_includes/settings.html

@@ -0,0 +1,101 @@
+<!--
+    See assets/html/settings.html. This file can be included
+    in your own settings page and add your settings to it!
+-->
+
+<!-- So they can be localized, much of this page is filled by JavaScript -->
+<!-- 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"/>
+    </div>
+</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}`);
+
+    if (elem) {
+        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/_sass/_elements.scss

@@ -149,3 +149,31 @@ a.settings-btn {
         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/_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: grow-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;
 

data/_sass/_sizes.scss

@@ -1,6 +1,7 @@
 
 $site-content-preferred-width: 700px;
 $content-main-padding: 30px;
+$navbar-padding: 10px;
 
 // CSS variables
 :root {

data/assets/html/settings.html

@@ -6,89 +6,7 @@ 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>
-</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`,
-];
-
-// 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");
-
-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);
-};
-
-pageThemeSelect.value = Settings.getTheme();
-fontFamilySelect.value = Settings.getFontFamily();
-fontSizeSelect.value = Settings.getFontSize();
-
-</script>
+{% include settings.html %}

data/assets/js/Settings.mjs

@@ -1,5 +1,9 @@
 ---
 ---
+import AsyncUtil from "./AsyncUtil.mjs";
+import AnimationUtil from "./AnimationUtil.mjs";
+
+const THEME_TRANSITION_TIME = 500; // ms
 
 class Settings {
     THEME_AUTO = 'auto';
@@ -18,6 +22,7 @@ class Settings {
     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() {
     }
@@ -43,6 +48,12 @@ class Settings {
         return this.getSetting_(this.FONT_SIZE_KEY_) ?? this.FONT_SIZE_DEFAULT;
     }
 
+    getHeaderMinimized() {
+        let minimizedStr = this.getSetting_(this.HEADER_MINIMIZED_KEY_)
+            ?? {{ site.hematite.user_config.minimize_header | default: site.hematite.minimize_header | default: "false" | jsonify }};
+        return minimizedStr == "true";
+    }
+
     setFontSize(sizeOption) {
         this.setSetting_(this.FONT_SIZE_KEY_, sizeOption);
     }
@@ -55,6 +66,10 @@ class Settings {
         this.setSetting_(this.THEME_KEY_, themeOption);
     }
 
+    setHeaderMinimized(minimize) {
+        this.setSetting_(this.HEADER_MINIMIZED_KEY_, `${minimize}`);
+    }
+
     getFontSizePt_() {
         let fontSizeOption = this.getFontSize();
 
@@ -87,7 +102,9 @@ class Settings {
         return this.getTheme() == this.THEME_LIGHT;
     }
 
-    applySettings() {
+    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");
@@ -99,7 +116,12 @@ class Settings {
         }
 
 
-        let styleHTML = '';
+        let styleHTML =
+        `
+            :root.changingTheme * {
+                transition: ${THEME_TRANSITION_TIME}ms ease all;
+            }
+        `;
 
         // Font family
         if (this.usingNonDefaultFontFamily_()) {
@@ -121,6 +143,9 @@ class Settings {
             `;
         }
 
+        this.style_.innerHTML = styleHTML;
+        document.documentElement.appendChild(this.style_);
+
         // Theme
         if (this.forcingDarkTheme_()) {
             document.documentElement.classList.add("darkTheme");
@@ -129,8 +154,29 @@ class Settings {
             document.documentElement.classList.add("lightTheme");
         }
 
-        this.style_.innerHTML = styleHTML;
-        document.documentElement.appendChild(this.style_);
+        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");
+
+                if (header) {
+                    // Re-show the header
+                    // Rely on a CSS animation for animating the header's return.
+                    await AnimationUtil.expandInVert(header, 0);
+                }
+            })();
+        }
+        else {
+            document.documentElement.classList.remove("minimizedNavHeader");
+        }
+
+        await AsyncUtil.waitMillis(THEME_TRANSITION_TIME);
+        document.documentElement.classList.remove("changingTheme");
     }
 }
 

data/assets/js/main.mjs

@@ -17,7 +17,7 @@ addEventListener("load", () => {
 // After loading elements, but before loading elements like images.
 addEventListener("DOMContentLoaded", () => {
     handleSidebar();
-
-    // Apply user-specified settings
-    Settings.applySettings();
 });
+
+// Apply user-specified settings
+Settings.applySettings();

data/assets/js/sidebar.mjs

@@ -17,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`);
         }
     };
 

data/assets/string_data/en.mjs

@@ -51,4 +51,5 @@ export default {
     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

@@ -49,4 +49,5 @@ export default {
     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,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: hematite
 version: !ruby/object:Gem::Version
-  version: 0.0.9
+  version: 0.0.12
 platform: ruby
 authors:
 - Henry Heino
@@ -43,6 +43,7 @@ files:
 - _includes/nav/pages_list.html
 - _includes/nav/pinned_page.html
 - _includes/nav/sidebar.html
+- _includes/settings.html
 - _layouts/calendar.html
 - _layouts/default.html
 - _layouts/home.html