From 7a19659c9e3bfd7a43f6bfccaa0540f434b615f3 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Tue, 20 Dec 2022 21:57:41 +0100 Subject: [PATCH] remove theme.css + cooler bg --- website/README.md | 16 --- website/src/components/HeadCommon.astro | 20 ++- .../components/RightSidebar/MoreMenu.astro | 13 +- website/src/layouts/MainLayout.astro | 2 +- website/src/styles/theme.css | 125 ------------------ 5 files changed, 11 insertions(+), 165 deletions(-) delete mode 100644 website/src/styles/theme.css diff --git a/website/README.md b/website/README.md index 79f01419..7366366e 100644 --- a/website/README.md +++ b/website/README.md @@ -46,22 +46,6 @@ Welcome! Check out [our documentation](https://docs.astro.build) or jump into ou `src/config.ts` contains several data objects that describe metadata about your site like title, description, default language, and Open Graph details. You can customize these to match your project. -### CSS styling - -The theme's look and feel is controlled by a few key variables that you can customize yourself. You'll find them in the `src/styles/theme.css` CSS file. - -If you've never worked with CSS variables before, give [MDN's guide on CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) a quick read. - -This theme uses a "cool blue" accent color by default. To customize this for your project, change the `--theme-accent` variable to whatever color you'd like: - -```diff -/* src/styles/theme.css */ -:root { - color-scheme: light; -- --theme-accent: hsla(var(--color-blue), 1); -+ --theme-accent: hsla(var(--color-red), 1); /* or: hsla(#FF0000, 1); */ -``` - ## Page metadata Astro uses frontmatter in Markdown pages to choose layouts and pass properties to those layouts. If you are using the default layout, you can customize the page in many different ways to optimize SEO and other things. For example, you can use the `title` and `description` properties to set the document title, meta title, meta description, and Open Graph description. diff --git a/website/src/components/HeadCommon.astro b/website/src/components/HeadCommon.astro index d77e4a90..18368f22 100644 --- a/website/src/components/HeadCommon.astro +++ b/website/src/components/HeadCommon.astro @@ -1,5 +1,4 @@ --- -import '../styles/theme.css'; import '../styles/index.css'; --- @@ -15,23 +14,20 @@ import '../styles/index.css'; - + diff --git a/website/src/components/RightSidebar/MoreMenu.astro b/website/src/components/RightSidebar/MoreMenu.astro index 401dcabe..e68ec6f3 100644 --- a/website/src/components/RightSidebar/MoreMenu.astro +++ b/website/src/components/RightSidebar/MoreMenu.astro @@ -14,7 +14,7 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL; { editHref && (
  • - +
    - +
    - - diff --git a/website/src/layouts/MainLayout.astro b/website/src/layouts/MainLayout.astro index 573062b8..250848a5 100644 --- a/website/src/layouts/MainLayout.astro +++ b/website/src/layouts/MainLayout.astro @@ -30,7 +30,7 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`; - +
    diff --git a/website/src/styles/theme.css b/website/src/styles/theme.css deleted file mode 100644 index 163ca0a0..00000000 --- a/website/src/styles/theme.css +++ /dev/null @@ -1,125 +0,0 @@ -: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-blue), 1); - --theme-text-accent: hsla(var(--color-blue), 1); - --theme-accent-opacity: 0.15; - --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-blue), 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-blue), 1); - --theme-selection-bg: hsla(var(--color-blue), var(--theme-accent-opacity)); -} - -body { - background: var(--theme-bg); - color: var(--theme-text); -} - -:root.theme-dark { - color-scheme: dark; - --theme-accent-opacity: 0.15; - --theme-accent: hsla(var(--color-blue), 1); - --theme-text-accent: hsla(var(--color-blue), 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)); - - /* DocSearch [Algolia] */ - --docsearch-modal-background: var(--theme-bg); - --docsearch-searchbox-focus-background: var(--theme-divider); - --docsearch-footer-background: var(--theme-divider); - --docsearch-text-color: var(--theme-text); - --docsearch-hit-background: var(--theme-divider); - --docsearch-hit-shadow: none; - --docsearch-hit-color: var(--theme-text); - --docsearch-footer-shadow: inset 0 2px 10px #000; - --docsearch-modal-shadow: inset 0 0 8px #000; -} - -::selection { - color: var(--theme-selection-color); - background-color: var(--theme-selection-bg); -}