diff --git a/site/src/components/TopNav.html b/site/src/components/TopNav.html
index 4a4ab9a871..cff6d27b2d 100644
--- a/site/src/components/TopNav.html
+++ b/site/src/components/TopNav.html
@@ -93,7 +93,12 @@
overflow-y: auto;
}
- .primary { list-style: none }
+ .primary {
+ list-style: none;
+ font-family: var(--font);
+ margin: 0;
+ }
+
.primary li { display: inline }
.primary:first-of-type li {
diff --git a/site/src/routes/blog/[slug].html b/site/src/routes/blog/[slug].html
index e4df419cb3..536ca36938 100644
--- a/site/src/routes/blog/[slug].html
+++ b/site/src/routes/blog/[slug].html
@@ -36,6 +36,7 @@
.post h1 {
color: var(--second);
max-width: 20em;
+ margin: 0 0 1.2rem 0;
}
.post :global(h2) {
diff --git a/site/src/routes/blog/index.html b/site/src/routes/blog/index.html
index 83be39d144..3fd22da968 100644
--- a/site/src/routes/blog/index.html
+++ b/site/src/routes/blog/index.html
@@ -65,14 +65,14 @@
.post:first-child::before {
content: 'Latest post • ' attr(data-pubdate);
- font-weight: 300;
+ font-weight: 400;
color: #aaa;
text-transform: uppercase;
}
.post:nth-child(2)::before {
content: 'Older posts';
- font-weight: 300;
+ font-weight: 400;
color: #aaa;
text-transform: uppercase;
}
diff --git a/site/src/routes/guide/_GuideContents.html b/site/src/routes/guide/_GuideContents.html
index 413700b15a..6f1a0a9348 100644
--- a/site/src/routes/guide/_GuideContents.html
+++ b/site/src/routes/guide/_GuideContents.html
@@ -71,7 +71,7 @@
.section {
display: block;
padding: 0 0 .8rem 0;
- font: 300 var(--h6) var(--font-alt);
+ font: 400 var(--h6) var(--font);
color: var(--section-clr);
text-transform: uppercase;
letter-spacing: 0.12em;
diff --git a/site/src/routes/guide/index.html b/site/src/routes/guide/index.html
index 09c3603f27..34db34f5c9 100644
--- a/site/src/routes/guide/index.html
+++ b/site/src/routes/guide/index.html
@@ -96,7 +96,7 @@
.sidebar {
padding: var(--top-offset) 3.2rem var(--top-offset) 0;
- font-family: var(--font-ui);
+ font-family: var(--font);
overflow-y: auto;
height: 100%;
width: calc(var(--sidebar-w) + 5rem);
diff --git a/site/src/routes/repl/_components/CodeMirror.html b/site/src/routes/repl/_components/CodeMirror.html
index 297b4ac0b6..79f3aa52e1 100644
--- a/site/src/routes/repl/_components/CodeMirror.html
+++ b/site/src/routes/repl/_components/CodeMirror.html
@@ -162,7 +162,7 @@
height: 100%;
/* background: var(--background); */
background: transparent;
- font: 300 var(--code-fs)/1.7 var(--font-mono);
+ font: 400 var(--code-fs)/1.7 var(--font-mono);
color: var(--base);
}
@@ -199,7 +199,7 @@
.error {
text-align: center;
color: #999;
- font-weight: 300;
+ font-weight: 400;
margin: 2.4rem 0 0 0;
}
diff --git a/site/src/routes/repl/_components/Input/ComponentSelector.html b/site/src/routes/repl/_components/Input/ComponentSelector.html
index 4064fb05ab..e05c58e602 100644
--- a/site/src/routes/repl/_components/Input/ComponentSelector.html
+++ b/site/src/routes/repl/_components/Input/ComponentSelector.html
@@ -84,7 +84,7 @@
.file-tabs button {
position: relative;
- font: 300 1.2rem/1.5 var(--font);
+ font: 400 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;
@@ -114,7 +114,7 @@
top: 1.2rem;
/* padding: 0 0.4rem; */
/* font-size: 1rem; */
- font: 300 1.2rem/1.5 var(--font);
+ font: 400 1.2rem/1.5 var(--font);
border: none;
color: var(--flash);
outline: none;
diff --git a/site/src/routes/repl/_components/Output/index.html b/site/src/routes/repl/_components/Output/index.html
index 0da5d74614..fc2368d538 100644
--- a/site/src/routes/repl/_components/Output/index.html
+++ b/site/src/routes/repl/_components/Output/index.html
@@ -58,7 +58,7 @@
height: 100%; */
text-align: left;
position: relative;
- font: 300 1.2rem/1.5 var(--font);
+ font: 400 1.2rem/1.5 var(--font);
border-bottom: var(--border-w) solid transparent;
padding: 1.2rem 0.8rem 0.8rem 0.8rem;
color: #999;
diff --git a/site/src/routes/repl/_components/Repl.html b/site/src/routes/repl/_components/Repl.html
index e1872d91d8..1d90bd0f74 100644
--- a/site/src/routes/repl/_components/Repl.html
+++ b/site/src/routes/repl/_components/Repl.html
@@ -220,7 +220,7 @@
margin: 0;
padding: 1.2rem 1.6rem 1.2rem 4.4rem;
vertical-align: middle;
- font: 300 1.2rem/1.7 var(--font);
+ font: 400 1.2rem/1.7 var(--font);
color: white;
}
diff --git a/site/src/routes/repl/index.html b/site/src/routes/repl/index.html
index e20570892b..29367af1f1 100644
--- a/site/src/routes/repl/index.html
+++ b/site/src/routes/repl/index.html
@@ -166,7 +166,7 @@
.loading {
text-align: center;
color: var(--second);
- font-weight: 300;
+ font-weight: 400;
margin: 2em 0 0 0;
opacity: 0;
animation: fade-in .4s;
diff --git a/site/static/fonts/overpass/overpass-latin-400.woff2 b/site/static/fonts/overpass/overpass-latin-400.woff2
new file mode 100644
index 0000000000..8f469bb22e
Binary files /dev/null and b/site/static/fonts/overpass/overpass-latin-400.woff2 differ
diff --git a/site/static/fonts/overpass/overpass-latin-400italic.woff2 b/site/static/fonts/overpass/overpass-latin-400italic.woff2
new file mode 100644
index 0000000000..e78d854071
Binary files /dev/null and b/site/static/fonts/overpass/overpass-latin-400italic.woff2 differ
diff --git a/site/static/global.css b/site/static/global.css
index 076831910f..03351b256c 100644
--- a/site/static/global.css
+++ b/site/static/global.css
@@ -44,6 +44,28 @@
url('fonts/overpass/overpass-latin-300italic.woff2') format('woff2');
}
+/* overpass-400normal - latin */
+@font-face {
+ font-family: 'Overpass';
+ font-style: normal;
+ font-weight: 400;
+ src:
+ local('Overpass Light '),
+ local('Overpass-Light'),
+ url('fonts/overpass/overpass-latin-400.woff2') format('woff2');
+}
+
+/* overpass-400italic - latin */
+@font-face {
+ font-family: 'Overpass';
+ font-style: italic;
+ font-weight: 400;
+ src:
+ local('Overpass Light italic'),
+ local('Overpass-Lightitalic'),
+ url('fonts/overpass/overpass-latin-400italic.woff2') format('woff2');
+}
+
/* overpass-700normal - latin */
@font-face {
font-family: 'Overpass';
@@ -83,6 +105,7 @@ body {
--font-alt: 'Overpass', sans-serif;
--font-mono: 'Overpass Mono', monospace;
--font-ui: var(--font-mono);
+ --font-system: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
/* base reset ----------------------------- */
@@ -187,7 +210,7 @@ body {
color: var(--text);
}
-h1, h2, h3, h4, h5, h6, li, blockquote {
+h1, h2, h3, h4, h5, h6, blockquote {
margin: 0;
color: var(--heading);
}
@@ -200,15 +223,16 @@ h3 { font-size: var(--h3) }
h2 { font-size: var(--h2) }
h1 { font-size: var(--h1) }
-p {
+p, ol, ul {
line-height: 1.35;
margin: 0 0 1em 0;
+ /* font-family: var(--font-system); */
}
.b, b, strong { font-weight: 700 }
tt, code, kbd, samp {
- font: 300 var(--code-fs)/1.7 var(--font-mono);
+ font: 400 var(--code-fs)/1.7 var(--font-mono);
}
:not(pre) > p > code {
@@ -361,7 +385,7 @@ a:hover > .icon { stroke: var(--flash) }
.listify ul > li {
max-width: calc(var(--linemax) - var(--list-padding));
line-height: 1.35;
- margin: 0 0 0.8em 0;
+ margin: 0 0 0.4rem 0;
}
.listify ul > li:before {