hematite 0.1.14 → 0.1.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e7d0e540229aa59560164e505b1f9c56bfc06410483f121f0f37de4b35f14648
-  data.tar.gz: e134ec448a27e0e1ab0b6c6fb058a71248d9a59c182956a6b873834c150eb120
+  metadata.gz: a65a76e006bbd87ea26a66325be19c7acb2308d195f05763874847ed12e57b45
+  data.tar.gz: 1236b78bc5fc3da5b7135690276bb054aad7fe0c83f8dcf0cfe94ced4fce401d
 SHA512:
-  metadata.gz: f0629528aa7d95d26b68b488a2b5110625471856310273f74db557a8b543db35ccb072af00ffed6195d61e7eef1ed50ac755f55b034fe4c6fa41c22c7e0d35df
-  data.tar.gz: 31c8354bfa13a6ce9fb8531835c367214a6419d20ddb5246092271f2caf81fded7e0aba03db2e52e0166b40500d1bb2a4b0f4d31856feb94375c840f095b4f79
+  metadata.gz: 4dd620ed3184b4d68aaa698f8fe9d5266e1f75dd9dc8daaa397a8d8ce107d95d32dd18efb85a7646bbe28e25d108b8e5ac6e7597c82879eced10e15d9c5ccfc3
+  data.tar.gz: ddc863b0e58fc4386c43a6d421de74f538d581aa4956875e25afc8a27f9d651de1c5116f75e3d5cc6bd7f2812458b64fedb2788c612382c9d9a99c13418674be

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/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: #fa0;
+    --visited-link-color: #f0a;
+
+    --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);
         }

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;
+
+    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/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/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/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.15
 platform: ruby
 authors:
 - Henry Heino
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-06-02 00:00:00.000000000 Z
+date: 2022-06-05 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