0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-23 21:53:55 -05:00
astro/docs/public/theme.css
Fred K. Schott 6eeafac715
Add algolia-powered search bar to docs site (#917)
* add search bar

* replace cmd+k with slash hotkey

* update api key

* add localhost support for search
2021-07-29 13:31:41 -07:00

114 lines
4.1 KiB
CSS

:root {
--font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
sans-serif, Apple Color Emoji, Segoe UI Emoji;
--font-body: system-ui, var(--font-fallback);
--font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono',
'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono',
'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco,
'Courier New', Courier, monospace;
/*
* Variables with --color-base prefix define
* the hue, and saturation values to be used for
* hsla colors.
*
* ex:
*
* --color-base-{color}: {hue}, {saturation};
*
*/
--color-base-white: 0, 0%;
--color-base-black: 240, 100%;
--color-base-gray: 215, 14%;
--color-base-blue: 212, 100%;
--color-base-blue-dark: 212, 72%;
--color-base-green: 158, 79%;
--color-base-orange: 22, 100%;
--color-base-purple: 269, 79%;
--color-base-red: 351, 100%;
--color-base-yellow: 41, 100%;
/*
* Color palettes are made using --color-base
* variables, along with a lightness value to
* define different variants.
*
*/
--color-gray-5: var(--color-base-gray), 5%;
--color-gray-10: var(--color-base-gray), 10%;
--color-gray-20: var(--color-base-gray), 20%;
--color-gray-30: var(--color-base-gray), 30%;
--color-gray-40: var(--color-base-gray), 40%;
--color-gray-50: var(--color-base-gray), 50%;
--color-gray-60: var(--color-base-gray), 60%;
--color-gray-70: var(--color-base-gray), 70%;
--color-gray-80: var(--color-base-gray), 80%;
--color-gray-90: var(--color-base-gray), 90%;
--color-gray-95: var(--color-base-gray), 95%;
--color-blue: var(--color-base-blue), 61%;
--color-blue-dark: var(--color-base-blue-dark), 39%;
--color-green: var(--color-base-green), 42%;
--color-orange: var(--color-base-orange), 50%;
--color-purple: var(--color-base-purple), 54%;
--color-red: var(--color-base-red), 54%;
--color-yellow: var(--color-base-yellow), 59%;
}
:root {
color-scheme: light;
--theme-accent: hsla(var(--color-orange), 1);
--theme-text-accent: hsla(var(--color-orange), 1);
--theme-accent-opacity: 0.1;
--theme-divider: hsla(var(--color-gray-95), 1);
--theme-text: hsla(var(--color-gray-10), 1);
--theme-text-light: hsla(var(--color-gray-40), 1);
/* @@@: not used anywhere */
--theme-text-lighter: hsla(var(--color-gray-80), 1);
--theme-bg: hsla(var(--color-base-white), 100%, 1);
--theme-bg-hover: hsla(var(--color-gray-95), 1);
--theme-bg-offset: hsla(var(--color-gray-90), 1);
--theme-bg-accent: hsla(var(--color-orange), var(--theme-accent-opacity));
--theme-code-inline-bg: hsla(var(--color-gray-95), 1);
--theme-code-inline-text: var(--theme-text);
--theme-code-bg: hsla(217, 19%, 27%, 1);
--theme-code-text: hsla(var(--color-gray-95), 1);
--theme-navbar-bg: hsla(var(--color-base-white), 100%, 1);
--theme-navbar-height: 6rem;
--theme-selection-color: hsla(var(--color-orange), 1);
--theme-selection-bg: hsla(var(--color-orange), var(--theme-accent-opacity));
}
body {
background: var(--theme-bg);
color: var(--theme-text);
}
:root.theme-dark {
color-scheme: dark;
--theme-accent-opacity: 0.4;
--theme-accent: hsla(var(--color-orange), 1);
--theme-text-accent: hsla(var(--color-orange), 1);
--theme-divider: hsla(var(--color-gray-10), 1);
--theme-text: hsla(var(--color-gray-90), 1);
--theme-text-light: hsla(var(--color-gray-80), 1);
/* @@@: not used anywhere */
--theme-text-lighter: hsla(var(--color-gray-40), 1);
--theme-bg: hsla(215, 28%, 17%, 1);
--theme-bg-hover: hsla(var(--color-gray-40), 1);
--theme-bg-offset: hsla(var(--color-gray-5), 1);
--theme-code-inline-bg: hsla(var(--color-gray-10), 1);
--theme-code-inline-text: hsla(var(--color-base-white), 100%, 1);
--theme-code-bg: hsla(var(--color-gray-5), 1);
--theme-code-text: hsla(var(--color-base-white), 100%, 1);
--theme-navbar-bg: hsla(215, 28%, 17%, 1);
--theme-selection-color: hsla(var(--color-base-white), 100%, 1);
--theme-selection-bg: hsla(var(--color-purple), var(--theme-accent-opacity));
}
::selection {
color: var(--theme-selection-color);
background-color: var(--theme-selection-bg);
}