From 60a2755c0a93d158fa030ae9883327190b67d190 Mon Sep 17 00:00:00 2001 From: "Fred K. Schott" Date: Mon, 26 Jul 2021 13:41:32 -0700 Subject: [PATCH] some docs site polish (#853) * some docs polish * attempt to fix theme toggle --- docs/public/index.css | 83 ++++----------------------- docs/public/theme.css | 6 +- docs/src/components/DocSidebar.tsx | 4 ++ docs/src/components/SiteSidebar.astro | 15 +---- docs/src/components/ThemeToggle.tsx | 52 ++++++----------- docs/src/layouts/Main.astro | 76 ++++++++++++++++++------ examples/docs/public/index.css | 12 ---- 7 files changed, 96 insertions(+), 152 deletions(-) diff --git a/docs/public/index.css b/docs/public/index.css index 34acc7803..06995827c 100644 --- a/docs/public/index.css +++ b/docs/public/index.css @@ -47,7 +47,7 @@ nav ul { :is(h1, h2, h3, h4, h5, h6) { margin-bottom: 1rem; font-weight: bold; - line-height: 1.25; + line-height: 1.0; } :is(h1, h2) { @@ -59,11 +59,11 @@ nav ul { } h1 { - font-size: 1.75rem; + font-size: 2.25rem; } h2 { - font-size: 1.25rem; + font-size: 1.5rem; } h3 { @@ -78,13 +78,14 @@ h5 { font-size: 0.8rem; } -@media (min-width: 60em) { +@media (min-width: 50em) { h1 { - font-size: 2.5rem; + font-size: 3.25rem; + font-weight: 800; } h2 { - font-size: 1.75rem; + font-size: 2rem; } h3 { @@ -268,10 +269,6 @@ img { align-items: center; } -header { - position: relative; - margin-bottom: 0.5rem; -} header button { background-color: var(--theme-bg); @@ -306,12 +303,12 @@ button { } #theme-toggle { - display: flex; + display: inline-flex; align-items: center; gap: 0.25em; padding: 0.33em 0.67em; border-radius: 99em; - background-color: hsla(215, 28%, 17%, 1); + background-color: var(--theme-code-inline-bg); } #theme-toggle > label:focus-within { @@ -320,27 +317,16 @@ button { } #theme-toggle > label { - color: white; + color: var( --theme-code-inline-text); position: relative; display: flex; align-items: center; justify-content: center; - font-size: 1.5rem; - width: 1.5rem; - height: 1.5rem; opacity: 0.5; - transition: transform 120ms ease-out, opacity 120ms ease-out; -} - -#theme-toggle > label:hover, -#theme-toggle > label:focus { - transform: scale(1.125); - opacity: 1; } #theme-toggle .checked { color: var(--theme-accent); - transform: scale(1.125); opacity: 1; } @@ -362,7 +348,7 @@ input[name='theme-toggle'] { .sidebar-nav-inner { height: 100%; padding: 0; - padding-top: 2rem; + padding-top: var(--doc-padding); overflow: auto; } @@ -467,50 +453,3 @@ h2.heading { :target { scroll-margin-top: 4rem; } - -.logo { - display: flex; - align-items: center; - gap: 0; - font-size: 1rem; - font-weight: 600; - margin: 0; - line-height: 1; - color: hsla(var(--color-base-white), 100%, 1); - text-decoration: none; - transform: translateX(-8px) scale(0.8); -} - -@media (min-width: 60em) { - .logo { - transform: translateX(-8px) scale(1); - } -} - -.logo a { - padding: 0.5em 0.25em; - margin: -0.5em -0.5em; -} - -.logo svg { - height: 40px; - width: auto; - display: block; - color: var(--theme-accent); -} - -.logo a:hover, -.logo a:focus { - background: hsla(var(--color-orange), 0.6); -} - -.logo a:hover svg, -.logo a:focus svg { - color: hsla(var(--color-base-white), 100%, 1); -} - -.logo h1 { - font: inherit; - color: inherit; - margin: 0; -} diff --git a/docs/public/theme.css b/docs/public/theme.css index 217549b40..c43a9e303 100644 --- a/docs/public/theme.css +++ b/docs/public/theme.css @@ -75,8 +75,8 @@ --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(217, 19%, 27%, 1); - --theme-navbar-height: 3.5rem; + --theme-navbar-bg: hsla(var(--color-base-white), 100%, 1); + --theme-navbar-height: 6rem; --theme-sidebar-offset: var(--theme-navbar-height); --theme-selection-color: hsla(var(--color-orange), 1); --theme-selection-bg: hsla(var(--color-orange), var(--theme-accent-opacity)); @@ -108,7 +108,7 @@ body { --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(221, 39%, 11%, 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)); } diff --git a/docs/src/components/DocSidebar.tsx b/docs/src/components/DocSidebar.tsx index 92f34ff61..e1b2a2b17 100644 --- a/docs/src/components/DocSidebar.tsx +++ b/docs/src/components/DocSidebar.tsx @@ -2,6 +2,7 @@ import type { FunctionalComponent } from 'preact'; import { h } from 'preact'; import { useState, useEffect, useRef } from 'preact/hooks'; import EditOnGithub from './EditOnGithub'; +import ThemeToggle from './ThemeToggle'; const DocSidebar: FunctionalComponent<{ headers: any[]; editHref: string }> = ({ headers = [], @@ -104,6 +105,9 @@ const DocSidebar: FunctionalComponent<{ headers: any[]; editHref: string }> = ({ +
+ +
); diff --git a/docs/src/components/SiteSidebar.astro b/docs/src/components/SiteSidebar.astro index 6503c0414..382b122f4 100644 --- a/docs/src/components/SiteSidebar.astro +++ b/docs/src/components/SiteSidebar.astro @@ -47,7 +47,7 @@ const {currentPage} = Astro.props; } .nav-groups > :first-child { - padding-top: 2rem; + padding-top: var(--doc-padding); } .nav-groups > :last-child { @@ -87,21 +87,10 @@ const {currentPage} = Astro.props; color: hsla(var(--color-base-white), 100%, 1); } - @media (min-width: 60em) { - .nav-link a { - border-radius: 999px; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } + @media (min-width: 50em) { .nav-groups { padding: 0; } } - @media (min-width: 86.25em) { - .nav-link a { - border-radius: 8px; - } - } - diff --git a/docs/src/components/ThemeToggle.tsx b/docs/src/components/ThemeToggle.tsx index 95de4fba1..e990d8ea4 100644 --- a/docs/src/components/ThemeToggle.tsx +++ b/docs/src/components/ThemeToggle.tsx @@ -2,22 +2,9 @@ import type { FunctionalComponent } from 'preact'; import { h, Fragment } from 'preact'; import { useState, useEffect } from 'preact/hooks'; -const themes = ['system', 'light', 'dark']; +const themes = ['light', 'dark']; const icons = [ - - - , { const [theme, setTheme] = useState(() => { - if (typeof localStorage === 'undefined') { - return themes[0]; + if (import.meta.env.SSR) { + return undefined; } - - return localStorage.getItem('theme') || themes[0]; + if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) { + return localStorage.getItem('theme'); + } + if (window.matchMedia('(prefers-color-scheme: dark)').matches) { + return 'dark'; + } + return 'light'; }); useEffect(() => { const root = document.documentElement; - if (theme === 'system') { - localStorage.removeItem('theme'); - if (window.matchMedia('(prefers-color-scheme: dark)').matches) { - root.classList.add('theme-dark'); - } else { - root.classList.remove('theme-dark'); - } + if (theme === 'light') { + root.classList.remove('theme-dark'); } else { - localStorage.setItem('theme', theme); - if (theme === 'light') { - root.classList.remove('theme-dark'); - } else { - root.classList.add('theme-dark'); - } + root.classList.add('theme-dark'); } }, [theme]); + return (
{themes.map((t, i) => { const icon = icons[i]; const checked = t === theme; return ( -
- -
- -
diff --git a/examples/docs/public/index.css b/examples/docs/public/index.css index 1906eeac8..f06f8c94f 100644 --- a/examples/docs/public/index.css +++ b/examples/docs/public/index.css @@ -187,15 +187,6 @@ blockquote { align-items: center; } -header button { - background-color: var(--theme-bg); -} -header button:hover, -header button:focus { - background: var(--theme-text); - color: var(--theme-bg); -} - button { display: flex; align-items: center; @@ -235,9 +226,6 @@ button:hover { display: flex; align-items: center; justify-content: center; - font-size: 1.5rem; - width: 1.5rem; - height: 1.5rem; opacity: 0.5; transition: transform 120ms ease-out, opacity 120ms ease-out; }