diff --git a/site/src/components/top-nav.html b/site/src/components/top-nav.html
index 2f685a1366..cc9f0c6bd8 100644
--- a/site/src/components/top-nav.html
+++ b/site/src/components/top-nav.html
@@ -61,7 +61,7 @@
height: var(--nav-h);
padding: 0 var(--side-nav);
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);
font-family: var(--font-ui);
z-index: 10;
diff --git a/site/src/routes/guide/_GuideContents.html b/site/src/routes/guide/_GuideContents.html
index d739cd5fda..cf7e478a64 100644
--- a/site/src/routes/guide/_GuideContents.html
+++ b/site/src/routes/guide/_GuideContents.html
@@ -65,22 +65,18 @@
.guide-toc li {
display: block;
line-height: 2;
+ margin: 0 0 4.8rem 0;
}
.section {
display: block;
- margin: 6.4rem 0 0;
- padding: .8rem 0;
+ padding: 0 0 .8rem 0;
font: 300 var(--h6) var(--font-alt);
color: var(--section-clr);
text-transform: uppercase;
letter-spacing: 0.12em;
}
- .section:first-of-type {
- margin-top: 4.8rem;
- }
-
.subsection {
display: block;
font-size: var(--code-fs);
diff --git a/site/src/routes/guide/index.html b/site/src/routes/guide/index.html
index 637237ee97..77c05f5fb5 100644
--- a/site/src/routes/guide/index.html
+++ b/site/src/routes/guide/index.html
@@ -106,7 +106,7 @@
.content h2 {
margin-top: 16rem;
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);
line-height: 1;
}
@@ -120,7 +120,7 @@
pointer-events: none;
font-weight: 700;
font-size: var(--h3);
- color: black;
+ color: var(--second);
padding: 6.4rem 0 1.6rem 0;
}
@@ -154,7 +154,7 @@
section :global(blockquote) {
color: var(--flash);
- border: var(--border-w) solid currentColor;
+ border: 2px solid currentColor;
padding-left: 8.8rem;
}
diff --git a/site/static/global.css b/site/static/global.css
index d7060ea48f..ac92e371aa 100644
--- a/site/static/global.css
+++ b/site/static/global.css
@@ -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 {
- /* --font: aller, sans-serif; */
--font: 'Overpass', sans-serif;
- /* --font-alt: asap-bold, sans-serif; */
--font-alt: 'Overpass', sans-serif;
--font-mono: 'Overpass Mono', monospace;
--font-ui: var(--font-mono);
- /* ui-elements: buttons, forms etc. */
}
/* base reset ----------------------------- */
@@ -110,8 +80,8 @@ a:focus {
--prime: #ff3e00;
--second: #676778;
--flash: #40b3ff;
- --heading: #333;
- --text: #555; /* hsl(36, 3%, 62%) */
+ --heading: var(--second);
+ --text: #333; /* hsl(36, 3%, 62%) */
--border-w: .3rem; /* border-width */
--border-r: .4rem; /* border-radius */
}
@@ -155,12 +125,7 @@ p {
margin: 0 0 1em 0;
}
-.b, b, strong { font-weight: 500 }
-
-i, em {
- /* color: var(--prime); */
- font-style: normal;
-}
+.b, b, strong { font-weight: 700 }
tt, code, kbd, samp {
font: 300 var(--code-fs)/1.7 var(--font-mono);
@@ -216,48 +181,34 @@ blockquote :last-child {
/* buttons -------------------------------- */
button {
- font-family: inherit;
- font-size: inherit;
- background-color: transparent;
- border: none;
- color: currentColor;
+ font-family: inherit;
+ font-size: inherit;
+ background-color: transparent;
+ border: none;
+ color: currentColor;
}
button:focus { outline: 0 }
button[disabled] {
- opacity: .55;
- pointer-events: none;
+ opacity: .55;
+ pointer-events: none;
}
button > svg {
- position: relative;
- top: -.1rem;
- width: 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)
-} */
+ position: relative;
+ top: -.1rem;
+ width: 2rem !important;
+ height: 2rem !important;
+}
/* options */
button[outline] {
- min-height: var(--bttn-calc-h);
- line-height: var(--bttn-calc-h);
- border: var(--bttn-outline) solid currentColor;
- background-color: white;
- color: currentColor;
+ min-height: var(--bttn-calc-h);
+ line-height: var(--bttn-calc-h);
+ border: var(--bttn-outline) solid currentColor;
+ background-color: white;
+ color: currentColor;
}
/* links -------------------------------------
@@ -277,36 +228,36 @@ button[outline] {
position: relative;
padding: 0 .4rem .1rem;
border-bottom: .1rem solid hsla(15, 100%, 50%, 0.5); /* muted --prime */
- user-select: none;
+ user-select: none;
white-space: nowrap;
color: inherit;
transition: color .2s;
}
.linkify a:not(.open-in-repl):hover {
- color: var(--flash);
+ color: var(--flash);
}
.linkify a:not(.open-in-repl):before {
- content: '';
- position: absolute;
- width: 100%;
- height: .2rem;
- bottom: -.2rem;
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: .2rem;
+ bottom: -.2rem;
left: 0;
white-space: nowrap;
background: var(--prime);
border-radius: var(--border-r);
- visibility: hidden;
+ visibility: hidden;
transform: scaleX(0);
transform-origin: left center;
- transition: all .15s var(--out-cubic);
- z-index: -1;
+ transition: all .15s var(--out-cubic);
+ z-index: -1;
}
.linkify a:not(.open-in-repl):hover:before {
- visibility: visible;
- transform: scaleX(1);
+ visibility: visible;
+ transform: scaleX(1);
}
a:hover > .icon { stroke: var(--flash) }
@@ -314,18 +265,18 @@ a:hover > .icon { stroke: var(--flash) }
/* lists ---------------------------------- */
.listify ol,
.listify ul {
- --list-padding: 2.9rem;
+ --list-padding: 2.9rem;
- list-style: none;
- color: currentColor;
- margin-left: var(--list-padding);
+ list-style: none;
+ color: currentColor;
+ margin-left: var(--list-padding);
}
.listify ol > li,
.listify ul > li {
- max-width: calc(var(--linemax) - var(--list-padding));
- line-height: 1.35;
- margin: 0 0 0.8em 0;
+ max-width: calc(var(--linemax) - var(--list-padding));
+ line-height: 1.35;
+ margin: 0 0 0.8em 0;
}
.listify ul > li:before {
@@ -386,7 +337,7 @@ table span {
max-width: none;
margin: 0 auto;
padding: 1.6rem 0 4rem .8rem;
- font: 1.2rem/1.6 var(--font-ui);
+ font: 1.2rem/1.6 var(--font-ui);
}
.filename {
@@ -396,8 +347,8 @@ table span {
}
.box {
- padding: 2.4rem 3.2rem;
- border-radius: var(--border-r);
+ padding: 2.4rem 3.2rem;
+ border-radius: var(--border-r);
}
.open-in-repl {
@@ -442,12 +393,12 @@ table span {
.grid.half,
.grid { grid-template-columns: repeat(2, 1fr) }
.grid > .cols-2,
- .grid > .cols-3 { grid-column: span 2 }
+ .grid > .cols-3 { grid-column: span 2 }
}
@media screen and (min-width: 1100px) {
.grid { grid-template-columns: repeat(3, 1fr) }
.grid > .cols-2 { grid-column: span 2 }
- .grid > .cols-3 { grid-column: span 3 }
+ .grid > .cols-3 { grid-column: span 3 }
}
diff --git a/site/static/manifest.json b/site/static/manifest.json
index 2b4ac3ec66..45a9d5b907 100644
--- a/site/static/manifest.json
+++ b/site/static/manifest.json
@@ -1,18 +1,18 @@
{
"background_color": "#ffffff",
- "theme_color": "#aa1e1e",
- "name": "TODO",
- "short_name": "TODO",
+ "theme_color": "#ff3e00",
+ "name": "Svelte",
+ "short_name": "Svelte",
"display": "minimal-ui",
"start_url": "/",
"icons": [
{
- "src": "svelte-logo-192.png",
+ "src": "images/svelte-android-chrome-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
- "src": "svelte-logo-512.png",
+ "src": "images/svelte-android-chrome-512.png",
"sizes": "512x512",
"type": "image/png"
}
diff --git a/site/static/prism.css b/site/static/prism.css
index 3177b7ecf7..a16f296afc 100644
--- a/site/static/prism.css
+++ b/site/static/prism.css
@@ -40,7 +40,7 @@ pre[class*='language-'] {
margin: .8rem 0 2.4rem;
max-width: var(--code-w);
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-'],