mirror of
https://github.com/withastro/astro.git
synced 2024-12-23 21:53:55 -05:00
325e8cba2d
* Revert "Revert "New getting started guide (#715)""
This reverts commit dc4ba25b01.
* style: update docs theme
* style: implement feedback
* feat: remove FOUC
* Update docs/src/pages/404.astro
Co-authored-by: Caleb Jasik <calebjasik@jasik.xyz>
* Fix 404 title prop
* chore: implement feedback
* fix: ul, ol styles
* fix: center logo on mobile
* fix: improve navbar header contrast
* fix: improve logo overlap
* fix: `.nav-link` radius
* fix: small mobile tweaks
* feat: improve nav styles
* feat: improve embed styles
* fix: feedback items
* fix: make header sticky on mobile
Co-authored-by: Caleb Jasik <calebjasik@jasik.xyz>
96 lines
3.2 KiB
CSS
96 lines
3.2 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;
|
|
|
|
--color-white: #fff;
|
|
--color-black: #000014;
|
|
|
|
--color-gray-50: #f9fafb;
|
|
--color-gray-100: #f3f4f6;
|
|
--color-gray-200: #e5e7eb;
|
|
--color-gray-300: #d1d5db;
|
|
--color-gray-400: #9ca3af;
|
|
--color-gray-500: #6b7280;
|
|
--color-gray-600: #4b5563;
|
|
--color-gray-700: #374151;
|
|
--color-gray-800: #1f2937;
|
|
--color-gray-900: #111827;
|
|
--color-gray-950: #090e18;
|
|
|
|
--color-blue: #3894ff;
|
|
--color-blue-dark: #1c5fac;
|
|
--color-blue-rgb: 56, 148, 255;
|
|
--color-green: #17c083;
|
|
--color-green-rgb: 23, 192, 131;
|
|
--color-orange: #ff5d01;
|
|
--color-orange-rgb: 255, 93, 1;
|
|
--color-purple: #882de7;
|
|
--color-purple-rgb: 136, 45, 231;
|
|
--color-red: #ff1639;
|
|
--color-red-rgb: 255, 22, 57;
|
|
--color-yellow: #ffbe2d;
|
|
--color-yellow-rgb: 255, 190, 45;
|
|
}
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
--theme-accent: var(--color-orange);
|
|
--theme-text-accent: var(--color-orange);
|
|
--theme-accent-rgb: var(--color-orange-rgb);
|
|
--theme-accent-opacity: 0.1;
|
|
--theme-divider: var(--color-gray-100);
|
|
--theme-text: var(--color-gray-800);
|
|
--theme-text-light: var(--color-gray-600);
|
|
--theme-text-lighter: var(--color-gray-400);
|
|
--theme-bg: var(--color-white);
|
|
--theme-bg-hover: var(--color-gray-50);
|
|
--theme-bg-offset: var(--color-gray-100);
|
|
--theme-bg-accent: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity));
|
|
--theme-code-inline-bg: var(--color-gray-100);
|
|
--theme-code-inline-text: var(--theme-text);
|
|
--theme-code-bg: var(--color-gray-700);
|
|
--theme-code-text: var(--color-gray-100);
|
|
--theme-navbar-bg: var(--color-gray-700);
|
|
--theme-navbar-height: 3.5rem;
|
|
--theme-sidebar-offset: var(--theme-navbar-height);
|
|
--theme-selection-color: var(--color-orange);
|
|
--theme-selection-bg: rgba(var(--color-orange-rgb), var(--theme-accent-opacity));
|
|
}
|
|
|
|
body {
|
|
background: var(--theme-bg);
|
|
color: var(--theme-text);
|
|
}
|
|
|
|
:root.scrolled {
|
|
--theme-sidebar-offset: 0;
|
|
}
|
|
|
|
:root.theme-dark {
|
|
color-scheme: dark;
|
|
--theme-accent-opacity: 0.4;
|
|
--theme-accent: var(--color-orange);
|
|
--theme-text-accent: var(--color-orange);
|
|
--theme-accent-rgb: var(--color-orange-rgb);
|
|
--theme-divider: var(--color-gray-950);
|
|
--theme-text: var(--color-gray-200);
|
|
--theme-text-light: var(--color-gray-300);
|
|
--theme-text-lighter: var(--color-gray-600);
|
|
--theme-bg: var(--color-gray-800);
|
|
--theme-bg-hover: var(--color-gray-600);
|
|
--theme-bg-offset: var(--color-gray-950);
|
|
--theme-code-inline-bg: var(--color-gray-900);
|
|
--theme-code-inline-text: var(--color-white);
|
|
--theme-code-bg: var(--color-gray-950);
|
|
--theme-code-text: var(--color-white);
|
|
--theme-navbar-bg: var(--color-gray-900);
|
|
--theme-selection-color: var(--color-white);
|
|
--theme-selection-bg: rgba(var(--color-purple-rgb), var(--theme-accent-opacity));
|
|
}
|
|
|
|
::selection {
|
|
color: var(--theme-selection-color);
|
|
background-color: var(--theme-selection-bg);
|
|
}
|