pull/1890/head
Rich Harris 7 years ago
parent 155dadb697
commit 0c1bc75f7a

@ -61,7 +61,7 @@
height: var(--nav-h); height: var(--nav-h);
padding: 0 var(--side-nav); padding: 0 var(--side-nav);
margin: 0 auto; margin: 0 auto;
background-color: rgba(255, 255, 255, .93); 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-ui);
z-index: 10; z-index: 10;

@ -65,22 +65,18 @@
.guide-toc li { .guide-toc li {
display: block; display: block;
line-height: 2; line-height: 2;
margin: 0 0 4.8rem 0;
} }
.section { .section {
display: block; display: block;
margin: 6.4rem 0 0; padding: 0 0 .8rem 0;
padding: .8rem 0;
font: 300 var(--h6) var(--font-alt); font: 300 var(--h6) var(--font-alt);
color: var(--section-clr); color: var(--section-clr);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.12em; letter-spacing: 0.12em;
} }
.section:first-of-type {
margin-top: 4.8rem;
}
.subsection { .subsection {
display: block; display: block;
font-size: var(--code-fs); font-size: var(--code-fs);

@ -106,7 +106,7 @@
.content h2 { .content h2 {
margin-top: 16rem; margin-top: 16rem;
padding: 2rem 1.6rem 5.6rem 0.2rem; padding: 2rem 1.6rem 5.6rem 0.2rem;
border-top: var(--border-w) solid var(--second); border-top: 2px solid var(--second);
color: var(--second); color: var(--second);
line-height: 1; line-height: 1;
} }
@ -120,7 +120,7 @@
pointer-events: none; pointer-events: none;
font-weight: 700; font-weight: 700;
font-size: var(--h3); font-size: var(--h3);
color: black; color: var(--second);
padding: 6.4rem 0 1.6rem 0; padding: 6.4rem 0 1.6rem 0;
} }
@ -154,7 +154,7 @@
section :global(blockquote) { section :global(blockquote) {
color: var(--flash); color: var(--flash);
border: var(--border-w) solid currentColor; border: 2px solid currentColor;
padding-left: 8.8rem; padding-left: 8.8rem;
} }

@ -1,38 +1,8 @@
@font-face {
font-family: 'aller';
font-display: auto;
src: url('fonts/aller-subset/aller_lt-web.woff2') format('woff2'),
url('fonts/aller-subset/aller_lt-web.woff') format('woff');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'aller';
font-display: auto;
src: url('fonts/aller-subset/aller_rg-web.woff2') format('woff2'),
url('fonts/aller-subset/aller_rg-web.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'asap-bold';
font-display: auto;
src: url('fonts/asap-subset/asap-bold-web.woff2') format('woff2'),
url('fonts/asap-subset/asap-bold-web.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body { body {
/* --font: aller, sans-serif; */
--font: 'Overpass', sans-serif; --font: 'Overpass', sans-serif;
/* --font-alt: asap-bold, sans-serif; */
--font-alt: 'Overpass', sans-serif; --font-alt: 'Overpass', sans-serif;
--font-mono: 'Overpass Mono', monospace; --font-mono: 'Overpass Mono', monospace;
--font-ui: var(--font-mono); --font-ui: var(--font-mono);
/* ui-elements: buttons, forms etc. */
} }
/* base reset ----------------------------- */ /* base reset ----------------------------- */
@ -110,8 +80,8 @@ a:focus {
--prime: #ff3e00; --prime: #ff3e00;
--second: #676778; --second: #676778;
--flash: #40b3ff; --flash: #40b3ff;
--heading: #333; --heading: var(--second);
--text: #555; /* hsl(36, 3%, 62%) */ --text: #333; /* hsl(36, 3%, 62%) */
--border-w: .3rem; /* border-width */ --border-w: .3rem; /* border-width */
--border-r: .4rem; /* border-radius */ --border-r: .4rem; /* border-radius */
} }
@ -155,12 +125,7 @@ p {
margin: 0 0 1em 0; margin: 0 0 1em 0;
} }
.b, b, strong { font-weight: 500 } .b, b, strong { font-weight: 700 }
i, em {
/* color: var(--prime); */
font-style: normal;
}
tt, code, kbd, samp { tt, code, kbd, samp {
font: 300 var(--code-fs)/1.7 var(--font-mono); font: 300 var(--code-fs)/1.7 var(--font-mono);
@ -216,48 +181,34 @@ blockquote :last-child {
/* buttons -------------------------------- */ /* buttons -------------------------------- */
button { button {
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
background-color: transparent; background-color: transparent;
border: none; border: none;
color: currentColor; color: currentColor;
} }
button:focus { outline: 0 } button:focus { outline: 0 }
button[disabled] { button[disabled] {
opacity: .55; opacity: .55;
pointer-events: none; pointer-events: none;
} }
button > svg { button > svg {
position: relative; position: relative;
top: -.1rem; top: -.1rem;
width: 2rem !important; width: 2rem !important;
height: 2rem !important; height: 2rem !important;
} }
/* default */
/* button {
min-height: var(--bttn-h);
line-height: var(--bttn-h);
padding: 0 1.6rem;
transition: all .1s;
} */
/* button:hover { background-image: var(--bttn-hover) }
button:active {
mix-blend-mode: overlay;
background-image: var(--bttn-active)
} */
/* options */ /* options */
button[outline] { button[outline] {
min-height: var(--bttn-calc-h); min-height: var(--bttn-calc-h);
line-height: var(--bttn-calc-h); line-height: var(--bttn-calc-h);
border: var(--bttn-outline) solid currentColor; border: var(--bttn-outline) solid currentColor;
background-color: white; background-color: white;
color: currentColor; color: currentColor;
} }
/* links ------------------------------------- /* links -------------------------------------
@ -277,36 +228,36 @@ button[outline] {
position: relative; position: relative;
padding: 0 .4rem .1rem; padding: 0 .4rem .1rem;
border-bottom: .1rem solid hsla(15, 100%, 50%, 0.5); /* muted --prime */ border-bottom: .1rem solid hsla(15, 100%, 50%, 0.5); /* muted --prime */
user-select: none; user-select: none;
white-space: nowrap; white-space: nowrap;
color: inherit; color: inherit;
transition: color .2s; transition: color .2s;
} }
.linkify a:not(.open-in-repl):hover { .linkify a:not(.open-in-repl):hover {
color: var(--flash); color: var(--flash);
} }
.linkify a:not(.open-in-repl):before { .linkify a:not(.open-in-repl):before {
content: ''; content: '';
position: absolute; position: absolute;
width: 100%; width: 100%;
height: .2rem; height: .2rem;
bottom: -.2rem; bottom: -.2rem;
left: 0; left: 0;
white-space: nowrap; white-space: nowrap;
background: var(--prime); background: var(--prime);
border-radius: var(--border-r); border-radius: var(--border-r);
visibility: hidden; visibility: hidden;
transform: scaleX(0); transform: scaleX(0);
transform-origin: left center; transform-origin: left center;
transition: all .15s var(--out-cubic); transition: all .15s var(--out-cubic);
z-index: -1; z-index: -1;
} }
.linkify a:not(.open-in-repl):hover:before { .linkify a:not(.open-in-repl):hover:before {
visibility: visible; visibility: visible;
transform: scaleX(1); transform: scaleX(1);
} }
a:hover > .icon { stroke: var(--flash) } a:hover > .icon { stroke: var(--flash) }
@ -314,18 +265,18 @@ a:hover > .icon { stroke: var(--flash) }
/* lists ---------------------------------- */ /* lists ---------------------------------- */
.listify ol, .listify ol,
.listify ul { .listify ul {
--list-padding: 2.9rem; --list-padding: 2.9rem;
list-style: none; list-style: none;
color: currentColor; color: currentColor;
margin-left: var(--list-padding); margin-left: var(--list-padding);
} }
.listify ol > li, .listify ol > li,
.listify ul > li { .listify ul > li {
max-width: calc(var(--linemax) - var(--list-padding)); max-width: calc(var(--linemax) - var(--list-padding));
line-height: 1.35; line-height: 1.35;
margin: 0 0 0.8em 0; margin: 0 0 0.8em 0;
} }
.listify ul > li:before { .listify ul > li:before {
@ -386,7 +337,7 @@ table span {
max-width: none; max-width: none;
margin: 0 auto; margin: 0 auto;
padding: 1.6rem 0 4rem .8rem; padding: 1.6rem 0 4rem .8rem;
font: 1.2rem/1.6 var(--font-ui); font: 1.2rem/1.6 var(--font-ui);
} }
.filename { .filename {
@ -396,8 +347,8 @@ table span {
} }
.box { .box {
padding: 2.4rem 3.2rem; padding: 2.4rem 3.2rem;
border-radius: var(--border-r); border-radius: var(--border-r);
} }
.open-in-repl { .open-in-repl {
@ -442,12 +393,12 @@ table span {
.grid.half, .grid.half,
.grid { grid-template-columns: repeat(2, 1fr) } .grid { grid-template-columns: repeat(2, 1fr) }
.grid > .cols-2, .grid > .cols-2,
.grid > .cols-3 { grid-column: span 2 } .grid > .cols-3 { grid-column: span 2 }
} }
@media screen and (min-width: 1100px) { @media screen and (min-width: 1100px) {
.grid { grid-template-columns: repeat(3, 1fr) } .grid { grid-template-columns: repeat(3, 1fr) }
.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 }
} }

@ -1,18 +1,18 @@
{ {
"background_color": "#ffffff", "background_color": "#ffffff",
"theme_color": "#aa1e1e", "theme_color": "#ff3e00",
"name": "TODO", "name": "Svelte",
"short_name": "TODO", "short_name": "Svelte",
"display": "minimal-ui", "display": "minimal-ui",
"start_url": "/", "start_url": "/",
"icons": [ "icons": [
{ {
"src": "svelte-logo-192.png", "src": "images/svelte-android-chrome-192.png",
"sizes": "192x192", "sizes": "192x192",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "svelte-logo-512.png", "src": "images/svelte-android-chrome-512.png",
"sizes": "512x512", "sizes": "512x512",
"type": "image/png" "type": "image/png"
} }

@ -40,7 +40,7 @@ pre[class*='language-'] {
margin: .8rem 0 2.4rem; margin: .8rem 0 2.4rem;
max-width: var(--code-w); max-width: var(--code-w);
border-radius: var(--border-r); border-radius: var(--border-r);
box-shadow: 0.1rem 0.1rem 0.3rem rgba(68, 68, 68, 0.25) inset; box-shadow: 1px 1px 0.1rem rgba(68, 68, 68, 0.05) inset;
} }
:not(pre) > code[class*='language-'], :not(pre) > code[class*='language-'],

Loading…
Cancel
Save