diff --git a/website/astro.config.mjs b/website/astro.config.mjs index 7655202b..f18ae37a 100644 --- a/website/astro.config.mjs +++ b/website/astro.config.mjs @@ -8,14 +8,17 @@ import mdx from '@astrojs/mdx'; // https://astro.build/config // https://astro.build/config -import tailwind from "@astrojs/tailwind"; +import tailwind from '@astrojs/tailwind'; // https://astro.build/config export default defineConfig({ integrations: [ - // Enable Preact to support Preact JSX components. - preact(), - // Enable React for the Algolia search component. - react(), mdx(), tailwind()], - site: `https://strudel.tidalcycles.org` -}); \ No newline at end of file + // Enable Preact to support Preact JSX components. + preact(), + // Enable React for the Algolia search component. + react(), + mdx(), + tailwind(), + ], + site: `https://strudel.tidalcycles.org`, +}); diff --git a/website/public/make-scrollable-code-focusable.js b/website/public/make-scrollable-code-focusable.js index f2b7030f..35f10492 100644 --- a/website/public/make-scrollable-code-focusable.js +++ b/website/public/make-scrollable-code-focusable.js @@ -1,3 +1,3 @@ Array.from(document.getElementsByTagName('pre')).forEach((element) => { - element.setAttribute('tabindex', '0'); + element.setAttribute('tabindex', '0'); }); diff --git a/website/src/components/Header/LanguageSelect.css b/website/src/components/Header/LanguageSelect.css index 9e0ae7ce..4e878714 100644 --- a/website/src/components/Header/LanguageSelect.css +++ b/website/src/components/Header/LanguageSelect.css @@ -1,47 +1,47 @@ .language-select { - flex-grow: 1; - width: 48px; - box-sizing: border-box; - margin: 0; - padding: 0.33em 0.5em; - overflow: visible; - font-weight: 500; - font-size: 1rem; - font-family: inherit; - line-height: inherit; - background-color: var(--theme-bg); - border-color: var(--theme-text-lighter); - color: var(--theme-text-light); - border-style: solid; - border-width: 1px; - border-radius: 0.25rem; - outline: 0; - cursor: pointer; - transition-timing-function: ease-out; - transition-duration: 0.2s; - transition-property: border-color, color; - -webkit-font-smoothing: antialiased; - padding-left: 30px; - padding-right: 1rem; + flex-grow: 1; + width: 48px; + box-sizing: border-box; + margin: 0; + padding: 0.33em 0.5em; + overflow: visible; + font-weight: 500; + font-size: 1rem; + font-family: inherit; + line-height: inherit; + background-color: var(--theme-bg); + border-color: var(--theme-text-lighter); + color: var(--theme-text-light); + border-style: solid; + border-width: 1px; + border-radius: 0.25rem; + outline: 0; + cursor: pointer; + transition-timing-function: ease-out; + transition-duration: 0.2s; + transition-property: border-color, color; + -webkit-font-smoothing: antialiased; + padding-left: 30px; + padding-right: 1rem; } .language-select-wrapper .language-select:hover, .language-select-wrapper .language-select:focus { - color: var(--theme-text); - border-color: var(--theme-text-light); + color: var(--theme-text); + border-color: var(--theme-text-light); } .language-select-wrapper { - color: var(--theme-text-light); - position: relative; + color: var(--theme-text-light); + position: relative; } .language-select-wrapper > svg { - position: absolute; - top: 7px; - left: 10px; - pointer-events: none; + position: absolute; + top: 7px; + left: 10px; + pointer-events: none; } @media (min-width: 50em) { - .language-select { - width: 100%; - } + .language-select { + width: 100%; + } } diff --git a/website/src/components/Header/LanguageSelect.tsx b/website/src/components/Header/LanguageSelect.tsx index 97409af2..4ef4482c 100644 --- a/website/src/components/Header/LanguageSelect.tsx +++ b/website/src/components/Header/LanguageSelect.tsx @@ -4,46 +4,46 @@ import './LanguageSelect.css'; import { KNOWN_LANGUAGES, langPathRegex } from '../../languages'; const LanguageSelect: FunctionComponent<{ lang: string }> = ({ lang }) => { - return ( -
- - -
- ); + return ( +
+ + +
+ ); }; export default LanguageSelect; diff --git a/website/src/components/Header/Search.css b/website/src/components/Header/Search.css index b6e108f4..344fcf48 100644 --- a/website/src/components/Header/Search.css +++ b/website/src/components/Header/Search.css @@ -1,68 +1,68 @@ /** Style Algolia */ :root { - --docsearch-primary-color: var(--theme-accent); - --docsearch-logo-color: var(--theme-text); + --docsearch-primary-color: var(--theme-accent); + --docsearch-logo-color: var(--theme-text); } .search-input { - flex-grow: 1; - box-sizing: border-box; - width: 100%; - margin: 0; - padding: 0.33em 0.5; - overflow: visible; - font-weight: 500; - font-size: 1rem; - font-family: inherit; - line-height: inherit; - background-color: var(--theme-divider); - border-color: var(--theme-divider); - color: var(--theme-text-light); - border-style: solid; - border-width: 1px; - border-radius: 0.25rem; - outline: 0; - cursor: pointer; - transition-timing-function: ease-out; - transition-duration: 0.2s; - transition-property: border-color, color; - -webkit-font-smoothing: antialiased; + flex-grow: 1; + box-sizing: border-box; + width: 100%; + margin: 0; + padding: 0.33em 0.5; + overflow: visible; + font-weight: 500; + font-size: 1rem; + font-family: inherit; + line-height: inherit; + background-color: var(--theme-divider); + border-color: var(--theme-divider); + color: var(--theme-text-light); + border-style: solid; + border-width: 1px; + border-radius: 0.25rem; + outline: 0; + cursor: pointer; + transition-timing-function: ease-out; + transition-duration: 0.2s; + transition-property: border-color, color; + -webkit-font-smoothing: antialiased; } .search-input:hover, .search-input:focus { - color: var(--theme-text); - border-color: var(--theme-text-light); + color: var(--theme-text); + border-color: var(--theme-text-light); } .search-input:hover::placeholder, .search-input:focus::placeholder { - color: var(--theme-text-light); + color: var(--theme-text-light); } .search-input::placeholder { - color: var(--theme-text-light); + color: var(--theme-text-light); } .search-hint { - position: absolute; - top: 7px; - right: 19px; - padding: 3px 5px; - display: none; - align-items: center; - justify-content: center; - letter-spacing: 0.125em; - font-size: 13px; - font-family: var(--font-mono); - pointer-events: none; - border-color: var(--theme-text-lighter); - color: var(--theme-text-light); - border-style: solid; - border-width: 1px; - border-radius: 0.25rem; - line-height: 14px; + position: absolute; + top: 7px; + right: 19px; + padding: 3px 5px; + display: none; + align-items: center; + justify-content: center; + letter-spacing: 0.125em; + font-size: 13px; + font-family: var(--font-mono); + pointer-events: none; + border-color: var(--theme-text-lighter); + color: var(--theme-text-light); + border-style: solid; + border-width: 1px; + border-radius: 0.25rem; + line-height: 14px; } @media (min-width: 50em) { - .search-hint { - display: flex; - } + .search-hint { + display: flex; + } } /* ------------------------------------------------------------ *\ @@ -70,6 +70,6 @@ \* ------------------------------------------------------------ */ .DocSearch-Modal .DocSearch-Hit a { - box-shadow: none; - border: 1px solid var(--theme-accent); + box-shadow: none; + border: 1px solid var(--theme-accent); } diff --git a/website/src/components/RightSidebar/ThemeToggleButton.css b/website/src/components/RightSidebar/ThemeToggleButton.css index dc5ba46d..7de231d1 100644 --- a/website/src/components/RightSidebar/ThemeToggleButton.css +++ b/website/src/components/RightSidebar/ThemeToggleButton.css @@ -1,37 +1,37 @@ .theme-toggle { - display: inline-flex; - align-items: center; - gap: 0.25em; - padding: 0.33em 0.67em; - border-radius: 99em; - background-color: var(--theme-code-inline-bg); + display: inline-flex; + align-items: center; + gap: 0.25em; + padding: 0.33em 0.67em; + border-radius: 99em; + background-color: var(--theme-code-inline-bg); } .theme-toggle > label:focus-within { - outline: 2px solid transparent; - box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white; + outline: 2px solid transparent; + box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white; } .theme-toggle > label { - color: var(--theme-code-inline-text); - position: relative; - display: flex; - align-items: center; - justify-content: center; - opacity: 0.5; + color: var(--theme-code-inline-text); + position: relative; + display: flex; + align-items: center; + justify-content: center; + opacity: 0.5; } .theme-toggle .checked { - color: var(--theme-accent); - opacity: 1; + color: var(--theme-accent); + opacity: 1; } input[name='theme-toggle'] { - position: absolute; - opacity: 0; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: -1; + position: absolute; + opacity: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; } diff --git a/website/src/components/RightSidebar/ThemeToggleButton.tsx b/website/src/components/RightSidebar/ThemeToggleButton.tsx index b9682aa0..ed534be5 100644 --- a/website/src/components/RightSidebar/ThemeToggleButton.tsx +++ b/website/src/components/RightSidebar/ThemeToggleButton.tsx @@ -5,78 +5,66 @@ import './ThemeToggleButton.css'; const themes = ['light', 'dark']; const icons = [ - - - , - - - , + + + , + + + , ]; const ThemeToggle: FunctionalComponent = () => { - const [theme, setTheme] = useState(() => { - if (import.meta.env.SSR) { - return undefined; - } - if (typeof localStorage !== undefined && localStorage.getItem('theme')) { - return localStorage.getItem('theme'); - } - if (window.matchMedia('(prefers-color-scheme: dark)').matches) { - return 'dark'; - } - return 'light'; - }); + const [theme, setTheme] = useState(() => { + if (import.meta.env.SSR) { + return undefined; + } + 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 === 'light') { - root.classList.remove('theme-dark'); - } else { - root.classList.add('theme-dark'); - } - }, [theme]); + useEffect(() => { + const root = document.documentElement; + if (theme === 'light') { + root.classList.remove('theme-dark'); + } else { + root.classList.add('theme-dark'); + } + }, [theme]); - return ( -
- {themes.map((t, i) => { - const icon = icons[i]; - const checked = t === theme; - return ( - - ); - })} -
- ); + return ( +
+ {themes.map((t, i) => { + const icon = icons[i]; + const checked = t === theme; + return ( + + ); + })} +
+ ); }; export default ThemeToggle; diff --git a/website/src/components/tutorial.mdx b/website/src/components/tutorial.mdx index de1e0d47..12e3d42e 100644 --- a/website/src/components/tutorial.mdx +++ b/website/src/components/tutorial.mdx @@ -543,7 +543,6 @@ You can use this with any function that declares a type (like `n`, `s`, `note`, The following functions will return a pattern. - ### cat @@ -889,7 +888,6 @@ Together with layer, struct and voicings, this can be used to create a basic bac )`} /> -

diff --git a/website/src/config.ts b/website/src/config.ts index 25509d7b..2cdf0d23 100644 --- a/website/src/config.ts +++ b/website/src/config.ts @@ -1,32 +1,31 @@ export const SITE = { - title: 'Strudel Docs', - description: 'Documentation for the Strudel Live Coding Language', - defaultLanguage: 'en_US', + title: 'Strudel Docs', + description: 'Documentation for the Strudel Live Coding Language', + defaultLanguage: 'en_US', }; export const OPEN_GRAPH = { - image: { - src: 'https://github.com/withastro/astro/blob/main/assets/social/banner-minimal.png?raw=true', - alt: - 'astro logo on a starry expanse of space,' + - ' with a purple saturn-like planet floating in the right foreground', - }, - twitter: 'astrodotbuild', + image: { + src: 'https://github.com/withastro/astro/blob/main/assets/social/banner-minimal.png?raw=true', + alt: + 'astro logo on a starry expanse of space,' + ' with a purple saturn-like planet floating in the right foreground', + }, + twitter: 'astrodotbuild', }; // This is the type of the frontmatter you put in the docs markdown files. export type Frontmatter = { - title: string; - description: string; - layout: string; - image?: { src: string; alt: string }; - dir?: 'ltr' | 'rtl'; - ogLocale?: string; - lang?: string; + title: string; + description: string; + layout: string; + image?: { src: string; alt: string }; + dir?: 'ltr' | 'rtl'; + ogLocale?: string; + lang?: string; }; export const KNOWN_LANGUAGES = { - English: 'en', + English: 'en', } as const; export const KNOWN_LANGUAGE_CODES = Object.values(KNOWN_LANGUAGES); @@ -36,20 +35,15 @@ export const COMMUNITY_INVITE_URL = `https://astro.build/chat`; // See "Algolia" section of the README for more information. export const ALGOLIA = { - indexName: 'XXXXXXXXXX', - appId: 'XXXXXXXXXX', - apiKey: 'XXXXXXXXXX', + indexName: 'XXXXXXXXXX', + appId: 'XXXXXXXXXX', + apiKey: 'XXXXXXXXXX', }; -export type Sidebar = Record< - typeof KNOWN_LANGUAGE_CODES[number], - Record ->; +export type Sidebar = Record>; export const SIDEBAR: Sidebar = { - en: { - 'Learn': [ - { text: 'Tutorial', link: 'tutorial' }, - ], - // 'Another Section': [{ text: 'Page 4', link: 'en/page-4' }], - }, + en: { + Learn: [{ text: 'Tutorial', link: 'tutorial' }], + // 'Another Section': [{ text: 'Page 4', link: 'en/page-4' }], + }, }; diff --git a/website/src/languages.ts b/website/src/languages.ts index 405b6921..a638fba6 100644 --- a/website/src/languages.ts +++ b/website/src/languages.ts @@ -4,7 +4,7 @@ export { KNOWN_LANGUAGES, KNOWN_LANGUAGE_CODES }; export const langPathRegex = /\/([a-z]{2}-?[A-Z]{0,2})\//; export function getLanguageFromURL(pathname: string) { - const langCodeMatch = pathname.match(langPathRegex); - const langCode = langCodeMatch ? langCodeMatch[1] : 'en'; - return langCode as typeof KNOWN_LANGUAGE_CODES[number]; + const langCodeMatch = pathname.match(langPathRegex); + const langCode = langCodeMatch ? langCodeMatch[1] : 'en'; + return langCode as typeof KNOWN_LANGUAGE_CODES[number]; } diff --git a/website/src/styles/index.css b/website/src/styles/index.css index 2ce67571..4e4707a6 100644 --- a/website/src/styles/index.css +++ b/website/src/styles/index.css @@ -1,4 +1,3 @@ - .cm-gutters { display: none !important; } diff --git a/website/src/styles/theme.css b/website/src/styles/theme.css index 1dad9dc7..163ca0a0 100644 --- a/website/src/styles/theme.css +++ b/website/src/styles/theme.css @@ -1,12 +1,12 @@ :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; + --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. @@ -17,109 +17,109 @@ * */ - --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-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-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%; + --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)); + 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); + 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); + 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)); + /* @@@: 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; + /* 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); + color: var(--theme-selection-color); + background-color: var(--theme-selection-bg); } diff --git a/website/tailwind.config.cjs b/website/tailwind.config.cjs index bdc3a9be..40c3c01e 100644 --- a/website/tailwind.config.cjs +++ b/website/tailwind.config.cjs @@ -1,8 +1,8 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], - theme: { - extend: {}, - }, - plugins: [require('@tailwindcss/typography')], -} + content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], + theme: { + extend: {}, + }, + plugins: [require('@tailwindcss/typography')], +};