8da71a323f
- Hide sidebar in pages visible in the top nav, except for Docs - Create an "About" page, featuring the design principles - Update components illustration - Move the "What's new in Flamenco 3" page in the FAQ - Add TOD to the FAQ - Tweak homepage layout to use two columns - Styling: slightly reduce max page width (around 12 words per line) - Styling: tweak padding for titles and paragraphs
181 lines
3.4 KiB
CSS
181 lines
3.4 KiB
CSS
/* Global customization */
|
|
|
|
@font-face {
|
|
font-family: 'Heebo';
|
|
src: url('fonts/Heebo-VariableFont_wght.woff');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
:root {
|
|
--code-max-height: 60rem;
|
|
--font-family: "Heebo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Oxygen,Ubuntu,Cantarell,"Open Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
|
--font-family-mono: "Noto Mono", monospace;
|
|
}
|
|
|
|
/* Light mode theming */
|
|
:root,
|
|
:root[color-theme="light"] {
|
|
--header-background: none;
|
|
--header-font-color: #333;
|
|
|
|
--body-background: #ffffff;
|
|
--body-font-color: #343a40;
|
|
|
|
--mark-color: #ffab00;
|
|
|
|
--button-background: #827bc6;
|
|
--button-border-color: #827bc6;
|
|
|
|
--link-color: #8982c9;
|
|
--link-color-visited: #8982c9;
|
|
|
|
--accent-color: #e9ecef;
|
|
--accent-color-lite: #ebedef;
|
|
|
|
--control-icons: #b2bac1;
|
|
|
|
--footer-background: #2f333e;
|
|
--footer-font-color: #ffffff;
|
|
--footer-link-color: #9f95e6;
|
|
--footer-link-color-visited: #9f95e6;
|
|
}
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--header-background: none;
|
|
--header-font-color: #333;
|
|
|
|
--body-background: #ffffff;
|
|
--body-font-color: #343a40;
|
|
|
|
--mark-color: #ffab00;
|
|
|
|
--button-background: #827bc6;
|
|
--button-border-color: #827bc6;
|
|
|
|
--link-color: #8982c9;
|
|
--link-color-visited: #8982c9;
|
|
|
|
--accent-color: #e9ecef;
|
|
--accent-color-lite: #ebedef;
|
|
|
|
--control-icons: #b2bac1;
|
|
|
|
--footer-background: #2f333e;
|
|
--footer-font-color: #ffffff;
|
|
--footer-link-color: #9f95e6;
|
|
--footer-link-color-visited: #9f95e6;
|
|
}
|
|
}
|
|
|
|
/* Dark mode theming */
|
|
:root[color-theme="dark"] {
|
|
--header-background: none;
|
|
--header-font-color: #ffffff;
|
|
|
|
--body-background: #1b1d1f;
|
|
--body-font-color: #ced3d8;
|
|
|
|
--mark-color: #ffab00;
|
|
|
|
--button-background: #827bc6;
|
|
--button-border-color: #827bc6;
|
|
|
|
--link-color: #8982c9;
|
|
--link-color-visited: #8982c9;
|
|
|
|
--accent-color: #2b3035;
|
|
--accent-color-lite: #3d454d;
|
|
|
|
--control-icons: #b2bac1;
|
|
|
|
--footer-background: #2f333e;
|
|
--footer-font-color: #ffffff;
|
|
--footer-link-color: #9f95e6;
|
|
--footer-link-color-visited: #9f95e6;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--header-background: none;
|
|
--header-font-color: #ffffff;
|
|
|
|
--body-background: #1a1d20;
|
|
--body-font-color: #ced3d8;
|
|
|
|
--mark-color: #ffab00;
|
|
|
|
--button-background: #827bc6;
|
|
--button-border-color: #827bc6;
|
|
|
|
--link-color: #8982c9;
|
|
--link-color-visited: #8982c9;
|
|
|
|
--accent-color: #2b3035;
|
|
--accent-color-lite: #272c31;
|
|
|
|
--control-icons: #b2bac1;
|
|
|
|
--footer-background: #2f333e;
|
|
--footer-font-color: #ffffff;
|
|
--footer-link-color: #9f95e6;
|
|
--footer-link-color-visited: #9f95e6;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
body {
|
|
font-family: var(--font-family);
|
|
}
|
|
|
|
h3 {
|
|
padding-top: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.container {
|
|
max-width: 70rem;
|
|
}
|
|
|
|
.gdoc-header {
|
|
border-bottom: none;
|
|
font-family: var(--font-family);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.gdoc-button {
|
|
border-radius: 0.33rem;
|
|
background: var(--button-background);
|
|
border: var(--button-border-color) 1px solid;
|
|
}
|
|
|
|
.gdoc-button a {
|
|
border-bottom: none;
|
|
color: #EEE !important;
|
|
}
|
|
|
|
.gdoc-search__input {
|
|
background: none;
|
|
}
|
|
|
|
.gdoc-page__header {
|
|
background: none;
|
|
}
|
|
|
|
.gdoc-menu-header__items {
|
|
align-items: center;
|
|
}
|
|
|
|
.gdoc-menu-header__items>span {
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.flamenco-download-link {
|
|
font-family: var(--font-family-mono);
|
|
}
|
|
|
|
article p {
|
|
line-height: 28px;
|
|
margin-top: 0;
|
|
}
|