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

tighten up styles in a few places

Browse Source
pull/1913/head
Rich Harris 6 years ago
parent 8768c5d7bd
commit 29e876d147
17 changed files with 222 additions and 86 deletions
Show Stats Download Patch File Download Diff File

2
site/src/components/TopNav.html
Unescape View File

@ -63,7 +63,7 @@
margin: 0 auto; margin: 0 auto;
background-color: white; background-color: white;
box-shadow: 0 -0.4rem 0.9rem 0.2rem rgba(0,0,0,.5); 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; z-index: 10;
} }

8
site/src/routes/repl/_components/AppControls/UserMenu.html
Unescape View File

@ -42,8 +42,8 @@
/* position: relative; padding: 0 2em 0 0; */ /* position: relative; padding: 0 2em 0 0; */
line-height: 1; line-height: 1;
display: none; display: none;
font-family: var(--font-ui); font-family: var(--font);
font-size: 1.3rem; font-size: 1.6rem;
opacity: 0.7; opacity: 0.7;
} }
@ -76,8 +76,8 @@
.menu button { .menu button {
background-color: transparent; background-color: transparent;
font-family: var(--font-ui); font-family: var(--font);
font-size: 1.3rem; font-size: 1.6rem;
/* opacity: 0.7; */ /* opacity: 0.7; */
} }

10
site/src/routes/repl/_components/AppControls/index.html
Unescape View File

@ -313,12 +313,12 @@ export default app;` });
padding: 0.2em; padding: 0.2em;
opacity: .7; opacity: .7;
transition: opacity .3s; transition: opacity .3s;
font-family: var(--font-ui); font-family: var(--font);
font-size: 1.3rem; font-size: 1.6rem;
/* width: 1.6em; /* width: 1.6em;
height: 1.6em; */ height: 1.6em; */
line-height: 1; line-height: 1;
margin: 0 0 0 0.4em; margin: 0 0 0 0.2em;
} }
.icon:hover { opacity: 1 } .icon:hover { opacity: 1 }
@ -330,8 +330,8 @@ export default app;` });
background: transparent; background: transparent;
border: none; border: none;
color: currentColor; color: currentColor;
font-family: var(--font-ui); font-family: var(--font);
font-size: 1.3rem; font-size: 1.6rem;
opacity: 0.7; opacity: 0.7;
outline: none; outline: none;
} }

8
site/src/routes/repl/_components/Input/ComponentSelector.html
Unescape View File

@ -84,14 +84,16 @@
.file-tabs button { .file-tabs button {
position: relative; 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; border-bottom: var(--border-w) solid transparent;
padding: 1.2rem 1.2rem 0.8rem 0.5rem; padding: 1.2rem 1.2rem 0.8rem 0.5rem;
margin: 0 0.5rem 0 0; margin: 0 0.5rem 0 0;
color: #999;
} }
.file-tabs button.active { .file-tabs button.active {
color: var(--second); /* color: var(--second); */
color: #333;
border-bottom: var(--border-w) solid var(--prime); border-bottom: var(--border-w) solid var(--prime);
} }
@ -112,7 +114,7 @@
top: 1.2rem; top: 1.2rem;
/* padding: 0 0.4rem; */ /* padding: 0 0.4rem; */
/* font-size: 1rem; */ /* font-size: 1rem; */
font: 300 1.2rem/1.5 var(--font-ui); font: 300 1.2rem/1.5 var(--font);
border: none; border: none;
color: var(--flash); color: var(--flash);
outline: none; outline: none;

46
site/src/routes/repl/_components/InputOutputToggle.html
Unescape View File

@ -13,52 +13,6 @@
input { input {
display: block; 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 { span {

50
site/src/routes/repl/_components/Output/index.html
Unescape View File

@ -15,6 +15,7 @@
export let sourceError; export let sourceError;
export let sourceErrorLoc; export let sourceErrorLoc;
export let runtimeError; export let runtimeError;
export let compileOptions;
// refs // refs
let viewer; let viewer;
@ -56,14 +57,15 @@
height: 100%; */ height: 100%; */
text-align: left; text-align: left;
position: relative; 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; border-bottom: var(--border-w) solid transparent;
padding: 1.2rem 0.8rem 0.8rem 0.8rem; padding: 1.2rem 0.8rem 0.8rem 0.8rem;
color: #999;
} }
button.active { button.active {
border-bottom: var(--border-w) solid var(--prime); border-bottom: var(--border-w) solid var(--prime);
color: var(--second); color: #333;
} }
div { div {
@ -71,8 +73,9 @@
} }
h3 { 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; padding: 1.2rem 0 0.8rem 1rem;
color: var(--text);
} }
.loading.message { .loading.message {
@ -95,6 +98,13 @@
.options { .options {
padding: 0.5em; padding: 0.5em;
} }
label {
font-family: var(--font-ui);
font-size: 1.3rem;
padding: 0.2rem 1.2rem;
display: block;
}
</style> </style>
<div class="view-toggle"> <div class="view-toggle">
@ -153,10 +163,10 @@
{/each} {/each}
</div> </div>
{:else} {:else}
<div style="padding: 0.5em"> <div style="padding: 0.5em" class="linkify">
<!-- TODO explain distincion between logic-less and logic-ful components? --> <!-- TODO explain distincion between logic-less and logic-ful components? -->
<!-- TODO style the <a> so it looks like a link --> <!-- TODO style the <a> so it looks like a link -->
<p>This component has no props — <a href="guide#external-properties">declare props with the export keyword</a></p> <p style="font-size: 1.3rem; color: var(--second)">This component has no props — <a href="guide#external-properties">declare props with the export keyword</a></p>
</div> </div>
{/if} {/if}
{/if} {/if}
@ -177,7 +187,35 @@
<section slot="b"> <section slot="b">
<h3>Compiler options</h3> <h3>Compiler options</h3>
<div class="options">TODO</div> <!-- TODO style radio buttons -->
<label>
<input type="radio" bind:group={compileOptions.generate} value="dom"> dom
<input type="radio" bind:group={compileOptions.generate} value="ssr"> ssr
</label>
<label>
<input type="checkbox" bind:checked={compileOptions.dev}> dev
</label>
<label>
<input type="checkbox" bind:checked={compileOptions.css}> css
</label>
<label>
<input type="checkbox" bind:checked={compileOptions.hydratable}> hydratable
</label>
<label>
<input type="checkbox" bind:checked={compileOptions.customElement}> customElement
</label>
<label>
<input type="checkbox" bind:checked={compileOptions.immutable}> immutable
</label>
<label>
<input type="checkbox" bind:checked={compileOptions.legacy}> legacy
</label>
</section> </section>
</SplitPane> </SplitPane>
{/if} {/if}

21
site/src/routes/repl/_components/Repl.html
Unescape View File

@ -56,6 +56,16 @@
let sourceErrorLoc; let sourceErrorLoc;
let runtimeErrorLoc; 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 width = typeof window !== 'undefined' ? window.innerWidth : 300;
let show_output = false; let show_output = false;
@ -106,15 +116,15 @@
} }
} }
function compile(component) { function compile(component, options) {
if (component.type === 'html') { if (component.type === 'html') {
workers.compiler.postMessage({ workers.compiler.postMessage({
type: 'compile', type: 'compile',
source: component.source, source: component.source,
options: { options: Object.assign({
name: component.name, name: component.name,
filename: `${component.name}.html` filename: `${component.name}.html`
}, }, options),
entry: component === $component_store[0] entry: component === $component_store[0]
}); });
} else { } else {
@ -136,7 +146,7 @@
component_store.update(c => c); component_store.update(c => c);
// recompile selected component // recompile selected component
compile($selected_store); compile($selected_store, compileOptions);
// regenerate bundle (TODO do this in a separate worker?) // regenerate bundle (TODO do this in a separate worker?)
workers.bundler.postMessage({ type: 'bundle', components: $component_store }); workers.bundler.postMessage({ type: 'bundle', components: $component_store });
@ -168,7 +178,7 @@
} }
$: if (workers && $selected_store) { $: if (workers && $selected_store) {
compile($selected_store); compile($selected_store, compileOptions);
} }
</script> </script>
@ -288,6 +298,7 @@
<section slot=b style='height: 100%;'> <section slot=b style='height: 100%;'>
<Output <Output
bind:compileOptions
{version} {version}
{selected_store} {selected_store}
{js} {js}

2
site/src/template.html
Unescape View File

@ -12,8 +12,6 @@
<link rel='manifest' href='manifest.json'> <link rel='manifest' href='manifest.json'>
<link rel='icon' type='image/png' href='favicon.png'> <link rel='icon' type='image/png' href='favicon.png'>
<link href="https://fonts.googleapis.com/css?family=Overpass+Mono|Overpass:100,300,700" rel="stylesheet">
<!-- Sapper generates a <style> tag containing critical CSS <!-- Sapper generates a <style> tag containing critical CSS
for the current page. CSS for the rest of the app is for the current page. CSS for the rest of the app is
lazily loaded when it precaches secondary pages --> lazily loaded when it precaches secondary pages -->

BIN
site/static/fonts/overpass-mono/overpass-mono-latin-400.woff2
View File

Binary file not shown.

BIN
site/static/fonts/overpass/overpass-latin-100.woff2
View File

Binary file not shown.

BIN
site/static/fonts/overpass/overpass-latin-100italic.woff2
View File

Binary file not shown.

BIN
site/static/fonts/overpass/overpass-latin-300.woff2
View File

Binary file not shown.

BIN
site/static/fonts/overpass/overpass-latin-300italic.woff2
View File

Binary file not shown.

BIN
site/static/fonts/overpass/overpass-latin-700.woff2
View File

Binary file not shown.

BIN
site/static/fonts/overpass/overpass-latin-700italic.woff2
View File

Binary file not shown.

148
site/static/global.css
Unescape View File

@ -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 { body {
--font: 'Overpass', sans-serif; --font: 'Overpass', sans-serif;
--font-alt: 'Overpass', sans-serif; --font-alt: 'Overpass', sans-serif;
@ -90,7 +177,7 @@ a:focus {
.typo-default { .typo-default {
--unit: .8rem; --unit: .8rem;
--code-fs: 1.3rem; --code-fs: 1.3rem;
--h6: 1.4rem; --h6: 1.6rem;
--h5: 1.6rem; --h5: 1.6rem;
--h4: 1.8rem; --h4: 1.8rem;
--h3: 2.4rem; --h3: 2.4rem;
@ -381,6 +468,64 @@ table span {
.bg-flash { background-color: var(--flash) !important } .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 media-queries
@ -406,4 +551,3 @@ table span {
.grid > .cols-2 { grid-column: span 2 } .grid > .cols-2 { grid-column: span 2 }
.grid > .cols-3 { grid-column: span 3 } .grid > .cols-3 { grid-column: span 3 }
} }

13
site/static/logo.svg
Unescape View File

@ -2,15 +2,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
<path style="fill:#ff3e00" d='M96.33,20.61C85.38,4.93,63.74.28,48.09,10.25L20.61,27.77A31.46,31.46,0,0,0,6.37,48.88,33.22,33.22,0,0,0,9.64,70.2,31.52,31.52,0,0,0,4.93,82a33.61,33.61,0,0,0,5.73,25.41c11,15.68,32.6,20.33,48.25,10.36l27.48-17.52a31.48,31.48,0,0,0,14.24-21.11A33.22,33.22,0,0,0,97.36,57.8,31.52,31.52,0,0,0,102.07,46a33.57,33.57,0,0,0-5.74-25.41' /> <path style="fill:#ff3e00" d='M96.33,20.61C85.38,4.93,63.74.28,48.09,10.25L20.61,27.77A31.46,31.46,0,0,0,6.37,48.88,33.22,33.22,0,0,0,9.64,70.2,31.52,31.52,0,0,0,4.93,82a33.61,33.61,0,0,0,5.73,25.41c11,15.68,32.6,20.33,48.25,10.36l27.48-17.52a31.48,31.48,0,0,0,14.24-21.11A33.22,33.22,0,0,0,97.36,57.8,31.52,31.52,0,0,0,102.07,46a33.57,33.57,0,0,0-5.74-25.41' />
<path style="fill:white" d='M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45' /> <path style="fill:white" d='M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45' />
</svg> </svg>
<!-- <style>
.logo {
position: relative;
vertical-align: middle;
stroke-miterlimit: 10;
stroke-width: 3.5;
stroke-linecap: round;
stroke-linejoin: round;
}
</style> -->
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Write Preview
Loading…
Cancel
Save