From ff57fef77c6afdca1531a595e86f35629b209c45 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Thu, 12 May 2022 13:08:53 -0700
Subject: [PATCH] Fix website responsive layouts

---
 website/sass/article.scss |  6 ++++--
 website/sass/base.scss    | 19 ++++++++++++++++---
 website/sass/blog.scss    | 14 ++++++++++++--
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/website/sass/article.scss b/website/sass/article.scss
index 06a37e25..6853ca3a 100644
--- a/website/sass/article.scss
+++ b/website/sass/article.scss
@@ -16,7 +16,6 @@
 			width: 100%;
 			height: auto;
 		}
-
 	}
 
 	hr {
@@ -47,7 +46,10 @@
 	}
 
 	.social {
+		width: 100%;
 		display: flex;
-		gap: 20px;
+		gap: calc(var(--font-size-link) * 0.8);
+		flex-wrap: wrap;
+		justify-content: center;
 	}
 }
diff --git a/website/sass/base.scss b/website/sass/base.scss
index f41529eb..7fe8afb5 100644
--- a/website/sass/base.scss
+++ b/website/sass/base.scss
@@ -9,6 +9,7 @@
 	--max-width: 1600px;
 	--max-width-plus-padding: calc(var(--max-width) + 40px * 2);
 	--variable-px: Min(1px, 0.15vw);
+	--page-edge-padding: 40px;
 	--border-thickness: 2px;
 	--font-size-intro-heading: 60px;
 	--font-size-intro-body: 22px;
@@ -35,6 +36,7 @@
 		--font-size-heading: 28px;
 		--font-size-body: 16px;
 		--border-thickness: 1px;
+		--page-edge-padding: 20px;
 	}
 
 	@media screen and (max-width: 400px) {
@@ -178,7 +180,7 @@ pre {
 
 kbd {
 	background: var(--color-fog);
-	border-radius: calc(var(--variable-px) * 4);
+	border-radius: calc(var(--variable-px) * 2);
 	outline: calc(var(--border-thickness) / 2) solid var(--color-navy);
 	padding: 0 4px;
 	margin: 0 4px;
@@ -303,6 +305,7 @@ hr,
 		display: flex;
 		flex-direction: column;
 		align-items: flex-start;
+		width: 100%;
 	}
 }
 
@@ -387,7 +390,7 @@ hr,
 	min-width: 320px;
 
 	header {
-		padding: 0 40px;
+		padding: 0 var(--page-edge-padding);
 		color: var(--color-walnut);
 
 		// var(--max-width) + (80px + 32px) * 2
@@ -549,7 +552,7 @@ hr,
 	}
 
 	main {
-		padding: 0 40px;
+		padding: 0 var(--page-edge-padding);
 
 		.content {
 			padding: calc(120 * var(--variable-px)) 0;
@@ -564,6 +567,16 @@ hr,
 				~ section {
 					margin-top: calc(80 * var(--variable-px));
 				}
+
+				p img {
+					max-width: 100%;
+				}
+
+				pre {
+					max-width: 100%;
+					box-sizing: border-box;
+					overflow: auto;
+				}
 			}
 
 		}
diff --git a/website/sass/blog.scss b/website/sass/blog.scss
index d50ae5e7..0c228902 100644
--- a/website/sass/blog.scss
+++ b/website/sass/blog.scss
@@ -1,6 +1,7 @@
 #intro {
 	.section {
 		flex: 1 1 100%;
+		width: 100%;
 
 		.left-right-split {
 			width: 100%;
@@ -38,10 +39,19 @@
 	flex-direction: column;
 	gap: 80px;
 
-
 	article {
 		display: flex;
-		gap: 80px;
+		gap: 20px 80px;
+
+		@media screen and (max-width: 960px) {
+			flex-wrap: wrap;
+			justify-content: center;
+
+			.banner.banner {
+				width: 100%;
+				max-width: 540px;
+			}
+		}
 	
 		.details {
 			display: flex;