Blog post updates

website/sass/article.scss

@@ -17,10 +17,11 @@
 			height: auto;
 		}
 
-		hr {
-			margin-top: calc(40px - 20px);
-			margin-bottom: 40px;
-		}
+	}
+
+	hr {
+		margin-top: 40px;
+		margin-bottom: 40px;
 	}
 
 	article {
@@ -44,4 +45,9 @@
 			font-size: var(--font-size-article-h3);
 		}
 	}
+
+	.social {
+		display: flex;
+		gap: 20px;
+	}
 }

website/sass/base.scss

@@ -53,7 +53,7 @@ body {
 	width: 100%;
 	height: 100%;
 	margin: 0;
-	background: var(--color-manilla);
+	background: white;
 	font-family: "Inter", sans-serif;
 	line-height: 1.5;
 	font-weight: 500;
@@ -179,7 +179,7 @@ pre {
 kbd {
 	background: var(--color-fog);
 	border-radius: calc(var(--variable-px) * 4);
-	outline: var(--border-thickness) solid var(--color-navy);
+	outline: calc(var(--border-thickness) / 2) solid var(--color-navy);
 	padding: 0 4px;
 	margin: 0 4px;
 	color: var(--color-navy);
@@ -214,6 +214,16 @@ summary {
 	text-decoration: none;
 	font-weight: 800;
 	white-space: nowrap;
+
+	img {
+		height: calc(var(--font-size-link) * 1.5);
+		margin-right: calc(var(--font-size-link) / 2);
+	}
+
+	img,
+	span {
+		vertical-align: middle;
+	}
 }
 
 .arrow::after {
@@ -435,7 +445,7 @@ hr,
 								content: " »";
 							}
 						}
-						
+
 						img {
 							display: block;
 							width: var(--height);
@@ -452,7 +462,7 @@ hr,
 							--nav-font-size: 26px;
 						}
 					}
-	
+
 					@media screen and (max-width: 760px) {
 						gap: 20px;
 
@@ -462,7 +472,7 @@ hr,
 							--nav-font-size: 22px;
 						}
 					}
-	
+
 					@media screen and (max-width: 600px) {
 						gap: 16px;
 
@@ -566,17 +576,17 @@ hr,
 		gap: 40px;
 		padding: 40px;
 		padding-top: 0;
-		
+
 		nav {
 			display: flex;
 			flex-wrap: wrap;
 			justify-content: center;
 			gap: 8px 40px;
-			
+
 			@media screen and (max-width: 900px) {
 				max-width: 500px;
 			}
-			
+
 			@media screen and (max-width: 760px) {
 				max-width: 440px;
 			}

website/sass/logo.scss

@@ -9,10 +9,15 @@
 			margin-top: 20px;
 		}
 	}
-	
+
 	&.color {
+		background-color: var(--color-fog);
+		background-blend-mode: color-burn;
+	}
+
+	&.light {
 		background-color: var(--color-manilla);
-		background-blend-mode: hard-light;
+		background-blend-mode: color-burn;
 	}
 
 	&.dark {
@@ -25,11 +30,6 @@
 		}
 	}
 
-	&.light {
-		background-color: var(--color-fog);
-		background-blend-mode: color-burn;
-	}
-
 	.box {
 		display: flex;
 		flex-wrap: wrap;
@@ -42,13 +42,13 @@
 			img {
 				max-width: calc(100vw - 2 * 80 * var(--variable-px));
 			}
-			
+
 			span {
 				font-weight: 800;
 				margin-top: 20px;
 				white-space: nowrap;
 			}
-	
+
 			a {
 				white-space: nowrap;
 			}