hematite 0.1.14 → 0.1.17

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e7d0e540229aa59560164e505b1f9c56bfc06410483f121f0f37de4b35f14648
-  data.tar.gz: e134ec448a27e0e1ab0b6c6fb058a71248d9a59c182956a6b873834c150eb120
+  metadata.gz: e13c30f8073a911e836692a8f9b71aaf1133582d58ad48492898624a8749bc8b
+  data.tar.gz: e30cb4599ba4bf530ea06f542f892ef6ef648075e538f8bd83f0772a4c9d05b4
 SHA512:
-  metadata.gz: f0629528aa7d95d26b68b488a2b5110625471856310273f74db557a8b543db35ccb072af00ffed6195d61e7eef1ed50ac755f55b034fe4c6fa41c22c7e0d35df
-  data.tar.gz: 31c8354bfa13a6ce9fb8531835c367214a6419d20ddb5246092271f2caf81fded7e0aba03db2e52e0166b40500d1bb2a4b0f4d31856feb94375c840f095b4f79
+  metadata.gz: 2d6be697d7284fdd38d3ebbb1c8be3e78df5d4ea940cdd9fa247c0dda17459c4d4022c3882550b43f820bd2fa90a39121fb505ec8113ed897ab3cb003974b42a
+  data.tar.gz: 6cce82827a078b6f60d8cba97000bb7ff51af34ca2ed63106a630a9d895ab71873755c1871918defb97e90191686dca426a8e3cdc1c4f61e958d26e7125b775a

data/_includes/img/chain-link.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg class="chain-link-root" width="120" height="120" version="1.1" viewBox="5 0 115 115" xmlns="http://www.w3.org/2000/svg">
+<style>
+.chain-link-group {
+    stroke: var(--primary-text-color);
+    fill: var(--primary-text-color);
+    transform: scale(1, 1);
+    cursor: pointer;
+
+    transition: transform 0.5s ease;
+}
+
+*:hover > .chain-link-root > .chain-link-group, *:focus-visible > .chain-link-root > .chain-link-group {
+    transform: scale(0.9, 0.9) rotate(3deg);
+}
+
+.first-link {
+    transition: transform 0.5s ease;
+}
+
+*:hover > .chain-link-root .first-link, *:focus-visible > .chain-link-root .first-link {
+    transform: rotate(-1deg) translate(3px, 5px);
+}
+</style>
+   <g class="chain-link-group" stroke-width="1.3073px">
+      <path class="first-link" d="m33.397 50.158c-2.6598 5.036-2.2862 10.261-1.9847 14.517 0 0-15.64 22.738-7.7042 28.627 11.282 8.3732 27.844-11.316 35.784-22.274 4.6398-6.404 11.497-17.806 4.8574-22.551-4.4648-3.1911-15.534 6.396-15.534 6.396 2.4001-4.8081 3.8451-9.2997 8.8749-14.979 0 0 12.876-7.89 17.582-4.4037 10.785 7.9897 4.045 26.844-2.9517 37.755-11.67 18.198-40.276 49.141-57.96 35.093-15.977-12.692 19.037-58.18 19.037-58.18z"/>
+      <path class="second-link chain-link" d="m76.584 70.435c3.391-6.7587 5.3144-12.629 6.102-17.811 0 0 15.266-26.145 6.953-34.912-9.4283-9.9438-27.656 11.689-35.415 22.752-4.5343 6.4656-10.798 17.514-4.4871 22.614 3.5372 2.8589 13.627-3.6947 13.627-3.6947-3.7755 9.069-3.9072 9.1256-8.0298 14.333 0 0-12.197 5.8204-16.306 2.4937-10.388-8.4101-4.8557-26.982 2.3324-37.79 11.277-16.957 39.806-44.356 56.165-30.668 7.7991 6.5255 4.0194 21.892 0.36418 31.865-2.4291 6.628-21.307 30.818-21.307 30.818z"/>
+   </g>
+</svg>

data/_includes/recent_posts.html

@@ -0,0 +1,24 @@
+
+{% assign recent_post_limit = recent_post_limit | default: site.hematite.recent_post_limit | default: 8 %}
+
+<ul class="recent-posts recent-posts-grid">
+{% for post in site.posts limit:recent_post_limit %}
+    <li>
+        <h2>
+            <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+            <span class="post-date">{{ post.date | date_to_string }}</span>
+        </h2>
+        <p class="post-description">{{ post.content | strip_html | truncate: 200 }}</p>
+        <div class="tags">
+            {% for tag in post.tags %}
+                <a
+                    href="{{ 'assets/html/all_tags.html' | relative_url }}#tag__{{ tag | uri_escape }}"
+                    class="post-tag"
+                >
+                    {{ tag }}
+                </a>
+            {% endfor %}
+        </div>
+    </li>
+{% endfor %}
+</ul>

data/_includes/settings.html

@@ -59,6 +59,7 @@ 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_DARKEST}'>${stringLookup('page_theme_darkest')}</option>
 <option value='${Settings.THEME_LIGHT}'>${stringLookup('page_theme_light')}</option>
 `;
 

data/_sass/_colors.scss

@@ -29,15 +29,11 @@
     --syntax-comment-fg: #338;
     --syntax-name-fg: #331;
     --syntax-normal-fg: black;
+    --code-background-color: #f9f5f5;
 }
 
-@media screen {
-    :root:not(.darkTheme), :root.lightTheme {
-        --code-background-color: #f9f5f5;
-    }
-}
 
-@mixin dark-theme-colors {
+@mixin very-dark-theme-colors {
     --primary-text-color: white;
     --secondary-text-color: white;
     --text-color-faint: #ccc;
@@ -47,7 +43,7 @@
     --selected-item-fg-color: white;
     --selected-item-bg-color: #530033;
 
-    --primary-background-color: black;
+    --primary-background-color: #000;
     --secondary-background-color: #111;
     --code-background-color: #222;
     --line-color-light: #222;
@@ -70,6 +66,39 @@
     --syntax-normal-fg: white;
 }
 
+@mixin dark-theme-colors {
+    --primary-text-color: white;
+    --secondary-text-color: white;
+    --text-color-faint: #ccc;
+    --link-color: #fb3;
+    --visited-link-color: #f3b;
+
+    --selected-item-fg-color: white;
+    --selected-item-bg-color: #530033;
+
+    --primary-background-color: #333;
+    --secondary-background-color: #222;
+    --code-background-color: #222;
+    --line-color-light: #555;
+    --line-color-normal: #aaa;
+
+    --color-alert-background: #300;
+    --color-alert-foreground: white;
+
+    --shadow-color-light: rgba(220, 220, 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:not(.lightTheme) {
         @include dark-theme-colors;
@@ -80,5 +109,9 @@
     :root.darkTheme {
         @include dark-theme-colors;
     }
+
+    :root.veryDarkTheme {
+        @include very-dark-theme-colors;
+    }
 }
 

data/_sass/_elements.scss

@@ -116,6 +116,10 @@ main pre {
             padding: 4px;
         }
 
+        .linkToHeaderContainer > a {
+            background-color: transparent;
+        }
+
         code {
             box-shadow: inset -1px -1px 4px var(--shadow-color-light);
         }
@@ -182,6 +186,25 @@ a.settings-btn {
     }
 }
 
+div.boxed {
+    border: 1px solid var(--line-color-light);
+    border-radius: 2px;
+    padding: 14px;
+}
+
+ul.task-list {
+    li.task-list-item {
+        &::marker {
+            content: "";
+        }
+
+        .task-list-item-checkbox {
+            margin-left: -15px;
+            margin-right: 15px;
+        }
+    }
+}
+
 // Invert while trying to preserve color hue.
 @mixin img-invert {
     filter: invert(1) hue-rotate(180deg);
@@ -193,10 +216,6 @@ a.settings-btn {
     }
 }
 
-: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) {
@@ -205,7 +224,9 @@ a.settings-btn {
         }
     }
 
-    :root.darkTheme main img:not(.no-invert) {
-        @include img-invert;
+    :root.darkTheme, :root.veryDarkTheme {
+        main img:not(.no-invert) {
+            @include img-invert;
+        }
     }
 }

data/_sass/_layout.scss

@@ -4,7 +4,7 @@
 @import "_calendar";
 
 .main-container {
-    box-shadow: 1px 1px 3px var(--shadow-color-light);
+    box-shadow: 0px -1px 2px var(--shadow-color-light);
     background-color: var(--primary-background-color);
 
     max-width: $site-content-preferred-width;
@@ -139,15 +139,28 @@ nav#post_next_prev {
 }
 
 .linkToHeaderContainer {
-    float: right;
-    opacity: 0.1;
     cursor: pointer;
+    position: absolute;
+    opacity: 0.2;
+
+    a {
+        margin-left: -1em;
+
+        svg {
+            width: 1em;
+            height: 0.7em;
+        }
+    }
 
     transition: opacity 0.2s ease;
 }
 
-.linkToHeaderContainer:hover, .linkToHeaderContainer:focus-within {
-    opacity: 1;
+h1, h2, h3, h4, h5, h6 {
+    &:hover, &:focus-visible {
+        .linkToHeaderContainer {
+            opacity: 1;
+        }
+    }
 }
 
 .spacer {

data/_sass/_nav.scss

@@ -257,3 +257,86 @@ nav.sidebar {
 .main-container * {
     scroll-margin-top: 2.5em;
 }
+
+
+.recent-posts {
+    display: flex;
+    flex-direction: column;
+    padding-left: 0;
+    align-items: center;
+
+    flex-wrap: wrap;
+    overflow-x: auto;
+
+    li {
+        ::before {
+            content: "";
+        }
+
+        list-style: none;
+
+        border: 1px solid var(--line-color-light);
+        border-radius: 4px;
+        padding-left: 12px;
+        padding-right: 12px;
+        margin-bottom: 4px;
+
+        h2 {
+            font-variant: small-caps;
+        }
+
+        .post-date {
+            float: right;
+            color: var(--text-color-faint);
+
+            // Ensure that there is space between the date and
+            // the post title.
+            margin-left: 30px;
+        }
+
+        .post-description {
+            color: var(--text-color-faint);
+            font-style: italic;
+            font-weight: 200;
+        }
+
+        .tags {
+            opacity: 0.7;
+            font-size: 0.8em;
+        }
+    }
+}
+
+// Scrollable grid layout for the recent posts widget.
+.recent-posts-grid {
+    max-height: 500px;
+
+    li {
+        max-width: Min(50vw, 500px);
+    }
+
+    @media screen and (max-width: 500px) {
+        max-height: 100vh;
+
+        li {
+            max-width: unset;
+        }
+    }
+}
+
+@media print {
+    .recent-posts {
+        display: none;
+
+        // Should we decide to show the recent posts,
+        // ensure that they're in a list format.
+        max-height: unset;
+        max-width: unset;
+        overflow-x: hidden;
+
+        li {
+            max-width: unset;
+            border: none;
+        }
+    }
+}

data/_sass/_rogue.scss

@@ -47,4 +47,21 @@
     .n, .nv, .nf, .nt, .na, .nx, .nd {
         color: var(--syntax-name-fg);
     }
+
+    // Markdown
+
+    // Headings
+    .gh, .gs {
+        font-weight: bold;
+    }
+
+    // Italics
+    .ge {
+        font-style: italic;
+    }
+
+    // Code
+    .sb {
+        border: 1px solid var(--line-color-light);
+    }
 }

data/assets/js/Settings.mjs

@@ -8,6 +8,7 @@ const THEME_TRANSITION_TIME = 500; // ms
 class Settings {
     THEME_AUTO = 'auto';
     THEME_DARK = 'dark';
+    THEME_DARKEST = 'darkest';
     THEME_LIGHT = 'light';
 
     FONT_DEFAULT = 'default';
@@ -94,20 +95,13 @@ class Settings {
         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");
+        document.documentElement.classList.remove("veryDarkTheme");
 
         if (!this.style_) {
             this.style_ = document.createElement("style");
@@ -147,11 +141,16 @@ class Settings {
         document.documentElement.appendChild(this.style_);
 
         // Theme
-        if (this.forcingDarkTheme_()) {
-            document.documentElement.classList.add("darkTheme");
-        }
-        else if (this.forcingLightTheme_()) {
-            document.documentElement.classList.add("lightTheme");
+        switch (this.getTheme()) {
+            case this.THEME_DARK:
+                document.documentElement.classList.add("darkTheme");
+                break;
+            case this.THEME_DARKEST:
+                document.documentElement.classList.add("veryDarkTheme");
+                break;
+            case this.THEME_LIGHT:
+                document.documentElement.classList.add("lightTheme");
+                break;
         }
 
         if (this.getHeaderMinimized()) {

data/assets/js/fixTasklists.mjs

@@ -0,0 +1,21 @@
+
+export default () => {
+    const taskLists = document.querySelectorAll('.task-list-item > input.task-list-item-checkbox');
+
+    for (const input of taskLists) {
+
+        // Disabled checkboxes have styling that make their values hard
+        // to see. Effectively disable them, without actually setting the
+        // disabled property.
+        input.setAttribute('aria-disabled', 'true');
+        input.removeAttribute('disabled');
+
+        const origValue = input.checked;
+        input.addEventListener('input', () => {
+            input.checked = origValue;
+        });
+        input.addEventListener('click', () => {
+            input.checked = origValue;
+        });
+    }
+};

data/assets/js/layout/calendar.mjs

@@ -43,7 +43,7 @@ function getCalendarData(elem, formatElemLabels, dateHeaderTag) {
                 }
             }
             catch (e) {
-                 errored = true;
+                errored = true;
             }
 
             if (errored) {
@@ -277,7 +277,7 @@ class Calendar {
             return this.data_[i];
         }
 
-        return null;
+        return this.data_[this.data_.length - 1] ?? null;
     }
 
     /// Get an item in [data_] from [date], if [searchDate]

data/assets/js/linkButtonGenerator.mjs

@@ -1,8 +1,10 @@
+---
+---
 
 import { PageAlert } from "./PageAlert.mjs";
 import { stringLookup as _L } from './strings.mjs';
 
-const INTERIOR_LINK_TEXT = "🔗";
+const INTERIOR_LINK_CONTENT_HTML = `{% include img/chain-link.svg %}`;
 const INTERIOR_LINK_CONTAINER_CLSS = "linkToHeaderContainer";
 
 /// Creates 🔗 buttons for every header with an ID.
@@ -25,9 +27,10 @@ function createLinkButton_(header) {
     let headerText = header.innerText;
 
     container.classList.add(INTERIOR_LINK_CONTAINER_CLSS);
-    link.innerText = INTERIOR_LINK_TEXT;
     link.title = _L("copy_link_to_header", headerText);
     link.href = `#${header.getAttribute('id')}`;
+    link.innerHTML = INTERIOR_LINK_CONTENT_HTML;
+
     link.onclick = () => {
         navigator.clipboard.writeText(link.href);
         PageAlert.builder()

data/assets/js/main.mjs

@@ -4,6 +4,7 @@ import handleSidebar from "./sidebar.mjs";
 import handleSearch from "./search.mjs";
 import autoExpandDropdowns from "./dropdownExpander.mjs";
 import makeElemsScrollable from "./scrollables.mjs";
+import fixTaskLists from './fixTasklists.mjs';
 import Settings from "./Settings.mjs";
 
 // After loading elements, images, css, etc.
@@ -19,6 +20,7 @@ addEventListener("load", () => {
 addEventListener("DOMContentLoaded", () => {
     handleSidebar();
     makeElemsScrollable();
+    fixTaskLists();
 });
 
 // Apply user-specified settings

data/assets/string_data/en.mjs

@@ -50,6 +50,7 @@ export default {
     page_font_large: 'Large',
     page_theme_auto: 'Automatic',
     page_theme_dark: 'Dark Theme',
+    page_theme_darkest: 'Very Dark Theme',
     page_theme_light: 'Light Theme',
     settings_minimize_header: 'Hide Header: ',
 

data/assets/string_data/es.mjs

@@ -48,6 +48,7 @@ export default {
     page_font_large: 'Grande',
     page_theme_auto: 'Automático',
     page_theme_dark: 'Oscuro',
+    page_theme_darkest: 'Muy Oscuro',
     page_theme_light: 'Brillante',
     settings_minimize_header: 'Título escondido: ',
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hematite
 version: !ruby/object:Gem::Version
-  version: 0.1.14
+  version: 0.1.17
 platform: ruby
 authors:
 - Henry Heino
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-06-02 00:00:00.000000000 Z
+date: 2022-09-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -36,6 +36,7 @@ files:
 - _config.yml
 - _includes/extern_library_imports.html
 - _includes/footer.html
+- _includes/img/chain-link.svg
 - _includes/img/hamburger_menu.svg
 - _includes/img/loading_icon.svg
 - _includes/img/search_icon.svg
@@ -46,6 +47,7 @@ files:
 - _includes/nav/pages_list.html
 - _includes/nav/pinned_page.html
 - _includes/nav/sidebar.html
+- _includes/recent_posts.html
 - _includes/scss/_fonts.scss
 - _includes/settings.html
 - _layouts/calendar.html
@@ -81,6 +83,7 @@ files:
 - assets/js/UrlHelper.mjs
 - assets/js/assertions.mjs
 - assets/js/dropdownExpander.mjs
+- assets/js/fixTasklists.mjs
 - assets/js/layout/calendar.mjs
 - assets/js/layout/post.mjs
 - assets/js/layout/remark_slideshow.mjs