a new start

2025-10-25 12:39:30 +02:00
commit c97cadef78
726 changed files with 454051 additions and 0 deletions
--- 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;
+}