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

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

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

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

@ -1,7 +1,6 @@
// REPL props
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 = '${
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(() => {
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;
justify-content: space-between;
padding: 0.6rem var(--side-nav);
background-color: var(--second);
color: white;
background-color: var(--sk-back-4);
color: var(--sk-text-1);
white-space: nowrap;
flex: 0;
}
@ -256,9 +256,9 @@ export default app;`,
padding: 0.2em;
opacity: 0.7;
transition: opacity 0.3s;
font-family: var(--font);
font-family: var(--sk-font);
font-size: 1.6rem;
color: white;
color: var(--sk-text-1);
/* width: 1.6em;
height: 1.6em; */
line-height: 1;
@ -280,7 +280,7 @@ export default app;`,
background: transparent;
border: none;
color: currentColor;
font-family: var(--font);
font-family: var(--sk-font);
font-size: 1.6rem;
opacity: 0.7;
outline: none;

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

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

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

@ -17,12 +17,14 @@
{
id: 'reactive-assignments',
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',
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 {
background-color: white;
color: var(--sk-back-1);
background-color: var(--sk-back-1);
color: var(--sk-text-2);
}
.small-show {

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

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

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

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

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

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

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

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

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

@ -35,7 +35,7 @@
<style>
.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);
margin: 0 auto;
}
@ -46,21 +46,21 @@
}
.standfirst {
font-size: var(--h4);
color: var(--second);
font-size: var(--sk-text-s);
color: var(--sk-text-3);
margin: 0 0 1em 0;
}
.byline {
margin: 0 0 6rem 0;
padding: 1.6rem 0 0 0;
border-top: var(--border-w) solid #6767785b;
font-size: var(--h6);
border-top: var(--sk-thick-border-width) solid #6767785b;
font-size: var(--sk-text-xs);
text-transform: uppercase;
}
.post h1 {
color: var(--second);
color: var(--sk-text-2);
max-width: 20em;
margin: 0 0 0.8rem 0;
}
@ -68,8 +68,8 @@
.post :global(h2) {
margin: 2em 0 0.5em 0;
/* color: var(--second); */
color: var(--text);
font-size: var(--h3);
color: var(--sk-text-2);
font-size: var(--sk-text-m);
font-weight: 300;
}
@ -82,7 +82,7 @@
}
.post :global(figcaption) {
color: var(--second);
color: var(--sk-theme-2);
text-align: left;
}
@ -94,14 +94,14 @@
max-width: none;
border-left: 4px solid #eee;
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) {
padding: 0.3rem 0.8rem 0.3rem;
margin: 0 0.2rem;
top: -0.1rem;
background: var(--back-api);
background: var(--sk-back-4);
}
.post :global(pre) :global(code) {
@ -115,7 +115,7 @@
float: right;
margin: 0 0 1em 1em;
width: 16rem;
color: var(--second);
color: var(--sk-theme-2);
z-index: 2;
}
@ -127,12 +127,12 @@
width: 100%;
height: 420px;
margin: 2em 0;
border-radius: var(--border-r);
border: 0.8rem solid var(--second);
border-radius: var(--sk-border-radius);
border: 0.8rem solid var(--sk-theme-2);
}
.post :global(.anchor) {
top: calc((var(--h3) - 24px) / 2);
top: calc((var(--sk-text-m) - 24px) / 2);
}
.post :global(a) {
@ -154,7 +154,7 @@
@media (min-width: 910px) {
.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);
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 {
mapbox_setup, // see site/content/examples/15-context/00-context-api
rollupUrl,
svelteUrl
svelteUrl,
} from '../../../config';
import TableOfContents from './_TableOfContents.svelte';
/** @type {import('./$types').PageData} */
export let data;
/** @type {number} */
let width;
let offset = 1;
/** @type {import('@sveltejs/repl').default} */
let repl;
const { sections } = getContext('examples');
@ -23,7 +24,7 @@
const clone = (file) => ({
name: file.name.replace(/.\w+$/, ''),
type: file.type,
source: file.content
source: file.content,
});
$: mobile = width < 768; // note: same as per media query below
@ -43,12 +44,11 @@
<h1 class="visually-hidden">Examples</h1>
<div class="examples-container" bind:clientWidth={width}>
<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}>
<Repl
bind:this={repl}
{svelteUrl}
{rollupUrl}
orientation={replOrientation}
fixed={mobile}
relaxed
@ -64,7 +64,7 @@
<style>
.examples-container {
position: relative;
height: calc(100vh - var(--nav-h));
height: calc(100vh - var(--sk-nav-height));
overflow: hidden;
padding: 0 0 42px 0;
box-sizing: border-box;
@ -113,6 +113,7 @@
width: 100%;
height: 100%;
display: grid;
/* TODO */
grid-template-columns: var(--sidebar-mid-w) auto;
grid-auto-rows: 100%;
transition: none;

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save