jekyll-theme-hydejack 9.1.9 → 9.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c9e8449344882f96131b7523ccc23e397196a7291c0dbc7c8db10474b9f275db
-  data.tar.gz: bdfddbcc4936cc248bda7a37e90cf934fddf289e7dee0b01b081aa6922d20c9c
+  metadata.gz: eb537c9e2b8f45d777859699f3631077b18058ce01b6e322f727136d1018b70a
+  data.tar.gz: 4ac43942527877672ee46d7ac4cd9faac8892465ccce5275f3808431983ffccd
 SHA512:
-  metadata.gz: 0eccffa021ab8e2cc013c6dfbb67b8cb1f0abed28e102f55712f61375c9b8b40264ee2d80d2824adbfc1b3ad40cc3317c065a3e50cbb708e8f3ef577b7fda9b7
-  data.tar.gz: 28e0bb24e467387091520f9722dfb1e88e21ec17a9ae18b69d1922f928fb6b48b2cbbb4a34dadc0871487d2de602bdc364be295664ca1b60960655a6e48eac47
+  metadata.gz: e75ca0d0a9447cbd9a0b06e16beea208f8e6e6b6783e87270a8d129ec539420e07ef7fc0305bc607c0e32f4c4cff698fc7572e517ee0d8315bb691a25f89dc5b
+  data.tar.gz: 10a775240fd963a11fa18f01b14f3bbaa254584f060f184570a5809022244be809e6a3d3ecabceb349f87bef4183b6a128b6c33c2939ec42c5a471938db6bb8c

data/README.md

@@ -7,10 +7,9 @@ A boutique Jekyll theme for hackers, nerds, and academics.
 
 
 
-
 [![Screenshot](https://hydejack.com/assets/img/blog/hydejack-9.jpg)][welcome]
 
-Hydejack's cover page on a variety of screens.
+<p align="center">Hydejack's cover page on a variety of screen sizes.
 
 
 
@@ -26,40 +25,10 @@ It includes a blog that is suitable for both prose and technical documentation,
 
 **Hydejack** is 100% built on Open Source software, and is Open Source itself, save for parts of the PRO version. The PRO version is a one-time payment that gives you the right to use it forever.
 
-Hydejack is all static sites. _HTML_. All you need is a web server --- any web server --- to have a professional web presence that lasts a lifetime.
-
-## Download
-
-There are two versions of **Hydejack**: The *Free Version* includes basic blogging functionality and most of Hydejack's [Features], such as dynamic page loading and advanced animations.
-
-The *PRO Version* includes additional features for professionals, such as a [portfolio], [resume], [Dark Mode][dark], [Forms], [Built-In Search][search] and customizable cookie banners.
-
-The table below shows what's included in each version:
-
-|                               | Free           | PRO                 |
-|:------------------------------|:--------------:|:-------------------:|
-| [Blog]                        | &#x2714;       | &#x2714;            |
-| [Features]                    | &#x2714;       | &#x2714;            |
-| [Documentation][docs]         | &#x2714;       | &#x2714;            |
-| [Portfolio]                   |                | &#x2714;            |
-| Printable [Resume]            |                | &#x2714;            |
-| [Dark Mode][dark]             |                | &#x2714;            |
-| [Built-In Search][search]     |                | &#x2714;            |
-| [Custom Forms][forms]         |                | &#x2714;            |
-| [Newsletter Box][news]        |                | &#x2714;            |
-| [Grid layout][grid]           |                | &#x2714;            |
-| [Offline Support][ofln]       |                | &#x2714;            |
-| Table of Contents[^2]         |                | &#x2714;            |
-| Cookie Banner                 |                | &#x2714;            |
-| No Hydejack Branding          |                | &#x2714;            |
-| License                       | [GPL-3.0][lic] | [PRO]               |
-| Source                        | [GitHub][src]  | Included            |
-| __Price__                     | __Free__       | __$99__ <small>One-Time Purchase</small> [^22] |
-| | [__Download__][kit] <br/>-- or --<br/> [__Deploy to Netlify__][nfy] | [__Buy PRO__][buy] |
-
-
+Hydejack is all static sites. _HTML_. All you need is a web server — any web server — to have a professional web presence that lasts a lifetime.
 
 
+## A Free Blogging Theme
 **Hydejack** started out as a free blogging theme for Jekyll — and continues to be so.
 
 <!--posts-->
@@ -76,7 +45,7 @@ Get a resume that's consistent across the board — whether it's on the web, mob
 
 [![Resume PDF](https://hydejack.com/assets/img/blog/resume.png)][resume]
 
-Front and center page of a print resume generated by Hydejack.
+<p align="center">Front and center page of a print resume generated by Hydejack.
 
 
 
@@ -89,21 +58,23 @@ Write all content with Markdown. __Hydejack__ gives you [additional CSS classes]
 
 ![w3m Screenshot](https://hydejack.com/assets/img/blog/w3m.png)
 
-The Hydejack blog, as seen by the text browser `w3m`.
+<p align="center">The Hydejack blog, as seen by the text browser `w3m`.
 
 
 
 ## Syntax Highlighting
 **Hydejack** features syntax highlighting, powered by [Rouge].
 
-```js
-// file: `example.js`
-document.querySelector("hy-push-state").addEventListener("hy-push-state-load", () => {
-  const supportsCodeHighlights = true; //!!
-});
+```html
+<!-- file: `_includes/my-body.html` -->
+<script type="module">
+  document.querySelector("hy-push-state").addEventListener("hy-push-state-load", () => {
+    const supportsCodeHighlights = false; // TBD!!
+  });
+</script>
 ```
 
-Code blocks can have a filename and a caption.
+<p align="center">Code blocks can have a filename and a caption.
 
 
 
@@ -112,16 +83,7 @@ They say math is beautiful — and with **Hydejack**'s [math support][math] it's
 
 ![Math example](https://hydejack.com/assets/img/blog/example-content-iii.jpg)
 
-Hydejack uses KaTeX to efficiently render math.
-
-
-
-
-## Build an Audience
-The PRO version has built-in support for customizable [Tinyletter] newsletter subscription boxes.
-
-If you are using a different service like MailChimp, you can build a custom newsletter subscription box using [Custom Forms][forms].
-
+<p align="center">Hydejack uses KaTeX to efficiently render math.
 
 
 
@@ -130,11 +92,11 @@ If you are using a different service like MailChimp, you can build a custom news
 An incomplete list of features included in all versions of **Hydejack**:
 
 * Responsive layout with unique design features for every screen size
-* Cover Pages for a stunning fist impression.
+* Cover Pages for a stunning first impression.
 * Customizable sidebar and touch-enabled drawer menu
 * Single Page Web App-style page loading
 * Advanced FLIP animations, inspired by Material Design
-* Good [Google PageSpeed Score][gpss][^1]
+* Good [Google PageSpeed Score][gpss][^11]
 * [Syntax highlighting][syntax], powered by [Rouge]
 * [LaTeX math blocks][latex], rendered with ether [KaTeX] or [MathJax] at your choice
 * Soft-coded labels: Change wording or translate to other languages via a single file
@@ -142,10 +104,16 @@ An incomplete list of features included in all versions of **Hydejack**:
 * Author section below each article and support for multiple authors
 * Built-in icons for many social networks
 * Simple and semantic HTML + Structured Data
-* Google Analytics and Google Fonts support
+* Works with GitHub Pages out of the box[^12]
+
+[^11]: Actual page load speed depends on your hosting provider, location, resolution and format of images, usage of 3rd party plugins, and other factors.
+
+[^12]: Some limitations apply, most notably the need to use use MathJax instead of KaTeX for math block rendering.
+
+*[FLIP]: First-Last-Invert-Play. A coding technique to achieve performant page transition animations.
 
 
-## Comparison
+## Download
 
 There are two versions of **Hydejack**: The *Free Version* includes basic blogging functionality and most of Hydejack's [Features], such as dynamic page loading and advanced animations.
 
@@ -153,38 +121,38 @@ The *PRO Version* includes additional features for professionals, such as a [por
 
 The table below shows what's included in each version:
 
-|                               | Free           | PRO                 |
-|:------------------------------|:--------------:|:-------------------:|
-| [Blog]                        | &#x2714;       | &#x2714;            |
-| [Features]                    | &#x2714;       | &#x2714;            |
-| [Documentation][docs]         | &#x2714;       | &#x2714;            |
-| [Portfolio]                   |                | &#x2714;            |
-| Printable [Resume]            |                | &#x2714;            |
-| [Dark Mode][dark]             |                | &#x2714;            |
-| [Built-In Search][search]     |                | &#x2714;            |
-| [Custom Forms][forms]         |                | &#x2714;            |
-| [Newsletter Box][news]        |                | &#x2714;            |
-| [Grid layout][grid]           |                | &#x2714;            |
-| [Offline Support][ofln]       |                | &#x2714;            |
-| Table of Contents[^2]         |                | &#x2714;            |
-| Cookie Banner                 |                | &#x2714;            |
-| No Hydejack Branding          |                | &#x2714;            |
-| License                       | [GPL-3.0][lic] | [PRO]               |
-| Source                        | [GitHub][src]  | Included            |
-| __Price__                     | __Free__       | __$99__ <small>One-Time Purchase</small> [^22] |
-| | [__Download__][kit] <br/>-- or --<br/> [__Deploy to Netlify__][nfy] | [__Buy PRO__][buy] |
-
-[^1]: Actual page load speed depends on your hosting provider, resolution of embedded images and usage of 3rd party plugins.
-
-[^2]: Large screens (> 1664px width) only.
-
-[^22]: Discounts may apply, check [Gumroad][buy] for up-to-date pricing.
+|                               | Free                | PRO                 |
+|:------------------------------|:-------------------:|:-------------------:|
+| [Blog]                        | &#x2714;            | &#x2714;            |
+| [Features]                    | &#x2714;            | &#x2714;            |
+| [Documentation][docs]         | &#x2714;            | &#x2714;            |
+| [Dark Mode][dark]             | &#x2714;            | &#x2714;            |
+| [Portfolio]                   |                     | &#x2714;            |
+| Printable [Resume]            |                     | &#x2714;            |
+| [Built-In Search][search]     |                     | &#x2714;            |
+| [Custom Forms][forms]         |                     | &#x2714;            |
+| [Grid layout][grid]           |                     | &#x2714;            |
+| [Offline Support][ofln]       |                     | &#x2714;            |
+| Table of Contents[^21]        |                     | &#x2714;            |
+| Cookie Banner                 |                     | &#x2714;            |
+| No Hydejack Branding          |                     | &#x2714;            |
+| License                       | [GPL-3.0][lic]      | [PRO]               |
+| Source                        | [GitHub][src]       | Included            |
+| __Price__                     | __Free__            | __$119__ <small>One-Time Purchase</small>[^xx] |
+|                               | [__Download__][kit] | [__Buy PRO__][buy] |
+
+
+[^21]: Large screens (> 1664px width) only.
+
+[^xx]: 
+    Discounts may apply, check [Gumroad][buy] for up-to-date pricing.
+    
+
 
-*[FLIP]: First-Last-Invert-Play. A coding technique to achieve performant page transition animations.
 
 
 [blog]: https://hydejack.com/blog/
-[portfolio]: https://hydejack.com/projects/
+[portfolio]: https://hydejack.com/showcase/
 [resume]: https://hydejack.com/resume/
 [download]: https://hydejack.com/download/
 [welcome]: https://hydejack.com/
@@ -208,13 +176,8 @@ The table below shows what's included in each version:
 [src]: https://github.com/hydecorp/hydejack
 [gem]: https://rubygems.org/gems/jekyll-theme-hydejack
 [buy]: https://gum.co/nuOluY
-[nfy]: https://app.netlify.com/start/deploy?repository=https://github.com/hydecorp/hydejack-starter-kit
-[dtn]: https://www.netlify.com/img/deploy/button.svg
 
-[gpss]: https://developers.google.com/speed/pagespeed/insights/?url=https://hydejack.com/
-[hy-push-state]: https://hydecorp.github.io/hy-push-state/
-[hy-drawer]: https://hydecorp.github.io/hy-drawer/
+[gpss]: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fhydejack.com%2Fdocs%2F
 [rouge]: http://rouge.jneen.net
 [katex]: https://khan.github.io/KaTeX/
 [mathjax]: https://www.mathjax.org/
-[tinyletter]: https://tinyletter.com/

data/_config.yml

@@ -6,10 +6,7 @@ accent_image:          /assets/img/sidebar-bg.jpg
 accent_color:          rgb(79,177,186)
 theme_color:           rgb(25,55,71)
 
-google_fonts:          Roboto+Slab:700|Noto+Sans:400,400i,700,700i
-font:                  Noto Sans, Helvetica, Arial, sans-serif
-font_heading:          Roboto Slab, Helvetica, Arial, sans-serif
-font-code:             ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+google_fonts:          false
 
 hydejack:
   post_addons:         [about, newsletter, related, random, comments]

data/_includes/body/footer.html

@@ -13,7 +13,7 @@
     {% endfor %}
     </small></nav>
   {% endif %}
-    <p><small>Powered by <a class="external" href="https://hydejack.com/">Hydejack</a> v<span id="_version">9.1.9</span></small></p>
+    <p><small>Powered by <a class="external" href="https://hydejack.com/">Hydejack</a> v<span id="_version">9.2.0</span></small></p>
   <hr class="sr-only"/>
 </footer>
 {% endif %}

data/_includes/body/index.html

@@ -1,4 +1,4 @@
-
+{% include_cached pro/dark-mode-fix.html %}
 
 {% assign assets_url = "/assets/" | relative_url %}
 <hy-push-state

data/_includes/body/scripts.html

@@ -1,7 +1,7 @@
 <!--[if gt IE 10]><!---->
   <script nomodule>{% include scripts/nomodule.min.js %}</script>
-  <script src="{{ '/assets/js/hydejack-9.1.9.js' | relative_url }}" type="module"></script>
-  <script src="{{ '/assets/js/LEGACY-hydejack-9.1.9.js' | relative_url }}" nomodule defer></script>
+  <script src="{{ '/assets/js/hydejack-9.2.0.js' | relative_url }}" type="module"></script>
+  <script src="{{ '/assets/js/LEGACY-hydejack-9.2.0.js' | relative_url }}" nomodule defer></script>
   {% include my-scripts.html %}
   {% include body/analytics.html %}
 <!--<![endif]-->

data/_includes/head/meta-static.html

@@ -10,4 +10,4 @@
 
 <meta name="application-name" content="{{ site.title }}">
 
-<meta name="generator" content="Hydejack v9.1.9" />
+<meta name="generator" content="Hydejack v9.2.0" />

data/_includes/head/meta.html

@@ -17,6 +17,14 @@
   <title>{{ site.data.strings.redirecting | default:"Redirecting..." }}</title>
 {% endunless %}
 
+{% if site.hydejack.dark_mode.dynamic %}
+  <meta name="color-scheme" content="dark light">
+{% elsif site.hydejack.dark_mode.always %}
+  <meta name="color-scheme" content="dark">
+{% else %}
+  <meta name="color-scheme" content="light">
+{% endif %}
+
 {% unless site.hydejack.no_theme_color %}
   <meta name="theme-color" content="{{ theme_color | default:'rgb(8,46,57)' }}">
 {% endunless %}

data/_includes/head/styles-inline.html

@@ -1,5 +1,5 @@
 {% assign google_fonts = site.google_fonts %}
-{% capture style_url %}{{ 'assets/css/hydejack-9.1.9.css' | relative_url }}{% endcapture %}
+{% capture style_url %}{{ 'assets/css/hydejack-9.2.0.css' | relative_url }}{% endcapture %}
 {% capture icons_url %}{{ 'assets/icomoon/style.css' | relative_url }}{% endcapture %}
 {% if google_fonts %}
   {% capture fonts_url %}{{ site.google_fonts_url | default:'https://fonts.googleapis.com' }}/css?family={{ google_fonts | uri_escape }}&display=swap{% endcapture %}

data/_includes/head/styles-no-inline.html

@@ -1,5 +1,5 @@
 {% assign google_fonts = site.google_fonts %}
-{% capture style_url %}{{ 'assets/css/hydejack-9.1.9.css' | relative_url }}{% endcapture %}
+{% capture style_url %}{{ 'assets/css/hydejack-9.2.0.css' | relative_url }}{% endcapture %}
 {% capture icons_url %}{{ 'assets/icomoon/style.css' | relative_url }}{% endcapture %}
 {% if google_fonts %}
   {% capture fonts_url %}{{ site.google_fonts_url | default:'https://fonts.googleapis.com' }}/css?family={{ google_fonts | uri_escape }}&display=swap{% endcapture %}

data/_includes/header.txt

@@ -9,5 +9,5 @@
  *                 /\___/                \ \____/
  *                 \/__/                  \/___/
  *
- * Powered by Hydejack v9.1.9 <https://hydejack.com/>
+ * Powered by Hydejack v9.2.0 <https://hydejack.com/>
  */

data/_includes/pro/dark-mode-fix.html

@@ -0,0 +1,7 @@
+{% if site.hydejack.dark_mode.dynamic %}
+<script>
+  window._sunrise = {{ site.hydejack.dark_mode.sunrise | default:"6"  }};
+  window._sunset =  {{ site.hydejack.dark_mode.sunset  | default:"18" }};
+  {% include scripts/dark-mode-fix.min.js %}
+</script>
+{% endif %}

data/_includes/scripts/dark-mode-fix.js

@@ -0,0 +1,10 @@
+!function (window, document) {
+  var LM = 'light-mode';
+  var DM = 'dark-mode';
+  var h = new Date().getHours();
+  if ('matchMedia' in window && window.matchMedia('(prefers-color-scheme)')) return;
+  var m = h <= window._sunrise || h >= window._sunset  ? DM : LM; 
+  var n = m === DM ? LM : DM;
+  document.body.classList.add(m);
+  document.body.classList.remove(n);
+}(window, document);

data/_includes/scripts/dark-mode-fix.min.js

@@ -0,0 +1 @@
+((e,s)=>{var d="light-mode",a="dark-mode",o=(new Date).getHours();"matchMedia"in e&&e.matchMedia("(prefers-color-scheme)")||(e=(o=o<=e._sunrise||o>=e._sunset?a:d)==a?d:a,s.body.classList.add(o),s.body.classList.remove(e))})(window,document);

data/_includes/styles/inline.scss

@@ -18,6 +18,12 @@
 @import "my-variables";
 @import "mixins";
 
+{% if site.hydejack.dark_mode.dynamic %}
+  @import "pro/dark-mode-dynamic";
+{% else %}
+  @import "pro/dark-mode";
+{% endif %}
+
 @import "html";
 
 @import "pooleparty/__inline__/base";

data/_includes/styles/page-style.scss

@@ -1,5 +1,5 @@
-// {% assign color       = include.color       %}
-// {% assign theme_color = include.theme_color %}
+{% assign color       = include.color       %}
+{% assign theme_color = include.theme_color %}
 
 html {
   --accent-color: {{ color }};
@@ -7,4 +7,11 @@ html {
   --accent-color-highlight: #{fade-out({{ color }}, 0.9)};
   --accent-color-darkened: #{darken({{ color }}, 7.5%)};
   --theme-color: {{ theme_color }};
+  {% if site.github and site.hydejack.dart_sass_2_compat != true %}
+  --dark-mode-body-bg: #{hsl(hue({{ theme_color }}), (saturation({{ theme_color }}) / 8), 17.5%)};
+  --dark-mode-border-color: #{hsl(hue({{ theme_color }}), (saturation({{ theme_color }}) / 8), 22.5%)};
+  {% else %}
+  --dark-mode-body-bg: #{hsl(hue({{ theme_color }}), calc(saturation({{ theme_color }}) / 8), 17.5%)};
+  --dark-mode-border-color: #{hsl(hue({{ theme_color }}), calc(saturation({{ theme_color }}) / 8), 22.5%)};
+  {% endif %}
 }

data/_includes/styles/style.scss

@@ -18,6 +18,12 @@
 @import "my-variables";
 @import "mixins";
 
+{% if site.hydejack.dark_mode.dynamic %}
+  @import "pro/dark-mode-dynamic";
+{% else %}
+  @import "pro/dark-mode";
+{% endif %}
+
 @import "reboot-mod";
 
 {% unless site.hydejack.no_inline_css or jekyll.environment == 'development' %}
@@ -101,3 +107,7 @@
 @import "tippy";
 
 @import "syntax";
+@import "pro/syntax-dark";
+{% if site.hydejack.dark_mode.dynamic %}
+  @import "pro/dark-mode-dynamic-syntax";
+{% endif %}

data/_includes/styles/variables.scss

@@ -30,7 +30,7 @@ $root-line-height:      {{ vars.root_line_height      | default:1.75 }};
 
 $font-weight:         {{ vars.font_weight         | default:400 }};
 $font-weight-bold:    {{ vars.font_weight_bold    | default:700 }};
-$font-weight-heading: {{ vars.font_weight_heading | default:700 }};
+$font-weight-heading: {{ vars.font_weight_heading | default:900 }};
 
 $content-width:   {{ vars.content_width   | default:42 }}rem;
 $content-width-2: {{ vars.content_width_2 | default:48 }}rem;

data/_includes/templates/index.html

@@ -6,4 +6,7 @@
   {% include templates/loading.html %}
   {% include templates/error.html %}
   {% include templates/permalink.html %}
+  {% if site.hydejack.dark_mode.icon %}
+    {% include templates/pro/dark-mode.html %}
+  {% endif %}
 </div>

data/_includes/templates/pro/dark-mode.html

@@ -0,0 +1,6 @@
+<template id="_dark-mode-template">
+  <button id="_dark-mode" class="nav-btn no-hover" >
+    <span class="sr-only">{{ site.data.strings.dark_mode | default:"Dark Mode" }}</span>
+    <span class="icon-brightness-contrast"></span>
+  </button>
+</template>

data/_layouts/compress.html

@@ -10,6 +10,6 @@
                 /\___/                \ \____/
                 \/__/                  \/___/
 
-Powered by Hydejack v9.1.9 <https://hydejack.com/>
+Powered by Hydejack v9.2.0 <https://hydejack.com/>
 -->{% capture _LINE_FEED %}
 {% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd p rt rp optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}</{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "<!-- -->" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "</pre>" %}<pre{{ _pres.first }}</pre>{% endif %}{% unless _pre_before contains "</pre>" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %} <table id="compress_html_profile_{{ site.time | date: "%Y%m%d" }}" class="compress_html_profile"> <thead> <tr> <td>Step <td>Bytes <tbody> <tr> <td>raw <td>{{ content | size }}{% if _profile_endings %} <tr> <td>endings <td>{{ _profile_endings }}{% endif %}{% if _profile_startings %} <tr> <td>startings <td>{{ _profile_startings }}{% endif %}{% if _profile_comments %} <tr> <td>comments <td>{{ _profile_comments }}{% endif %}{% if _profile_collapse %} <tr> <td>collapse <td>{{ _profile_collapse }}{% endif %}{% if _profile_clippings %} <tr> <td>clippings <td>{{ _profile_clippings }}{% endif %} </table>{% endif %}{% endif %}</html>

data/_sass/_mixins.scss

@@ -22,7 +22,7 @@
   --gray-text: #{$gray-text};
   --menu-text: #{$menu-text};
   --inv-body-color: #ccc;
-  --inv-body-bg: #282828;
+  --inv-body-bg: var(--dark-mode-body-bg);
 
   .content {
     -webkit-font-smoothing: initial;

data/_sass/html.scss

@@ -31,6 +31,4 @@ html {
   // --break-point-font-large: #{$break-point-font-large};
 
   --break-point-dynamic: #{$break-point-dynamic};
-
-  @include light-mode();
 }

data/_sass/pooleparty/__link__/_code.scss

@@ -109,6 +109,7 @@ div.highlight {
     display: block;
     color: var(--gray)!important;
     background-color: var(--gray-bg);
+    overflow: clip;
 
     > span {
       font-size: smaller;

data/_sass/pooleparty/_code.pre.scss

@@ -100,6 +100,7 @@ div.highlight {
     display: block;
     color: var(--gray)!important;
     background-color: var(--gray-bg);
+    overflow: clip;
 
     > span {
       font-size: smaller;

data/_sass/pro/_dark-mode-dynamic-syntax.scss

@@ -0,0 +1,9 @@
+// Copyright (c) 2019 Florian Klampfer <https://qwtel.com/>
+
+@import "pro/syntax-dark";
+
+@media screen and (prefers-color-scheme: dark) {
+  body {
+    @include darkmode-syntax();
+  }
+}

data/_sass/pro/_dark-mode-dynamic.scss

@@ -0,0 +1,20 @@
+// Copyright (c) 2019 Florian Klampfer <https://qwtel.com/>
+
+@import "pro/dark-mode";
+
+@media screen and (prefers-color-scheme: light) {
+  body {
+    @include light-mode();
+  }
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  body {
+    @include dark-mode();
+  }
+
+  .tippy-content {
+    -webkit-font-smoothing: initial;
+    -moz-osx-font-smoothing: initial;
+  }
+}

data/_sass/pro/_dark-mode.scss

@@ -0,0 +1,32 @@
+// Copyright (c) 2019 Florian Klampfer <https://qwtel.com/>
+
+#_dark-mode {
+  font-size: 1.25rem;
+}
+
+@mixin dark-mode() {
+  --body-color: #ccc;
+  --body-bg: var(--dark-mode-body-bg);
+  --border-color: var(--dark-mode-border-color);
+  --gray: rgba(255,255,255,.5);
+  --gray-bg: rgba(255,255,255,.033);
+  --gray-text: rgba(255,255,255,.625);
+  --menu-text: rgba(255,255,255,.25);
+  --inv-body-color: #{$body-color};
+  --inv-body-bg: #{$body-bg};
+
+  .content {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+@media screen {
+  body, body.light-mode {
+    @include light-mode();
+  }
+
+  body.dark-mode {
+    @include dark-mode();
+  }
+}