@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&family=Roboto+Slab&display=swap');
@font-face {
font-family: ConsolasNF;
src: url(/webfonts/consolas-nf.ttf);
}
* {
font-family: Quicksand, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.navbar-item .icon {
margin-right: 0.25em;
}
.navbar-dropdown {
max-height: 25em;
overflow: auto;
}
.navbar-end .navbar-dropdown a.navbar-item.h1,
.navbar-end .navbar-dropdown a.navbar-item.h1 * {
font-family: "Roboto Slab", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1rem;
font-weight: bold;
}
.navbar-end .navbar-dropdown a.navbar-item.h2 {
font-weight: bold;
}
.navbar-end .navbar-dropdown a.navbar-item.h4 {
font-style: italic;
padding-left: 2rem;
}
.navbar-end .navbar-dropdown a.navbar-item.h4,
.navbar-end .navbar-dropdown a.navbar-item.h5,
.navbar-end .navbar-dropdown a.navbar-item.h6 {
display: none;
}
h1, h2, h3 {
font-family: "Roboto Slab", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.content h1 {
padding-bottom: 0.5em;
margin-bottom: 0.5em;
border-bottom: 2px solid #eee;
}
.content h1.title {
margin-bottom: 0.5em !important;
display: flex;
}
.content h1.title i.logo,
nav i.logo {
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-image: url(/img/logo.svg);
mask-image: url(/img/logo.svg);
}
.content h1.title i.logo {
height: 1.4em;
width: 1.4em;
margin: -0.1em 0.3em -0.2em -0.2em;
background-color: rgba(0, 0, 0, 1);
}
nav i.logo {
height: 2.2em;
width: 2.2em;
margin: 0;
display: block;
background-color: rgba(0, 0, 0, 0.85);
}
@media (prefers-color-scheme: dark) {
h1.title i.logo {
background-color: rgba(255, 255, 255, 1);
}
nav i.logo {
background-color: hsla(221, 14%, 71%, 0.85);
}
}
.content h2 {
padding-bottom: 0.5714em;
margin-bottom: 0.5714em;
border-bottom: 1px solid #eee;
}
.content h2:not(:first-child) {
margin-top: 2em;
}
img.emoji {
height: 1.1em;
width: 1.1em;
position: relative;
top: 0.18em;
margin-right: 0.2em;
}
.content h1 img.emoji:first-of-type {
height: 2.2em;
width: 2.2em;
display: block;
top: 0;
margin-bottom: 1em;
}
.content h2 > a.anchor::before,
.content h3 > a.anchor::before,
.content h4 > a.anchor::before,
.content h5 > a.anchor::before,
.content h6 > a.anchor::before {
position: absolute;
left: -1.6em;
font-size: 0.8em;
font-family: var(--fa-style-family, "Font Awesome 6 Free");
font-weight: var(--fa-style, 900);
font-style: normal;
font-variant: normal;
margin-top: 0.2em;
content: "";
color: #ddd;
cursor: pointer;
padding-right: 0.4em;
visibility: hidden;
}
.content h2:hover > a.anchor::before,
.content h3:hover > a.anchor::before,
.content h4:hover > a.anchor::before,
.content h5:hover > a.anchor::before,
.content h6:hover > a.anchor::before {
visibility: visible;
}
.content h2 > a.anchor:hover::before,
.content h3 > a.anchor:hover::before,
.content h4 > a.anchor:hover::before,
.content h5 > a.anchor:hover::before,
.content h6 > a.anchor:hover::before {
color: #363636;
}
form {
margin-top: 0.75em;
}
code, pre, code *, pre *, .is-family-monospace, .is-family-code {
font-family: ConsolasNF, monospace !important;
}
code {
background-color: rgba(200, 200, 200, 0.2);
border-radius: 0.15em
}
.content a {
font-weight: 500;
}
.content blockquote {
background-color: rgba(200, 200, 200, 0.2);
border-left: 5px solid rgba(150, 150, 150, 0.25);
}
.content blockquote.callout {
padding-left: 4em;
}
.content blockquote.callout::before {
position: absolute;
font-size: 1.2em;
margin-top: -0.1em;
margin-left: -2.2em;
}
.content blockquote.blocked,
.content blockquote.broken {
border-left: 5px solid hsl(0, 80%, 44%);
background-color: hsl(0, 73%, 94%);
}
.content blockquote.warning,
.content blockquote.caution {
border-left: 5px solid hsl(30, 70%, 50%);
background-color: hsl(30, 77%, 92%);
}
.content blockquote.note,
.content blockquote.tip {
border-left: 5px solid hsl(50, 90%, 45%);
background-color: hsl(50, 78%, 92%);
}
.content blockquote.complete,
.content blockquote.finished,
.content blockquote.approved {
border-left: 5px solid hsl(80, 70%, 37%);
background-color: hsl(80, 47%, 93%);
}
.content blockquote.info {
border-left: 5px solid hsl(210, 60%, 45%);
background-color: hsl(210, 65%, 93%);
}
.content blockquote.question {
border-left: 5px solid hsl(275, 60%, 45%);
background-color: hsl(275, 70%, 94%);
}
.content blockquote.todo {
border-left: 5px solid hsl(40, 80%, 35%);
background-color: hsl(40, 73%, 93%);
}
.content blockquote.blocked::before,
.content blockquote.broken::before {
content: "⛔";
}
.content blockquote.warning::before,
.content blockquote.caution::before {
content: "⚠️";
}
.content blockquote.note::before,
.content blockquote.tip::before {
content: "💡";
}
.content blockquote.complete::before,
.content blockquote.finished::before,
.content blockquote.approved::before {
content: "✅";
}
.content blockquote.info::before {
content: "ℹ️";
}
.content blockquote.question::before {
content: "❓";
}
.content blockquote.todo::before {
content: "🚧";
}
.content blockquote.image::before,
.content blockquote.images::before {
content: "🖼️";
}
.content blockquote.screenshot::before,
.content blockquote.screenshots::before {
content: "🖥️";
}
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
padding-right: 1.5em;
}
.content blockquote.image img,
.content blockquote.images img,
.content blockquote.screenshot img,
.content blockquote.screenshots img {
height: auto;
width: auto;
display: block;
}
.content blockquote.image details > p:first-of-type > img:first-child,
.content blockquote.images details > p:first-of-type > img:first-child,
.content blockquote.screenshot details > p:first-of-type > img:first-child,
.content blockquote.screenshots details > p:first-of-type > img:first-child {
margin-top: 1em;
}
.content dd,
.content details {
margin-bottom: 1em;
margin-left: 2em;
}
details > summary {
list-style: none;
cursor: pointer;
}
details > summary:first-of-type {
list-style: outside disclosure-closed;
list-style: none;
}
details > summary::marker,
details > summary::-webkit-details-marker {
display: none;
}
details > summary::marker {
content: "";
}
details > summary::before {
position: absolute;
margin-top: -0.12em;
margin-left: -1.3em;
font-size: 1.2em;
font-family: var(--fa-style-family, "Font Awesome 6 Free");
font-weight: var(--fa-style, 900);
font-style: normal;
font-variant: normal;
content: "⯈";
color: rgba(54, 54, 54, 1);
padding-right: 0.4em;
transition: all 0.25s;
}
details[open] > summary::before {
margin-top: -0.35em;
margin-left: -1.05em;
padding-top: 0.4em;
padding-right: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
details > summary:hover::before {
color: rgba(54, 54, 54, 0.5) !important;
}
details.heading-collapse.h2 {
margin-top: 3.5em;
}
details.heading-collapse.h2 + details.heading-collapse.h2 {
margin-top: 2.5em;
}
details[open].heading-collapse.h2 + details.heading-collapse.h2 {
margin-top: 3.5em;
}
details.callout-collapse,
details.heading-collapse {
margin-left: 0;
}
details.callout-collapse {
margin-bottom: 0;
}
details[open].callout-collapse {
margin-bottom: 1em;
}
.content blockquote details[open].callout-collapse {
margin-bottom: 0;
}
details.callout-collapse > summary::before,
details.heading-collapse > summary::before {
right: 0;
padding: 0;
margin: 0;
content: "";
color: rgba(54, 54, 54, 1);
}
details.heading-collapse > summary::before {
font-size: 2.1em;
margin-top: -0.19em;
}
details.callout-collapse > summary::before {
margin-top: -0.04em;
right: 1.5em;
}
details[open].callout-collapse > summary::before,
details[open].heading-collapse > summary::before {
padding: 0;
margin: 0;
color: rgba(54, 54, 54, 0);
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
transform: rotate(-180deg);
}
details[open].heading-collapse > summary::before {
margin-top: -0.27em;
}
details[open].callout-collapse > summary::before {
margin-top: -0.15em;
}
li::marker {
color: #363636;
}
section.footnotes {
margin-top: 3em;
padding-top: 1em;
border-top: 5px solid #eee;
}