valknar/v1.pivoine.art
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a new start

Browse Source
This commit is contained in:
Sebastian Krüger
2025-10-25 12:39:30 +02:00
commit c97cadef78
726 changed files with 454051 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
_sass/pivoine/__inline__/_avatar.scss Normal file
View File

@@ -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%;
}

78
_sass/pivoine/__inline__/_base.scss Normal file
View File

@@ -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;
}
}
}
}

25
_sass/pivoine/__inline__/_break-layout.scss Normal file
View File

@@ -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/>.

69
_sass/pivoine/__inline__/_content.scss Normal file
View File

@@ -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;
}
}

25
_sass/pivoine/__inline__/_footer.scss Normal file
View File

@@ -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/>.

37
_sass/pivoine/__inline__/_images.scss Normal file
View File

@@ -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);
}
}

25
_sass/pivoine/__inline__/_katex.scss Normal file
View File

@@ -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/>.

60
_sass/pivoine/__inline__/_links.scss Normal file
View File

@@ -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); }
}

25
_sass/pivoine/__inline__/_mark-external.scss Normal file
View File

@@ -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/>.

96
_sass/pivoine/__inline__/_menu.scss Normal file
View File

@@ -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;
}

36
_sass/pivoine/__inline__/_search.scss Normal file
View File

@@ -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 {
}
}

184
_sass/pivoine/__inline__/_sidebar.scss Normal file
View File

@@ -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 }
}
}

61
_sass/pivoine/__inline__/_social.scss Normal file
View File

@@ -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;
}
}
}

25
_sass/pivoine/__inline__/_sound.scss Normal file
View File

@@ -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/>.

55
_sass/pivoine/__inline__/_toc.scss Normal file
View File

@@ -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});
}
}

78
_sass/pivoine/__inline__/_utilities.scss Normal file
View File

@@ -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;
}

36
_sass/pivoine/__link__/_avatar.scss Normal file
View File

@@ -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;
}

48
_sass/pivoine/__link__/_base.scss Normal file
View File

@@ -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;
}

100
_sass/pivoine/__link__/_break-layout.scss Normal file
View File

@@ -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});
}
}
}

39
_sass/pivoine/__link__/_content.scss Normal file
View File

@@ -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;
}
}

45
_sass/pivoine/__link__/_footer.scss Normal file
View File

@@ -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;
}
}

72
_sass/pivoine/__link__/_images.scss Normal file
View File

@@ -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%;
}
}

32
_sass/pivoine/__link__/_katex.scss Normal file
View File

@@ -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;
}
}

64
_sass/pivoine/__link__/_links.scss Normal file
View File

@@ -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%;
}
}

46
_sass/pivoine/__link__/_mark-external.scss Normal file
View File

@@ -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);
}
}
}

97
_sass/pivoine/__link__/_menu.scss Normal file
View File

@@ -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; }
}

82
_sass/pivoine/__link__/_search.scss Normal file
View File

@@ -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;
}
}
}

127
_sass/pivoine/__link__/_sidebar.scss Normal file
View File

@@ -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);
}
}

33
_sass/pivoine/__link__/_social.scss Normal file
View File

@@ -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;
}
}

54
_sass/pivoine/__link__/_sound.scss Normal file
View File

@@ -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;
}
}

55
_sass/pivoine/__link__/_toc.scss Normal file
View File

@@ -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);
}
}
}

87
_sass/pivoine/__link__/_utilities.scss Normal file
View File

@@ -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;
}

45
_sass/pivoine/_avatar.pre.scss Normal file
View File

@@ -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%;
}
// >>>

92
_sass/pivoine/_base.pre.scss Normal file
View File

@@ -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;
}
// >>>

91
_sass/pivoine/_break-layout.pre.scss Normal file
View File

@@ -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});
}
}
}
// >>>

64
_sass/pivoine/_content.pre.scss Normal file
View File

@@ -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;
}
}

36
_sass/pivoine/_footer.pre.scss Normal file
View File

@@ -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;
}
}
// >>>>>

63
_sass/pivoine/_images.pre.scss Normal file
View File

@@ -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%;
}
}
// >>>

23
_sass/pivoine/_katex.pre.scss Normal file
View File

@@ -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;
}
}
// >>>

79
_sass/pivoine/_links.pre.scss Normal file
View File

@@ -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%;
}
}
// >>>

37
_sass/pivoine/_mark-external.pre.scss Normal file
View File

@@ -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);
}
}
}
// >>>

143
_sass/pivoine/_menu.pre.scss Normal file
View File

@@ -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; }
}
// >>>

74
_sass/pivoine/_search.pre.scss Normal file
View File

@@ -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;
}
}
}
// >>>

225
_sass/pivoine/_sidebar.pre.scss Normal file
View File

@@ -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);
}
}
// >>>

58
_sass/pivoine/_social.pre.scss Normal file
View File

@@ -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;
}
}
// >>>

45
_sass/pivoine/_sound.pre.scss Normal file
View File

@@ -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;
}
}
// >>>>>

65
_sass/pivoine/_toc.pre.scss Normal file
View File

@@ -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});
}
}
// >>>

79
_sass/pivoine/_utilities.pre.scss Normal file
View File

@@ -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;
}