0c046a561b
This PR changes how the sidebar works on the docs site. ## What's the problem? Previously, you couldn't reach the bottom of the sidebar on some screens - unless you scroll to the very bottom of the main content. Some of our pages are [very long](https://canary.tldraw.dev/gen/editor/Editor-class), so this isn't practical.  ## How are we fixing it? This PR makes the sidebar scroll separately from the main content. It's less fancy and less pretty :/ But it's usable. Maybe we could make it sleeker somehow, but this works at least.  ## Admin ### Change Type - [x] `documentation` — Changes to the documentation only[^2] [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. On the docs site, make your browser window short so that you can't see the whole sidebar. 2. Make sure that you can scroll down to the bottom on the sidebar, separately from the rest of the page. ### Release Notes - Documentation: Fixed the sidebar being unscrollable on some short screens.
931 lines
15 KiB
CSS
931 lines
15 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto+Mono:wght@400;700&display=swap');
|
|
|
|
:root {
|
|
--font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
|
Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
|
'Segoe UI Symbol', 'Noto Color Emoji';
|
|
--font-heading: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
|
Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
|
'Segoe UI Symbol', 'Noto Color Emoji';
|
|
--font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono',
|
|
'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono',
|
|
'Courier New', monospace;
|
|
|
|
--color-tint-1: rgba(144, 144, 144, 0.08);
|
|
--color-tint-2: rgba(144, 144, 144, 0.15);
|
|
--color-tint-3: rgba(144, 144, 144, 0.3);
|
|
--color-tint-4: rgba(144, 144, 144, 0.5);
|
|
--color-tint-5: rgb(144, 144, 144);
|
|
--color-tint-6: rgb(81, 81, 81);
|
|
|
|
/* Light theme */
|
|
--color-text: #2d2d2d;
|
|
--color-background: #ffffff;
|
|
--color-accent: #2f80ed;
|
|
|
|
--shadow-small: 0px 0px 16px -2px rgba(0, 0, 0, 0.12), 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
|
|
--shadow-big: 0px 0px 16px -2px rgba(0, 0, 0, 0.24), 0px 0px 4px 0px rgba(0, 0, 0, 0.24);
|
|
|
|
/* Code colors */
|
|
--hl: #4e484e;
|
|
--hl-1: rgb(54, 59, 69);
|
|
--hl-2: rgb(144, 81, 188);
|
|
--hl-3: rgb(178, 66, 69);
|
|
--hl-4: rgb(69, 141, 155);
|
|
--hl-5: rgb(100, 144, 65);
|
|
--hl-6: rgb(179, 108, 50);
|
|
--hl-7: rgb(73, 131, 216);
|
|
--hl-8: rgb(180, 133, 64);
|
|
}
|
|
|
|
[data-theme='dark'] {
|
|
/* Dark theme */
|
|
--color-text: #fff;
|
|
--color-background: #1d1d1d;
|
|
--color-accent: #f3c14b;
|
|
|
|
--color-tint-6: rgb(186, 186, 186);
|
|
|
|
--shadow-small: 0px 0px 16px -2px rgba(0, 0, 0, 0.52), 0px 0px 4px 0px rgba(0, 0, 0, 0.62);
|
|
--shadow-big: 0px 0px 16px -2px rgba(0, 0, 0, 0.54), 0px 0px 4px 0px rgba(0, 0, 0, 0.54);
|
|
|
|
/* Code colors */
|
|
--hl: #c8c5f1;
|
|
--hl-1: #5c6370;
|
|
--hl-2: #c678dd;
|
|
--hl-3: #e06c75;
|
|
--hl-4: #56b6c2;
|
|
--hl-5: #98c379;
|
|
--hl-6: #d19a66;
|
|
--hl-7: #61aeee;
|
|
--hl-8: #e6c07b;
|
|
}
|
|
|
|
/* @media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--color-text: #ffffff;
|
|
--color-background: #1d1d1d;
|
|
}
|
|
} */
|
|
|
|
/* @media (prefers-color-scheme: dark) {
|
|
html {
|
|
color-scheme: dark;
|
|
}
|
|
} */
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
html {
|
|
background-color: var(--color-background);
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
font-weight: 400;
|
|
color: var(--color-text);
|
|
background-color: var(--color-background);
|
|
transition: background-color 0.2s ease-in-out;
|
|
}
|
|
|
|
.layout {
|
|
display: grid;
|
|
grid-template-columns: 212px 1fr;
|
|
grid-template-rows: 1fr;
|
|
width: 100%;
|
|
max-width: 984px;
|
|
column-gap: 28px;
|
|
row-gap: 0px;
|
|
margin: 0px auto;
|
|
}
|
|
|
|
.icon-button {
|
|
display: block;
|
|
position: relative;
|
|
height: 40px;
|
|
width: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: none;
|
|
border: none;
|
|
--bg: transparent;
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.icon-button::after {
|
|
position: absolute;
|
|
display: block;
|
|
content: '';
|
|
inset: 4px;
|
|
background-color: var(--bg);
|
|
border-radius: 4px;
|
|
transition: background-color 0.1s ease-in-out;
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.icon-button:hover {
|
|
--bg: var(--color-tint-1);
|
|
color: var(--color-accent);
|
|
transition: background-color 0.2s ease-in-out;
|
|
transition-delay: 0.1s;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
flex-shrink: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
background-color: currentColor;
|
|
}
|
|
|
|
.lockup {
|
|
position: relative;
|
|
width: calc(71px * 4);
|
|
height: calc(18px * 4);
|
|
background: currentColor;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.lockup {
|
|
width: calc(71px * 3);
|
|
height: calc(18px * 3);
|
|
}
|
|
|
|
.lockup + h2 {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
.article {
|
|
padding: 56px 16px 120px 16px;
|
|
font-weight: 400;
|
|
max-width: 100%;
|
|
overflow-x: hidden;
|
|
overflow-y: visible;
|
|
}
|
|
|
|
.article__details {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
margin: 40px 0px;
|
|
gap: 16px;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.article__details__edit {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 14px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.article__details__timestamp {
|
|
font-size: 14px;
|
|
color: var(--color-tint-5);
|
|
text-align: right;
|
|
}
|
|
|
|
/* Prev / Next Links */
|
|
|
|
.article__links {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.article__links .icon {
|
|
display: inline-block;
|
|
}
|
|
|
|
.article__links__link {
|
|
display: block;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border: 1px solid var(--color-accent);
|
|
padding: 10px 16px;
|
|
border-radius: 4px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.article__links__prev {
|
|
grid-column: 1;
|
|
justify-self: flex-start;
|
|
}
|
|
|
|
.article__links__next {
|
|
grid-column: 2;
|
|
justify-self: flex-end;
|
|
}
|
|
|
|
/* Common Styles */
|
|
|
|
.article > * {
|
|
content-visibility: auto;
|
|
}
|
|
|
|
.article > h2,
|
|
.article > h3,
|
|
.article > h4,
|
|
.article > h5,
|
|
.article > h6 {
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.article > h2 > a,
|
|
.article > h3 > a,
|
|
.article > h4 > a,
|
|
.article > h5 > a,
|
|
.article > h6 > a {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.article h1 {
|
|
font-size: 2.5em;
|
|
margin-bottom: 32px;
|
|
line-height: 1.15;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.article h2 {
|
|
margin: 48px 0px 40px 0px;
|
|
font-size: 1.8em;
|
|
/* margin: 24px 0px 40px 0px; */
|
|
}
|
|
|
|
.article h5 {
|
|
text-transform: uppercase;
|
|
color: var(--color-tint-5);
|
|
letter-spacing: 0.1em;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.article details {
|
|
margin: 32px 0px;
|
|
}
|
|
|
|
.article details > summary {
|
|
display: flex;
|
|
align-items: center;
|
|
list-style: none;
|
|
}
|
|
|
|
.article details > summary::before {
|
|
font-size: 10px;
|
|
content: '▶';
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.article details[open] > summary::before {
|
|
content: '▼';
|
|
}
|
|
|
|
.article p.article__small {
|
|
margin: 8px 0px 32px 0px;
|
|
}
|
|
|
|
.article p.article__small small {
|
|
font-size: 14px;
|
|
color: var(--color-tint-6);
|
|
}
|
|
|
|
.article a {
|
|
color: var(--color-accent);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.article a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.article > p {
|
|
margin: 32px 0px;
|
|
}
|
|
|
|
.article > blockquote {
|
|
max-width: 100%;
|
|
margin: 32px 0px;
|
|
padding-left: 16px;
|
|
border-left: 2px solid var(--color-tint-2);
|
|
}
|
|
|
|
.article pre {
|
|
max-width: 100%;
|
|
margin: 32px 0px;
|
|
padding: 16px;
|
|
background-color: var(--color-tint-1);
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.article code {
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.article p > code,
|
|
.article td > code {
|
|
background-color: var(--color-tint-1);
|
|
font-size: 15px;
|
|
padding: 2px 4px;
|
|
margin: 0px -2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.article pre > code {
|
|
font-size: 14px;
|
|
width: 100%;
|
|
tab-size: 16px;
|
|
}
|
|
|
|
.article ol {
|
|
margin: 24px 0px;
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.article ul {
|
|
margin: 24px 0px;
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.article li {
|
|
margin: 8px 0px;
|
|
}
|
|
|
|
.article hr {
|
|
margin: 52px 0px;
|
|
padding: 0px 4px;
|
|
height: 1px;
|
|
width: calc(100% - 8px);
|
|
background-color: var(--color-tint-2);
|
|
border: none;
|
|
}
|
|
|
|
.article table {
|
|
margin: 32px 0px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
text-align: left;
|
|
border: 1px solid var(--color-tint-2);
|
|
}
|
|
|
|
.article table th {
|
|
padding: 8px 16px;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
color: var(--color-tint-5);
|
|
letter-spacing: 0.1em;
|
|
border-bottom: 1px solid var(--color-tint-2);
|
|
}
|
|
|
|
.article td:nth-of-type(1) {
|
|
width: 25%;
|
|
max-width: 50%;
|
|
}
|
|
|
|
.article table td {
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
.article table td:nth-of-type(1) {
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.artcle__image {
|
|
display: block;
|
|
max-width: 100%;
|
|
margin: 24px 0px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.artcle__image > img {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.article__caption {
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
width: 100%;
|
|
}
|
|
|
|
.breadcrumb {
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--color-tint-6);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.breadcrumb a {
|
|
color: inherit;
|
|
}
|
|
|
|
/* --------------------- Sidebar -------------------- */
|
|
|
|
.sidebar {
|
|
position: relative;
|
|
position: sticky;
|
|
padding: 8px;
|
|
align-self: start;
|
|
top: 0px;
|
|
max-height: calc(100vh);
|
|
z-index: 1000;
|
|
overflow-y: auto;
|
|
padding-top: 40px;
|
|
}
|
|
|
|
.sidebar .sidebar__list h4 {
|
|
padding: 12px;
|
|
}
|
|
|
|
.sidebar a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sidebar hr {
|
|
margin: 11px 4px;
|
|
padding: 0px 4px;
|
|
height: 1px;
|
|
width: calc(100% - 8px);
|
|
background-color: var(--color-tint-2);
|
|
border: none;
|
|
}
|
|
|
|
.sidebar__list {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.sidebar__link {
|
|
position: relative;
|
|
height: 40px;
|
|
padding: 0px 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
color: var(--color-text);
|
|
--bg: transparent;
|
|
margin-top: -4px;
|
|
margin-bottom: -4px;
|
|
}
|
|
|
|
.sidebar__link:nth-of-type(1) {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.sidebar__link:nth-last-of-type(1) {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.sidebar__link[data-active='true'] {
|
|
--bg: var(--color-tint-2);
|
|
}
|
|
|
|
.sidebar__link::after {
|
|
position: absolute;
|
|
display: block;
|
|
content: '';
|
|
inset: 4px;
|
|
background-color: var(--bg);
|
|
border-radius: 4px;
|
|
transition: background-color 0.2s ease-in-out;
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
.sidebar__section__title {
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--color-tint-5);
|
|
}
|
|
|
|
.sidebar__sections__list > *:nth-of-type(1) {
|
|
padding-top: 12px;
|
|
}
|
|
|
|
.sidebar__sections__list > *:nth-last-of-type(n + 2) .sidebar__list {
|
|
padding-bottom: 12px;
|
|
margin-bottom: 12px;
|
|
border-bottom: 1px solid var(--color-tint-2);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.sidebar__link:hover {
|
|
color: var(--color-accent);
|
|
transition: background-color 0.12s ease-in-out;
|
|
transition-delay: 0.1s;
|
|
}
|
|
|
|
.sidebar__link:not([data-active='true']):hover {
|
|
--bg: var(--color-tint-1);
|
|
}
|
|
}
|
|
|
|
.sidebar__footer {
|
|
padding: 12px;
|
|
padding-top: 44px;
|
|
font-size: 13px;
|
|
color: var(--color-tint-3);
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: color 0.2s ease-in-out;
|
|
transition-delay: 0s;
|
|
gap: 8px;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.sidebar__footer:hover {
|
|
color: var(--color-text);
|
|
transition: color 0.3s ease-in-out;
|
|
transition-delay: 0.2s;
|
|
}
|
|
}
|
|
|
|
.sidebar__lockup {
|
|
position: relative;
|
|
width: calc(71px * 1.3);
|
|
height: calc(18px * 1.3);
|
|
background: currentColor;
|
|
}
|
|
|
|
.sidebar__buttons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.sidebar__buttons__socials {
|
|
display: flex;
|
|
}
|
|
|
|
.sidebar__close {
|
|
display: none;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
color: var(--color-text);
|
|
position: fixed;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
padding: 8px;
|
|
font-size: 14px;
|
|
gap: 2px;
|
|
}
|
|
|
|
.menu__button {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 500;
|
|
bottom: 8px;
|
|
right: 8px;
|
|
background-color: var(--color-text);
|
|
border-radius: 6px;
|
|
color: var(--color-background);
|
|
box-shadow: var(--shadow-small);
|
|
}
|
|
|
|
/* --------------------- Search --------------------- */
|
|
|
|
.search__wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.search {
|
|
position: relative;
|
|
z-index: 200;
|
|
height: 40px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.search__icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: 12px;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.search__input {
|
|
position: relative;
|
|
padding-left: 28px;
|
|
height: 100%;
|
|
width: 100%;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--color-tint-3);
|
|
background-color: var(--color-background);
|
|
font-family: var(--font-body);
|
|
font-size: 14px;
|
|
background-color: none;
|
|
background: none;
|
|
}
|
|
|
|
.search__input:disabled {
|
|
background-color: var(--color-tint-1);
|
|
color: var(--color-tint-5);
|
|
}
|
|
|
|
.search__input::placeholder {
|
|
color: var(--color-tint-4);
|
|
}
|
|
|
|
.search__input:focus {
|
|
outline: none;
|
|
border-color: var(--color-text);
|
|
}
|
|
|
|
.search__results__wrapper {
|
|
position: relative;
|
|
height: 0px;
|
|
width: 100%;
|
|
z-index: 100;
|
|
}
|
|
|
|
.search__results {
|
|
padding: 0px;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
background-color: var(--color-background);
|
|
width: 320px;
|
|
border-radius: 8px;
|
|
box-shadow: var(--shadow-big);
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.search__results__list {
|
|
list-style-type: none;
|
|
padding: 4px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.search__results__article {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
padding: 12px;
|
|
height: fit-content;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.search__results__article h4 {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
font-weight: 500;
|
|
color: var(--color-tint-5);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.search__results__article h3 {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.sidebar__article:hover {
|
|
color: var(--color-accent);
|
|
transition: background-color 0.12s ease-in-out;
|
|
transition-delay: 0.1s;
|
|
}
|
|
|
|
.sidebar__article:not([data-active='true']):hover {
|
|
--bg: var(--color-tint-1);
|
|
}
|
|
}
|
|
|
|
/* --------------------- API docs --------------------- */
|
|
.parametersTable {
|
|
table-layout: fixed;
|
|
}
|
|
.parametersTable > thead th:nth-child(1) {
|
|
width: 25%;
|
|
}
|
|
.parametersTable > thead th:nth-child(2) {
|
|
width: 75%;
|
|
}
|
|
.parametersTable pre {
|
|
margin-top: 0;
|
|
margin-bottom: 16px;
|
|
}
|
|
.parametersTable-row > td {
|
|
vertical-align: top;
|
|
}
|
|
.parametersTable-row:not(:last-child) > td {
|
|
border-bottom: 1px solid var(--color-tint-1);
|
|
}
|
|
|
|
/* --------------------- Mobile --------------------- */
|
|
|
|
@media (max-width: 760px) {
|
|
.layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 1fr;
|
|
width: 100%;
|
|
max-width: 984px;
|
|
column-gap: 28px;
|
|
row-gap: 0px;
|
|
margin: 0px auto;
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.menu__button {
|
|
display: flex;
|
|
pointer-events: all;
|
|
}
|
|
|
|
.sidebar {
|
|
display: none;
|
|
background-color: var(--color-background);
|
|
}
|
|
|
|
.sidebar[data-open='true'] {
|
|
display: initial;
|
|
position: fixed;
|
|
inset: 0px;
|
|
z-index: 10000;
|
|
}
|
|
|
|
.sidebar[data-open='true'] > .sidebar__close {
|
|
display: flex;
|
|
}
|
|
|
|
.sidebar__article {
|
|
height: 44px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.icon-button {
|
|
height: 44px;
|
|
width: 44px;
|
|
}
|
|
|
|
.search {
|
|
height: 44px;
|
|
}
|
|
|
|
.search__input {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.search__results__article {
|
|
height: auto;
|
|
}
|
|
|
|
.search__results {
|
|
position: static;
|
|
box-shadow: none;
|
|
padding: 0px;
|
|
padding-top: 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
.search__results__list {
|
|
padding: 0px;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.search__results__wrapper {
|
|
height: auto;
|
|
}
|
|
|
|
.article {
|
|
padding-top: 32px;
|
|
}
|
|
|
|
.article h1 {
|
|
font-size: 36px;
|
|
}
|
|
|
|
.article__links {
|
|
grid-template-columns: 1fr;
|
|
grid-auto-rows: 44px;
|
|
gap: 24px;
|
|
}
|
|
|
|
.article__links__prev {
|
|
border: none;
|
|
grid-row: 2;
|
|
grid-column: 2;
|
|
justify-self: flex-end;
|
|
}
|
|
|
|
.article__links__next {
|
|
grid-row: 1;
|
|
grid-column: 2;
|
|
justify-self: flex-end;
|
|
}
|
|
}
|
|
|
|
/* ------------------- Code Themes ------------------ */
|
|
|
|
.hljs {
|
|
color: var(--hl);
|
|
}
|
|
|
|
.hljs-comment,
|
|
.hljs-quote {
|
|
color: var(--hl-1);
|
|
font-style: italic;
|
|
}
|
|
|
|
.hljs-doctag,
|
|
.hljs-keyword,
|
|
.hljs-formula {
|
|
color: var(--hl-2);
|
|
}
|
|
|
|
.hljs-section,
|
|
.hljs-name,
|
|
.hljs-selector-tag,
|
|
.hljs-deletion,
|
|
.hljs-subst {
|
|
color: var(--hl-3);
|
|
}
|
|
|
|
.hljs-literal {
|
|
color: var(--hl-4);
|
|
}
|
|
|
|
.hljs-string,
|
|
.hljs-regexp,
|
|
.hljs-addition,
|
|
.hljs-attribute,
|
|
.hljs-meta .hljs-string {
|
|
color: var(--hl-5);
|
|
}
|
|
|
|
.hljs-attr,
|
|
.hljs-variable,
|
|
.hljs-template-variable,
|
|
.hljs-type,
|
|
.hljs-selector-class,
|
|
.hljs-selector-attr,
|
|
.hljs-selector-pseudo,
|
|
.hljs-number {
|
|
color: var(--hl-6);
|
|
}
|
|
|
|
.hljs-symbol,
|
|
.hljs-bullet,
|
|
.hljs-link,
|
|
.hljs-meta,
|
|
.hljs-selector-id,
|
|
.hljs-title {
|
|
color: var(--hl-7);
|
|
}
|
|
|
|
.hljs-built_in,
|
|
.hljs-title.class_,
|
|
.hljs-class .hljs-title {
|
|
color: var(--hl-8);
|
|
}
|
|
|
|
.hljs-emphasis {
|
|
font-style: italic;
|
|
}
|
|
|
|
.hljs-strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.hljs-link {
|
|
text-decoration: underline;
|
|
}
|