a new start

2025-10-25 12:39:30 +02:00
commit c97cadef78
726 changed files with 454051 additions and 0 deletions
--- a/_sass/_mixins.scss
+++ b/_sass/_mixins.scss
@@ -0,0 +1,78 @@
+// Copyright (c) 2021 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+@use "sass:math";
+
+@mixin light-mode() {
+  --body-color: #{$body-color};
+  --body-bg: #{$body-bg};
+  --border-color: #{$border-color};
+  --gray: #{$gray};
+  --gray-bg: #{$gray-bg};
+  --gray-text: #{$gray-text};
+  --menu-text: #{$menu-text};
+  --inv-body-color: #ccc;
+  --inv-body-bg: var(--dark-mode-body-bg);
+
+  .content {
+    -webkit-font-smoothing: initial;
+    -moz-osx-font-smoothing: initial;
+  }
+}
+
+@mixin aspect-ratio($width, $height) {
+  position: relative;
+
+  &::before {
+    display: block;
+    content: "";
+    width: 100%;
+    @if $gh-pages-compat {
+      padding-top:     (math.div($height, $width) * 100%);
+    } @else {
+      padding-top: calc(math.div($height, $width) * 100%);
+    }
+  }
+
+  > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+.clearfix {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.color-transition {
+  transition: none;
+}
+
+@mixin fallback-image() {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTYwIiBoZWlnaHQ9IjkwIiB2aWV3Qm94PSIwIDAgMTYwIDkwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0ibWF0cml4KDAuMDQ4ODI4LCAwLCAwLCAwLjA0Nzk5MSwgNTQuOTk5OTczLCAyMC40MjgxNDgpIj4KICAgIDxwYXRoIHN0eWxlPSJmaWxsOnJnYmEoMTI4LDEyOCwxMjgsLjMzKSIgZD0iTTk1OS44ODQgMTI4YzAuMDQwIDAuMDM0IDAuMDgyIDAuMDc2IDAuMTE2IDAuMTE2djc2Ny43N2MtMC4wMzQgMC4wNDAtMC4wNzYgMC4wODItMC4xMTYgMC4xMTZoLTg5NS43N2MtMC4wNDAtMC4wMzQtMC4wODItMC4wNzYtMC4xMTQtMC4xMTZ2LTc2Ny43NzJjMC4wMzQtMC4wNDAgMC4wNzYtMC4wODIgMC4xMTQtMC4xMTRoODk1Ljc3ek05NjAgNjRoLTg5NmMtMzUuMiAwLTY0IDI4LjgtNjQgNjR2NzY4YzAgMzUuMiAyOC44IDY0IDY0IDY0aDg5NmMzNS4yIDAgNjQtMjguOCA2NC02NHYtNzY4YzAtMzUuMi0yOC44LTY0LTY0LTY0djB6Ii8+CiAgICA8cGF0aCBzdHlsZT0iZmlsbDpyZ2JhKDEyOCwxMjgsMTI4LC4zMykiIGQ9Ik04MzIgMjg4YzAgNTMuMDIwLTQyLjk4IDk2LTk2IDk2cy05Ni00Mi45OC05Ni05NiA0Mi45OC05NiA5Ni05NiA5NiA0Mi45OCA5NiA5NnoiLz4KICAgIDxwYXRoIHN0eWxlPSJmaWxsOnJnYmEoMTI4LDEyOCwxMjgsLjMzKSIgZD0iTTg5NiA4MzJoLTc2OHYtMTI4bDIyNC0zODQgMjU2IDMyMGg2NGwyMjQtMTkyeiIvPgogIDwvZz4KPC9zdmc+');
+}
+
+@mixin border-radius() {
+  @media (min-width: $break-point-1) {
+    border-radius: $border-radius;
+  }
+}
--- a/_sass/_reboot-mod.scss
+++ b/_sass/_reboot-mod.scss
@@ -0,0 +1,286 @@
+// Reboot
+//
+// Normalization of HTML elements, manually forked from Normalize.css to remove
+// styles targeting irrelevant browsers while applying new styles.
+//
+// Normalize is licensed MIT. https://github.com/necolas/normalize.css
+
+
+// Document
+//
+// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
+// 2. Change the default font family in all browsers.
+// 3. Correct the line height in all browsers.
+// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
+// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
+//    we force a non-overlapping, non-auto-hiding scrollbar to counteract.
+// 6. Change the default tap highlight to be completely transparent in iOS.
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box; // 1
+}
+
+html {
+  -webkit-text-size-adjust: 100%; // 4
+  -ms-text-size-adjust: 100%; // 4
+  -ms-overflow-style: scrollbar; // 5
+  -webkit-tap-highlight-color: rgba(0,0,0,0); // 6
+}
+
+// IE10+ doesn't honor `<meta name="viewport">` in some cases.
+@at-root {
+  @-ms-viewport { width: device-width; }
+}
+
+// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
+article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
+  display: block;
+}
+
+// Suppress the focus outline on elements that cannot be accessed via keyboard.
+// This prevents an unwanted focus outline from appearing around elements that
+// might still respond to pointer events.
+//
+// Credit: https://github.com/suitcss/base
+[tabindex="-1"]:focus {
+  outline: none !important;
+}
+
+// Abbreviations
+//
+// 1. Remove the bottom border in Firefox 39-.
+// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+// 3. Add explicit cursor to indicate changed behavior.
+// 4. Duplicate behavior to the data-* attribute for our tooltip plugin
+
+abbr[title],
+abbr[data-original-title] { // 4
+  text-decoration: underline; // 2
+  text-decoration: underline dotted; // 2
+  cursor: help; // 3
+  border-bottom: 0; // 1
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+//
+// Images and content
+//
+
+img {
+  vertical-align: middle;
+  border-style: none; // Remove the border on images inside links in IE 10-.
+}
+
+svg:not(:root) {
+  overflow: hidden; // Hide the overflow in IE
+}
+
+
+// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
+//
+// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
+// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
+// However, they DO support removing the click delay via `touch-action: manipulation`.
+// See:
+// * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
+// * http://caniuse.com/#feat=css-touch-action
+// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
+
+a,
+area,
+button,
+[role="button"],
+input:not([type=range]),
+label,
+select,
+summary,
+textarea {
+  touch-action: manipulation;
+}
+
+//
+// Figures
+//
+
+figure {
+  // Apply a consistent margin strategy (matches our type styles).
+  margin: 0 0 1rem;
+}
+
+//
+// Forms
+//
+
+label {
+  // Allow labels to use `margin` for spacing.
+  display: inline-block;
+  margin-bottom: .25rem;
+}
+
+// Work around a Firefox/IE bug where the transparent `button` background
+// results in a loss of the default `button` focus styles.
+//
+// Credit: https://github.com/suitcss/base/
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0; // Remove the margin in Firefox and Safari
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+input {
+  overflow: visible; // Show the overflow in Edge
+}
+
+button,
+select {
+  text-transform: none; // Remove the inheritance of text transform in Firefox
+}
+
+// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+//    controls in Android 4.
+// 2. Correct the inability to style clickable types in iOS and Safari.
+button,
+html [type="button"], // 1
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; // 2
+}
+
+// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
+  padding: 0; // 2. Remove the padding in IE 10-
+}
+
+
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  // Remove the default appearance of temporal inputs to avoid a Mobile Safari
+  // bug where setting a custom line-height prevents text from being vertically
+  // centered within the input.
+  // See https://bugs.webkit.org/show_bug.cgi?id=139848
+  // and https://github.com/twbs/bootstrap/issues/11266
+  -webkit-appearance: listbox;
+}
+
+textarea {
+  overflow: auto; // Remove the default vertical scrollbar in IE.
+  // Textareas should really only resize vertically so they don't break their (horizontal) containers.
+  resize: vertical;
+}
+
+fieldset {
+  // Browsers set a default `min-width: min-content;` on fieldsets,
+  // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
+  // So we reset that to ensure fieldsets behave more like a standard block element.
+  // See https://github.com/twbs/bootstrap/issues/12359
+  // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
+  min-width: 0;
+  // Reset the default outline behavior of fieldsets so they don't affect page layout.
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+// 1. Correct the text wrapping in Edge and IE.
+// 2. Correct the color inheritance from `fieldset` elements in IE.
+legend {
+  display: block;
+  width: 100%;
+  max-width: 100%; // 1
+  padding: 0;
+  margin-bottom: .5rem;
+  font-size: 1.5rem;
+  line-height: inherit;
+  color: inherit; // 2
+  white-space: normal; // 1
+}
+
+progress {
+  vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+}
+
+// Correct the cursor style of increment and decrement buttons in Chrome.
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  // This overrides the extra rounded corners on search inputs in iOS so that our
+  // `.form-control` class can properly style them. Note that this cannot simply
+  // be added to `.form-control` as it's not specific enough. For details, see
+  // https://github.com/twbs/bootstrap/issues/11586.
+  outline-offset: -2px; // 2. Correct the outline style in Safari.
+  -webkit-appearance: none;
+}
+
+//
+// Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+//
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+//
+// 1. Correct the inability to style clickable types in iOS and Safari.
+// 2. Change font properties to `inherit` in Safari.
+//
+
+::-webkit-file-upload-button {
+  font: inherit; // 2
+  -webkit-appearance: button; // 1
+}
+
+//
+// Correct element displays
+//
+
+output {
+  display: inline-block;
+}
+
+summary {
+  display: list-item; // Add the correct display in all browsers
+}
+
+template {
+  display: none; // Add the correct display in IE
+}
+
+// Always hide an element with the `hidden` HTML attribute (from PureCSS).
+// Needed for proper display in IE 10-.
+[hidden] {
+  display: none !important;
+}
--- a/_sass/_spinner.scss
+++ b/_sass/_spinner.scss
@@ -0,0 +1,45 @@
+// Copyright (c) 2019 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+.loading > [class*="icon-"] {
+  display: inline-block;
+  -webkit-animation: rotate 2s infinite linear both;
+          animation: rotate 2s infinite linear both;
+  -webkit-transform-origin: 50% 50%;
+      -ms-transform-origin: 50% 50%;
+          transform-origin: 50% 50%;
+}
+
+@-webkit-keyframes rotate {
+  0% {
+    -webkit-transform: rotateZ(0);
+            transform: rotateZ(0);
+  }
+  100% {
+    -webkit-transform: rotateZ(360deg);
+            transform: rotateZ(360deg);
+  }
+}
+
+@keyframes rotate {
+  0% {
+    -webkit-transform: rotateZ(0);
+            transform: rotateZ(0);
+  }
+  100% {
+    -webkit-transform: rotateZ(360deg);
+            transform: rotateZ(360deg);
+  }
+}
--- a/_sass/_syntax.scss
+++ b/_sass/_syntax.scss
@@ -0,0 +1,143 @@
+@mixin lightmode-syntax() {
+  .highlight,
+  pre.highlight {
+    // background: #fafafa;
+    color: #383a42;
+  }
+  // .highlight pre {
+  //   background: #fafafa;
+  // }
+  .highlight .ge {
+    font-style: italic;
+  }
+  .highlight .gs {
+    font-weight: 700;
+  }
+  .highlight .ow {
+    font-weight: 700;
+  }
+  .highlight .n,
+  .highlight .nf,
+  .highlight .nn,
+  .highlight .o,
+  .highlight .p {
+    color: #383a42;
+  }
+  .highlight .c,
+  .highlight .c1,
+  .highlight .cm,
+  .highlight .cp,
+  .highlight .cs {
+    color: #a0a1a7;
+    font-style: italic;
+  }
+  .highlight .sr,
+  .highlight .ss {
+    color: #0184bc;
+  }
+  .highlight .k,
+  .highlight .kc,
+  .highlight .kd,
+  .highlight .kn,
+  .highlight .kp,
+  .highlight .kr,
+  .highlight .kt {
+    color: #a626a4;
+  }
+  .highlight .l,
+  .highlight .ld,
+  .highlight .s,
+  .highlight .s1,
+  .highlight .s2,
+  .highlight .sb,
+  .highlight .sc,
+  .highlight .sd,
+  .highlight .se,
+  .highlight .sh,
+  .highlight .si,
+  .highlight .sx {
+    color: #50a14f;
+  }
+  .highlight .nt,
+  .highlight .nx,
+  .highlight .vi {
+    color: #e45649;
+  }
+  .highlight .il,
+  .highlight .m,
+  .highlight .mf,
+  .highlight .mh,
+  .highlight .mi,
+  .highlight .mo,
+  .highlight .na {
+    color: #986801;
+  }
+  .highlight .bp,
+  .highlight .nb,
+  .highlight .nc,
+  .highlight .nd,
+  .highlight .ne,
+  .highlight .ni,
+  .highlight .nl,
+  .highlight .no,
+  .highlight .nv,
+  .highlight .py,
+  .highlight .vc,
+  .highlight .vg {
+    color: #c18401;
+  }
+  // .highlight .err {
+  //   color: #fff;
+  //   background-color: #ff1414;
+  // }
+  .highlight .gd {
+    color: #ff1414;
+  }
+  .highlight .gi {
+    color: #2db448;
+  }
+  .highlight .w {
+    color: #f8f8f2;
+  }
+  .highlight .cpf {
+    color: navy;
+  }
+  .highlight .gu {
+    color: #75715e;
+  }
+  .highlight .lineno {
+    color: #9d9d9f;
+    user-select: none;
+  }
+  .highlight .ln {
+    color: #9d9d9f;
+    user-select: none;
+  }
+  .highlight .ln:after {
+    content: " ";
+  }
+  .highlight .hll {
+    color: #383a42;
+    background-color: #e5e5e6;
+  }
+  .highlight .hl {
+    color: #383a42;
+    background-color: #e5e5e6;
+  }
+  .highlight .language-json .w + .s2 {
+    color: #e45649;
+  }
+  .highlight .language-json .kc {
+    color: #0184bc;
+  }
+}
+
+body {
+  @include lightmode-syntax();
+}
+
+@media screen {
+  body.light-mode {
+    @include lightmode-syntax();
+  }
+}
--- a/_sass/_tippy.scss
+++ b/_sass/_tippy.scss
@@ -0,0 +1,43 @@
+
+@use "tippyjs/index" with ($namespace-prefix: "tippy");
+
+[data-tippy-root] {
+  --body-color: var(--inv-body-color);
+  --body-bg: var(--inv-body-bg);
+}
+
+.tippy-box {
+  color: var(--body-color)!important;
+  background-color: var(--body-bg)!important;
+} 
+
+.tippy-content {
+  font-family: $font-family!important;
+  font-weight: normal!important;
+  a { 
+    @extend .heading; 
+    text-decoration: none;
+    border: none;
+    &:after  {
+      color: var(--body-color)!important;
+    }
+  }
+}
+
+.tippy-arrow {
+  color: var(--body-bg)!important;
+}
+
+.dark-mode {
+  .tippy-content {
+    -webkit-font-smoothing: initial;
+    -moz-osx-font-smoothing: initial;
+  }
+}
+
+.light-mode {
+  .tippy-content {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
--- a/_sass/_variables.scss
+++ b/_sass/_variables.scss
@@ -0,0 +1,22 @@
+// Copyright (c) 2019 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+$gray: #777;
+$gray-bg: rgba(0,0,0,.025);
+$gray-text: #666;
+$menu-text: #bbb;
+$body-color: #333;
+$body-bg: #fff;
+$border-color: #ebebeb;
--- a/_sass/html.scss
+++ b/_sass/html.scss
@@ -0,0 +1,34 @@
+html {
+  --font-family: #{$font-family};
+  --font-family-heading: #{$font-family-heading};
+  --code-font-family: #{$code-font-family};
+
+  --root-font-size: #{$root-font-size};
+  --root-font-size-medium: #{$root-font-size-medium};
+  --root-font-size-large: #{$root-font-size-large};
+  --root-font-size-print: #{$root-font-size-print};
+  --root-line-height: #{$root-line-height};
+
+  --font-weight: #{$font-weight};
+  --font-weight-bold: #{$font-weight-bold};
+  --font-weight-heading: #{$font-weight-heading};
+
+  // --content-width: #{$content-width};
+  // --content-width-2: #{$content-width-2};
+  --content-width-5: #{$content-width-5};
+
+  // --content-margin-3: #{$content-margin-3};
+  --content-margin-5: #{$content-margin-5};
+
+  --sidebar-width: #{$sidebar-width};
+  --half-content: #{$half-content};
+
+  // --break-point-1: #{$break-point-1};
+  // --break-point-2: #{$break-point-2};
+  --break-point-3: #{$break-point-3};
+  // --break-point-4: #{$break-point-4};
+  --break-point-5: #{$break-point-5};
+  // --break-point-font-large: #{$break-point-font-large};
+
+  --break-point-dynamic: #{$break-point-dynamic};
+}
--- a/_sass/my-inline.scss
+++ b/_sass/my-inline.scss
@@ -0,0 +1,2 @@
+// Uncomment to disable dingbat icons below posts
+// hr.dingbat { display: none }
--- a/_sass/my-style.scss
+++ b/_sass/my-style.scss
@@ -0,0 +1,13 @@
+.layout-post {
+  .img-wrapper {
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+  }
+}
+
+.avatar {
+  width: 150px;
+  height: auto;
+}
--- a/_sass/my-variables.scss
+++ b/_sass/my-variables.scss
@@ -0,0 +1 @@
+// This is deprecated. Modify CSS Custom Properties instead.
--- a/_sass/pivoine/inline/_avatar.scss
+++ b/_sass/pivoine/inline/_avatar.scss
@@ -0,0 +1,51 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_avatar.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+.avatar {
+  
+  width: 7rem;
+  height: 7rem;
+  overflow: hidden;
+  display: inline-block;
+  
+
+  
+
+  
+  img { width: 100%; }
+  
+}
+
+
+.content .avatar {
+  @extend .color-transition;
+  float: right;
+  box-sizing: content-box;
+  border: 1rem solid var(--body-bg);
+  transition: border-color 1s ease;
+  margin-top: -1.5rem;
+  margin-right: -1rem;
+  border-radius: 100%;
+}
+
--- a/_sass/pivoine/inline/_base.scss
+++ b/_sass/pivoine/inline/_base.scss
@@ -0,0 +1,78 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_base.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2021 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+
+body::before {
+  @media screen {
+    content: '';
+    width: .5rem;
+    background: var(--gray-bg);
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+  }
+
+  @media (min-width: $break-point-3) {
+    width: $sidebar-width;
+  }
+
+  @media (min-width: $break-point-dynamic) {
+    width: calc(50% - #{$half-content});
+  }
+}
+
+html {
+  @media screen and (min-width: $break-point-1) {
+    font-size: var(--root-font-size-medium);
+  }
+
+  @media screen and (min-width: $break-point-font-large) {
+    font-size: var(--root-font-size-large);
+  }
+}
+
+#breadcrumbs {
+  > ul {
+    @extend .ellipsis;
+    height: 1rem;
+    margin: -1.5rem 0 .5rem;
+    padding: 0;
+    font-size: .667rem;
+    color: var(--menu-text);
+    text-transform: uppercase;
+    width: 100%;
+    list-style: none;
+    > li { 
+      display: inline; 
+      a {
+        color: var(--gray);
+        text-decoration: none;
+        border-bottom: none;
+      }
+    }
+  }
+}
+
--- a/_sass/pivoine/inline/_break-layout.scss
+++ b/_sass/pivoine/inline/_break-layout.scss
@@ -0,0 +1,25 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_break-layout.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
--- a/_sass/pivoine/inline/_content.scss
+++ b/_sass/pivoine/inline/_content.scss
@@ -0,0 +1,69 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_content.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+.content {
+  
+  margin-left: auto;
+  margin-right: auto;
+  padding: 8rem $content-padding 12rem;
+
+  @media screen {
+    padding-left: $content-padding + .5rem;
+    min-height: 100vh;
+  }
+
+  @media screen and (min-width: $break-point-1) {
+    max-width: $content-width;
+  }
+
+  @media screen and (min-width: $break-point-2) {
+    max-width: $content-width-2;
+  }
+
+  @media screen and (min-width: $break-point-3) {
+    padding-left: $content-padding;
+    margin-left: $sidebar-width + $content-margin-3;
+    margin-right: $content-margin-3;
+  }
+
+  @media screen and (min-width: $break-point-5) {
+    padding-top: 9rem;
+    margin-left: $sidebar-width + $content-margin-5;
+    margin-right: $content-margin-5;
+    max-width: $content-width-5;
+  }
+
+  @media screen and (min-width: $break-point-dynamic) {
+    margin: auto;
+  }
+  
+  
+}
+
+.large-only {
+  display: none;
+  @media screen and (min-width: $break-point-dynamic) {
+    display: block;
+  }
+}
--- a/_sass/pivoine/inline/_footer.scss
+++ b/_sass/pivoine/inline/_footer.scss
@@ -0,0 +1,25 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_footer.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
--- a/_sass/pivoine/inline/_images.scss
+++ b/_sass/pivoine/inline/_images.scss
@@ -0,0 +1,37 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_images.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+.content .aspect-ratio {
+  overflow: hidden; 
+  img {
+    margin: 0; 
+    width: 100%; 
+    height: 100%; 
+//     object-fit: cover; 
+//     object-position: center; 
+    background-color: var(--gray-bg); 
+  }
+}
+
+
--- a/_sass/pivoine/inline/_katex.scss
+++ b/_sass/pivoine/inline/_katex.scss
@@ -0,0 +1,25 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_katex.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
--- a/_sass/pivoine/inline/_links.scss
+++ b/_sass/pivoine/inline/_links.scss
@@ -0,0 +1,60 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_links.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+hy-push-state a {
+  color: var(--body-color); 
+  
+  @supports not ((text-decoration-thickness: initial) and (text-underline-offset: initial)) {
+    text-decoration: none; 
+    border-bottom: 2px solid;
+  }
+
+  @supports ((text-decoration-thickness: initial) and (text-underline-offset: initial)) {
+    text-decoration-style: solid;
+    text-underline-offset: .35rem;
+    text-decoration-thickness: 2px;
+  }
+  
+
+  
+
+  
+  &.no-hover {
+    border-bottom: none;
+    text-decoration-thickness: unset;
+    text-underline-offset: unset;
+  }
+  
+}
+
+.content a:not(.btn):not(.no-hover) {
+  
+  @supports ((text-decoration-thickness: initial) and (text-underline-offset: initial)) {
+    text-decoration-color: var(--accent-color-faded);
+  }
+  & { border-color: var(--accent-color-faded); }
+  
+  
+}
+
--- a/_sass/pivoine/inline/_mark-external.scss
+++ b/_sass/pivoine/inline/_mark-external.scss
@@ -0,0 +1,25 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_mark-external.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
--- a/_sass/pivoine/inline/_menu.scss
+++ b/_sass/pivoine/inline/_menu.scss
@@ -0,0 +1,96 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_menu.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+$navbar-height: 5rem;
+
+
+.fixed-common {
+  position: fixed;
+  left: 0;
+  width: 100%;
+  z-index: 2;
+}
+
+.fixed-top {
+  @extend .fixed-common;
+  top: 0;
+}
+
+.fixed-bottom {
+  @extend .fixed-common;
+  bottom: 0;
+}
+
+
+.navbar {
+  @extend .color-transition; 
+  > .content {
+    
+    position: relative;
+    padding-top: 0;
+    padding-bottom: 0;
+    min-height: 0;
+    max-height: $navbar-height;
+    
+
+    
+  }
+
+  
+}
+
+
+.nav-btn-bar {
+  @extend .color-transition;
+  margin: 0 -1rem;
+  background-color: white; // IE11
+  background-color: var(--body-bg);
+  height: $navbar-height;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  > :first-child, > :last-child {
+    border: none;
+  }
+}
+
+.nav-btn {
+  @extend .color-transition;
+  background: none;
+  border: none;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.25rem;
+  height: $navbar-height;
+  color: var(--menu-text);
+  border-right: 1px solid var(--border-color);
+  border-left: 1px solid var(--border-color);
+  margin-left: -1px;
+}
+
+
+
--- a/_sass/pivoine/inline/_search.scss
+++ b/_sass/pivoine/inline/_search.scss
@@ -0,0 +1,36 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_search.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+hm-search {
+  display: flex; 
+  flex-grow: 1; 
+  padding: 1em; 
+  position: relative; 
+  overflow: hidden; 
+  @media screen {
+    
+  }
+}
+
+
--- a/_sass/pivoine/inline/_sidebar.scss
+++ b/_sass/pivoine/inline/_sidebar.scss
@@ -0,0 +1,184 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_sidebar.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+hy-drawer {
+  width: 100%; 
+  position: relative; 
+  overflow: hidden; 
+  display: block; 
+  z-index: 4; 
+  @media screen {
+    
+  }
+
+  @media screen and (min-width: $break-point-3) {
+    
+    position: fixed;
+    width: $sidebar-width;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    margin-left: 0;
+
+    &.cover {
+      position: relative;
+      width: 100%;
+    }
+    
+
+    
+  }
+
+  @media screen and (min-width: $break-point-dynamic) {
+    width: calc(50% - #{$half-content});
+
+    
+  }
+
+  
+}
+
+.sidebar {
+  
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: rgba(255, 255, 255, .75);
+  text-align: center;
+  min-height: 100vh;
+  &.invert { color: rgba(32, 32, 32, .75) }
+  
+
+  a {
+    
+    color: #fff; 
+    border-bottom-color: rgba(255, 255, 255, 0.2); 
+    text-decoration-color: rgba(255, 255, 255, 0.2); 
+    
+    
+  }
+
+  &.invert a {
+    
+    color: #222;
+    border-bottom-color: rgba(32, 32, 32, 0.2); 
+    text-decoration-color: rgba(32, 32, 32, 0.2); 
+    
+    
+  }
+}
+
+
+
+.sidebar-bg {
+  
+  position: absolute;
+  top: 0;
+  left: calc(50% - 50vw);
+  width: 100vw;
+  height: 100%;
+  background: #202020 center / cover;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.05);
+  }
+  
+
+  &.sidebar-overlay::after {
+//     background: -moz-linear-gradient(top, rgba(32,32,32,0) 0%, rgba(32,32,32,0.5) 50%, rgba(32,32,32,0) 100%); 
+//     background: -webkit-linear-gradient(top, rgba(32,32,32,0) 0%,rgba(32,32,32,0.5) 50%, rgba(32,32,32,0) 100%); 
+    background: linear-gradient(to bottom, rgba(32,32,32,0) 0%,rgba(32,32,32,0.5) 50%, rgba(32,32,32,0) 100%); 
+  }
+}
+
+
+.sidebar-sticky {
+  position: relative;
+  z-index: 3;
+  max-width: $sidebar-width;
+  padding: 1.5rem;
+  contain: content;
+}
+
+.sidebar-about {
+  .avatar {
+    margin-bottom: 1.5rem
+  }
+
+  > a.sidebar-title {
+    text-decoration: none;
+    > h2 {
+      margin: 0;
+      padding-bottom: .5rem;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      border-bottom: 2px solid;
+      margin: 0 auto .5rem;
+      width: 4rem;
+      border-color: rgba(255, 255, 255, 0.2);
+      transition: border-color 250ms;
+    }
+
+    &:hover::after {
+      border-color: rgba(255, 255, 255, 1);
+      transition: border-color 50ms;
+    }
+  }
+}
+
+.sidebar.invert .sidebar-about > a.sidebar-title{
+  &::after { border-color: rgba(32, 32, 32, 0.2) }
+  &:hover::after { border-color: #222 }
+}
+
+.sidebar-nav > ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+.sidebar-nav-item {
+  @extend .f4;
+  display: inline-block;
+  margin-bottom: .5rem;
+}
+
+#_main.no-drawer {
+  @media (min-width: $break-point-3) {
+    #_menu { display: none }
+    .nav-btn-bar > :nth-child(2) { border: none }
+  }
+}
+
+
+
--- a/_sass/pivoine/inline/_social.scss
+++ b/_sass/pivoine/inline/_social.scss
@@ -0,0 +1,61 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_social.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+.sidebar-social {
+  &::after {
+    @extend .clearfix
+  }
+
+  > ul {
+    display: inline-block;
+    list-style: none;
+    padding-left: 0;
+    margin-bottom: 0;
+
+    > li {
+      float: left;
+
+      > a {
+        display: inline-block;
+        text-align: center;
+        font-size: 1.4rem;
+        width: 3rem;
+        height: 4rem;
+        padding: .5rem 0;
+        line-height: 4rem - 2 * .5rem;
+        text-decoration: none;
+        border-bottom-width: 2px;
+        border-bottom-style: solid;
+      }
+    }
+
+    li + li {
+      margin-top: 0;
+    }
+  }
+}
+
+
+
--- a/_sass/pivoine/inline/_sound.scss
+++ b/_sass/pivoine/inline/_sound.scss
@@ -0,0 +1,25 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_sound.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
--- a/_sass/pivoine/inline/_toc.scss
+++ b/_sass/pivoine/inline/_toc.scss
@@ -0,0 +1,55 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_toc.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2020 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+#markdown-toc {
+  
+  @extend .note-sm;
+  margin: 2rem -1rem 2rem calc(-1rem + 1px);
+  padding-left: 2.5rem;
+  padding-bottom: .5rem;
+  
+//   transition: opacity 300ms ease, transform 300ms ease, border-color 1s ease; 
+  &:before { left: 1rem; }
+}
+
+body:not(.no-toc) #markdown-toc {
+  @media screen and (min-width: $break-point-dynamic) {
+    
+    position: absolute;
+    z-index: 4;
+    width: 20.5rem;
+    right: 0;
+    margin: auto;
+    overflow: auto;
+    
+    
+  }
+}
+
+
+body.no-break-layout:not(.no-toc) #markdown-toc {
+  @media screen and (min-width: $break-point-dynamic) {
+    width: calc(50% - #{$half-content});
+  }
+}
--- a/_sass/pivoine/inline/_utilities.scss
+++ b/_sass/pivoine/inline/_utilities.scss
@@ -0,0 +1,78 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_utilities.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+.fl { float: left; }
+.fr { float: right; }
+.mb4 { margin-bottom: 4rem }
+.mb6 { margin-bottom: 6rem }
+.mt0 { margin-top: 0 }
+.mt1 { margin-top: 1rem }
+.mt2 { margin-top: 2rem }
+.mt3 { margin-top: 3rem }
+.mt4 { margin-top: 4rem }
+.pb0 { padding-bottom: 0 }
+.ml1 { margin-left: 1rem }
+.mr1 { margin-right: 1rem }
+
+.sixteen-nine { @include aspect-ratio(16, 9); }
+.sixteen-ten { @include aspect-ratio(16, 10); }
+.four-three { @include aspect-ratio(4, 3); }
+.one-one { @include aspect-ratio(1, 1); }
+
+.sr-only {
+  display: none; 
+  
+}
+
+.larger { font-size: larger; }
+.smaller { font-size: smaller; }
+
+.clearfix {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.border {
+  border: 1px solid var(--border-color); 
+//   transition: border-color 1s ease; 
+}
+
+.border-radius {
+  @include border-radius();
+}
+
+.fallback-img {
+  @include fallback-image();
+}
+
+.hidden {
+  display: none;
+}
--- a/_sass/pivoine/link/_avatar.scss
+++ b/_sass/pivoine/link/_avatar.scss
@@ -0,0 +1,36 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_avatar.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+.avatar {
+  
+
+  
+  position: relative;
+  z-index: 1;
+  
+
+  
+}
+
+
--- a/_sass/pivoine/link/_base.scss
+++ b/_sass/pivoine/link/_base.scss
@@ -0,0 +1,48 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_base.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2021 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+body {
+  /* Prevent side-scrolling on mobile */
+  display: block;
+  position: relative;
+  overflow-x: hidden;
+}
+
+hy-push-state, hy-drawer {
+  display: block;
+  overflow: hidden;
+}
+
+
+
+@media print { 
+  html { 
+    font-size: var(--root-font-size-print);
+  } 
+}
+
+@page { 
+  margin: 16mm;
+} 
--- a/_sass/pivoine/link/_break-layout.scss
+++ b/_sass/pivoine/link/_break-layout.scss
@@ -0,0 +1,100 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_break-layout.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+pre, table:not(.highlight), .katex-display, .break-layout, mjx-container[jax="CHTML"][display="true"] {
+  $pad: $content-padding * 2;
+
+  @media screen {
+    position: relative;
+    width: calc(100% + #{$pad});
+    border-top-right-radius: 0!important;
+    border-bottom-right-radius: 0!important;
+  }
+
+  @media screen and (min-width: $content-width) {
+    $x: null;
+    @if $gh-pages-compat {
+      $x:      ($content-width / 2) - $pad;
+    } @else {
+      $x: calc(($content-width / 2) - $pad);
+    }
+    width: calc(100% + 50vw - #{$x});
+  }
+
+  @media screen and (min-width: $break-point-2) {
+    $x: null;
+    @if $gh-pages-compat {
+      $x:      ($content-width-2 / 2) - $pad;
+    } @else {
+      $x: calc(($content-width-2 / 2) - $pad);
+    }
+    width: calc(100% + 50vw - #{$x});
+  }
+
+  @media screen and (min-width: $break-point-3) {
+    $x: $sidebar-width + $content-margin-3;
+    width: calc(100vw - #{$x});
+  }
+
+  @media screen and (min-width: $break-point-5) {
+    $x: $content-width-5 + $sidebar-width + $content-margin-5 - $pad;
+    width: calc(100% + 100vw - #{$x});
+  }
+
+  @media screen and (min-width: $break-point-dynamic) {
+    $x: null;
+    @if $gh-pages-compat {
+      $x:     (($content-width-5 / 2) - ($content-padding * 2) + 21rem);
+    } @else {
+      $x: calc(($content-width-5 / 2) - ($content-padding * 2) + 21rem);
+    }
+    width: calc(100% + 50vw - #{$x} + 2px);
+  }
+}
+
+body:not(.no-break-layout) {
+  .katex-display > .katex, mjx-container[jax][display="true"] { 
+    text-align: left!important;
+  }
+}
+
+body.no-break-layout {
+  width: calc(100% + #{$content-margin-5 + 2rem});
+}
+
+body.no-toc:not(.no-break-layout) {
+  pre, table:not(.highlight), .katex-display, .break-layout, mjx-container[jax="CHTML"][display="true"] {
+    @media screen and (min-width: $break-point-dynamic) {
+      $x: null;
+      @if $gh-pages-compat {
+        $x:     (($content-width-5 / 2) - ($content-padding * 2));
+      } @else {
+        $x: calc(($content-width-5 / 2) - ($content-padding * 2));
+      }
+      width: calc(100% + 50vw - #{$x});
+    }
+  }
+}
+
--- a/_sass/pivoine/link/_content.scss
+++ b/_sass/pivoine/link/_content.scss
@@ -0,0 +1,39 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_content.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+.content {
+  
+  
+  @media print {
+    padding: 1rem;
+  }
+  
+}
+
+.large-only {
+  display: none;
+  @media screen and (min-width: $break-point-dynamic) {
+    display: block;
+  }
+}
--- a/_sass/pivoine/link/_footer.scss
+++ b/_sass/pivoine/link/_footer.scss
@@ -0,0 +1,45 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_footer.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+main > footer.content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  color: var(--gray);
+  text-align: center;
+  min-height: 0;
+  padding-top: 0;
+  padding-bottom: 2rem;
+
+  > p {
+    margin-bottom: 0;
+  }
+
+  @media print {
+    display: none;
+  }
+}
+
--- a/_sass/pivoine/link/_images.scss
+++ b/_sass/pivoine/link/_images.scss
@@ -0,0 +1,72 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_images.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+.content .aspect-ratio {
+//   overflow: hidden; 
+  img {
+//     margin: 0; 
+//     width: 100%; 
+//     height: 100%; 
+    object-fit: cover; 
+    object-position: center; 
+//     background-color: var(--gray-bg); 
+  }
+}
+
+
+figure, .figure {
+  @extend .faded, .fine, .centered;
+  margin-bottom: 2rem;
+
+  > *:first-child {
+    margin-bottom: 1rem;
+  }
+}
+
+.highlighter-rouge + .figure {
+  margin-top: -1.5rem;
+}
+
+.figcaption {
+  @extend .faded, .fine, .centered;
+  margin-top: -0.5rem;
+  margin-bottom: 2rem;
+}
+
+.gallery-wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+  grid-gap: 1rem;
+}
+
+.gallery-item {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+  @media screen and (min-width: $break-point-1) {
+    border-radius: 3%;
+  }
+}
+
--- a/_sass/pivoine/link/_katex.scss
+++ b/_sass/pivoine/link/_katex.scss
@@ -0,0 +1,32 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_katex.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+article {
+  .katex-display, mjx-container[jax][display="true"] {
+    @extend .pre-base;
+    padding: 2rem;
+  }
+}
+
--- a/_sass/pivoine/link/_links.scss
+++ b/_sass/pivoine/link/_links.scss
@@ -0,0 +1,64 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_links.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+hy-push-state a {
+//   color: var(--body-color); 
+  
+
+  
+  & { 
+    transition: color 250ms, text-decoration-color 250ms, border-color 250ms; 
+  }
+  &:hover {
+    transition: color 50ms, text-decoration-color 50ms, border-color 50ms;
+  }
+  
+
+  
+}
+
+.content a:not(.btn):not(.no-hover) {
+  
+  
+  &:hover {
+    @supports ((text-decoration-thickness: initial) and (text-underline-offset: initial)) {
+      text-decoration-color: var(--accent-color);
+    }
+    & { border-color: var(--accent-color); }
+  }
+  
+}
+
+
+a.btn {
+  text-decoration: none;
+}
+
+@media print {
+  a:not(.no-print-link)::after {
+    content: " (" attr(href) ") ";
+    color: var(--gray);
+    font-size: 62%;
+  }
+}
--- a/_sass/pivoine/link/_mark-external.scss
+++ b/_sass/pivoine/link/_mark-external.scss
@@ -0,0 +1,46 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_mark-external.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+@media screen {
+  a.external,
+  a[href*="://"]:not(.no-mark-external):not(.no-mark),
+  a.no-push-state:not(.no-mark-external):not(.no-mark) {
+    &::after {
+      content: "\2009\ea7e";
+      font-family: 'icomoon'!important;
+      speak: none;
+      font-style: normal;
+      font-weight: normal;
+      font-variant: normal;
+      text-transform: none;
+      line-height: 1;
+      font-size: smaller;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      color: var(--menu-text);
+    }
+  }
+}
+
--- a/_sass/pivoine/link/_menu.scss
+++ b/_sass/pivoine/link/_menu.scss
@@ -0,0 +1,97 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_menu.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+$navbar-height: 5rem;
+
+
+
+.navbar {
+//   @extend .color-transition; 
+  > .content {
+    
+
+    
+    $shadow-padding: 3rem;
+    &::before {
+      content: "";
+      position: absolute;
+      display: block;
+      width: calc(100% - #{$shadow-padding * 2});
+      height: $navbar-height;
+      left: $shadow-padding;
+      margin: auto;
+      box-shadow: 0 0 2rem rgba(0,0,0,0.25);
+      z-index: -1;
+    }
+    
+  }
+
+  
+  &.fixed-top {
+    > .content {
+      &::before {
+        bottom: 1px;
+      }
+    }
+  }
+
+  &.fixed-bottom {
+    > .content {
+      &::before {
+        top: 1px;
+      }
+    }
+  }
+  
+}
+
+
+
+
+a.nav-btn, button.nav-btn {
+  cursor: pointer;
+  &:hover, &:focus {
+    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
+  }
+}
+
+.nav-span {
+  flex: 1;
+}
+
+.animation-main {
+  opacity: 0;
+  pointer-events: none;
+}
+
+#_navbar {
+  z-index: 3;
+  background-color: var(--body-bg);
+}
+
+.navbar {
+  .loading { display: none; }
+  @media print { display: none; }
+}
+
--- a/_sass/pivoine/link/_search.scss
+++ b/_sass/pivoine/link/_search.scss
@@ -0,0 +1,82 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_search.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+hm-search {
+//   display: flex; 
+//   flex-grow: 1; 
+//   padding: 1em; 
+//   position: relative; 
+//   overflow: hidden; 
+  @media screen {
+    
+    --hm-search-input-color: var(--menu-text);
+    --hm-search-input-color-bg: none;
+    --hm-search-input-color-border: none;
+    --hm-search-input-color-caret: var(--accent-color);
+    --hm-search-font-size: larger;
+    
+  }
+}
+
+
+.search-results {
+  > article {
+    animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+
+    &:hover img {
+      filter: grayscale(0);
+    }
+
+
+    img {
+      filter: grayscale(1.0);
+      transition: filter 250ms ease-in-out;
+    }
+  }
+  
+
+  /* ----------------------------------------------
+  * Generated by Animista on 2025-4-30 22:39:13
+  * Licensed under FreeBSD License.
+  * See http://animista.net/license for more info. 
+  * w: http://animista.net, t: @cssanimista
+  * ---------------------------------------------- */
+
+  /**
+  * ----------------------------------------
+  * animation scale-in-center
+  * ----------------------------------------
+  */
+  @keyframes scale-in-center {
+    0% {
+      transform: scale(0);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+}
+
--- a/_sass/pivoine/link/_sidebar.scss
+++ b/_sass/pivoine/link/_sidebar.scss
@@ -0,0 +1,127 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_sidebar.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+hy-drawer {
+//   width: 100%; 
+//   position: relative; 
+//   overflow: hidden; 
+//   display: block; 
+//   z-index: 4; 
+  @media screen {
+    
+    --hy-drawer-width: 100%;
+    --hy-drawer-peek-width: .5rem;
+    --hy-drawer-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
+    
+  }
+
+  @media screen and (min-width: $break-point-3) {
+    
+
+    
+    & { --hy-drawer-peek-width: #{$sidebar-width}; }
+    
+  }
+
+  @media screen and (min-width: $break-point-dynamic) {
+    width: calc(50% - #{$half-content});
+
+    
+    --hy-drawer-peek-width: calc(50% - #{$half-content});
+    
+  }
+
+  
+  @media screen {
+    &.loaded {
+      position: static;
+    }
+  }
+  
+}
+
+.sidebar {
+  
+
+  a {
+    
+    
+    &:hover { 
+      border-bottom-color: #fff;
+      text-decoration-color: #fff;
+    }
+    
+  }
+
+  &.invert a {
+    
+    
+    &:hover { 
+      border-bottom-color: #222;
+      text-decoration-color: #222;
+    }
+    
+  }
+}
+
+
+hy-drawer.loaded .sidebar {
+  min-height: 100%;
+}
+
+
+.sidebar-bg {
+  
+
+  &.sidebar-overlay::after {
+    background: -moz-linear-gradient(top, rgba(32,32,32,0) 0%, rgba(32,32,32,0.5) 50%, rgba(32,32,32,0) 100%); 
+    background: -webkit-linear-gradient(top, rgba(32,32,32,0) 0%,rgba(32,32,32,0.5) 50%, rgba(32,32,32,0) 100%); 
+//     background: linear-gradient(to bottom, rgba(32,32,32,0) 0%,rgba(32,32,32,0.5) 50%, rgba(32,32,32,0) 100%); 
+  }
+}
+
+
+
+
+@media print {
+  .sidebar {
+    display: none;
+  }
+}
+
+#_swipe {
+  position: absolute;
+  z-index: 4;
+  opacity: 0.33;
+  top: 5vw;
+  right: 5vw;
+  transform: scale(0.67);
+
+  @media screen and (min-width: $break-point-1) {
+    top: calc(50% - 48px);
+    right: 10vw;
+    transform: scale(1);
+  }
+}
+
--- a/_sass/pivoine/link/_social.scss
+++ b/_sass/pivoine/link/_social.scss
@@ -0,0 +1,33 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_social.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+
+
+.sidebar-social {
+  @media print {
+    display: none;
+  }
+}
+
--- a/_sass/pivoine/link/_sound.scss
+++ b/_sass/pivoine/link/_sound.scss
@@ -0,0 +1,54 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_sound.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+.sound-player {
+
+  > a {
+    text-transform: uppercase;
+    display: inline-block;
+    margin-bottom: 1rem;
+    cursor: pointer;
+  }
+
+  > canvas {
+    display: block;
+    margin: 0 auto;
+    height: 40px;
+
+    &.hidden {
+      display: none;
+    }
+  }
+}
+
+.sound-wrapper {
+  display: flex;
+  flex-direction: column;
+
+  > a {
+    text-transform: uppercase;
+  }
+}
+
--- a/_sass/pivoine/link/_toc.scss
+++ b/_sass/pivoine/link/_toc.scss
@@ -0,0 +1,55 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_toc.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2020 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+#markdown-toc {
+  
+  transition: opacity 300ms ease, transform 300ms ease, border-color 1s ease; 
+  &:before { left: 1rem; }
+}
+
+body:not(.no-toc) #markdown-toc {
+  @media screen and (min-width: $break-point-dynamic) {
+    
+    
+    overscroll-behavior: contain;
+
+    &.toc-hide {
+      opacity: 0;
+      transform: translateX(-2rem);
+    }
+
+    &.toc-show {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    &.affix {
+      position: fixed;
+      top: 1rem;
+      max-height: calc(100vh - 1rem);
+    }
+    
+  }
+}
+
--- a/_sass/pivoine/link/_utilities.scss
+++ b/_sass/pivoine/link/_utilities.scss
@@ -0,0 +1,87 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pivoine/_utilities.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+.fl { float: left; }
+.fr { float: right; }
+.mb4 { margin-bottom: 4rem }
+.mb6 { margin-bottom: 6rem }
+.mt0 { margin-top: 0 }
+.mt1 { margin-top: 1rem }
+.mt2 { margin-top: 2rem }
+.mt3 { margin-top: 3rem }
+.mt4 { margin-top: 4rem }
+.pb0 { padding-bottom: 0 }
+.ml1 { margin-left: 1rem }
+.mr1 { margin-right: 1rem }
+
+.sixteen-nine { @include aspect-ratio(16, 9); }
+.sixteen-ten { @include aspect-ratio(16, 10); }
+.four-three { @include aspect-ratio(4, 3); }
+.one-one { @include aspect-ratio(1, 1); }
+
+.sr-only {
+//   display: none; 
+  display: unset;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+  
+}
+
+.larger { font-size: larger; }
+.smaller { font-size: smaller; }
+
+.clearfix {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.border {
+//   border: 1px solid var(--border-color); 
+  transition: border-color 1s ease; 
+}
+
+.border-radius {
+  @include border-radius();
+}
+
+.fallback-img {
+  @include fallback-image();
+}
+
+.hidden {
+  display: none;
+}
--- a/_sass/pivoine/_avatar.pre.scss
+++ b/_sass/pivoine/_avatar.pre.scss
@@ -0,0 +1,45 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+.avatar {
+  // <<< inline
+  width: 7rem;
+  height: 7rem;
+  overflow: hidden;
+  display: inline-block;
+  // >>>
+
+  // <<< link
+  position: relative;
+  z-index: 1;
+  // >>>
+
+  // <<< inline
+  img { width: 100%; }
+  // >>>
+}
+
+// <<< inline
+.content .avatar {
+  @extend .color-transition;
+  float: right;
+  box-sizing: content-box;
+  border: 1rem solid var(--body-bg);
+  transition: border-color 1s ease;
+  margin-top: -1.5rem;
+  margin-right: -1rem;
+  border-radius: 100%;
+}
+// >>>
--- a/_sass/pivoine/_base.pre.scss
+++ b/_sass/pivoine/_base.pre.scss
@@ -0,0 +1,92 @@
+// Copyright (c) 2021 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// <<< LINK
+body {
+  /* Prevent side-scrolling on mobile */
+  display: block;
+  position: relative;
+  overflow-x: hidden;
+}
+
+hy-push-state, hy-drawer {
+  display: block;
+  overflow: hidden;
+}
+// >>>
+// <<< INLINE
+body::before {
+  @media screen {
+    content: '';
+    width: .5rem;
+    background: var(--gray-bg);
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+  }
+
+  @media (min-width: $break-point-3) {
+    width: $sidebar-width;
+  }
+
+  @media (min-width: $break-point-dynamic) {
+    width: calc(50% - #{$half-content});
+  }
+}
+
+html {
+  @media screen and (min-width: $break-point-1) {
+    font-size: var(--root-font-size-medium);
+  }
+
+  @media screen and (min-width: $break-point-font-large) {
+    font-size: var(--root-font-size-large);
+  }
+}
+
+#breadcrumbs {
+  > ul {
+    @extend .ellipsis;
+    height: 1rem;
+    margin: -1.5rem 0 .5rem;
+    padding: 0;
+    font-size: .667rem;
+    color: var(--menu-text);
+    text-transform: uppercase;
+    width: 100%;
+    list-style: none;
+    > li { 
+      display: inline; 
+      a {
+        color: var(--gray);
+        text-decoration: none;
+        border-bottom: none;
+      }
+    }
+  }
+}
+// >>>
+// <<< LINK
+@media print { 
+  html { 
+    font-size: var(--root-font-size-print);
+  } 
+}
+
+@page { 
+  margin: 16mm;
+} 
+// >>>
--- a/_sass/pivoine/_break-layout.pre.scss
+++ b/_sass/pivoine/_break-layout.pre.scss
@@ -0,0 +1,91 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// <<< LINK
+pre, table:not(.highlight), .katex-display, .break-layout, mjx-container[jax="CHTML"][display="true"] {
+  $pad: $content-padding * 2;
+
+  @media screen {
+    position: relative;
+    width: calc(100% + #{$pad});
+    border-top-right-radius: 0!important;
+    border-bottom-right-radius: 0!important;
+  }
+
+  @media screen and (min-width: $content-width) {
+    $x: null;
+    @if $gh-pages-compat {
+      $x:      ($content-width / 2) - $pad;
+    } @else {
+      $x: calc(($content-width / 2) - $pad);
+    }
+    width: calc(100% + 50vw - #{$x});
+  }
+
+  @media screen and (min-width: $break-point-2) {
+    $x: null;
+    @if $gh-pages-compat {
+      $x:      ($content-width-2 / 2) - $pad;
+    } @else {
+      $x: calc(($content-width-2 / 2) - $pad);
+    }
+    width: calc(100% + 50vw - #{$x});
+  }
+
+  @media screen and (min-width: $break-point-3) {
+    $x: $sidebar-width + $content-margin-3;
+    width: calc(100vw - #{$x});
+  }
+
+  @media screen and (min-width: $break-point-5) {
+    $x: $content-width-5 + $sidebar-width + $content-margin-5 - $pad;
+    width: calc(100% + 100vw - #{$x});
+  }
+
+  @media screen and (min-width: $break-point-dynamic) {
+    $x: null;
+    @if $gh-pages-compat {
+      $x:     (($content-width-5 / 2) - ($content-padding * 2) + 21rem);
+    } @else {
+      $x: calc(($content-width-5 / 2) - ($content-padding * 2) + 21rem);
+    }
+    width: calc(100% + 50vw - #{$x} + 2px);
+  }
+}
+
+body:not(.no-break-layout) {
+  .katex-display > .katex, mjx-container[jax][display="true"] { 
+    text-align: left!important;
+  }
+}
+
+body.no-break-layout {
+  width: calc(100% + #{$content-margin-5 + 2rem});
+}
+
+body.no-toc:not(.no-break-layout) {
+  pre, table:not(.highlight), .katex-display, .break-layout, mjx-container[jax="CHTML"][display="true"] {
+    @media screen and (min-width: $break-point-dynamic) {
+      $x: null;
+      @if $gh-pages-compat {
+        $x:     (($content-width-5 / 2) - ($content-padding * 2));
+      } @else {
+        $x: calc(($content-width-5 / 2) - ($content-padding * 2));
+      }
+      width: calc(100% + 50vw - #{$x});
+    }
+  }
+}
+// >>>
--- a/_sass/pivoine/_content.pre.scss
+++ b/_sass/pivoine/_content.pre.scss
@@ -0,0 +1,64 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+.content {
+  // <<< inline
+  margin-left: auto;
+  margin-right: auto;
+  padding: 8rem $content-padding 12rem;
+
+  @media screen {
+    padding-left: $content-padding + .5rem;
+    min-height: 100vh;
+  }
+
+  @media screen and (min-width: $break-point-1) {
+    max-width: $content-width;
+  }
+
+  @media screen and (min-width: $break-point-2) {
+    max-width: $content-width-2;
+  }
+
+  @media screen and (min-width: $break-point-3) {
+    padding-left: $content-padding;
+    margin-left: $sidebar-width + $content-margin-3;
+    margin-right: $content-margin-3;
+  }
+
+  @media screen and (min-width: $break-point-5) {
+    padding-top: 9rem;
+    margin-left: $sidebar-width + $content-margin-5;
+    margin-right: $content-margin-5;
+    max-width: $content-width-5;
+  }
+
+  @media screen and (min-width: $break-point-dynamic) {
+    margin: auto;
+  }
+  // >>>
+  // <<< link
+  @media print {
+    padding: 1rem;
+  }
+  // >>>
+}
+
+.large-only {
+  display: none;
+  @media screen and (min-width: $break-point-dynamic) {
+    display: block;
+  }
+}
--- a/_sass/pivoine/_footer.pre.scss
+++ b/_sass/pivoine/_footer.pre.scss
@@ -0,0 +1,36 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// <<<<< LINK
+main > footer.content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  color: var(--gray);
+  text-align: center;
+  min-height: 0;
+  padding-top: 0;
+  padding-bottom: 2rem;
+
+  > p {
+    margin-bottom: 0;
+  }
+
+  @media print {
+    display: none;
+  }
+}
+// >>>>>
--- a/_sass/pivoine/_images.pre.scss
+++ b/_sass/pivoine/_images.pre.scss
@@ -0,0 +1,63 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+.content .aspect-ratio {
+  overflow: hidden; // inline
+  img {
+    margin: 0; // inline
+    width: 100%; // inline
+    height: 100%; // inline
+    object-fit: cover; // link
+    object-position: center; // link
+    background-color: var(--gray-bg); // inline
+  }
+}
+
+// <<< link
+figure, .figure {
+  @extend .faded, .fine, .centered;
+  margin-bottom: 2rem;
+
+  > *:first-child {
+    margin-bottom: 1rem;
+  }
+}
+
+.highlighter-rouge + .figure {
+  margin-top: -1.5rem;
+}
+
+.figcaption {
+  @extend .faded, .fine, .centered;
+  margin-top: -0.5rem;
+  margin-bottom: 2rem;
+}
+
+.gallery-wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+  grid-gap: 1rem;
+}
+
+.gallery-item {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+  @media screen and (min-width: $break-point-1) {
+    border-radius: 3%;
+  }
+}
+// >>>
--- a/_sass/pivoine/_katex.pre.scss
+++ b/_sass/pivoine/_katex.pre.scss
@@ -0,0 +1,23 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// <<< LINK
+article {
+  .katex-display, mjx-container[jax][display="true"] {
+    @extend .pre-base;
+    padding: 2rem;
+  }
+}
+// >>>
--- a/_sass/pivoine/_links.pre.scss
+++ b/_sass/pivoine/_links.pre.scss
@@ -0,0 +1,79 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+hy-push-state a {
+  color: var(--body-color); // inline
+
+  // <<< inline
+  @supports not ((text-decoration-thickness: initial) and (text-underline-offset: initial)) {
+    text-decoration: none; 
+    border-bottom: 2px solid;
+  }
+
+  @supports ((text-decoration-thickness: initial) and (text-underline-offset: initial)) {
+    text-decoration-style: solid;
+    text-underline-offset: .35rem;
+    text-decoration-thickness: 2px;
+  }
+  // >>>
+
+  // <<< link
+  & { 
+    transition: color 250ms, text-decoration-color 250ms, border-color 250ms; 
+  }
+  &:hover {
+    transition: color 50ms, text-decoration-color 50ms, border-color 50ms;
+  }
+  // >>>
+
+  // <<< inline
+  &.no-hover {
+    border-bottom: none;
+    text-decoration-thickness: unset;
+    text-underline-offset: unset;
+  }
+  // >>>
+}
+
+.content a:not(.btn):not(.no-hover) {
+  // <<< inline
+  @supports ((text-decoration-thickness: initial) and (text-underline-offset: initial)) {
+    text-decoration-color: var(--accent-color-faded);
+  }
+  & { border-color: var(--accent-color-faded); }
+  // >>>
+  // <<< link
+  &:hover {
+    @supports ((text-decoration-thickness: initial) and (text-underline-offset: initial)) {
+      text-decoration-color: var(--accent-color);
+    }
+    & { border-color: var(--accent-color); }
+  }
+  // >>>
+}
+
+// <<< link
+a.btn {
+  text-decoration: none;
+}
+
+@media print {
+  a:not(.no-print-link)::after {
+    content: " (" attr(href) ") ";
+    color: var(--gray);
+    font-size: 62%;
+  }
+}
+// >>>
--- a/_sass/pivoine/_mark-external.pre.scss
+++ b/_sass/pivoine/_mark-external.pre.scss
@@ -0,0 +1,37 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// <<< link
+@media screen {
+  a.external,
+  a[href*="://"]:not(.no-mark-external):not(.no-mark),
+  a.no-push-state:not(.no-mark-external):not(.no-mark) {
+    &::after {
+      content: "\2009\ea7e";
+      font-family: 'icomoon'!important;
+      speak: none;
+      font-style: normal;
+      font-weight: normal;
+      font-variant: normal;
+      text-transform: none;
+      line-height: 1;
+      font-size: smaller;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      color: var(--menu-text);
+    }
+  }
+}
+// >>>
--- a/_sass/pivoine/_menu.pre.scss
+++ b/_sass/pivoine/_menu.pre.scss
@@ -0,0 +1,143 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+$navbar-height: 5rem;
+
+// <<< inline
+.fixed-common {
+  position: fixed;
+  left: 0;
+  width: 100%;
+  z-index: 2;
+}
+
+.fixed-top {
+  @extend .fixed-common;
+  top: 0;
+}
+
+.fixed-bottom {
+  @extend .fixed-common;
+  bottom: 0;
+}
+// >>>
+
+.navbar {
+  @extend .color-transition; // inline
+
+  > .content {
+    // <<< inline
+    position: relative;
+    padding-top: 0;
+    padding-bottom: 0;
+    min-height: 0;
+    max-height: $navbar-height;
+    // >>>
+
+    // <<< link
+    $shadow-padding: 3rem;
+    &::before {
+      content: "";
+      position: absolute;
+      display: block;
+      width: calc(100% - #{$shadow-padding * 2});
+      height: $navbar-height;
+      left: $shadow-padding;
+      margin: auto;
+      box-shadow: 0 0 2rem rgba(0,0,0,0.25);
+      z-index: -1;
+    }
+    // >>>
+  }
+
+  // <<< link
+  &.fixed-top {
+    > .content {
+      &::before {
+        bottom: 1px;
+      }
+    }
+  }
+
+  &.fixed-bottom {
+    > .content {
+      &::before {
+        top: 1px;
+      }
+    }
+  }
+  // >>>
+}
+
+// <<< inline
+.nav-btn-bar {
+  @extend .color-transition;
+  margin: 0 -1rem;
+  background-color: white; // IE11
+  background-color: var(--body-bg);
+  height: $navbar-height;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  > :first-child, > :last-child {
+    border: none;
+  }
+}
+
+.nav-btn {
+  @extend .color-transition;
+  background: none;
+  border: none;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.25rem;
+  height: $navbar-height;
+  color: var(--menu-text);
+  border-right: 1px solid var(--border-color);
+  border-left: 1px solid var(--border-color);
+  margin-left: -1px;
+}
+// >>>
+
+// <<< link
+a.nav-btn, button.nav-btn {
+  cursor: pointer;
+  &:hover, &:focus {
+    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
+  }
+}
+
+.nav-span {
+  flex: 1;
+}
+
+.animation-main {
+  opacity: 0;
+  pointer-events: none;
+}
+
+#_navbar {
+  z-index: 3;
+  background-color: var(--body-bg);
+}
+
+.navbar {
+  .loading { display: none; }
+  @media print { display: none; }
+}
+// >>>
--- a/_sass/pivoine/_search.pre.scss
+++ b/_sass/pivoine/_search.pre.scss
@@ -0,0 +1,74 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+hm-search {
+  display: flex; // inline
+  flex-grow: 1; // inline
+  padding: 1em; // inline
+  position: relative; // inline
+  overflow: hidden; // inline
+
+  @media screen {
+    // <<< link
+    --hm-search-input-color: var(--menu-text);
+    --hm-search-input-color-bg: none;
+    --hm-search-input-color-border: none;
+    --hm-search-input-color-caret: var(--accent-color);
+    --hm-search-font-size: larger;
+    // >>>
+  }
+}
+
+// <<< link
+.search-results {
+  > article {
+    animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+
+    &:hover img {
+      filter: grayscale(0);
+    }
+
+
+    img {
+      filter: grayscale(1.0);
+      transition: filter 250ms ease-in-out;
+    }
+  }
+  
+
+  /* ----------------------------------------------
+  * Generated by Animista on 2025-4-30 22:39:13
+  * Licensed under FreeBSD License.
+  * See http://animista.net/license for more info. 
+  * w: http://animista.net, t: @cssanimista
+  * ---------------------------------------------- */
+
+  /**
+  * ----------------------------------------
+  * animation scale-in-center
+  * ----------------------------------------
+  */
+  @keyframes scale-in-center {
+    0% {
+      transform: scale(0);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+}
+// >>>
--- a/_sass/pivoine/_sidebar.pre.scss
+++ b/_sass/pivoine/_sidebar.pre.scss
@@ -0,0 +1,225 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+hy-drawer {
+  width: 100%; // inline
+  position: relative; // inline
+  overflow: hidden; // inline
+  display: block; // inline
+  z-index: 4; // inline
+
+  @media screen {
+    // <<< link
+    --hy-drawer-width: 100%;
+    --hy-drawer-peek-width: .5rem;
+    --hy-drawer-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
+    // >>>
+  }
+
+  @media screen and (min-width: $break-point-3) {
+    // <<< inline
+    position: fixed;
+    width: $sidebar-width;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    margin-left: 0;
+
+    &.cover {
+      position: relative;
+      width: 100%;
+    }
+    // >>>
+
+    // <<< link
+    & { --hy-drawer-peek-width: #{$sidebar-width}; }
+    // >>>
+  }
+
+  @media screen and (min-width: $break-point-dynamic) {
+    width: calc(50% - #{$half-content});
+
+    // <<< link
+    --hy-drawer-peek-width: calc(50% - #{$half-content});
+    // >>>
+  }
+
+  // <<< link
+  @media screen {
+    &.loaded {
+      position: static;
+    }
+  }
+  // >>>
+}
+
+.sidebar {
+  // <<< inline
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: rgba(255, 255, 255, .75);
+  text-align: center;
+  min-height: 100vh;
+  &.invert { color: rgba(32, 32, 32, .75) }
+  // >>>
+
+  a {
+    // <<< inline
+    color: #fff; 
+    border-bottom-color: rgba(255, 255, 255, 0.2); 
+    text-decoration-color: rgba(255, 255, 255, 0.2); 
+    // >>>
+    // <<< link
+    &:hover { 
+      border-bottom-color: #fff;
+      text-decoration-color: #fff;
+    }
+    // >>>
+  }
+
+  &.invert a {
+    // <<< inline
+    color: #222;
+    border-bottom-color: rgba(32, 32, 32, 0.2); 
+    text-decoration-color: rgba(32, 32, 32, 0.2); 
+    // >>>
+    // <<< link
+    &:hover { 
+      border-bottom-color: #222;
+      text-decoration-color: #222;
+    }
+    // >>>
+  }
+}
+
+// <<< link
+hy-drawer.loaded .sidebar {
+  min-height: 100%;
+}
+// >>>
+
+.sidebar-bg {
+  // <<< inline
+  position: absolute;
+  top: 0;
+  left: calc(50% - 50vw);
+  width: 100vw;
+  height: 100%;
+  background: #202020 center / cover;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.05);
+  }
+  // >>>
+
+  &.sidebar-overlay::after {
+    background: -moz-linear-gradient(top, rgba(32,32,32,0) 0%, rgba(32,32,32,0.5) 50%, rgba(32,32,32,0) 100%); // link
+    background: -webkit-linear-gradient(top, rgba(32,32,32,0) 0%,rgba(32,32,32,0.5) 50%, rgba(32,32,32,0) 100%); // link
+    background: linear-gradient(to bottom, rgba(32,32,32,0) 0%,rgba(32,32,32,0.5) 50%, rgba(32,32,32,0) 100%); // inline
+  }
+}
+
+// <<<<< INLINE
+.sidebar-sticky {
+  position: relative;
+  z-index: 3;
+  max-width: $sidebar-width;
+  padding: 1.5rem;
+  contain: content;
+}
+
+.sidebar-about {
+  .avatar {
+    margin-bottom: 1.5rem
+  }
+
+  > a.sidebar-title {
+    text-decoration: none;
+    > h2 {
+      margin: 0;
+      padding-bottom: .5rem;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      border-bottom: 2px solid;
+      margin: 0 auto .5rem;
+      width: 4rem;
+      border-color: rgba(255, 255, 255, 0.2);
+      transition: border-color 250ms;
+    }
+
+    &:hover::after {
+      border-color: rgba(255, 255, 255, 1);
+      transition: border-color 50ms;
+    }
+  }
+}
+
+.sidebar.invert .sidebar-about > a.sidebar-title{
+  &::after { border-color: rgba(32, 32, 32, 0.2) }
+  &:hover::after { border-color: #222 }
+}
+
+.sidebar-nav > ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+.sidebar-nav-item {
+  @extend .f4;
+  display: inline-block;
+  margin-bottom: .5rem;
+}
+
+#_main.no-drawer {
+  @media (min-width: $break-point-3) {
+    #_menu { display: none }
+    .nav-btn-bar > :nth-child(2) { border: none }
+  }
+}
+// >>>
+
+// <<< LINK
+@media print {
+  .sidebar {
+    display: none;
+  }
+}
+
+#_swipe {
+  position: absolute;
+  z-index: 4;
+  opacity: 0.33;
+  top: 5vw;
+  right: 5vw;
+  transform: scale(0.67);
+
+  @media screen and (min-width: $break-point-1) {
+    top: calc(50% - 48px);
+    right: 10vw;
+    transform: scale(1);
+  }
+}
+// >>>
--- a/_sass/pivoine/_social.pre.scss
+++ b/_sass/pivoine/_social.pre.scss
@@ -0,0 +1,58 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// <<<<< INLINE
+.sidebar-social {
+  &::after {
+    @extend .clearfix
+  }
+
+  > ul {
+    display: inline-block;
+    list-style: none;
+    padding-left: 0;
+    margin-bottom: 0;
+
+    > li {
+      float: left;
+
+      > a {
+        display: inline-block;
+        text-align: center;
+        font-size: 1.4rem;
+        width: 3rem;
+        height: 4rem;
+        padding: .5rem 0;
+        line-height: 4rem - 2 * .5rem;
+        text-decoration: none;
+        border-bottom-width: 2px;
+        border-bottom-style: solid;
+      }
+    }
+
+    li + li {
+      margin-top: 0;
+    }
+  }
+}
+// >>>>>
+
+// <<< link
+.sidebar-social {
+  @media print {
+    display: none;
+  }
+}
+// >>>
--- a/_sass/pivoine/_sound.pre.scss
+++ b/_sass/pivoine/_sound.pre.scss
@@ -0,0 +1,45 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// <<<<< LINK
+.sound-player {
+
+  > a {
+    text-transform: uppercase;
+    display: inline-block;
+    margin-bottom: 1rem;
+    cursor: pointer;
+  }
+
+  > canvas {
+    display: block;
+    margin: 0 auto;
+    height: 40px;
+
+    &.hidden {
+      display: none;
+    }
+  }
+}
+
+.sound-wrapper {
+  display: flex;
+  flex-direction: column;
+
+  > a {
+    text-transform: uppercase;
+  }
+}
+// >>>>>
--- a/_sass/pivoine/_toc.pre.scss
+++ b/_sass/pivoine/_toc.pre.scss
@@ -0,0 +1,65 @@
+// Copyright (c) 2020 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+#markdown-toc {
+  // <<< inline
+  @extend .note-sm;
+  margin: 2rem -1rem 2rem calc(-1rem + 1px);
+  padding-left: 2.5rem;
+  padding-bottom: .5rem;
+  // >>>
+  transition: opacity 300ms ease, transform 300ms ease, border-color 1s ease; // link
+  &:before { left: 1rem; }
+}
+
+body:not(.no-toc) #markdown-toc {
+  @media screen and (min-width: $break-point-dynamic) {
+    // <<< inline
+    position: absolute;
+    z-index: 4;
+    width: 20.5rem;
+    right: 0;
+    margin: auto;
+    overflow: auto;
+    // >>>
+    // <<< link
+    overscroll-behavior: contain;
+
+    &.toc-hide {
+      opacity: 0;
+      transform: translateX(-2rem);
+    }
+
+    &.toc-show {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    &.affix {
+      position: fixed;
+      top: 1rem;
+      max-height: calc(100vh - 1rem);
+    }
+    // >>>
+  }
+}
+
+// <<< inline
+body.no-break-layout:not(.no-toc) #markdown-toc {
+  @media screen and (min-width: $break-point-dynamic) {
+    width: calc(50% - #{$half-content});
+  }
+}
+// >>>
--- a/_sass/pivoine/_utilities.pre.scss
+++ b/_sass/pivoine/_utilities.pre.scss
@@ -0,0 +1,79 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+.fl { float: left; }
+.fr { float: right; }
+.mb4 { margin-bottom: 4rem }
+.mb6 { margin-bottom: 6rem }
+.mt0 { margin-top: 0 }
+.mt1 { margin-top: 1rem }
+.mt2 { margin-top: 2rem }
+.mt3 { margin-top: 3rem }
+.mt4 { margin-top: 4rem }
+.pb0 { padding-bottom: 0 }
+.ml1 { margin-left: 1rem }
+.mr1 { margin-right: 1rem }
+
+.sixteen-nine { @include aspect-ratio(16, 9); }
+.sixteen-ten { @include aspect-ratio(16, 10); }
+.four-three { @include aspect-ratio(4, 3); }
+.one-one { @include aspect-ratio(1, 1); }
+
+.sr-only {
+  display: none; // inline
+  // <<< link
+  display: unset;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+  // >>>
+}
+
+.larger { font-size: larger; }
+.smaller { font-size: smaller; }
+
+.clearfix {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.border {
+  border: 1px solid var(--border-color); // inline
+  transition: border-color 1s ease; // link
+}
+
+.border-radius {
+  @include border-radius();
+}
+
+.fallback-img {
+  @include fallback-image();
+}
+
+.hidden {
+  display: none;
+}
--- a/_sass/pooleparty/inline/_base.scss
+++ b/_sass/pooleparty/inline/_base.scss
@@ -0,0 +1,78 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pooleparty/_base.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+* {
+  box-sizing: border-box; 
+//   // -webkit-tap-highlight-color: transparent; 
+}
+
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-family: var(--font-family);
+  font-size: var(--root-font-size);
+  line-height: var(--root-line-height);
+}
+
+body {
+  @extend .color-transition;
+  color: var(--body-color);
+  background-color: var(--body-bg);
+  font-weight: var(--font-weight);
+  overflow-y: scroll;
+}
+
+p {
+  @extend .color-transition;
+}
+
+.content img, .img,
+.content video, .video {
+  max-width: 100%;
+  height: auto;
+}
+
+.lead {
+  @extend .border-radius;
+  margin-left: -1rem;
+  margin-right: -1rem;
+  margin-bottom: 1.5rem;
+}
+
+img, video {
+  &.lead {
+    display: block;
+    max-width: calc(100% + 2rem);
+    width: calc(100% + 2rem);
+    height: auto;
+  }
+}
+
+
+
--- a/_sass/pooleparty/inline/_code.scss
+++ b/_sass/pooleparty/inline/_code.scss
@@ -0,0 +1,25 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pooleparty/_code.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2020 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
--- a/_sass/pooleparty/inline/_footer.scss
+++ b/_sass/pooleparty/inline/_footer.scss
@@ -0,0 +1,25 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pooleparty/_footer.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// footer { margin-bottom: 2rem; } 
--- a/_sass/pooleparty/inline/_footnotes.scss
+++ b/_sass/pooleparty/inline/_footnotes.scss
@@ -0,0 +1,25 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pooleparty/_footnotes.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
--- a/_sass/pooleparty/inline/_message.scss
+++ b/_sass/pooleparty/inline/_message.scss
@@ -0,0 +1,66 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pooleparty/_message.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+.message {
+  @extend .color-transition;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  color: var(--gray-text);
+  background-color: var(--gray-bg);
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
+
+.note-sm {
+  @extend .message;
+  background: transparent;
+  color: var(--body-color);
+  font-size: smaller;
+  border-left: 1px solid var(--border-color);
+  padding: 1.2rem 1rem 0 1rem;
+  margin: 1rem -1rem;
+  position: relative;
+
+  &:before {
+    font-size: 0.667rem;
+    font-weight: bold;
+    font-style: normal;
+    letter-spacing: .025rem;
+    text-transform: uppercase;
+    color: var(--menu-text);
+    position: absolute;
+    top: 0;
+  }
+
+  &[title]:before {
+    content: attr(title)!important;
+  }
+}
+
+.note {
+  @extend .note-sm;
+  font-size: 1rem;
+}
+
--- a/_sass/pooleparty/inline/_pagination.scss
+++ b/_sass/pooleparty/inline/_pagination.scss
@@ -0,0 +1,25 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pooleparty/_pagination.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
--- a/_sass/pooleparty/inline/_posts.scss
+++ b/_sass/pooleparty/inline/_posts.scss
@@ -0,0 +1,91 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pooleparty/_posts.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+.page {
+  margin-bottom: 3em;
+
+  li + li {
+    margin-top: .25rem;
+  }
+
+  > header {
+    position: relative;
+    margin-bottom: 2rem;
+  }
+
+  .aspect-ratio.sixteen-nine.lead {
+    @extend .border-radius;
+  }
+}
+
+body:not(.no-third-column) {
+  .page > header {
+    > .lead + .note-sm, 
+    > a.no-hover + .note-sm {
+      @media screen and (min-width: $break-point-dynamic) {
+        position: absolute;
+        right: -25rem;
+        width: 21rem;
+        bottom: 0;
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+// Blog post or page title
+.page-title, .post-title { margin-top: 0; }
+
+// Meta data line below post title
+.post-date {
+  @extend .h4;
+  display: flex;
+  justify-content: space-between;
+  margin-top: -.6rem;
+  height: 2rem;
+  margin-bottom: .85rem;
+  color: var(--gray);
+
+  > .ellipsis {
+    cursor: pointer;
+  }
+
+  [class^="icon-"] { 
+    display: inline-block; 
+    font-size: smaller;
+    margin-right: .25rem;
+  }
+}
+
+.img-wrapper > .hotfx-lightbox-slide {
+  display: none;
+}
+
+hotfx-lightbox::part(slide) {
+  display: inherit;
+  margin: 0 auto;
+}
+
+
--- a/_sass/pooleparty/inline/_read-more.scss
+++ b/_sass/pooleparty/inline/_read-more.scss
@@ -0,0 +1,25 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pooleparty/_read-more.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
--- a/_sass/pooleparty/inline/_related.scss
+++ b/_sass/pooleparty/inline/_related.scss
@@ -0,0 +1,38 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pooleparty/_related.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+.related-posts {
+  padding-left: 0;
+  list-style: none;
+  margin-bottom: 2rem;
+
+  > li,
+  > li + li {
+    margin-top: 1rem;
+  }
+}
+
+
+
--- a/_sass/pooleparty/inline/_table.scss
+++ b/_sass/pooleparty/inline/_table.scss
@@ -0,0 +1,25 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pooleparty/_table.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
--- a/_sass/pooleparty/inline/_type.scss
+++ b/_sass/pooleparty/inline/_type.scss
@@ -0,0 +1,156 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pooleparty/_type.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+.heading {
+  font-family: var(--font-family-heading);
+  font-weight: var(--font-weight-heading);
+}
+
+.f1 {
+  @extend .heading;
+  font-size: 2rem;
+  line-height: 1.3;
+}
+
+.f2 {
+  @extend .heading;
+  font-size: 1.5rem;
+  line-height: 1.4;
+}
+
+.f3 {
+  @extend .heading;
+  font-size: 1.2em;
+  line-height: 1.5;
+}
+
+.f4 {
+  @extend .heading;
+  font-size: 1.08rem;
+  line-height: 1.6;
+}
+
+.f5 {
+  @extend .heading;
+  font-size: 1.04rem;
+  line-height: 1.7;
+}
+
+.f6 {
+  @extend .heading;
+  font-size: 1rem;
+}
+
+
+h1, .h1 { @extend .f1; }
+h2, .h2 { @extend .f2; }
+h3, .h3 { @extend .f3; }
+h4, .h4 { @extend .f4; }
+h5, .h5 { @extend .f5; }
+h6, .h6 { @extend .f6; }
+
+.content {
+  h1, .h1 {
+    > a { text-decoration: none; border-bottom: none; }
+    @media screen and (max-width: $break-point-1) {
+      font-size: 1.7rem;
+      line-height: 1.35;
+    }
+    @media screen and (min-width: $break-point-5) {
+      font-size: 2.4rem;
+      line-height: 1.25;
+    }
+  }
+}
+
+body:not(.no-large-headings) {
+  .content {
+    h1, .h1 {
+      @media screen and (min-width: $break-point-dynamic) {
+        width: calc(100% + 50vw - 32rem);
+        font-size: 3rem;
+        line-height: 1.2;
+      }
+      @media screen and (min-width: $break-point-font-large) {
+        font-size: 4rem;
+        line-height: 1.1;
+      }
+    }
+  }
+}
+
+h1, h2, h3, .h1, .h2, .h3 {
+  margin: 4rem 0 1rem;
+}
+
+h4, h5, h6, .h4, .h5, .h6 {
+  margin: 3rem 0 .5rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+
+  &.lead {
+    font-size: 1.2em;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    padding: 0 1rem;
+  }
+}
+
+ul, ol, dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ul, ol {
+  padding-left: 1.25rem;
+}
+
+hr, .hr {
+  @extend .color-transition;
+  border: 0;
+  margin: 1rem 0;
+  border-top: 1px solid var(--border-color);
+}
+
+.hr-after::after {
+  @extend .color-transition;
+  content: "";
+  display: block;
+  margin: 1rem 0;
+  border-top: 1px solid var(--border-color);
+}
+
+.hr-bottom {
+  @extend .color-transition;
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: .75rem;
+  margin-bottom: 1rem;
+}
+
+
+
+
--- a/_sass/pooleparty/link/_base.scss
+++ b/_sass/pooleparty/link/_base.scss
@@ -0,0 +1,46 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pooleparty/_base.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+* {
+//   box-sizing: border-box; 
+  // -webkit-tap-highlight-color: transparent; 
+}
+
+
+
+
+@media (display-mode: standalone) {
+  body {
+    overscroll-behavior-y: contain;
+  }
+}
+
+:focus {
+  outline-color: var(--accent-color)!important;
+}
+
+::selection {
+  background: var(--accent-color-faded);
+}
+
--- a/_sass/pooleparty/link/_code.scss
+++ b/_sass/pooleparty/link/_code.scss
@@ -0,0 +1,220 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pooleparty/_code.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2020 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+code, pre {
+  font-family: var(--code-font-family);
+}
+
+code {
+  @extend .color-transition;
+  padding: .25em .5em;
+  background-color: var(--gray-bg);
+  font-size: smaller;
+}
+
+.figure-base {
+  @extend .color-transition;
+  margin-left: -1rem;
+  margin-right: -1rem;
+
+  // Prevent code linebreaks and allow side-scrolling for better readability on mobile
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  @include border-radius();
+}
+
+.pre-base {
+  @extend .figure-base;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+  background-color: var(--gray-bg);
+
+  // HACK: prevents painting for some reason
+  backface-visibility: hidden;
+
+  @media print {
+    width: 100%!important;
+    page-break-inside: avoid;
+    break-inside: avoid-page;
+  }
+}
+
+pre {
+  @extend .pre-base;
+  margin-top: 0;
+  display: block;
+  font-size: .83em;
+  line-height: 1.5em;
+  position: relative;
+}
+
+pre > code {
+  display: inline-block;
+  position: relative;
+  min-width: 100%;
+  padding: 0;
+  color: inherit;
+  background-color: transparent;
+  font-size: 1em;
+
+  // .__hl {
+  //   @extend .color-transition;
+  //   display: inline-block;
+  //   position: absolute;
+  //   left: -1rem;
+  //   right: -1rem;
+  //   background: var(--accent-color-highlight);
+  //   border-left: .25rem solid var(--accent-color-faded);
+  //   z-index: -1;
+  // }
+}
+
+.pre-header-common {
+  @extend .color-transition;
+  height: 2rem;
+  border: none;
+  border-bottom: 1px solid var(--border-color);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+div.highlight {
+  position: relative;
+
+  > .pre-header {
+    @extend .figure-base;
+    @extend .pre-header-common;
+    display: block;
+    color: var(--gray)!important;
+    background-color: var(--gray-bg);
+    overflow: clip;
+
+    > span {
+      font-size: smaller;
+    }
+
+    > * {
+      display: inline-block;
+      padding: .3rem 1rem .2rem;
+    }
+  }
+
+  > button {
+    @extend .pre-header-common;
+    position: absolute;
+    top: 0;
+    right: -1rem;
+    color: var(--menu-text);
+    background: none;
+    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
+    border-top-left-radius: 0;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    overflow: hidden;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 300ms;
+
+    &:hover {
+      background: var(--gray-bg);
+    }
+
+    &.copy-success {
+      > .icon-copy {
+        animation-name: icon-copy;
+        animation-duration: 1.5s;
+        animation-timing-function: ease;
+      }
+      > .icon-checkmark {
+        animation-name: icon-checkmark;
+        animation-duration: 1.5s;
+        animation-timing-function: ease;
+      }
+    }
+    > .icon-copy { 
+      display: inline-block;
+    }
+    > .icon-checkmark {
+      position: absolute;
+
+      top: 50%;
+      margin-top: -3em;
+
+      left: 0;
+      right: 0;
+      text-align: center;
+    }
+  }
+
+  &:hover > button {
+    opacity: 1;
+    transition: opacity 100ms;
+  }
+
+  > .pre-header ~ pre.highlight {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    padding-top: .65rem;
+  }
+
+  > .pre-header ~ button {
+    opacity: 1;
+  }
+}
+
+body.no-break-layout {
+  div.highlight > button {
+    border-right: none;
+  }
+}
+
+@keyframes icon-checkmark {
+  0% {
+    transform: translateY(0);
+  }
+  15%, 85% {
+    transform: translateY(2.5em);
+  }
+  100% {
+    transform: translateY(5em);
+  }
+}
+
+@keyframes icon-copy {
+  0% {
+    transform: translateY(0);
+  }
+  15% {
+    transform: translateY(2.5em);
+  }
+  15.01%, 85% {
+    transform: translateY(-2.5em);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
--- a/_sass/pooleparty/link/_footer.scss
+++ b/_sass/pooleparty/link/_footer.scss
@@ -0,0 +1,25 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pooleparty/_footer.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+footer { margin-bottom: 2rem; } 
--- a/_sass/pooleparty/link/_footnotes.scss
+++ b/_sass/pooleparty/link/_footnotes.scss
@@ -0,0 +1,80 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pooleparty/_footnotes.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+// Footnote number within body text
+a[href^="#fn:"],
+// Back to footnote link
+a[href^="#fnref:"] {
+  margin-left: .1rem;
+  font-weight: var(--font-weight-bold);
+
+  @media screen and (max-width: $break-point-4) {
+    font-weight: normal;
+    &::before { content: "["; }
+    &::after  { content: "]"; }
+  }
+}
+
+sup {
+  line-height: 1;
+
+  &[id^="fnref"] {
+    @media screen and (max-width: $break-point-4) {
+      vertical-align: baseline;
+      font-size: inherit;
+    }
+  }
+}
+
+// List of footnotes
+.footnotes {
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+
+  > ol {
+    color: var(--gray);
+
+    > li {
+      padding: .5rem;
+      margin-left: .5rem;
+      > p { margin: 0; }
+      &:focus {
+        outline: none;
+        color: var(--gray-text);
+        background: var(--gray-bg);
+      }
+    }
+  }
+
+  &::before {
+    @extend .color-transition;
+    content: "";
+    display: block;
+    margin: 1rem 0;
+    border: 0;
+    border-top: 1px solid var(--border-color);
+  }
+}
+
--- a/_sass/pooleparty/link/_message.scss
+++ b/_sass/pooleparty/link/_message.scss
@@ -0,0 +1,25 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pooleparty/_message.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
--- a/_sass/pooleparty/link/_pagination.scss
+++ b/_sass/pooleparty/link/_pagination.scss
@@ -0,0 +1,91 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pooleparty/_pagination.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+.pagination {
+  @extend .color-transition;
+  width: calc(100% + 2rem);
+  margin: 0 -1rem 1rem;
+  color: var(--gray);
+  text-align: center;
+
+  > ul {
+    list-style: none;
+    padding: 0;
+  }
+}
+
+// Pagination items can be `span`s or `a`s
+.pagination-item {
+  > * {
+    display: block;
+    padding: .25rem 1rem;
+    border: solid var(--border-color);
+    border-width: 1px 0;
+    transition: border-color 1s ease;
+  }
+
+  > a, > a:hover, > a:focus {
+    border-color: var(--border-color)!important;
+    text-decoration: none;
+  }
+
+  &:first-child > * {
+    margin-bottom: -1px;
+  }
+
+  // Only provide a hover state for linked pagination items
+  > a:hover, > a:focus {
+    background-color: var(--gray-bg);
+    border-bottom: 1px solid var(--border-color);
+  }
+}
+
+@media (min-width: 23.5em) {
+  .pagination {
+    width: 100%;
+    margin: 3rem 0;
+  }
+
+  .pagination-item {
+    > * {
+      float: left;
+      width: 50%;
+      border-width: 1px;
+    }
+
+    &:first-child > * {
+      margin-bottom: 0;
+      border-top-left-radius: 0.25rem;
+      border-bottom-left-radius: 0.25rem;
+    }
+
+    &:last-child > * {
+      margin-left: -1px;
+      border-top-right-radius: 0.25rem;
+      border-bottom-right-radius: 0.25rem;
+    }
+  }
+}
+
--- a/_sass/pooleparty/link/_posts.scss
+++ b/_sass/pooleparty/link/_posts.scss
@@ -0,0 +1,55 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pooleparty/_posts.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+
+clap-button {
+  margin-left: auto;
+  margin-right: auto;
+  --clap-button-color: var(--accent-color);
+}
+
+clap-button + p.message {
+  margin: -2rem auto 0;
+  max-width: 32rem;
+  font-size: smaller
+}
+
+hr.dingbat {
+  border: 0;
+  &:after{
+    content: "\2756";
+    display: block;
+    text-align: center;
+    font-size: 1.5rem;
+    color: var(--menu-text);
+  }
+}
+
+@media print {
+  .page {
+    margin-bottom: 0
+  }
+}
+
--- a/_sass/pooleparty/link/_read-more.scss
+++ b/_sass/pooleparty/link/_read-more.scss
@@ -0,0 +1,46 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pooleparty/_read-more.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+.read-more {
+  @extend .faded;
+  margin-top: 1.5rem;
+  margin-bottom: 3rem;
+  text-align: right;
+
+  &::after {
+    content: " \2192";
+    font-family: 'icomoon'!important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    font-size: smaller;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
--- a/_sass/pooleparty/link/_related.scss
+++ b/_sass/pooleparty/link/_related.scss
@@ -0,0 +1,33 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pooleparty/_related.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+
+
+.comments {
+  @media print {
+    display: none;
+  }
+}
+
--- a/_sass/pooleparty/link/_table.scss
+++ b/_sass/pooleparty/link/_table.scss
@@ -0,0 +1,176 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pooleparty/_table.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+table:not(.rouge-table) {
+  @extend .figure-base;
+  border-collapse: collapse;
+  border-radius: 0!important;
+  display: block;
+  margin-bottom: 1.5rem;
+
+  td, th {
+    @extend .color-transition;
+    padding: .5em .75em;
+
+    &:first-child {
+      padding-left: 1rem;
+      border-left: 1px solid var(--border-color);
+    }
+
+    &:last-child {
+      padding-right: 1rem;
+      border-right: 1px solid var(--border-color);
+    }
+  }
+
+  > *:first-child {
+    border-top: 1px solid var(--border-color);
+  }
+
+  > *:last-child {
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  thead {
+    @extend .color-transition;
+    background-color: var(--body-bg);
+  }
+
+  thead + tbody,
+  tbody + tbody,
+  tfoot {
+    @extend .color-transition;
+    border-top: 1px solid var(--border-color);
+  }
+
+  tbody tr:nth-child(even) td,
+  tbody tr:nth-child(even) th {
+    @extend .color-transition;
+    background-color: var(--body-bg);
+  }
+
+  tbody tr:nth-child(odd) td,
+  tbody tr:nth-child(odd) th {
+    @extend .color-transition;
+    background-color: var(--gray-bg);
+  }
+}
+
+// CSS only Responsive Tables
+// http://dbushell.com/2016/03/04/css-only-responsive-tables/
+// by David Bushell
+@mixin scroll-table() {
+  white-space: nowrap; // optional - looks better for small cell values
+}
+
+@mixin flip-table() {
+  display: flex;
+  overflow: hidden;
+
+  thead, tbody {
+    display: flex;
+  }
+
+  thead {
+    flex-shrink: 0;
+    min-width: min-content;
+    border-left: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
+
+    th {
+      padding-left: 1em;
+    }
+  }
+
+  tbody {
+    position: relative;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  tr {
+    display: flex;
+    flex-direction: column;
+    min-width: min-content;
+    flex-shrink: 0;
+
+    &:last-child {
+      border-right: 1px solid var(--border-color);
+      td {
+        padding-right: 1em;
+      }
+    }
+  }
+
+  td, th {
+    display: block;
+
+    &:first-child {
+      padding-left: .5em;
+      border-left: none;
+    }
+
+    &:last-child {
+      padding-right: .5em;
+      border-right: none;
+    }
+  }
+}
+
+table.stretch-table {
+  display: table;
+  width: 100% !important;
+  width: calc(100% + 2em) !important;
+  // @media screen and (max-width: $break-point-4) {
+  //   display: block!important;
+  //   @include scroll-table();
+  // }
+}
+
+table.scroll-table {
+  @include scroll-table();
+}
+
+table.flip-table {
+  @include flip-table();
+}
+
+@media screen and (max-width: $break-point-4) {
+  table.scroll-table-small {
+    @include scroll-table();
+  }
+
+  table.flip-table-small {
+    @include flip-table();
+  }
+}
+
+@media print {
+  table:not(.rouge-table) {
+    width: 100%!important;
+  }
+}
+
--- a/_sass/pooleparty/link/_type.scss
+++ b/_sass/pooleparty/link/_type.scss
@@ -0,0 +1,180 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/pooleparty/_type.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+.heading {
+  font-family: var(--font-family-heading);
+  font-weight: var(--font-weight-heading);
+}
+
+.f1 {
+  @extend .heading;
+  font-size: 2rem;
+  line-height: 1.3;
+}
+
+.f2 {
+  @extend .heading;
+  font-size: 1.5rem;
+  line-height: 1.4;
+}
+
+.f3 {
+  @extend .heading;
+  font-size: 1.2em;
+  line-height: 1.5;
+}
+
+.f4 {
+  @extend .heading;
+  font-size: 1.08rem;
+  line-height: 1.6;
+}
+
+.f5 {
+  @extend .heading;
+  font-size: 1.04rem;
+  line-height: 1.7;
+}
+
+.f6 {
+  @extend .heading;
+  font-size: 1rem;
+}
+
+
+
+
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .heading {
+  text-rendering: optimizeLegibility;
+}
+
+h1 + h2, .h1 + .h2, h1 + .h2, .h1 + h2,
+h2 + h3, .h2 + .h3, h2 + .h3, .h2 + h3,
+h3 + h4, .h3 + .h4, h3 + .h4, .h3 + h4,
+h4 + h5, .h4 + .h5, h4 + .h5, .h4 + h5,
+h5 + h6, .h5 + .h6, h5 + .h6, .h5 + h6 {
+  margin-top: 0;
+}
+
+dt, strong {
+  font-weight: var(--font-weight-bold);
+}
+
+dt:after{
+  content: " :";
+  color: var(--menu-text);
+}
+
+dd {
+  margin-bottom: .5rem;
+}
+
+abbr {
+  font-size: 85%;
+  font-weight: var(--font-weight-bold);
+  text-transform: uppercase;
+
+  &[title] {
+    cursor: help;
+    border-bottom: 1px dotted var(--border-color);
+  }
+}
+
+blockquote {
+  @extend .color-transition;
+  padding: .5rem 1rem;
+  margin: .8rem 0;
+  color: var(--gray);
+  border-left: .25rem solid var(--border-color);
+
+  &.lead {
+    font-size: 1.2em;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    border-left-width: 0.4rem;
+  }
+
+  > p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.heading {
+  font-weight: var(--font-weight-heading);
+}
+
+.fine, .smaller {
+  font-size: smaller;
+}
+
+.faded {
+  @extend .color-transition;
+  color: var(--gray);
+}
+
+.centered {
+  text-align: center;
+}
+
+h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
+  position: relative;
+
+  > .permalink {
+    text-decoration: none;
+    border: none;
+    opacity: 0;
+    transition: opacity 400ms;
+
+    @media print {
+      display: none;
+    }
+  }
+
+  &:hover > .permalink {
+    opacity: 0.5;
+  }
+
+  & > .permalink:hover,
+  & > .permalink:focus {
+    opacity: 1;
+    transition: opacity 200ms;
+  }
+}
+
+.content-hash::before {
+  content: '#'
+}
+.content-json::before {
+  content: '{}'
+}
+
+@media print {
+  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, dt {
+    page-break-inside: avoid;
+    break-inside: avoid-page;
+    page-break-after: avoid;
+    break-after: avoid-page;
+  }
+}
+
--- a/_sass/pooleparty/_base.pre.scss
+++ b/_sass/pooleparty/_base.pre.scss
@@ -0,0 +1,83 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+* {
+  box-sizing: border-box; // inline
+  // -webkit-tap-highlight-color: transparent; // link
+}
+
+// <<< INLINE
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-family: var(--font-family);
+  font-size: var(--root-font-size);
+  line-height: var(--root-line-height);
+}
+
+body {
+  @extend .color-transition;
+  color: var(--body-color);
+  background-color: var(--body-bg);
+  font-weight: var(--font-weight);
+  overflow-y: scroll;
+}
+
+p {
+  @extend .color-transition;
+}
+
+.content img, .img,
+.content video, .video {
+  max-width: 100%;
+  height: auto;
+}
+
+.lead {
+  @extend .border-radius;
+  margin-left: -1rem;
+  margin-right: -1rem;
+  margin-bottom: 1.5rem;
+}
+
+img, video {
+  &.lead {
+    display: block;
+    max-width: calc(100% + 2rem);
+    width: calc(100% + 2rem);
+    height: auto;
+  }
+}
+// >>> INLINE
+
+// <<< LINK
+@media (display-mode: standalone) {
+  body {
+    overscroll-behavior-y: contain;
+  }
+}
+
+:focus {
+  outline-color: var(--accent-color)!important;
+}
+
+::selection {
+  background: var(--accent-color-faded);
+}
+// >>> LINK
--- a/_sass/pooleparty/_code.pre.scss
+++ b/_sass/pooleparty/_code.pre.scss
@@ -0,0 +1,211 @@
+// Copyright (c) 2020 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// <<<<< LINK
+code, pre {
+  font-family: var(--code-font-family);
+}
+
+code {
+  @extend .color-transition;
+  padding: .25em .5em;
+  background-color: var(--gray-bg);
+  font-size: smaller;
+}
+
+.figure-base {
+  @extend .color-transition;
+  margin-left: -1rem;
+  margin-right: -1rem;
+
+  // Prevent code linebreaks and allow side-scrolling for better readability on mobile
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  @include border-radius();
+}
+
+.pre-base {
+  @extend .figure-base;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+  background-color: var(--gray-bg);
+
+  // HACK: prevents painting for some reason
+  backface-visibility: hidden;
+
+  @media print {
+    width: 100%!important;
+    page-break-inside: avoid;
+    break-inside: avoid-page;
+  }
+}
+
+pre {
+  @extend .pre-base;
+  margin-top: 0;
+  display: block;
+  font-size: .83em;
+  line-height: 1.5em;
+  position: relative;
+}
+
+pre > code {
+  display: inline-block;
+  position: relative;
+  min-width: 100%;
+  padding: 0;
+  color: inherit;
+  background-color: transparent;
+  font-size: 1em;
+
+  // .__hl {
+  //   @extend .color-transition;
+  //   display: inline-block;
+  //   position: absolute;
+  //   left: -1rem;
+  //   right: -1rem;
+  //   background: var(--accent-color-highlight);
+  //   border-left: .25rem solid var(--accent-color-faded);
+  //   z-index: -1;
+  // }
+}
+
+.pre-header-common {
+  @extend .color-transition;
+  height: 2rem;
+  border: none;
+  border-bottom: 1px solid var(--border-color);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+div.highlight {
+  position: relative;
+
+  > .pre-header {
+    @extend .figure-base;
+    @extend .pre-header-common;
+    display: block;
+    color: var(--gray)!important;
+    background-color: var(--gray-bg);
+    overflow: clip;
+
+    > span {
+      font-size: smaller;
+    }
+
+    > * {
+      display: inline-block;
+      padding: .3rem 1rem .2rem;
+    }
+  }
+
+  > button {
+    @extend .pre-header-common;
+    position: absolute;
+    top: 0;
+    right: -1rem;
+    color: var(--menu-text);
+    background: none;
+    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
+    border-top-left-radius: 0;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    overflow: hidden;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 300ms;
+
+    &:hover {
+      background: var(--gray-bg);
+    }
+
+    &.copy-success {
+      > .icon-copy {
+        animation-name: icon-copy;
+        animation-duration: 1.5s;
+        animation-timing-function: ease;
+      }
+      > .icon-checkmark {
+        animation-name: icon-checkmark;
+        animation-duration: 1.5s;
+        animation-timing-function: ease;
+      }
+    }
+    > .icon-copy { 
+      display: inline-block;
+    }
+    > .icon-checkmark {
+      position: absolute;
+
+      top: 50%;
+      margin-top: -3em;
+
+      left: 0;
+      right: 0;
+      text-align: center;
+    }
+  }
+
+  &:hover > button {
+    opacity: 1;
+    transition: opacity 100ms;
+  }
+
+  > .pre-header ~ pre.highlight {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    padding-top: .65rem;
+  }
+
+  > .pre-header ~ button {
+    opacity: 1;
+  }
+}
+
+body.no-break-layout {
+  div.highlight > button {
+    border-right: none;
+  }
+}
+
+@keyframes icon-checkmark {
+  0% {
+    transform: translateY(0);
+  }
+  15%, 85% {
+    transform: translateY(2.5em);
+  }
+  100% {
+    transform: translateY(5em);
+  }
+}
+
+@keyframes icon-copy {
+  0% {
+    transform: translateY(0);
+  }
+  15% {
+    transform: translateY(2.5em);
+  }
+  15.01%, 85% {
+    transform: translateY(-2.5em);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+// >>>>> LINK
--- a/_sass/pooleparty/_footer.pre.scss
+++ b/_sass/pooleparty/_footer.pre.scss
@@ -0,0 +1,16 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+footer { margin-bottom: 2rem; } // link
--- a/_sass/pooleparty/_footnotes.pre.scss
+++ b/_sass/pooleparty/_footnotes.pre.scss
@@ -0,0 +1,71 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// <<<<< LINK
+// Footnote number within body text
+a[href^="#fn:"],
+// Back to footnote link
+a[href^="#fnref:"] {
+  margin-left: .1rem;
+  font-weight: var(--font-weight-bold);
+
+  @media screen and (max-width: $break-point-4) {
+    font-weight: normal;
+    &::before { content: "["; }
+    &::after  { content: "]"; }
+  }
+}
+
+sup {
+  line-height: 1;
+
+  &[id^="fnref"] {
+    @media screen and (max-width: $break-point-4) {
+      vertical-align: baseline;
+      font-size: inherit;
+    }
+  }
+}
+
+// List of footnotes
+.footnotes {
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+
+  > ol {
+    color: var(--gray);
+
+    > li {
+      padding: .5rem;
+      margin-left: .5rem;
+      > p { margin: 0; }
+      &:focus {
+        outline: none;
+        color: var(--gray-text);
+        background: var(--gray-bg);
+      }
+    }
+  }
+
+  &::before {
+    @extend .color-transition;
+    content: "";
+    display: block;
+    margin: 1rem 0;
+    border: 0;
+    border-top: 1px solid var(--border-color);
+  }
+}
+// >>>>> LINK
--- a/_sass/pooleparty/_message.pre.scss
+++ b/_sass/pooleparty/_message.pre.scss
@@ -0,0 +1,57 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// <<< INLINE
+.message {
+  @extend .color-transition;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  color: var(--gray-text);
+  background-color: var(--gray-bg);
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
+
+.note-sm {
+  @extend .message;
+  background: transparent;
+  color: var(--body-color);
+  font-size: smaller;
+  border-left: 1px solid var(--border-color);
+  padding: 1.2rem 1rem 0 1rem;
+  margin: 1rem -1rem;
+  position: relative;
+
+  &:before {
+    font-size: 0.667rem;
+    font-weight: bold;
+    font-style: normal;
+    letter-spacing: .025rem;
+    text-transform: uppercase;
+    color: var(--menu-text);
+    position: absolute;
+    top: 0;
+  }
+
+  &[title]:before {
+    content: attr(title)!important;
+  }
+}
+
+.note {
+  @extend .note-sm;
+  font-size: 1rem;
+}
+// >>>
--- a/_sass/pooleparty/_pagination.pre.scss
+++ b/_sass/pooleparty/_pagination.pre.scss
@@ -0,0 +1,82 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// <<< LINK
+.pagination {
+  @extend .color-transition;
+  width: calc(100% + 2rem);
+  margin: 0 -1rem 1rem;
+  color: var(--gray);
+  text-align: center;
+
+  > ul {
+    list-style: none;
+    padding: 0;
+  }
+}
+
+// Pagination items can be `span`s or `a`s
+.pagination-item {
+  > * {
+    display: block;
+    padding: .25rem 1rem;
+    border: solid var(--border-color);
+    border-width: 1px 0;
+    transition: border-color 1s ease;
+  }
+
+  > a, > a:hover, > a:focus {
+    border-color: var(--border-color)!important;
+    text-decoration: none;
+  }
+
+  &:first-child > * {
+    margin-bottom: -1px;
+  }
+
+  // Only provide a hover state for linked pagination items
+  > a:hover, > a:focus {
+    background-color: var(--gray-bg);
+    border-bottom: 1px solid var(--border-color);
+  }
+}
+
+@media (min-width: 23.5em) {
+  .pagination {
+    width: 100%;
+    margin: 3rem 0;
+  }
+
+  .pagination-item {
+    > * {
+      float: left;
+      width: 50%;
+      border-width: 1px;
+    }
+
+    &:first-child > * {
+      margin-bottom: 0;
+      border-top-left-radius: 0.25rem;
+      border-bottom-left-radius: 0.25rem;
+    }
+
+    &:last-child > * {
+      margin-left: -1px;
+      border-top-right-radius: 0.25rem;
+      border-bottom-right-radius: 0.25rem;
+    }
+  }
+}
+// >>> LINK
--- a/_sass/pooleparty/_posts.pre.scss
+++ b/_sass/pooleparty/_posts.pre.scss
@@ -0,0 +1,111 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// <<< INLINE
+.page {
+  margin-bottom: 3em;
+
+  li + li {
+    margin-top: .25rem;
+  }
+
+  > header {
+    position: relative;
+    margin-bottom: 2rem;
+  }
+
+  .aspect-ratio.sixteen-nine.lead {
+    @extend .border-radius;
+  }
+}
+
+body:not(.no-third-column) {
+  .page > header {
+    > .lead + .note-sm, 
+    > a.no-hover + .note-sm {
+      @media screen and (min-width: $break-point-dynamic) {
+        position: absolute;
+        right: -25rem;
+        width: 21rem;
+        bottom: 0;
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+// Blog post or page title
+.page-title, .post-title { margin-top: 0; }
+
+// Meta data line below post title
+.post-date {
+  @extend .h4;
+  display: flex;
+  justify-content: space-between;
+  margin-top: -.6rem;
+  height: 2rem;
+  margin-bottom: .85rem;
+  color: var(--gray);
+
+  > .ellipsis {
+    cursor: pointer;
+  }
+
+  [class^="icon-"] { 
+    display: inline-block; 
+    font-size: smaller;
+    margin-right: .25rem;
+  }
+}
+
+.img-wrapper > .hotfx-lightbox-slide {
+  display: none;
+}
+
+hotfx-lightbox::part(slide) {
+  display: inherit;
+  margin: 0 auto;
+}
+// >>>
+// <<< LINK
+clap-button {
+  margin-left: auto;
+  margin-right: auto;
+  --clap-button-color: var(--accent-color);
+}
+
+clap-button + p.message {
+  margin: -2rem auto 0;
+  max-width: 32rem;
+  font-size: smaller
+}
+
+hr.dingbat {
+  border: 0;
+  &:after{
+    content: "\2756";
+    display: block;
+    text-align: center;
+    font-size: 1.5rem;
+    color: var(--menu-text);
+  }
+}
+
+@media print {
+  .page {
+    margin-bottom: 0
+  }
+}
+// >>>
--- a/_sass/pooleparty/_read-more.pre.scss
+++ b/_sass/pooleparty/_read-more.pre.scss
@@ -0,0 +1,37 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// <<< link
+.read-more {
+  @extend .faded;
+  margin-top: 1.5rem;
+  margin-bottom: 3rem;
+  text-align: right;
+
+  &::after {
+    content: " \2192";
+    font-family: 'icomoon'!important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    font-size: smaller;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+// >>>
--- a/_sass/pooleparty/_related.pre.scss
+++ b/_sass/pooleparty/_related.pre.scss
@@ -0,0 +1,35 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// <<<<< INLINE
+.related-posts {
+  padding-left: 0;
+  list-style: none;
+  margin-bottom: 2rem;
+
+  > li,
+  > li + li {
+    margin-top: 1rem;
+  }
+}
+// >>>>>
+
+// <<< link
+.comments {
+  @media print {
+    display: none;
+  }
+}
+// >>>
--- a/_sass/pooleparty/_table.pre.scss
+++ b/_sass/pooleparty/_table.pre.scss
@@ -0,0 +1,167 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// <<<<< LINK
+table:not(.rouge-table) {
+  @extend .figure-base;
+  border-collapse: collapse;
+  border-radius: 0!important;
+  display: block;
+  margin-bottom: 1.5rem;
+
+  td, th {
+    @extend .color-transition;
+    padding: .5em .75em;
+
+    &:first-child {
+      padding-left: 1rem;
+      border-left: 1px solid var(--border-color);
+    }
+
+    &:last-child {
+      padding-right: 1rem;
+      border-right: 1px solid var(--border-color);
+    }
+  }
+
+  > *:first-child {
+    border-top: 1px solid var(--border-color);
+  }
+
+  > *:last-child {
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  thead {
+    @extend .color-transition;
+    background-color: var(--body-bg);
+  }
+
+  thead + tbody,
+  tbody + tbody,
+  tfoot {
+    @extend .color-transition;
+    border-top: 1px solid var(--border-color);
+  }
+
+  tbody tr:nth-child(even) td,
+  tbody tr:nth-child(even) th {
+    @extend .color-transition;
+    background-color: var(--body-bg);
+  }
+
+  tbody tr:nth-child(odd) td,
+  tbody tr:nth-child(odd) th {
+    @extend .color-transition;
+    background-color: var(--gray-bg);
+  }
+}
+
+// CSS only Responsive Tables
+// http://dbushell.com/2016/03/04/css-only-responsive-tables/
+// by David Bushell
+@mixin scroll-table() {
+  white-space: nowrap; // optional - looks better for small cell values
+}
+
+@mixin flip-table() {
+  display: flex;
+  overflow: hidden;
+
+  thead, tbody {
+    display: flex;
+  }
+
+  thead {
+    flex-shrink: 0;
+    min-width: min-content;
+    border-left: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
+
+    th {
+      padding-left: 1em;
+    }
+  }
+
+  tbody {
+    position: relative;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  tr {
+    display: flex;
+    flex-direction: column;
+    min-width: min-content;
+    flex-shrink: 0;
+
+    &:last-child {
+      border-right: 1px solid var(--border-color);
+      td {
+        padding-right: 1em;
+      }
+    }
+  }
+
+  td, th {
+    display: block;
+
+    &:first-child {
+      padding-left: .5em;
+      border-left: none;
+    }
+
+    &:last-child {
+      padding-right: .5em;
+      border-right: none;
+    }
+  }
+}
+
+table.stretch-table {
+  display: table;
+  width: 100% !important;
+  width: calc(100% + 2em) !important;
+  // @media screen and (max-width: $break-point-4) {
+  //   display: block!important;
+  //   @include scroll-table();
+  // }
+}
+
+table.scroll-table {
+  @include scroll-table();
+}
+
+table.flip-table {
+  @include flip-table();
+}
+
+@media screen and (max-width: $break-point-4) {
+  table.scroll-table-small {
+    @include scroll-table();
+  }
+
+  table.flip-table-small {
+    @include flip-table();
+  }
+}
+
+@media print {
+  table:not(.rouge-table) {
+    width: 100%!important;
+  }
+}
+// >>>>> LINK
--- a/_sass/pooleparty/_type.pre.scss
+++ b/_sass/pooleparty/_type.pre.scss
@@ -0,0 +1,260 @@
+// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+.heading {
+  font-family: var(--font-family-heading);
+  font-weight: var(--font-weight-heading);
+}
+
+.f1 {
+  @extend .heading;
+  font-size: 2rem;
+  line-height: 1.3;
+}
+
+.f2 {
+  @extend .heading;
+  font-size: 1.5rem;
+  line-height: 1.4;
+}
+
+.f3 {
+  @extend .heading;
+  font-size: 1.2em;
+  line-height: 1.5;
+}
+
+.f4 {
+  @extend .heading;
+  font-size: 1.08rem;
+  line-height: 1.6;
+}
+
+.f5 {
+  @extend .heading;
+  font-size: 1.04rem;
+  line-height: 1.7;
+}
+
+.f6 {
+  @extend .heading;
+  font-size: 1rem;
+}
+
+// <<< INLINE
+h1, .h1 { @extend .f1; }
+h2, .h2 { @extend .f2; }
+h3, .h3 { @extend .f3; }
+h4, .h4 { @extend .f4; }
+h5, .h5 { @extend .f5; }
+h6, .h6 { @extend .f6; }
+
+.content {
+  h1, .h1 {
+    > a { text-decoration: none; border-bottom: none; }
+    @media screen and (max-width: $break-point-1) {
+      font-size: 1.7rem;
+      line-height: 1.35;
+    }
+    @media screen and (min-width: $break-point-5) {
+      font-size: 2.4rem;
+      line-height: 1.25;
+    }
+  }
+}
+
+body:not(.no-large-headings) {
+  .content {
+    h1, .h1 {
+      @media screen and (min-width: $break-point-dynamic) {
+        width: calc(100% + 50vw - 32rem);
+        font-size: 3rem;
+        line-height: 1.2;
+      }
+      @media screen and (min-width: $break-point-font-large) {
+        font-size: 4rem;
+        line-height: 1.1;
+      }
+    }
+  }
+}
+
+h1, h2, h3, .h1, .h2, .h3 {
+  margin: 4rem 0 1rem;
+}
+
+h4, h5, h6, .h4, .h5, .h6 {
+  margin: 3rem 0 .5rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+
+  &.lead {
+    font-size: 1.2em;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    padding: 0 1rem;
+  }
+}
+
+ul, ol, dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ul, ol {
+  padding-left: 1.25rem;
+}
+
+hr, .hr {
+  @extend .color-transition;
+  border: 0;
+  margin: 1rem 0;
+  border-top: 1px solid var(--border-color);
+}
+
+.hr-after::after {
+  @extend .color-transition;
+  content: "";
+  display: block;
+  margin: 1rem 0;
+  border-top: 1px solid var(--border-color);
+}
+
+.hr-bottom {
+  @extend .color-transition;
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: .75rem;
+  margin-bottom: 1rem;
+}
+
+// >>>>>
+
+// <<<<< LINK
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .heading {
+  text-rendering: optimizeLegibility;
+}
+
+h1 + h2, .h1 + .h2, h1 + .h2, .h1 + h2,
+h2 + h3, .h2 + .h3, h2 + .h3, .h2 + h3,
+h3 + h4, .h3 + .h4, h3 + .h4, .h3 + h4,
+h4 + h5, .h4 + .h5, h4 + .h5, .h4 + h5,
+h5 + h6, .h5 + .h6, h5 + .h6, .h5 + h6 {
+  margin-top: 0;
+}
+
+dt, strong {
+  font-weight: var(--font-weight-bold);
+}
+
+dt:after{
+  content: " :";
+  color: var(--menu-text);
+}
+
+dd {
+  margin-bottom: .5rem;
+}
+
+abbr {
+  font-size: 85%;
+  font-weight: var(--font-weight-bold);
+  text-transform: uppercase;
+
+  &[title] {
+    cursor: help;
+    border-bottom: 1px dotted var(--border-color);
+  }
+}
+
+blockquote {
+  @extend .color-transition;
+  padding: .5rem 1rem;
+  margin: .8rem 0;
+  color: var(--gray);
+  border-left: .25rem solid var(--border-color);
+
+  &.lead {
+    font-size: 1.2em;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    border-left-width: 0.4rem;
+  }
+
+  > p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.heading {
+  font-weight: var(--font-weight-heading);
+}
+
+.fine, .smaller {
+  font-size: smaller;
+}
+
+.faded {
+  @extend .color-transition;
+  color: var(--gray);
+}
+
+.centered {
+  text-align: center;
+}
+
+h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
+  position: relative;
+
+  > .permalink {
+    text-decoration: none;
+    border: none;
+    opacity: 0;
+    transition: opacity 400ms;
+
+    @media print {
+      display: none;
+    }
+  }
+
+  &:hover > .permalink {
+    opacity: 0.5;
+  }
+
+  & > .permalink:hover,
+  & > .permalink:focus {
+    opacity: 1;
+    transition: opacity 200ms;
+  }
+}
+
+.content-hash::before {
+  content: '#'
+}
+.content-json::before {
+  content: '{}'
+}
+
+@media print {
+  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, dt {
+    page-break-inside: avoid;
+    break-inside: avoid-page;
+    page-break-after: avoid;
+    break-after: avoid-page;
+  }
+}
+// >>> LINK
--- a/_sass/pro/_dark-mode-dynamic-syntax.scss
+++ b/_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();
+  }
+}
--- a/_sass/pro/_dark-mode-dynamic.scss
+++ b/_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;
+  }
+}
--- a/_sass/pro/_dark-mode.scss
+++ b/_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();
+  }
+}
--- a/_sass/pro/_syntax-dark.scss
+++ b/_sass/pro/_syntax-dark.scss
@@ -0,0 +1,139 @@
+@mixin darkmode-syntax {
+  .highlight,
+  pre.highlight {
+    // background: #282c34;
+    color: #abb2bf;
+  }
+  // .highlight pre {
+  //   background: #282c34;
+  // }
+  .highlight .ge {
+    font-style: italic;
+  }
+  .highlight .gs {
+    font-weight: 700;
+  }
+  .highlight .ow {
+    font-weight: 700;
+  }
+  .highlight .n,
+  .highlight .nf,
+  .highlight .nn,
+  .highlight .o,
+  .highlight .p {
+    color: #abb2bf;
+  }
+  .highlight .c,
+  .highlight .c1,
+  .highlight .cm,
+  .highlight .cp,
+  .highlight .cs {
+    color: #5c6370;
+    font-style: italic;
+  }
+  .highlight .sr,
+  .highlight .ss {
+    color: #56b6c2;
+  }
+  .highlight .k,
+  .highlight .kc,
+  .highlight .kd,
+  .highlight .kn,
+  .highlight .kp,
+  .highlight .kr,
+  .highlight .kt {
+    color: #c678dd;
+  }
+  .highlight .l,
+  .highlight .ld,
+  .highlight .s,
+  .highlight .s1,
+  .highlight .s2,
+  .highlight .sb,
+  .highlight .sc,
+  .highlight .sd,
+  .highlight .se,
+  .highlight .sh,
+  .highlight .si,
+  .highlight .sx {
+    color: #98c379;
+  }
+  .highlight .nt,
+  .highlight .nx,
+  .highlight .vi {
+    color: #e06c75;
+  }
+  .highlight .il,
+  .highlight .m,
+  .highlight .mf,
+  .highlight .mh,
+  .highlight .mi,
+  .highlight .mo,
+  .highlight .na {
+    color: #d19a66;
+  }
+  .highlight .bp,
+  .highlight .nb,
+  .highlight .nc,
+  .highlight .nd,
+  .highlight .ne,
+  .highlight .ni,
+  .highlight .nl,
+  .highlight .no,
+  .highlight .nv,
+  .highlight .py,
+  .highlight .vc,
+  .highlight .vg {
+    color: #e5c07b;
+  }
+  // .highlight .err {
+  //   color: #fff;
+  //   background-color: #e05252;
+  // }
+  .highlight .gd {
+    color: #e05252;
+  }
+  .highlight .gi {
+    color: #43d08a;
+  }
+  .highlight .w {
+    color: #f8f8f2;
+  }
+  .highlight .cpf {
+    color: navy;
+  }
+  .highlight .gu {
+    color: #75715e;
+  }
+  .highlight .lineno {
+    color: #636d83;
+    user-select: none;
+  }
+  .highlight .ln {
+    color: #636d83;
+    user-select: none;
+  }
+  .highlight .ln:after {
+    content: " ";
+  }
+  .highlight .hll {
+    color: #abb2bf;
+    background-color: #3a3f4b;
+  }
+  .highlight .hl {
+    color: #abb2bf;
+    background-color: #3a3f4b;
+  }
+  .highlight .language-json .w + .s2 {
+    color: #e06c75;
+  }
+  .highlight .language-json .kc {
+    color: #56b6c2;
+  }
+}
+
+@media screen {
+  body.dark-mode {
+    @include darkmode-syntax();
+  }
+}
--- a/_sass/tippyjs/_mixins.scss
+++ b/_sass/tippyjs/_mixins.scss
@@ -0,0 +1,25 @@
+@mixin backdrop-transform-enter($placement) {
+  $scale: 1;
+  @if ($placement == 'top') {
+    transform: scale($scale) translate(-50%, -55%);
+  } @else if ($placement == 'bottom') {
+    transform: scale($scale) translate(-50%, -45%);
+  } @else if ($placement == 'left') {
+    transform: scale($scale) translate(-50%, -50%);
+  } @else if ($placement == 'right') {
+    transform: scale($scale) translate(-50%, -50%);
+  }
+}
+
+@mixin backdrop-transform-leave($placement) {
+  $scale: 0.2;
+  @if ($placement == 'top') {
+    transform: scale($scale) translate(-50%, -45%);
+  } @else if ($placement == 'bottom') {
+    transform: scale($scale) translate(-50%, 0);
+  } @else if ($placement == 'left') {
+    transform: scale($scale) translate(-75%, -50%);
+  } @else if ($placement == 'right') {
+    transform: scale($scale) translate(-25%, -50%);
+  }
+}
--- a/_sass/tippyjs/_vars.scss
+++ b/_sass/tippyjs/_vars.scss
@@ -0,0 +1,6 @@
+$namespace-prefix: '__NAMESPACE_PREFIX__' !default;
+$placements: 'top', 'bottom', 'left', 'right';
+$origins: bottom, top, right, left;
+$backdrop-origins: 0% 25%, 0% -50%, 50% 0%, -50% 0%;
+$backdrop-border-radii: 40% 40% 0 0, 0 0 30% 30%, 50% 0 0 50%, 0 50% 50% 0;
+$arrow-size: 16px;
--- a/_sass/tippyjs/animations/fade.scss
+++ b/_sass/tippyjs/animations/fade.scss
@@ -0,0 +1,9 @@
+@use '../_mixins.scss';
+@forward '../_vars.scss' show $namespace-prefix;
+@use '../_vars.scss';
+
+.#{vars.$namespace-prefix}-box {
+  &[data-animation='fade'][data-state='hidden'] {
+    opacity: 0;
+  }
+}
--- a/_sass/tippyjs/index.scss
+++ b/_sass/tippyjs/index.scss
@@ -0,0 +1,91 @@
+@forward '_vars.scss' show $namespace-prefix;
+@use '_vars.scss';
+@forward 'animations/fade.scss' show $namespace-prefix;
+
+$color: #333;
+
+[data-#{vars.$namespace-prefix}-root] {
+  max-width: calc(100vw - 10px);
+}
+
+.#{vars.$namespace-prefix}-box {
+  position: relative;
+  background-color: $color;
+  color: white;
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 1.4;
+  outline: 0;
+  transition-property: transform, visibility, opacity;
+
+  &[data-placement^='top'] > .#{vars.$namespace-prefix}-arrow {
+    bottom: 0;
+
+    &::before {
+      bottom: -7px;
+      left: 0;
+      border-width: 8px 8px 0;
+      border-top-color: initial;
+      transform-origin: center top;
+    }
+  }
+
+  &[data-placement^='bottom'] > .#{vars.$namespace-prefix}-arrow {
+    top: 0;
+
+    &::before {
+      top: -7px;
+      left: 0;
+      border-width: 0 8px 8px;
+      border-bottom-color: initial;
+      transform-origin: center bottom;
+    }
+  }
+
+  &[data-placement^='left'] > .#{vars.$namespace-prefix}-arrow {
+    right: 0;
+
+    &::before {
+      border-width: 8px 0 8px 8px;
+      border-left-color: initial;
+      right: -7px;
+      transform-origin: center left;
+    }
+  }
+
+  &[data-placement^='right'] > .#{vars.$namespace-prefix}-arrow {
+    left: 0;
+
+    &::before {
+      left: -7px;
+      border-width: 8px 8px 8px 0;
+      border-right-color: initial;
+      transform-origin: center right;
+    }
+  }
+
+  &[data-inertia][data-state='visible'] {
+    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
+  }
+}
+
+.#{vars.$namespace-prefix}-arrow {
+  & {
+    width: vars.$arrow-size;
+    height: vars.$arrow-size;
+    color: $color;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    border-color: transparent;
+    border-style: solid;
+  }
+}
+
+.#{vars.$namespace-prefix}-content {
+  position: relative;
+  padding: 5px 9px;
+  z-index: 1;
+}
				`@@ -0,0 +1 @@`
				`// This is deprecated. Modify CSS Custom Properties instead.`