msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

feat: Proper dark mode (#8274)

Browse Source 
* Push

* Update svelte REPL

* Light mode fixes

* Fox height issues

* Moar dark mode fixes

* More changes

* Fix zen mode height issue
pull/8286/head
Puru Vijay 2 years ago committed by GitHub
parent f4c593f28f
commit 79db9b180d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 170 additions and 150 deletions
Show Stats Download Patch File Download Diff File

102
sites/svelte.dev/package-lock.json generated
Unescape View File

@ -9,7 +9,7 @@
"version": "1.0.0", "version": "1.0.0",
"dependencies": { "dependencies": {
"@supabase/supabase-js": "^2.7.1", "@supabase/supabase-js": "^2.7.1",
"@sveltejs/repl": "0.0.3", "@sveltejs/repl": "^0.1.2",
"cookie": "^0.5.0", "cookie": "^0.5.0",
"devalue": "^4.2.3", "devalue": "^4.2.3",
"do-not-zip": "^1.0.0", "do-not-zip": "^1.0.0",
@ -1113,6 +1113,11 @@
"node": ">= 10" "node": ">= 10"
} }
}, },
"node_modules/@rollup/browser": {
"version": "3.15.0",
"resolved": "https://registry.npmjs.org/@rollup/browser/-/browser-3.15.0.tgz",
"integrity": "sha512-uvteGT8QpNSxwrjFNXd/M1NGdHTqQn6KAK7+dxvelrZb+d3oFej4Fzo1CTkaSysF45J03TSLWMjM6nRzJfFdhA=="
},
"node_modules/@rollup/pluginutils": { "node_modules/@rollup/pluginutils": {
"version": "5.0.2", "version": "5.0.2",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
@ -1256,32 +1261,23 @@
} }
}, },
"node_modules/@sveltejs/repl": { "node_modules/@sveltejs/repl": {
"version": "0.0.3", "version": "0.1.2",
"resolved": "https://registry.npmjs.org/@sveltejs/repl/-/repl-0.0.3.tgz", "resolved": "https://registry.npmjs.org/@sveltejs/repl/-/repl-0.1.2.tgz",
"integrity": "sha512-IcJa1SjS6ZopT4hpCA3iGmcQ6fn44M7GPLiSDeWQwVvRc7npyCoNB6G9POwsWxFdsBV1gzCHTmEnmOOpFsRnmQ==", "integrity": "sha512-NsrBDQ82Ko8NGxGUA6ko/7acMM2WyJNA40/IP+cLp8ykcas5mwrqeiaPP4GmKM0olr3GHPwwxzVdEHcjx03a/Q==",
"dependencies": { "dependencies": {
"@sveltejs/site-kit": "2.1.4", "@rollup/browser": "^3.15.0",
"acorn": "^8.7.0", "@sveltejs/site-kit": "3.2.2",
"codemirror": "^5.65.1", "acorn": "^8.8.2",
"estree-walker": "^3.0.1", "codemirror": "5.65.1",
"rollup": "^2.67.0", "estree-walker": "^3.0.3",
"svelte-json-tree": "^1.0.0", "svelte-json-tree": "^1.0.0",
"yootils": "^0.3.1" "yootils": "^0.3.1"
} }
}, },
"node_modules/@sveltejs/repl/node_modules/@sveltejs/site-kit": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-2.1.4.tgz",
"integrity": "sha512-PxpbiCWYXJ320abc6ucp3AXhh6YCggf6ea+EVA6W+wCBe45UFoChfoeQYeD6sQxPZN25XntoS4clZeYnt9H93Q==",
"dependencies": {
"golden-fleece": "^1.0.9"
}
},
"node_modules/@sveltejs/site-kit": { "node_modules/@sveltejs/site-kit": {
"version": "3.2.2", "version": "3.2.2",
"resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-3.2.2.tgz", "resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-3.2.2.tgz",
"integrity": "sha512-HBLtfNdLr5Ykl8i8CvJcYjib7zMIJupg4T/omplp3ccpgpiUh26tk71vRG1+a6yMkfbfy0ShoPb9uwNril5cnw==", "integrity": "sha512-HBLtfNdLr5Ykl8i8CvJcYjib7zMIJupg4T/omplp3ccpgpiUh26tk71vRG1+a6yMkfbfy0ShoPb9uwNril5cnw=="
"dev": true
}, },
"node_modules/@sveltejs/vite-plugin-svelte": { "node_modules/@sveltejs/vite-plugin-svelte": {
"version": "2.0.2", "version": "2.0.2",
@ -1616,9 +1612,9 @@
"dev": true "dev": true
}, },
"node_modules/codemirror": { "node_modules/codemirror": {
"version": "5.65.11", "version": "5.65.1",
"resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.11.tgz", "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.1.tgz",
"integrity": "sha512-Gp62g2eKSCHYt10axmGhKq3WoJSvVpvhXmowNq7pZdRVowwtvBR/hi2LSP5srtctKkRT33T6/n8Kv1UGp7JW4A==" "integrity": "sha512-s6aac+DD+4O2u1aBmdxhB7yz2XU7tG3snOyQ05Kxifahz7hoxnfxIRHxiCSEv3TUC38dIVH8G+lZH9UWSfGQxA=="
}, },
"node_modules/color": { "node_modules/color": {
"version": "4.2.3", "version": "4.2.3",
@ -2109,6 +2105,7 @@
"version": "2.3.2", "version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
"dev": true,
"hasInstallScript": true, "hasInstallScript": true,
"optional": true, "optional": true,
"os": [ "os": [
@ -2194,11 +2191,6 @@
"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==", "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
"dev": true "dev": true
}, },
"node_modules/golden-fleece": {
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/golden-fleece/-/golden-fleece-1.0.9.tgz",
"integrity": "sha512-YSwLaGMOgSBx9roJlNLL12c+FRiw7VECphinc6mGucphc/ZxTHgdEz6gmJqH6NOzYEd/yr64hwjom5pZ+tJVpg=="
},
"node_modules/graceful-fs": { "node_modules/graceful-fs": {
"version": "4.2.10", "version": "4.2.10",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@ -3151,6 +3143,9 @@
"version": "2.79.1", "version": "2.79.1",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
"integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
"dev": true,
"optional": true,
"peer": true,
"bin": { "bin": {
"rollup": "dist/bin/rollup" "rollup": "dist/bin/rollup"
}, },
@ -4706,6 +4701,11 @@
"dev": true, "dev": true,
"optional": true "optional": true
}, },
"@rollup/browser": {
"version": "3.15.0",
"resolved": "https://registry.npmjs.org/@rollup/browser/-/browser-3.15.0.tgz",
"integrity": "sha512-uvteGT8QpNSxwrjFNXd/M1NGdHTqQn6KAK7+dxvelrZb+d3oFej4Fzo1CTkaSysF45J03TSLWMjM6nRzJfFdhA=="
},
"@rollup/pluginutils": { "@rollup/pluginutils": {
"version": "5.0.2", "version": "5.0.2",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
@ -4820,34 +4820,23 @@
} }
}, },
"@sveltejs/repl": { "@sveltejs/repl": {
"version": "0.0.3", "version": "0.1.2",
"resolved": "https://registry.npmjs.org/@sveltejs/repl/-/repl-0.0.3.tgz", "resolved": "https://registry.npmjs.org/@sveltejs/repl/-/repl-0.1.2.tgz",
"integrity": "sha512-IcJa1SjS6ZopT4hpCA3iGmcQ6fn44M7GPLiSDeWQwVvRc7npyCoNB6G9POwsWxFdsBV1gzCHTmEnmOOpFsRnmQ==", "integrity": "sha512-NsrBDQ82Ko8NGxGUA6ko/7acMM2WyJNA40/IP+cLp8ykcas5mwrqeiaPP4GmKM0olr3GHPwwxzVdEHcjx03a/Q==",
"requires": { "requires": {
"@sveltejs/site-kit": "2.1.4", "@rollup/browser": "^3.15.0",
"acorn": "^8.7.0", "@sveltejs/site-kit": "3.2.2",
"codemirror": "^5.65.1", "acorn": "^8.8.2",
"estree-walker": "^3.0.1", "codemirror": "5.65.1",
"rollup": "^2.67.0", "estree-walker": "^3.0.3",
"svelte-json-tree": "^1.0.0", "svelte-json-tree": "^1.0.0",
"yootils": "^0.3.1" "yootils": "^0.3.1"
},
"dependencies": {
"@sveltejs/site-kit": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-2.1.4.tgz",
"integrity": "sha512-PxpbiCWYXJ320abc6ucp3AXhh6YCggf6ea+EVA6W+wCBe45UFoChfoeQYeD6sQxPZN25XntoS4clZeYnt9H93Q==",
"requires": {
"golden-fleece": "^1.0.9"
}
}
} }
}, },
"@sveltejs/site-kit": { "@sveltejs/site-kit": {
"version": "3.2.2", "version": "3.2.2",
"resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-3.2.2.tgz", "resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-3.2.2.tgz",
"integrity": "sha512-HBLtfNdLr5Ykl8i8CvJcYjib7zMIJupg4T/omplp3ccpgpiUh26tk71vRG1+a6yMkfbfy0ShoPb9uwNril5cnw==", "integrity": "sha512-HBLtfNdLr5Ykl8i8CvJcYjib7zMIJupg4T/omplp3ccpgpiUh26tk71vRG1+a6yMkfbfy0ShoPb9uwNril5cnw=="
"dev": true
}, },
"@sveltejs/vite-plugin-svelte": { "@sveltejs/vite-plugin-svelte": {
"version": "2.0.2", "version": "2.0.2",
@ -5104,9 +5093,9 @@
"dev": true "dev": true
}, },
"codemirror": { "codemirror": {
"version": "5.65.11", "version": "5.65.1",
"resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.11.tgz", "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.1.tgz",
"integrity": "sha512-Gp62g2eKSCHYt10axmGhKq3WoJSvVpvhXmowNq7pZdRVowwtvBR/hi2LSP5srtctKkRT33T6/n8Kv1UGp7JW4A==" "integrity": "sha512-s6aac+DD+4O2u1aBmdxhB7yz2XU7tG3snOyQ05Kxifahz7hoxnfxIRHxiCSEv3TUC38dIVH8G+lZH9UWSfGQxA=="
}, },
"color": { "color": {
"version": "4.2.3", "version": "4.2.3",
@ -5495,6 +5484,7 @@
"version": "2.3.2", "version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
"dev": true,
"optional": true "optional": true
}, },
"function-bind": { "function-bind": {
@ -5564,11 +5554,6 @@
"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==", "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
"dev": true "dev": true
}, },
"golden-fleece": {
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/golden-fleece/-/golden-fleece-1.0.9.tgz",
"integrity": "sha512-YSwLaGMOgSBx9roJlNLL12c+FRiw7VECphinc6mGucphc/ZxTHgdEz6gmJqH6NOzYEd/yr64hwjom5pZ+tJVpg=="
},
"graceful-fs": { "graceful-fs": {
"version": "4.2.10", "version": "4.2.10",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@ -6257,6 +6242,9 @@
"version": "2.79.1", "version": "2.79.1",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
"integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
"dev": true,
"optional": true,
"peer": true,
"requires": { "requires": {
"fsevents": "~2.3.2" "fsevents": "~2.3.2"
} }

2
sites/svelte.dev/package.json
Unescape View File

@ -17,7 +17,7 @@
}, },
"dependencies": { "dependencies": {
"@supabase/supabase-js": "^2.7.1", "@supabase/supabase-js": "^2.7.1",
"@sveltejs/repl": "0.0.3", "@sveltejs/repl": "^0.1.2",
"cookie": "^0.5.0", "cookie": "^0.5.0",
"devalue": "^4.2.3", "devalue": "^4.2.3",
"do-not-zip": "^1.0.0", "do-not-zip": "^1.0.0",

1
sites/svelte.dev/src/config.js
Unescape View File

@ -1,7 +1,6 @@
// REPL props // REPL props
export const svelteUrl = `https://unpkg.com/svelte@3`; export const svelteUrl = `https://unpkg.com/svelte@3`;
export const rollupUrl = `https://unpkg.com/rollup@1/dist/rollup.browser.js`;
export const mapbox_setup = `window.MAPBOX_ACCESS_TOKEN = '${ export const mapbox_setup = `window.MAPBOX_ACCESS_TOKEN = '${
import.meta.env.VITE_MAPBOX_ACCESS_TOKEN import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
}';`; }';`;

2
sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte
Unescape View File

@ -41,7 +41,7 @@
afterNavigate(() => { afterNavigate(() => {
repl.set({ repl.set({
components: data.gist.components components: data.gist.components,
}); });
}); });

10
sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte
Unescape View File

@ -243,8 +243,8 @@ export default app;`,
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0.6rem var(--side-nav); padding: 0.6rem var(--side-nav);
background-color: var(--second); background-color: var(--sk-back-4);
color: white; color: var(--sk-text-1);
white-space: nowrap; white-space: nowrap;
flex: 0; flex: 0;
} }
@ -256,9 +256,9 @@ export default app;`,
padding: 0.2em; padding: 0.2em;
opacity: 0.7; opacity: 0.7;
transition: opacity 0.3s; transition: opacity 0.3s;
font-family: var(--font); font-family: var(--sk-font);
font-size: 1.6rem; font-size: 1.6rem;
color: white; color: var(--sk-text-1);
/* width: 1.6em; /* width: 1.6em;
height: 1.6em; */ height: 1.6em; */
line-height: 1; line-height: 1;
@ -280,7 +280,7 @@ export default app;`,
background: transparent; background: transparent;
border: none; border: none;
color: currentColor; color: currentColor;
font-family: var(--font); font-family: var(--sk-font);
font-size: 1.6rem; font-size: 1.6rem;
opacity: 0.7; opacity: 0.7;
outline: none; outline: none;

22
sites/svelte.dev/src/routes/+layout.svelte
Unescape View File

@ -52,6 +52,10 @@
</main> </main>
<style> <style>
:global(:root) {
color-scheme: light dark;
}
@media (max-width: 830px) { @media (max-width: 830px) {
:global(aside) { :global(aside) {
z-index: 9999 !important; z-index: 9999 !important;
@ -84,26 +88,22 @@
} }
} }
/** Ukraine banner */ :global(html, body) {
:root { height: 100%;
--ukr-footer-height: 48px; width: 100%;
} }
main { /* :global(.examples-container, .repl-outer, .tutorial-outer) {
padding-bottom: var(--ukr-footer-height);
}
:global(.examples-container, .repl-outer, .tutorial-outer) {
height: calc(100vh - var(--nav-h) - var(--ukr-footer-height)) !important; height: calc(100vh - var(--nav-h) - var(--ukr-footer-height)) !important;
} } */
:global(.toggle) { :global(.toggle) {
bottom: var(--ukr-footer-height) !important; bottom: var(--ukr-footer-height) !important;
} }
:global(.zen-mode) { /* :global(.zen-mode) {
height: calc(100vh - var(--ukr-footer-height)) !important; height: calc(100vh - var(--ukr-footer-height)) !important;
} } */
@media (max-width: 830px) { @media (max-width: 830px) {
:global(aside) { :global(aside) {

10
sites/svelte.dev/src/routes/_components/Demo.svelte
Unescape View File

@ -17,12 +17,14 @@
{ {
id: 'reactive-assignments', id: 'reactive-assignments',
title: 'Reactivity', title: 'Reactivity',
description: 'Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.', description:
'Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.',
}, },
{ {
id: 'svg-transitions', id: 'svg-transitions',
title: 'Transitions', title: 'Transitions',
description: 'Build beautiful UIs with a powerful, performant transition engine built right into the framework.', description:
'Build beautiful UIs with a powerful, performant transition engine built right into the framework.',
}, },
]; ];
@ -102,8 +104,8 @@
} }
button.selected { button.selected {
background-color: white; background-color: var(--sk-back-1);
color: var(--sk-back-1); color: var(--sk-text-2);
} }
.small-show { .small-show {

2
sites/svelte.dev/src/routes/_components/Section.svelte
Unescape View File

@ -5,7 +5,7 @@
<style> <style>
section { section {
padding: 10rem 0; padding: 10rem 0;
background: var(--background, white); background: var(--background, var(--sk-back-2));
} }
.inner { .inner {

8
sites/svelte.dev/src/routes/_components/Supporters/index.svelte
Unescape View File

@ -4,9 +4,7 @@
import donors from './donors.js'; import donors from './donors.js';
</script> </script>
<Section <Section>
--background="radial-gradient(circle at top right, rgb(230, 233, 236), rgb(244, 245, 247))"
>
<p class="intro"> <p class="intro">
Svelte is free and open source software, made possible by the work of hundreds of supporters. Svelte is free and open source software, made possible by the work of hundreds of supporters.
</p> </p>
@ -50,7 +48,7 @@
<style> <style>
h3 { h3 {
color: var(--text); color: var(--sk-text-2);
} }
.intro { .intro {
@ -112,7 +110,7 @@
} }
.intro { .intro {
font-size: var(--h3); font-size: var(--sk-text-m);
} }
h3 { h3 {

9
sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte
Unescape View File

@ -35,7 +35,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0; padding: 0;
color: var(--text); color: var(--sk-text-2);
filter: grayscale(1) contrast(4) opacity(0.4) invert(var(--invert, 0)); filter: grayscale(1) contrast(4) opacity(0.4) invert(var(--invert, 0));
grid-column: span 2; grid-column: span 2;
} }
@ -73,4 +73,11 @@
--row-size: 5; --row-size: 5;
} }
} }
@media (prefers-color-scheme: dark) {
a {
--invert: 1;
filter: grayscale(1) contrast(4) opacity(0.7) invert(var(--invert, 0));
}
}
</style> </style>

23
sites/svelte.dev/src/routes/blog/+page.svelte
Unescape View File

@ -35,8 +35,8 @@
.posts { .posts {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-gap: 1em; grid-gap: 1em;
min-height: calc(100vh - var(--nav-h)); min-height: calc(100vh - var(--sk-nav-height));
padding: var(--top-offset) var(--side-nav) 6rem var(--side-nav); padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
max-width: var(--main-width); max-width: var(--main-width);
margin: 0 auto; margin: 0 auto;
} }
@ -44,9 +44,9 @@
h2 { h2 {
display: inline-block; display: inline-block;
margin: 3.2rem 0 0.4rem 0; margin: 3.2rem 0 0.4rem 0;
color: var(--text); color: var(--sk-text-2);
max-width: 18em; max-width: 18em;
font-size: var(--h3); font-size: var(--sk-text-m);
font-weight: 400; font-weight: 400;
} }
@ -59,14 +59,13 @@
.post:first-child h2 { .post:first-child h2 {
font-size: 4rem; font-size: 4rem;
font-weight: 400; font-weight: 400;
color: var(--second); color: var(--sk-text-2);
} }
.post:first-child::before, .post:where(:first-child, :nth-child(2))::before {
.post:nth-child(2)::before {
content: 'Latest post • ' attr(data-pubdate); content: 'Latest post • ' attr(data-pubdate);
color: var(--flash); color: var(--sk-theme-3);
font-size: var(--h6); font-size: var(--sk-text-xs);
font-weight: 400; font-weight: 400;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
@ -77,9 +76,9 @@
} }
.post p { .post p {
font-size: var(--h5); font-size: var(--sk-text-s);
max-width: 30em; max-width: 30em;
color: var(--second); color: var(--sk-text-3);
} }
.post > a { .post > a {
@ -88,6 +87,6 @@
.posts a:hover, .posts a:hover,
.posts a:hover > h2 { .posts a:hover > h2 {
color: var(--flash); color: var(--sk-theme-3);
} }
</style> </style>

32
sites/svelte.dev/src/routes/blog/[slug]/+page.svelte
Unescape View File

@ -35,7 +35,7 @@
<style> <style>
.post { .post {
padding: var(--top-offset) var(--side-nav) 6rem var(--side-nav); padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
max-width: var(--main-width); max-width: var(--main-width);
margin: 0 auto; margin: 0 auto;
} }
@ -46,21 +46,21 @@
} }
.standfirst { .standfirst {
font-size: var(--h4); font-size: var(--sk-text-s);
color: var(--second); color: var(--sk-text-3);
margin: 0 0 1em 0; margin: 0 0 1em 0;
} }
.byline { .byline {
margin: 0 0 6rem 0; margin: 0 0 6rem 0;
padding: 1.6rem 0 0 0; padding: 1.6rem 0 0 0;
border-top: var(--border-w) solid #6767785b; border-top: var(--sk-thick-border-width) solid #6767785b;
font-size: var(--h6); font-size: var(--sk-text-xs);
text-transform: uppercase; text-transform: uppercase;
} }
.post h1 { .post h1 {
color: var(--second); color: var(--sk-text-2);
max-width: 20em; max-width: 20em;
margin: 0 0 0.8rem 0; margin: 0 0 0.8rem 0;
} }
@ -68,8 +68,8 @@
.post :global(h2) { .post :global(h2) {
margin: 2em 0 0.5em 0; margin: 2em 0 0.5em 0;
/* color: var(--second); */ /* color: var(--second); */
color: var(--text); color: var(--sk-text-2);
font-size: var(--h3); font-size: var(--sk-text-m);
font-weight: 300; font-weight: 300;
} }
@ -82,7 +82,7 @@
} }
.post :global(figcaption) { .post :global(figcaption) {
color: var(--second); color: var(--sk-theme-2);
text-align: left; text-align: left;
} }
@ -94,14 +94,14 @@
max-width: none; max-width: none;
border-left: 4px solid #eee; border-left: 4px solid #eee;
background: #f9f9f9; background: #f9f9f9;
border-radius: 0 var(--border-r) var(--border-r) 0; border-radius: 0 var(--sk-border-radius) var(--sk-border-radius) 0;
} }
.post :global(code) { .post :global(code) {
padding: 0.3rem 0.8rem 0.3rem; padding: 0.3rem 0.8rem 0.3rem;
margin: 0 0.2rem; margin: 0 0.2rem;
top: -0.1rem; top: -0.1rem;
background: var(--back-api); background: var(--sk-back-4);
} }
.post :global(pre) :global(code) { .post :global(pre) :global(code) {
@ -115,7 +115,7 @@
float: right; float: right;
margin: 0 0 1em 1em; margin: 0 0 1em 1em;
width: 16rem; width: 16rem;
color: var(--second); color: var(--sk-theme-2);
z-index: 2; z-index: 2;
} }
@ -127,12 +127,12 @@
width: 100%; width: 100%;
height: 420px; height: 420px;
margin: 2em 0; margin: 2em 0;
border-radius: var(--border-r); border-radius: var(--sk-border-radius);
border: 0.8rem solid var(--second); border: 0.8rem solid var(--sk-theme-2);
} }
.post :global(.anchor) { .post :global(.anchor) {
top: calc((var(--h3) - 24px) / 2); top: calc((var(--sk-text-m) - 24px) / 2);
} }
.post :global(a) { .post :global(a) {
@ -154,7 +154,7 @@
@media (min-width: 910px) { @media (min-width: 910px) {
.post :global(.max) { .post :global(.max) {
width: calc(100vw - 2 * var(--side-nav)); width: calc(100vw - 2 * var(--sk-page-padding-side));
margin: 0 calc(var(--main-width) / 2 - 50vw); margin: 0 calc(var(--main-width) / 2 - 50vw);
text-align: center; text-align: center;
} }

13
sites/svelte.dev/src/routes/examples/[slug]/+page.svelte
Unescape View File

@ -6,16 +6,17 @@
import ScreenToggle from '$lib/components/ScreenToggle.svelte'; import ScreenToggle from '$lib/components/ScreenToggle.svelte';
import { import {
mapbox_setup, // see site/content/examples/15-context/00-context-api mapbox_setup, // see site/content/examples/15-context/00-context-api
rollupUrl, svelteUrl,
svelteUrl
} from '../../../config'; } from '../../../config';
import TableOfContents from './_TableOfContents.svelte'; import TableOfContents from './_TableOfContents.svelte';
/** @type {import('./$types').PageData} */ /** @type {import('./$types').PageData} */
export let data; export let data;
/** @type {number} */
let width; let width;
let offset = 1; let offset = 1;
/** @type {import('@sveltejs/repl').default} */
let repl; let repl;
const { sections } = getContext('examples'); const { sections } = getContext('examples');
@ -23,7 +24,7 @@
const clone = (file) => ({ const clone = (file) => ({
name: file.name.replace(/.\w+$/, ''), name: file.name.replace(/.\w+$/, ''),
type: file.type, type: file.type,
source: file.content source: file.content,
}); });
$: mobile = width < 768; // note: same as per media query below $: mobile = width < 768; // note: same as per media query below
@ -43,12 +44,11 @@
<h1 class="visually-hidden">Examples</h1> <h1 class="visually-hidden">Examples</h1>
<div class="examples-container" bind:clientWidth={width}> <div class="examples-container" bind:clientWidth={width}>
<div class="viewport offset-{offset}"> <div class="viewport offset-{offset}">
<TableOfContents {sections} active_section={data.example.slug} isLoading={$navigating} /> <TableOfContents {sections} active_section={data.example.slug} isLoading={!!$navigating} />
<div class="repl-container" class:loading={$navigating}> <div class="repl-container" class:loading={$navigating}>
<Repl <Repl
bind:this={repl} bind:this={repl}
{svelteUrl} {svelteUrl}
{rollupUrl}
orientation={replOrientation} orientation={replOrientation}
fixed={mobile} fixed={mobile}
relaxed relaxed
@ -64,7 +64,7 @@
<style> <style>
.examples-container { .examples-container {
position: relative; position: relative;
height: calc(100vh - var(--nav-h)); height: calc(100vh - var(--sk-nav-height));
overflow: hidden; overflow: hidden;
padding: 0 0 42px 0; padding: 0 0 42px 0;
box-sizing: border-box; box-sizing: border-box;
@ -113,6 +113,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
display: grid; display: grid;
/* TODO */
grid-template-columns: var(--sidebar-mid-w) auto; grid-template-columns: var(--sidebar-mid-w) auto;
grid-auto-rows: 100%; grid-auto-rows: 100%;
transition: none; transition: none;

15
sites/svelte.dev/src/routes/examples/[slug]/_TableOfContents.svelte
Unescape View File

@ -46,10 +46,11 @@
.examples-toc { .examples-toc {
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
border-right: 1px solid var(--second); border-right: 1px solid var(--sk-back-4);
background-color: var(--second); background-color: var(--sk-back-4);
color: white; color: var(--sk-text-2);
padding: 3rem 3rem 0 3rem; padding: 3rem 3rem 0 3rem;
margin: 0;
} }
.examples-toc li { .examples-toc li {
@ -61,7 +62,7 @@
.section-title { .section-title {
display: block; display: block;
padding: 0 0 0.8rem 0; padding: 0 0 0.8rem 0;
font: 400 var(--h6) var(--font); font: 400 var(--sk-text-xs) var(--sk-font);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.12em; letter-spacing: 0.12em;
font-weight: 700; font-weight: 700;
@ -88,7 +89,7 @@
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
position: relative; position: relative;
color: var(--sidebar-text); color: var(--sk-text-2);
border-bottom: none; border-bottom: none;
font-size: 1.6rem; font-size: 1.6rem;
align-items: center; align-items: center;
@ -97,7 +98,7 @@
} }
a:hover { a:hover {
color: white; color: var(--sk-text-1);
} }
.repl-link { .repl-link {
@ -108,7 +109,7 @@
} }
.thumbnail { .thumbnail {
background-color: white; background-color: var(--sk-back-1);
object-fit: contain; object-fit: contain;
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;

63
sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
Unescape View File

@ -9,7 +9,6 @@
import { import {
mapbox_setup, // needed for context API tutorial mapbox_setup, // needed for context API tutorial
rollupUrl,
svelteUrl, svelteUrl,
} from '../../../config.js'; } from '../../../config.js';
@ -138,7 +137,6 @@
<Repl <Repl
bind:this={repl} bind:this={repl}
{svelteUrl} {svelteUrl}
{rollupUrl}
orientation={mobile ? 'columns' : 'rows'} orientation={mobile ? 'columns' : 'rows'}
fixed={mobile} fixed={mobile}
on:change={handle_change} on:change={handle_change}
@ -157,7 +155,7 @@
<style> <style>
.tutorial-outer { .tutorial-outer {
position: relative; position: relative;
height: calc(100vh - var(--nav-h)); height: calc(100vh - var(--sk-nav-height));
overflow: hidden; overflow: hidden;
padding: 0 0 42px 0; padding: 0 0 42px 0;
box-sizing: border-box; box-sizing: border-box;
@ -203,9 +201,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
border-right: 1px solid var(--second); border-right: 1px solid var(--sk-back-4);
background-color: var(--second); background-color: var(--sk-back-4);
color: var(--sidebar-text); color: var(--sk-text-2);
} }
.chapter-markup { .chapter-markup {
@ -217,10 +215,10 @@
.chapter-markup :global(h2) { .chapter-markup :global(h2) {
margin: 4rem 0 1.6rem 0; margin: 4rem 0 1.6rem 0;
font-size: var(--h3); font-size: var(--sk-text-m);
line-height: 1; line-height: 1;
font-weight: 400; font-weight: 400;
color: white; color: var(--sk-text-2);
} }
.chapter-markup :global(h2:first-child) { .chapter-markup :global(h2:first-child) {
@ -230,11 +228,11 @@
.chapter-markup :global(a) { .chapter-markup :global(a) {
transition: color 0.2s; transition: color 0.2s;
text-decoration: underline; text-decoration: underline;
color: var(--sidebar-text); color: var(--sk-text-2);
} }
.chapter-markup :global(a:hover) { .chapter-markup :global(a:hover) {
color: white; color: var(--sk-text-1);
} }
.chapter-markup :global(ul) { .chapter-markup :global(ul) {
@ -243,29 +241,38 @@
.chapter-markup :global(blockquote) { .chapter-markup :global(blockquote) {
background-color: rgba(0, 0, 0, 0.17); background-color: rgba(0, 0, 0, 0.17);
color: var(--sidebar-text); color: var(--sk-text-2);
} }
.chapter-markup::-webkit-scrollbar { .chapter-markup::-webkit-scrollbar {
background-color: var(--second); background-color: var(--sk-theme-2);
width: 8px; width: 8px;
} }
.chapter-markup::-webkit-scrollbar-thumb { .chapter-markup::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.7); background-color: var(--sk-scrollbar);
border-radius: 1em; border-radius: 1em;
} }
.chapter-markup :global(p) > :global(code), .chapter-markup :global(p) > :global(code),
.chapter-markup :global(ul) :global(code) { .chapter-markup :global(ul) :global(code) {
color: var(--sidebar-text); color: var(--sk-code-base);
background: rgba(0, 0, 0, 0.12); background: var(--sk-code-bg);
padding: 0.2em 0.4em 0.3em; padding: 0.2em 0.4em 0.3em;
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
top: -0.1em; top: -0.1em;
} }
.chapter-markup :global(:where(pre.language-markup)) {
background-color: var(--sk-code-bg);
color: var(--sk-code-base);
border-radius: 0.5rem;
padding: 1rem;
margin: 0 0 1rem;
font-size: 14px;
}
.controls { .controls {
border-top: 1px solid rgba(255, 255, 255, 0.15); border-top: 1px solid rgba(255, 255, 255, 0.15);
padding: 1em 0 0 0; padding: 1em 0 0 0;
@ -274,12 +281,12 @@
} }
.show { .show {
background: var(--prime); background: var(--sk-theme-1);
padding: 0.3em 0.7em; padding: 0.3em 0.7em;
border-radius: var(--border-r); border-radius: var(--sk-border-radius);
top: 0.1em; top: 0.1em;
position: relative; position: relative;
font-size: var(--h5); font-size: var(--sk-text-s);
font-weight: 300; font-weight: 300;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
} }
@ -301,14 +308,32 @@
} }
.improve-chapter a { .improve-chapter a {
color: var(--sk-text-2);
font-size: 14px; font-size: 14px;
text-decoration: none; text-decoration: none;
opacity: 0.3; opacity: 0.6;
padding: 0 0.1em 0 1.2em; padding: 0 0.1em 0 1.2em;
}
.improve-chapter a::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 1em;
background: no-repeat 0 50% url(/icons/edit.svg); background: no-repeat 0 50% url(/icons/edit.svg);
background-size: 1em 1em; background-size: 1em 1em;
} }
@media (prefers-color-scheme: light) {
.improve-chapter a::before {
filter: invert(1);
}
}
.improve-chapter a:hover { .improve-chapter a:hover {
opacity: 1; opacity: 1;
} }

6
sites/svelte.dev/src/routes/tutorial/[slug]/_TableOfContents.svelte
Unescape View File

@ -67,8 +67,8 @@
position: relative; position: relative;
padding: 1em 0.5em; padding: 1em 0.5em;
font-weight: 300; font-weight: 300;
font-size: var(--h6); font-size: var(--sk-text-xs);
color: white; color: var(--sk-text-2);
} }
a { a {
@ -76,7 +76,7 @@
padding: 0.7em 0; padding: 0.7em 0;
text-align: center; text-align: center;
opacity: 0.75; opacity: 0.75;
color: white; color: var(--sk-text-2);
} }
a:hover { a:hover {

Write Preview
Loading…
Cancel
Save