c3a306a9c5
A few smaller tweaks for the navigation menu (on the left, not the top): - Smaller font. The upgrade to the latest Geekdocs made this bigger, but I like it if it's a bit smaller than the main text. - More visible indicator line for the active element. This was a dashed underline of just the text. It is now a dashed border-bottom that extends the entire width of the element. This visibly connects the main body of text to the active menu element. And for the main text: - Less padding for `h3` elements, as the whitespace became a bit too much.
211 lines
4.1 KiB
CSS
211 lines
4.1 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 {
|
|
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.btn-primary a.gdoc-button__link {
|
|
color: #FFF !important;
|
|
}
|
|
|
|
.gdoc-button.btn-secondary {
|
|
background: transparent;
|
|
border: var(--button-border-color) 1px solid;
|
|
}
|
|
|
|
.gdoc-button.btn-secondary a.gdoc-button__link {
|
|
color: var(--button-border-color) !important;
|
|
}
|
|
|
|
.gdoc-button a {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.gdoc-nav nav section {
|
|
/* Make the font slightly smaller. */
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.gdoc-nav__list li {
|
|
/* Squeeze the navigation items a little closer together. */
|
|
margin: 0.6rem 0;
|
|
}
|
|
.gdoc-nav__entry.is-active {
|
|
/* Make the current page in the documentation navigation tree more visible. */
|
|
text-decoration: none;
|
|
border-bottom: thin dashed var(--link-color-visited);
|
|
}
|
|
|
|
.flamenco-download-link {
|
|
font-family: var(--font-family-mono);
|
|
}
|
|
|
|
article p {
|
|
line-height: 28px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
table tbody td {
|
|
vertical-align: top;
|
|
}
|