diff --git a/site/src/components/TopNav.html b/site/src/components/TopNav.html index 358fe1e818..4a4ab9a871 100644 --- a/site/src/components/TopNav.html +++ b/site/src/components/TopNav.html @@ -63,7 +63,7 @@ margin: 0 auto; background-color: white; box-shadow: 0 -0.4rem 0.9rem 0.2rem rgba(0,0,0,.5); - font-family: var(--font-ui); + font-family: var(--font); z-index: 10; } diff --git a/site/src/routes/repl/_components/AppControls/UserMenu.html b/site/src/routes/repl/_components/AppControls/UserMenu.html index eff898df82..bb86371ed6 100644 --- a/site/src/routes/repl/_components/AppControls/UserMenu.html +++ b/site/src/routes/repl/_components/AppControls/UserMenu.html @@ -42,8 +42,8 @@ /* position: relative; padding: 0 2em 0 0; */ line-height: 1; display: none; - font-family: var(--font-ui); - font-size: 1.3rem; + font-family: var(--font); + font-size: 1.6rem; opacity: 0.7; } @@ -76,8 +76,8 @@ .menu button { background-color: transparent; - font-family: var(--font-ui); - font-size: 1.3rem; + font-family: var(--font); + font-size: 1.6rem; /* opacity: 0.7; */ } diff --git a/site/src/routes/repl/_components/AppControls/index.html b/site/src/routes/repl/_components/AppControls/index.html index fcc9ab4ee0..918dbd8e57 100644 --- a/site/src/routes/repl/_components/AppControls/index.html +++ b/site/src/routes/repl/_components/AppControls/index.html @@ -313,12 +313,12 @@ export default app;` }); padding: 0.2em; opacity: .7; transition: opacity .3s; - font-family: var(--font-ui); - font-size: 1.3rem; + font-family: var(--font); + font-size: 1.6rem; /* width: 1.6em; height: 1.6em; */ line-height: 1; - margin: 0 0 0 0.4em; + margin: 0 0 0 0.2em; } .icon:hover { opacity: 1 } @@ -330,8 +330,8 @@ export default app;` }); background: transparent; border: none; color: currentColor; - font-family: var(--font-ui); - font-size: 1.3rem; + font-family: var(--font); + font-size: 1.6rem; opacity: 0.7; outline: none; } diff --git a/site/src/routes/repl/_components/Input/ComponentSelector.html b/site/src/routes/repl/_components/Input/ComponentSelector.html index a086e3ba94..4064fb05ab 100644 --- a/site/src/routes/repl/_components/Input/ComponentSelector.html +++ b/site/src/routes/repl/_components/Input/ComponentSelector.html @@ -84,14 +84,16 @@ .file-tabs button { position: relative; - font: 300 1.2rem/1.5 var(--font-ui); + font: 300 1.2rem/1.5 var(--font); border-bottom: var(--border-w) solid transparent; padding: 1.2rem 1.2rem 0.8rem 0.5rem; margin: 0 0.5rem 0 0; + color: #999; } .file-tabs button.active { - color: var(--second); + /* color: var(--second); */ + color: #333; border-bottom: var(--border-w) solid var(--prime); } @@ -112,7 +114,7 @@ top: 1.2rem; /* padding: 0 0.4rem; */ /* font-size: 1rem; */ - font: 300 1.2rem/1.5 var(--font-ui); + font: 300 1.2rem/1.5 var(--font); border: none; color: var(--flash); outline: none; diff --git a/site/src/routes/repl/_components/InputOutputToggle.html b/site/src/routes/repl/_components/InputOutputToggle.html index 947299d2a3..68660088b1 100644 --- a/site/src/routes/repl/_components/InputOutputToggle.html +++ b/site/src/routes/repl/_components/InputOutputToggle.html @@ -13,52 +13,6 @@ input { display: block; - position: relative; - height: 1em; - width: calc(100% - 0.6em); - top: -2px; - border-radius: 0.5em; - -webkit-appearance: none; - outline: none; - margin: 0 0.6em 0 0; - } - - input::before { - content: ""; - position: absolute; - display: block; - height: 100%; - width: 100%; - border-radius: 1em; - top: 0px; - left: 0px; - background: var(--second); - box-sizing: border-box; - -webkit-transition: .25s ease-out; - padding: 2px; - box-sizing: content-box; - } - - input:checked::before { - background: var(--prime); - } - - input::after { - content: ""; - position: absolute; - display: block; - height: 1em; - width: 1em; - top: 2px; - left: 2px; - border-radius: 1em; - background: white; - box-shadow: 0 0px 1px rgba(0,0,0,.4), 0 4px 2px rgba(0,0,0,.1); - -webkit-transition: .2s ease-out; - } - - input:checked::after { - left: calc(100% - 9px); } span { diff --git a/site/src/routes/repl/_components/Output/index.html b/site/src/routes/repl/_components/Output/index.html index bc48577db1..bd52e6defa 100644 --- a/site/src/routes/repl/_components/Output/index.html +++ b/site/src/routes/repl/_components/Output/index.html @@ -15,6 +15,7 @@ export let sourceError; export let sourceErrorLoc; export let runtimeError; + export let compileOptions; // refs let viewer; @@ -56,14 +57,15 @@ height: 100%; */ text-align: left; position: relative; - font: 300 1.2rem/1.5 var(--font-ui); + font: 300 1.2rem/1.5 var(--font); border-bottom: var(--border-w) solid transparent; padding: 1.2rem 0.8rem 0.8rem 0.8rem; + color: #999; } button.active { border-bottom: var(--border-w) solid var(--prime); - color: var(--second); + color: #333; } div { @@ -71,8 +73,9 @@ } h3 { - font: 300 1.2rem/1.5 var(--font-ui); + font: 700 1.2rem/1.5 var(--font); padding: 1.2rem 0 0.8rem 1rem; + color: var(--text); } .loading.message { @@ -95,6 +98,13 @@ .options { padding: 0.5em; } + + label { + font-family: var(--font-ui); + font-size: 1.3rem; + padding: 0.2rem 1.2rem; + display: block; + }
@@ -153,10 +163,10 @@ {/each}
{:else} -
+
-

This component has no props — declare props with the export keyword

+

This component has no props — declare props with the export keyword

{/if} {/if} @@ -177,7 +187,35 @@

Compiler options

-
TODO
+ + + + + + + + + + + + + +
{/if} \ No newline at end of file diff --git a/site/src/routes/repl/_components/Repl.html b/site/src/routes/repl/_components/Repl.html index 4ea5fded60..4739fd2e9e 100644 --- a/site/src/routes/repl/_components/Repl.html +++ b/site/src/routes/repl/_components/Repl.html @@ -56,6 +56,16 @@ let sourceErrorLoc; let runtimeErrorLoc; + let compileOptions = { + generate: 'dom', + dev: false, + css: false, + hydratable: false, + customElement: false, + immutable: false, + legacy: false + }; + let width = typeof window !== 'undefined' ? window.innerWidth : 300; let show_output = false; @@ -106,15 +116,15 @@ } } - function compile(component) { + function compile(component, options) { if (component.type === 'html') { workers.compiler.postMessage({ type: 'compile', source: component.source, - options: { + options: Object.assign({ name: component.name, filename: `${component.name}.html` - }, + }, options), entry: component === $component_store[0] }); } else { @@ -136,7 +146,7 @@ component_store.update(c => c); // recompile selected component - compile($selected_store); + compile($selected_store, compileOptions); // regenerate bundle (TODO do this in a separate worker?) workers.bundler.postMessage({ type: 'bundle', components: $component_store }); @@ -168,7 +178,7 @@ } $: if (workers && $selected_store) { - compile($selected_store); + compile($selected_store, compileOptions); } @@ -288,6 +298,7 @@
- - diff --git a/site/static/fonts/overpass-mono/overpass-mono-latin-400.woff2 b/site/static/fonts/overpass-mono/overpass-mono-latin-400.woff2 new file mode 100644 index 0000000000..3b75148775 Binary files /dev/null and b/site/static/fonts/overpass-mono/overpass-mono-latin-400.woff2 differ diff --git a/site/static/fonts/overpass/overpass-latin-100.woff2 b/site/static/fonts/overpass/overpass-latin-100.woff2 new file mode 100644 index 0000000000..a828f98880 Binary files /dev/null and b/site/static/fonts/overpass/overpass-latin-100.woff2 differ diff --git a/site/static/fonts/overpass/overpass-latin-100italic.woff2 b/site/static/fonts/overpass/overpass-latin-100italic.woff2 new file mode 100644 index 0000000000..41b428fd32 Binary files /dev/null and b/site/static/fonts/overpass/overpass-latin-100italic.woff2 differ diff --git a/site/static/fonts/overpass/overpass-latin-300.woff2 b/site/static/fonts/overpass/overpass-latin-300.woff2 new file mode 100644 index 0000000000..15e204c35e Binary files /dev/null and b/site/static/fonts/overpass/overpass-latin-300.woff2 differ diff --git a/site/static/fonts/overpass/overpass-latin-300italic.woff2 b/site/static/fonts/overpass/overpass-latin-300italic.woff2 new file mode 100644 index 0000000000..5eab32d88d Binary files /dev/null and b/site/static/fonts/overpass/overpass-latin-300italic.woff2 differ diff --git a/site/static/fonts/overpass/overpass-latin-700.woff2 b/site/static/fonts/overpass/overpass-latin-700.woff2 new file mode 100644 index 0000000000..14a7f9cce5 Binary files /dev/null and b/site/static/fonts/overpass/overpass-latin-700.woff2 differ diff --git a/site/static/fonts/overpass/overpass-latin-700italic.woff2 b/site/static/fonts/overpass/overpass-latin-700italic.woff2 new file mode 100644 index 0000000000..ca998cc0f5 Binary files /dev/null and b/site/static/fonts/overpass/overpass-latin-700italic.woff2 differ diff --git a/site/static/global.css b/site/static/global.css index f5f0816cff..aea3f34bec 100644 --- a/site/static/global.css +++ b/site/static/global.css @@ -1,3 +1,90 @@ +/* fonts */ + +/* overpass-100normal - latin */ +@font-face { + font-family: 'Overpass'; + font-style: normal; + font-display: swap; + font-weight: 100; + src: + local('Overpass Thin '), + local('Overpass-Thin'), + url('fonts/overpass/overpass-latin-100.woff2') format('woff2'); +} + +/* overpass-100italic - latin */ +@font-face { + font-family: 'Overpass'; + font-style: italic; + font-display: swap; + font-weight: 100; + src: + local('Overpass Thin italic'), + local('Overpass-Thinitalic'), + url('fonts/overpass/overpass-latin-100italic.woff2') format('woff2'); +} + +/* overpass-300normal - latin */ +@font-face { + font-family: 'Overpass'; + font-style: normal; + font-display: swap; + font-weight: 300; + src: + local('Overpass Light '), + local('Overpass-Light'), + url('fonts/overpass/overpass-latin-300.woff2') format('woff2'); +} + +/* overpass-300italic - latin */ +@font-face { + font-family: 'Overpass'; + font-style: italic; + font-display: swap; + font-weight: 300; + src: + local('Overpass Light italic'), + local('Overpass-Lightitalic'), + url('fonts/overpass/overpass-latin-300italic.woff2') format('woff2'); +} + +/* overpass-700normal - latin */ +@font-face { + font-family: 'Overpass'; + font-style: normal; + font-display: swap; + font-weight: 700; + src: + local('Overpass Bold '), + local('Overpass-Bold'), + url('fonts/overpass/overpass-latin-700.woff2') format('woff2'); +} + +/* overpass-700italic - latin */ +@font-face { + font-family: 'Overpass'; + font-style: italic; + font-display: swap; + font-weight: 700; + src: + local('Overpass Bold italic'), + local('Overpass-Bolditalic'), + url('fonts/overpass/overpass-latin-700italic.woff2') format('woff2'); +} + +/* overpass-mono-400normal - latin */ +@font-face { + font-family: 'Overpass Mono'; + font-style: normal; + font-display: swap; + font-weight: 400; + src: + local('Overpass Mono Regular '), + local('Overpass Mono-Regular'), + url('fonts/overpass-mono/overpass-mono-latin-400.woff2') format('woff2'); +} + + body { --font: 'Overpass', sans-serif; --font-alt: 'Overpass', sans-serif; @@ -90,7 +177,7 @@ a:focus { .typo-default { --unit: .8rem; --code-fs: 1.3rem; - --h6: 1.4rem; + --h6: 1.6rem; --h5: 1.6rem; --h4: 1.8rem; --h3: 2.4rem; @@ -381,6 +468,64 @@ table span { .bg-flash { background-color: var(--flash) !important } +/* +----------------------------------------------- + inputs +----------------------------------------------- +*/ + +input[type="checkbox"] { + /* display: block; */ + position: relative; + height: 1em; + width: calc(100% - 0.6em); + max-width: 2em; + top: -2px; + border-radius: 0.5em; + -webkit-appearance: none; + outline: none; + margin: 0 0.6em 0 0; +} + +input[type="checkbox"]::before { + content: ""; + position: absolute; + display: block; + height: 100%; + width: 100%; + border-radius: 1em; + top: 0px; + left: 0px; + background: var(--second); + box-sizing: border-box; + -webkit-transition: .25s ease-out; + padding: 2px; + box-sizing: content-box; +} + +input[type="checkbox"]:checked::before { + background: var(--prime); +} + +input[type="checkbox"]::after { + content: ""; + position: absolute; + display: block; + height: 1em; + width: 1em; + top: 2px; + left: 2px; + border-radius: 1em; + background: white; + box-shadow: 0 0px 1px rgba(0,0,0,.4), 0 4px 2px rgba(0,0,0,.1); + -webkit-transition: .2s ease-out; +} + +input[type="checkbox"]:checked::after { + left: calc(100% - 9px); +} + + /* ----------------------------------------------- media-queries @@ -406,4 +551,3 @@ table span { .grid > .cols-2 { grid-column: span 2 } .grid > .cols-3 { grid-column: span 3 } } - diff --git a/site/static/logo.svg b/site/static/logo.svg index 19988afd96..12d04b0705 100644 --- a/site/static/logo.svg +++ b/site/static/logo.svg @@ -2,15 +2,4 @@ - - - \ No newline at end of file + \ No newline at end of file