tweak various bits of CSS

Author: Rich-Harris

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 {

site/src/routes/blog/[slug].html

@@ -36,6 +36,7 @@ <h1>{post.metadata.title}</h1>
 	.post h1 {
 		color: var(--second);
 		max-width: 20em;
+		margin: 0 0 1.2rem 0;
 	}
 
 	.post :global(h2) {

site/src/routes/blog/index.html

@@ -65,14 +65,14 @@ <h2>{post.metadata.title}</h2>
 
 	.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;
 	}

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;

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

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

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;

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;

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

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;

site/static/fonts/overpass/overpass-latin-400.woff2

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