header {
position: fixed;
top: 0px;
width: 100%;
padding: 0 !important;
height: 2.5rem;
line-height: 2.5rem;
background-color: white;
border-bottom: 2px solid #dadada;
}
header .header-container {
display: flex;
justify-content: space-between;
gap: 1rem;
margin: 0 auto;
align-items: center;
}
header .header-title {
display: flex;
gap: 1rem;
}
header .header-links {
display: flex;
padding-right: 2rem;
}
.title {
height: 4rem;
margin-bottom: 2rem;
font-size: 1.3rem;
}
.title code {
padding: 0.2rem;
}
.title-name code {
color: var(--primary);
}
.title-version {
font-size: 0.8rem;
color: white;
color: #2c2c2c;
}
main {
min-width: 0;
}
main > aside nav {
width: 100%;
padding-bottom: var(--block-spacing-vertical);
}
main > aside nav.closed-on-mobile details {
display: none;
}
@media (min-width: 992px) {
body > main {
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
}
main > aside nav {
position: fixed;
width: 280px;
max-height: calc(100vh - 5.5rem);
overflow-x: hidden;
overflow-y: auto;
}
main > aside nav.closed-on-mobile details {
display: block;
}
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--primary: #b45ea4;
--primary-hover: #d0abcf;
--primary-focus: rgba(180, 94, 164, 0.25);
--primary-inverse: #fff;
}
}
h1,
h2,
p {
--typography-spacing-vertical: 1.25rem;
}
pre code {
font-size: 0.9rem;
}
p,
pre,
code,
h1,
h2,
h3,
h4,
h5,
h6 {
cursor: auto;
}
pre code.hljs {
display: block;
overflow-x: auto;
padding: 1em;
}
code.hljs {
padding: 3px 5px;
}
:root {
--color-death-star: #b6b18b;
--color-vader: #eb3c54;
--color-c3po: #e7ce56;
--color-skywalker: #ee7c2b;
--color-kenobi: #4fb4d7;
--color-yoda: #78bb65;
--color-windu: #b45ea4;
--hljs-background: #1c1d21;
--hljs-color: #c0c5ce;
--code-dotcommand: var(--color-skywalker);
--code-variable: var(--color-kenobi);
--code-keyword: var(--color-windu);
--code-number: var(--color-c3po);
--code-type: var(--color-skywalker);
--code-builtin: var(--color-c3po);
--code-string: var(--color-kenobi);
--code-comment: var(--color-yoda);
--code-prompt: #7c7c7c;
}
code {
--code-color: #cecece;
--code-color: #2c2c2c;
}
a,
a code {
color: var(--color-kenobi);
}
.hljs {
background: var(--hljs-background);
color: var(--hljs-color);
}
.hljs-prompt {
color: var(--code-prompt);
font-style: italic;
user-select: none;
}
.hljs-dotcommand {
color: var(--code-dotcommand);
}
.hljs-variable {
color: var(--code-variable);
}
.hljs-number {
color: var(--code-number);
}
.hljs-built_in {
color: var(--code-builtin);
}
.hljs-string {
color: var(--code-string);
}
.hljs-comment {
color: var(--code-comment);
}
.hljs-keyword {
color: var(--code-keyword);
}
.hljs-type {
color: var(--code-type);
}
.hljs-quote {
color: var(--color-death-star);
}
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
color: var(--color-vader);
}
.hljs-literal,
.hljs-params,
.hljs-meta,
.hljs-link {
color: var(--color-c3po);
}
.hljs-attribute {
color: var(--color-skywalker);
}
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
color: var(--color-kenobi);
}
.hljs-title,
.hljs-section {
color: var(--color-yoda);
}
.hljs-selector-tag {
color: var(--code-keyword);
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}