diff --git a/site/src/routes/blog/[slug].html b/site/src/routes/blog/[slug].html
index 536ca36938..daa0a5c5c7 100644
--- a/site/src/routes/blog/[slug].html
+++ b/site/src/routes/blog/[slug].html
@@ -61,6 +61,12 @@
width: 100%;
}
+ .post :global(blockquote) {
+ border-left: 4px solid #eee;
+ background: #f9f9f9;
+ border-radius: 0 var(--border-r) var(--border-r) 0;
+ }
+
.standfirst {
font-size: var(--h4);
color: var(--second);
diff --git a/site/src/routes/guide/_GuideContents.html b/site/src/routes/guide/_GuideContents.html
index 6f1a0a9348..b19542acf0 100644
--- a/site/src/routes/guide/_GuideContents.html
+++ b/site/src/routes/guide/_GuideContents.html
@@ -79,8 +79,8 @@
.subsection {
display: block;
- font-size: var(--code-fs);
- padding: .2rem 0;
+ font-size: 1.6rem;
+ font-family: var(--font);
}
.section:hover,
diff --git a/site/src/routes/index.html b/site/src/routes/index.html
index 9c9a107148..cee9d4792b 100644
--- a/site/src/routes/index.html
+++ b/site/src/routes/index.html
@@ -127,6 +127,7 @@
.example {
display: grid;
grid-template-columns: 1fr 4fr;
+ grid-gap: 0.5em;
align-items: start;
}
}
diff --git a/site/src/routes/repl/_components/CodeMirror.html b/site/src/routes/repl/_components/CodeMirror.html
index 79f3aa52e1..cf68e11221 100644
--- a/site/src/routes/repl/_components/CodeMirror.html
+++ b/site/src/routes/repl/_components/CodeMirror.html
@@ -226,6 +226,8 @@
user-select: none;
pointer-events: none;
color: #ccc;
+ tab-size: 2;
+ -moz-tab-size: 2;
}
.flex pre {
diff --git a/site/src/template.html b/site/src/template.html
index 012583ed58..a44a8f1c29 100644
--- a/site/src/template.html
+++ b/site/src/template.html
@@ -12,6 +12,8 @@
+
+
diff --git a/site/static/fonts/fira-mono/fira-mono-latin-400.woff2 b/site/static/fonts/fira-mono/fira-mono-latin-400.woff2
new file mode 100644
index 0000000000..e81b9f3c56
Binary files /dev/null and b/site/static/fonts/fira-mono/fira-mono-latin-400.woff2 differ
diff --git a/site/static/fonts/overpass-mono/overpass-mono-latin-400.woff2 b/site/static/fonts/overpass-mono/overpass-mono-latin-400.woff2
deleted file mode 100644
index 3b75148775..0000000000
Binary files a/site/static/fonts/overpass-mono/overpass-mono-latin-400.woff2 and /dev/null differ
diff --git a/site/static/fonts/overpass/overpass-latin-100italic.woff2 b/site/static/fonts/overpass/overpass-latin-100italic.woff2
deleted file mode 100644
index 41b428fd32..0000000000
Binary files a/site/static/fonts/overpass/overpass-latin-100italic.woff2 and /dev/null differ
diff --git a/site/static/fonts/overpass/overpass-latin-300italic.woff2 b/site/static/fonts/overpass/overpass-latin-300italic.woff2
deleted file mode 100644
index 5eab32d88d..0000000000
Binary files a/site/static/fonts/overpass/overpass-latin-300italic.woff2 and /dev/null differ
diff --git a/site/static/fonts/overpass/overpass-latin-400italic.woff2 b/site/static/fonts/overpass/overpass-latin-400italic.woff2
deleted file mode 100644
index e78d854071..0000000000
Binary files a/site/static/fonts/overpass/overpass-latin-400italic.woff2 and /dev/null differ
diff --git a/site/static/fonts/overpass/overpass-latin-700italic.woff2 b/site/static/fonts/overpass/overpass-latin-700italic.woff2
deleted file mode 100644
index ca998cc0f5..0000000000
Binary files a/site/static/fonts/overpass/overpass-latin-700italic.woff2 and /dev/null differ
diff --git a/site/static/fonts/roboto/roboto-latin-400.woff2 b/site/static/fonts/roboto/roboto-latin-400.woff2
new file mode 100644
index 0000000000..7e854e669b
Binary files /dev/null and b/site/static/fonts/roboto/roboto-latin-400.woff2 differ
diff --git a/site/static/fonts/roboto/roboto-latin-400italic.woff2 b/site/static/fonts/roboto/roboto-latin-400italic.woff2
new file mode 100644
index 0000000000..3791c883e8
Binary files /dev/null and b/site/static/fonts/roboto/roboto-latin-400italic.woff2 differ
diff --git a/site/static/fonts/roboto/roboto-latin-500.woff2 b/site/static/fonts/roboto/roboto-latin-500.woff2
new file mode 100644
index 0000000000..8dceabcf6b
Binary files /dev/null and b/site/static/fonts/roboto/roboto-latin-500.woff2 differ
diff --git a/site/static/fonts/roboto/roboto-latin-500italic.woff2 b/site/static/fonts/roboto/roboto-latin-500italic.woff2
new file mode 100644
index 0000000000..1b9589945e
Binary files /dev/null and b/site/static/fonts/roboto/roboto-latin-500italic.woff2 differ
diff --git a/site/static/global.css b/site/static/global.css
index e5de66c9ce..9380da9007 100644
--- a/site/static/global.css
+++ b/site/static/global.css
@@ -11,17 +11,6 @@
url('fonts/overpass/overpass-latin-100.woff2') format('woff2');
}
-/* overpass-100italic - latin */
-@font-face {
- font-family: 'Overpass';
- font-style: italic;
- 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';
@@ -33,17 +22,6 @@
url('fonts/overpass/overpass-latin-300.woff2') format('woff2');
}
-/* overpass-300italic - latin */
-@font-face {
- font-family: 'Overpass';
- font-style: italic;
- font-weight: 300;
- src:
- local('Overpass Light italic'),
- local('Overpass-Lightitalic'),
- url('fonts/overpass/overpass-latin-300italic.woff2') format('woff2');
-}
-
/* overpass-400normal - latin */
@font-face {
font-family: 'Overpass';
@@ -55,17 +33,6 @@
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';
@@ -77,33 +44,72 @@
url('fonts/overpass/overpass-latin-700.woff2') format('woff2');
}
-/* overpass-700italic - latin */
+/* fira-mono-400normal - latin */
@font-face {
- font-family: 'Overpass';
- font-style: italic;
- font-weight: 700;
+ font-family: 'Fira Mono';
+ font-style: normal;
+ font-weight: 400;
src:
- local('Overpass Bold italic'),
- local('Overpass-Bolditalic'),
- url('fonts/overpass/overpass-latin-700italic.woff2') format('woff2');
+ local('Fira Mono Regular '),
+ local('Fira Mono-Regular'),
+ url('fonts/fira-mono/fira-mono-latin-400.woff2') format('woff2');
}
-/* overpass-mono-400normal - latin */
+/* roboto-400normal - latin */
@font-face {
- font-family: 'Overpass Mono';
+ font-family: 'Roboto';
font-style: normal;
+ font-display: swap;
+ font-weight: 400;
+ src:
+ local('Roboto Regular '),
+ local('Roboto-Regular'),
+ url('fonts/roboto/roboto-latin-400.woff2') format('woff2');
+}
+
+/* roboto-400italic - latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ 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');
+ local('Roboto Regular italic'),
+ local('Roboto-Regularitalic'),
+ url('fonts/roboto/roboto-latin-400italic.woff2') format('woff2');
+}
+
+/* roboto-500normal - latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 500;
+ src:
+ local('Roboto Medium '),
+ local('Roboto-Medium'),
+ url('fonts/roboto/roboto-latin-500.woff2') format('woff2');
+}
+
+/* roboto-500italic - latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-display: swap;
+ font-weight: 500;
+ src:
+ local('Roboto Medium italic'),
+ local('Roboto-Mediumitalic'),
+ url('fonts/roboto/roboto-latin-500italic.woff2') format('woff2');
}
body {
--font: 'Overpass', sans-serif;
- --font-alt: 'Overpass', sans-serif;
- --font-mono: 'Overpass Mono', monospace;
+ /* --font: 'Roboto', 'sans-serif'; */
+ /* --font-mono: 'Overpass Mono', monospace; */
+ /* --font-mono: 'IBM Plex Mono'; */
+ --font-mono: 'Fira Mono';
--font-ui: var(--font-mono);
--font-system: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
@@ -205,7 +211,7 @@ a:focus {
/* typography ----------------------------- */
body {
- font: 300 var(--h4)/var(--lh) var(--font);
+ font: 400 var(--h4)/var(--lh) var(--font);
background-color: var(--back);
color: var(--text);
}
@@ -226,27 +232,38 @@ h1 { font-size: var(--h1) }
p, ol, ul {
line-height: 1.5;
margin: 0 0 1em 0;
+ font-family: Roboto;
+ -webkit-font-smoothing: antialiased;
/* font-family: var(--font-system); */
}
-.b, b, strong { font-weight: 700 }
+.b, b, strong { font-weight: 500 }
tt, code, kbd, samp {
font: 400 var(--code-fs)/1.7 var(--font-mono);
}
-:not(pre) > p > code {
+code {
position: relative;
top: -.1rem;
padding: .3rem .8rem .5rem;
margin: 0 .2rem;
border-radius: 0.3em;
white-space: nowrap;
- background: var(--back-light);
- border-top: .1rem solid #e5e5e9;
- border-left: .1rem solid #e5e5e9;
+ background: #f9f9f9;
+ /* border-top: .1rem solid #e5e5e9;
+ border-left: .1rem solid #e5e5e9; */
/* color: inherit; */
- color: #8f9196;
+ color: #444;
+ -webkit-font-smoothing: initial;
+}
+
+pre code {
+ background: transparent;
+ padding: 0;
+ top: 0;
+ margin: 0;
+ white-space: inherit;
}
::selection {
@@ -256,7 +273,7 @@ tt, code, kbd, samp {
/* opinionated styles --------------------- */
h1, h2 {
- font-family: var(--font-alt);
+ font-family: var(--font);
line-height: 1.2;
pointer-events: none;
}
@@ -330,7 +347,7 @@ button[outline] {
*/
.linkify a:not(.open-in-repl) {
position: relative;
- padding: 0 .4rem .1rem;
+ padding: 0 0 .1rem 0;
border-bottom: .1rem solid hsla(15, 100%, 50%, 0.5); /* muted --prime */
user-select: none;
/* white-space: nowrap; */
@@ -343,7 +360,7 @@ button[outline] {
}
.linkify a:not(.open-in-repl):hover {
- padding: 0 .4rem 0;
+ padding: 0;
border-bottom: .2rem solid hsla(15, 100%, 50%, 1);
}