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/7738/head
Rich Harris 7 years ago
parent f03cf8056b
commit 463f65c1c9
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;
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;
}

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

@ -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; */
}

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

@ -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;
}

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

@ -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;

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

@ -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 {

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

@ -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;
}
</style>
<div class="view-toggle">
@ -153,10 +163,10 @@
{/each}
</div>
{:else}
<div style="padding: 0.5em">
<div style="padding: 0.5em" class="linkify">
<!-- TODO explain distincion between logic-less and logic-ful components? -->
<!-- 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>
{/if}
{/if}
@ -177,7 +187,35 @@
<section slot="b">
<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>
</SplitPane>
{/if}

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

@ -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);
}
</script>
@ -288,6 +298,7 @@
<section slot=b style='height: 100%;'>
<Output
bind:compileOptions
{version}
{selected_store}
{js}

2
site/src/template.html
Unescape View File

@ -12,8 +12,6 @@
<link rel='manifest' href='manifest.json'>
<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
for the current page. CSS for the rest of the app is
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 {
--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 }
}

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">
<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' />
</svg>
<!-- <style>
.logo {
position: relative;
vertical-align: middle;
stroke-miterlimit: 10;
stroke-width: 3.5;
stroke-linecap: round;
stroke-linejoin: round;
}
</style> -->
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Write Preview
Loading…
Cancel
Save