elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-25 12:38:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
Felix Roos 2022-12-20 19:50:32 +01:00
parent 7efaff4f6f
commit d0013f55a2
13 changed files with 338 additions and 356 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
website/astro.config.mjs
View File

@ -8,14 +8,17 @@ import mdx from '@astrojs/mdx';
// https://astro.build/config // https://astro.build/config
// https://astro.build/config // https://astro.build/config
import tailwind from "@astrojs/tailwind"; import tailwind from '@astrojs/tailwind';
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
integrations: [ integrations: [
// Enable Preact to support Preact JSX components. // Enable Preact to support Preact JSX components.
preact(), preact(),
// Enable React for the Algolia search component. // Enable React for the Algolia search component.
react(), mdx(), tailwind()], react(),
site: `https://strudel.tidalcycles.org` mdx(),
}); tailwind(),
],
site: `https://strudel.tidalcycles.org`,
});

2
website/public/make-scrollable-code-focusable.js
View File

@ -1,3 +1,3 @@
Array.from(document.getElementsByTagName('pre')).forEach((element) => { Array.from(document.getElementsByTagName('pre')).forEach((element) => {
element.setAttribute('tabindex', '0'); element.setAttribute('tabindex', '0');
}); });

70
website/src/components/Header/LanguageSelect.css
View File

@ -1,47 +1,47 @@
.language-select { .language-select {
flex-grow: 1; flex-grow: 1;
width: 48px; width: 48px;
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0.33em 0.5em; padding: 0.33em 0.5em;
overflow: visible; overflow: visible;
font-weight: 500; font-weight: 500;
font-size: 1rem; font-size: 1rem;
font-family: inherit; font-family: inherit;
line-height: inherit; line-height: inherit;
background-color: var(--theme-bg); background-color: var(--theme-bg);
border-color: var(--theme-text-lighter); border-color: var(--theme-text-lighter);
color: var(--theme-text-light); color: var(--theme-text-light);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: 0.25rem; border-radius: 0.25rem;
outline: 0; outline: 0;
cursor: pointer; cursor: pointer;
transition-timing-function: ease-out; transition-timing-function: ease-out;
transition-duration: 0.2s; transition-duration: 0.2s;
transition-property: border-color, color; transition-property: border-color, color;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
padding-left: 30px; padding-left: 30px;
padding-right: 1rem; padding-right: 1rem;
} }
.language-select-wrapper .language-select:hover, .language-select-wrapper .language-select:hover,
.language-select-wrapper .language-select:focus { .language-select-wrapper .language-select:focus {
color: var(--theme-text); color: var(--theme-text);
border-color: var(--theme-text-light); border-color: var(--theme-text-light);
} }
.language-select-wrapper { .language-select-wrapper {
color: var(--theme-text-light); color: var(--theme-text-light);
position: relative; position: relative;
} }
.language-select-wrapper > svg { .language-select-wrapper > svg {
position: absolute; position: absolute;
top: 7px; top: 7px;
left: 10px; left: 10px;
pointer-events: none; pointer-events: none;
} }
@media (min-width: 50em) { @media (min-width: 50em) {
.language-select { .language-select {
width: 100%; width: 100%;
} }
} }

80
website/src/components/Header/LanguageSelect.tsx
View File

@ -4,46 +4,46 @@ import './LanguageSelect.css';
import { KNOWN_LANGUAGES, langPathRegex } from '../../languages'; import { KNOWN_LANGUAGES, langPathRegex } from '../../languages';
const LanguageSelect: FunctionComponent<{ lang: string }> = ({ lang }) => { const LanguageSelect: FunctionComponent<{ lang: string }> = ({ lang }) => {
return ( return (
<div className="language-select-wrapper"> <div className="language-select-wrapper">
<svg <svg
aria-hidden="true" aria-hidden="true"
focusable="false" focusable="false"
role="img" role="img"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 88.6 77.3" viewBox="0 0 88.6 77.3"
height="1.2em" height="1.2em"
width="1.2em" width="1.2em"
> >
<path <path
fill="currentColor" fill="currentColor"
d="M61,24.6h7.9l18.7,51.6h-7.7l-5.4-15.5H54.3l-5.6,15.5h-7.2L61,24.6z M72.6,55l-8-22.8L56.3,55H72.6z" d="M61,24.6h7.9l18.7,51.6h-7.7l-5.4-15.5H54.3l-5.6,15.5h-7.2L61,24.6z M72.6,55l-8-22.8L56.3,55H72.6z"
/> />
<path <path
fill="currentColor" fill="currentColor"
d="M53.6,60.6c-10-4-16-9-22-14c0,0,1.3,1.3,0,0c-6,5-20,13-20,13l-4-6c8-5,10-6,19-13c-2.1-1.9-12-13-13-19h8 c4,9,10,14,10,14c10-8,10-19,10-19h8c0,0-1,13-12,24l0,0c5,5,10,9,19,13L53.6,60.6z M1.6,16.6h56v-8h-23v-7h-9v7h-24V16.6z" d="M53.6,60.6c-10-4-16-9-22-14c0,0,1.3,1.3,0,0c-6,5-20,13-20,13l-4-6c8-5,10-6,19-13c-2.1-1.9-12-13-13-19h8 c4,9,10,14,10,14c10-8,10-19,10-19h8c0,0-1,13-12,24l0,0c5,5,10,9,19,13L53.6,60.6z M1.6,16.6h56v-8h-23v-7h-9v7h-24V16.6z"
/> />
</svg> </svg>
<select <select
className="language-select" className="language-select"
value={lang} value={lang}
onChange={(e) => { onChange={(e) => {
const newLang = e.target.value; const newLang = e.target.value;
let actualDest = window.location.pathname.replace(langPathRegex, '/'); let actualDest = window.location.pathname.replace(langPathRegex, '/');
if (actualDest == '/') actualDest = `/introduction`; if (actualDest == '/') actualDest = `/introduction`;
window.location.pathname = '/' + newLang + actualDest; window.location.pathname = '/' + newLang + actualDest;
}} }}
> >
{Object.entries(KNOWN_LANGUAGES).map(([key, value]) => { {Object.entries(KNOWN_LANGUAGES).map(([key, value]) => {
return ( return (
<option value={value} key={value}> <option value={value} key={value}>
{key} {key}
</option> </option>
); );
})} })}
</select> </select>
</div> </div>
); );
}; };
export default LanguageSelect; export default LanguageSelect;

100
website/src/components/Header/Search.css
View File

@ -1,68 +1,68 @@
/** Style Algolia */ /** Style Algolia */
:root { :root {
--docsearch-primary-color: var(--theme-accent); --docsearch-primary-color: var(--theme-accent);
--docsearch-logo-color: var(--theme-text); --docsearch-logo-color: var(--theme-text);
} }
.search-input { .search-input {
flex-grow: 1; flex-grow: 1;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0.33em 0.5; padding: 0.33em 0.5;
overflow: visible; overflow: visible;
font-weight: 500; font-weight: 500;
font-size: 1rem; font-size: 1rem;
font-family: inherit; font-family: inherit;
line-height: inherit; line-height: inherit;
background-color: var(--theme-divider); background-color: var(--theme-divider);
border-color: var(--theme-divider); border-color: var(--theme-divider);
color: var(--theme-text-light); color: var(--theme-text-light);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: 0.25rem; border-radius: 0.25rem;
outline: 0; outline: 0;
cursor: pointer; cursor: pointer;
transition-timing-function: ease-out; transition-timing-function: ease-out;
transition-duration: 0.2s; transition-duration: 0.2s;
transition-property: border-color, color; transition-property: border-color, color;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
.search-input:hover, .search-input:hover,
.search-input:focus { .search-input:focus {
color: var(--theme-text); color: var(--theme-text);
border-color: var(--theme-text-light); border-color: var(--theme-text-light);
} }
.search-input:hover::placeholder, .search-input:hover::placeholder,
.search-input:focus::placeholder { .search-input:focus::placeholder {
color: var(--theme-text-light); color: var(--theme-text-light);
} }
.search-input::placeholder { .search-input::placeholder {
color: var(--theme-text-light); color: var(--theme-text-light);
} }
.search-hint { .search-hint {
position: absolute; position: absolute;
top: 7px; top: 7px;
right: 19px; right: 19px;
padding: 3px 5px; padding: 3px 5px;
display: none; display: none;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
letter-spacing: 0.125em; letter-spacing: 0.125em;
font-size: 13px; font-size: 13px;
font-family: var(--font-mono); font-family: var(--font-mono);
pointer-events: none; pointer-events: none;
border-color: var(--theme-text-lighter); border-color: var(--theme-text-lighter);
color: var(--theme-text-light); color: var(--theme-text-light);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: 0.25rem; border-radius: 0.25rem;
line-height: 14px; line-height: 14px;
} }
@media (min-width: 50em) { @media (min-width: 50em) {
.search-hint { .search-hint {
display: flex; display: flex;
} }
} }
/* ------------------------------------------------------------ *\ /* ------------------------------------------------------------ *\
@ -70,6 +70,6 @@
\* ------------------------------------------------------------ */ \* ------------------------------------------------------------ */
.DocSearch-Modal .DocSearch-Hit a { .DocSearch-Modal .DocSearch-Hit a {
box-shadow: none; box-shadow: none;
border: 1px solid var(--theme-accent); border: 1px solid var(--theme-accent);
} }

46
website/src/components/RightSidebar/ThemeToggleButton.css
View File

@ -1,37 +1,37 @@
.theme-toggle { .theme-toggle {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.25em; gap: 0.25em;
padding: 0.33em 0.67em; padding: 0.33em 0.67em;
border-radius: 99em; border-radius: 99em;
background-color: var(--theme-code-inline-bg); background-color: var(--theme-code-inline-bg);
} }
.theme-toggle > label:focus-within { .theme-toggle > label:focus-within {
outline: 2px solid transparent; outline: 2px solid transparent;
box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white; box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
} }
.theme-toggle > label { .theme-toggle > label {
color: var(--theme-code-inline-text); color: var(--theme-code-inline-text);
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: 0.5; opacity: 0.5;
} }
.theme-toggle .checked { .theme-toggle .checked {
color: var(--theme-accent); color: var(--theme-accent);
opacity: 1; opacity: 1;
} }
input[name='theme-toggle'] { input[name='theme-toggle'] {
position: absolute; position: absolute;
opacity: 0; opacity: 0;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: -1; z-index: -1;
} }

122
website/src/components/RightSidebar/ThemeToggleButton.tsx
View File

@ -5,78 +5,66 @@ import './ThemeToggleButton.css';
const themes = ['light', 'dark']; const themes = ['light', 'dark'];
const icons = [ const icons = [
<svg <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
xmlns="http://www.w3.org/2000/svg" <path
width="20" fillRule="evenodd"
height="20" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
viewBox="0 0 20 20" clipRule="evenodd"
fill="currentColor" />
> </svg>,
<path <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
fillRule="evenodd" <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" </svg>,
clipRule="evenodd"
/>
</svg>,
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="currentColor"
>
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
</svg>,
]; ];
const ThemeToggle: FunctionalComponent = () => { const ThemeToggle: FunctionalComponent = () => {
const [theme, setTheme] = useState(() => { const [theme, setTheme] = useState(() => {
if (import.meta.env.SSR) { if (import.meta.env.SSR) {
return undefined; return undefined;
} }
if (typeof localStorage !== undefined && localStorage.getItem('theme')) { if (typeof localStorage !== undefined && localStorage.getItem('theme')) {
return localStorage.getItem('theme'); return localStorage.getItem('theme');
} }
if (window.matchMedia('(prefers-color-scheme: dark)').matches) { if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark'; return 'dark';
} }
return 'light'; return 'light';
}); });
useEffect(() => { useEffect(() => {
const root = document.documentElement; const root = document.documentElement;
if (theme === 'light') { if (theme === 'light') {
root.classList.remove('theme-dark'); root.classList.remove('theme-dark');
} else { } else {
root.classList.add('theme-dark'); root.classList.add('theme-dark');
} }
}, [theme]); }, [theme]);
return ( return (
<div className="theme-toggle"> <div className="theme-toggle">
{themes.map((t, i) => { {themes.map((t, i) => {
const icon = icons[i]; const icon = icons[i];
const checked = t === theme; const checked = t === theme;
return ( return (
<label className={checked ? ' checked' : ''}> <label className={checked ? ' checked' : ''}>
{icon} {icon}
<input <input
type="radio" type="radio"
name="theme-toggle" name="theme-toggle"
checked={checked} checked={checked}
value={t} value={t}
title={`Use ${t} theme`} title={`Use ${t} theme`}
aria-label={`Use ${t} theme`} aria-label={`Use ${t} theme`}
onChange={() => { onChange={() => {
localStorage.setItem('theme', t); localStorage.setItem('theme', t);
setTheme(t); setTheme(t);
}} }}
/> />
</label> </label>
); );
})} })}
</div> </div>
); );
}; };
export default ThemeToggle; export default ThemeToggle;

2
website/src/components/tutorial.mdx
View File

@ -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. The following functions will return a pattern.
### cat ### cat
<JsDoc name="cat" h={0} /> <JsDoc name="cat" h={0} />
@ -889,7 +888,6 @@ Together with layer, struct and voicings, this can be used to create a basic bac
)`} )`}
/> />
<br /> <br />
<br /> <br />

56
website/src/config.ts
View File

@ -1,32 +1,31 @@
export const SITE = { export const SITE = {
title: 'Strudel Docs', title: 'Strudel Docs',
description: 'Documentation for the Strudel Live Coding Language', description: 'Documentation for the Strudel Live Coding Language',
defaultLanguage: 'en_US', defaultLanguage: 'en_US',
}; };
export const OPEN_GRAPH = { export const OPEN_GRAPH = {
image: { image: {
src: 'https://github.com/withastro/astro/blob/main/assets/social/banner-minimal.png?raw=true', src: 'https://github.com/withastro/astro/blob/main/assets/social/banner-minimal.png?raw=true',
alt: alt:
'astro logo on a starry expanse of space,' + 'astro logo on a starry expanse of space,' + ' with a purple saturn-like planet floating in the right foreground',
' with a purple saturn-like planet floating in the right foreground', },
}, twitter: 'astrodotbuild',
twitter: 'astrodotbuild',
}; };
// This is the type of the frontmatter you put in the docs markdown files. // This is the type of the frontmatter you put in the docs markdown files.
export type Frontmatter = { export type Frontmatter = {
title: string; title: string;
description: string; description: string;
layout: string; layout: string;
image?: { src: string; alt: string }; image?: { src: string; alt: string };
dir?: 'ltr' | 'rtl'; dir?: 'ltr' | 'rtl';
ogLocale?: string; ogLocale?: string;
lang?: string; lang?: string;
}; };
export const KNOWN_LANGUAGES = { export const KNOWN_LANGUAGES = {
English: 'en', English: 'en',
} as const; } as const;
export const KNOWN_LANGUAGE_CODES = Object.values(KNOWN_LANGUAGES); 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. // See "Algolia" section of the README for more information.
export const ALGOLIA = { export const ALGOLIA = {
indexName: 'XXXXXXXXXX', indexName: 'XXXXXXXXXX',
appId: 'XXXXXXXXXX', appId: 'XXXXXXXXXX',
apiKey: 'XXXXXXXXXX', apiKey: 'XXXXXXXXXX',
}; };
export type Sidebar = Record< export type Sidebar = Record<typeof KNOWN_LANGUAGE_CODES[number], Record<string, { text: string; link: string }[]>>;
typeof KNOWN_LANGUAGE_CODES[number],
Record<string, { text: string; link: string }[]>
>;
export const SIDEBAR: Sidebar = { export const SIDEBAR: Sidebar = {
en: { en: {
'Learn': [ Learn: [{ text: 'Tutorial', link: 'tutorial' }],
{ text: 'Tutorial', link: 'tutorial' }, // 'Another Section': [{ text: 'Page 4', link: 'en/page-4' }],
], },
// 'Another Section': [{ text: 'Page 4', link: 'en/page-4' }],
},
}; };

6
website/src/languages.ts
View File

@ -4,7 +4,7 @@ export { KNOWN_LANGUAGES, KNOWN_LANGUAGE_CODES };
export const langPathRegex = /\/([a-z]{2}-?[A-Z]{0,2})\//; export const langPathRegex = /\/([a-z]{2}-?[A-Z]{0,2})\//;
export function getLanguageFromURL(pathname: string) { export function getLanguageFromURL(pathname: string) {
const langCodeMatch = pathname.match(langPathRegex); const langCodeMatch = pathname.match(langPathRegex);
const langCode = langCodeMatch ? langCodeMatch[1] : 'en'; const langCode = langCodeMatch ? langCodeMatch[1] : 'en';
return langCode as typeof KNOWN_LANGUAGE_CODES[number]; return langCode as typeof KNOWN_LANGUAGE_CODES[number];
} }

1
website/src/styles/index.css
View File

@ -1,4 +1,3 @@
.cm-gutters { .cm-gutters {
display: none !important; display: none !important;
} }

180
website/src/styles/theme.css
View File

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

12
website/tailwind.config.cjs
View File

@ -1,8 +1,8 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: { theme: {
extend: {}, extend: {},
}, },
plugins: [require('@tailwindcss/typography')], plugins: [require('@tailwindcss/typography')],
} };