blog changes

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

@@ -24,33 +24,41 @@
 
 <style>
 	.post {
-		padding: var(--top-offset) var(--side-nav) 0 var(--side-nav);
+		padding: var(--top-offset) var(--side-nav) 6rem var(--side-nav);
 		max-width: var(--main-width);
 		margin: 0 auto;
 	}
 
 	.byline {
-		font-size: 0.8em;
-		border-bottom: 1px solid #eee;
-		padding: 0;
+		margin: 0 0 4rem 0;
+		padding: 0 0 1.6rem 0;
+		border-bottom: var(--border-w) solid #6767785b;
+		font-size: var(--h6);
+	}
+
+	.byline a {
+		border-bottom: none;
+		font-weight: 600;
+	}
+
+	.byline a:hover {
+		border-bottom: 2px solid var(--prime);
 	}
 
 	.post h1 {
 		color: var(--second);
 		max-width: 20em;
-		margin: 0 0 1.2rem 0;
+		margin: 0 0 .8rem 0;
 	}
 
 	.post :global(h2) {
 		margin: 2em 0 0.5em 0;
-		color: var(--second);
+		/* color: var(--second); */
+		color: black;
+		font-size: var(--h3);
+		font-weight: 300;
 	}
 
-	/* .post p,
-	.post :global(p) {
-		max-width: var(--linemax)
-	} */
-
 	.post :global(figure) {
 		margin: 1.6rem 0 3.2rem 0;
 	}
@@ -78,7 +86,7 @@
 		padding: .3rem .8rem .3rem;
 		margin: 0 0.2rem;
 		top: -.1rem;
-		background: #f4f4f4;
+		background: var(--back-api);
 	}
 
 	.post :global(pre) :global(code) {

site/src/routes/blog/index.svelte

@@ -30,40 +30,44 @@
 		grid-template-columns: 1fr 1fr;
 		grid-gap: 1em;
 		min-height: calc(100vh - var(--nav-h));
-		padding: var(--top-offset) var(--side-nav) 0 var(--side-nav);
+		padding: var(--top-offset) var(--side-nav) 6rem var(--side-nav);
 		max-width: var(--main-width);
 		margin: 0 auto;
 	}
 
 	h2 {
 		display: inline-block;
-		margin: 2rem 0 0.5rem 0;
-		color: var(--second);
-		/* max-width: 18em; */
-		font-size: 2rem;
+		margin: 3.2rem 0 0.4rem 0;
+		color: black;
+		max-width: 18em;
+		font-size: var(--h3);
+		font-weight: 300;
 	}
 
 	.post:first-child {
-		margin: 0 0 2em 0;
-		border-bottom: 1px solid #eee;
+		margin: 0 0 2rem 0;
+		padding: 0 0 4rem 0;
+		border-bottom: var(--border-w) solid #6767785b; /* based on --second */
 	}
 
 	.post:first-child h2 {
 		font-size: 4rem;
+		font-weight: 600;
+		color: var(--second);
 	}
 
-	.post:first-child::before {
+	.post:first-child::before,
+	.post:nth-child(2)::before {
 		content: 'Latest post • ' attr(data-pubdate);
-		font-weight: 400;
-		color: #aaa;
+		color: var(--flash);
+		font-size: var(--h6);
+		font-weight: 600;
+		letter-spacing: .05em;
 		text-transform: uppercase;
 	}
 
 	.post:nth-child(2)::before {
 		content: 'Older posts';
-		font-weight: 400;
-		color: #aaa;
-		text-transform: uppercase;
 	}
 
 	.post p {
@@ -72,9 +76,7 @@
 		color: var(--second);
 	}
 
-	.post > a {
-		display: block;
-	}
+	.post > a { display: block }
 
 	.posts a:hover,
 	.posts a:hover > h2 {