From e8f31f9f08972c082f01d40049b92b083bbf19b3 Mon Sep 17 00:00:00 2001
From: rohan kumar <seirdy@seirdy.one>
Date: Tue, 15 Dec 2020 23:16:22 -0800
Subject: [PATCH] Adjust text width/responsiveness

- Text width was too wide on wide screens; reduce it.
- Make the nav-links' responsive layout for narrow viewports trigger at
  a narrower window size. It used to trigger at 600px, but I made it
  trigger at 32rem instead since the nav links aren't too wide. This
  also handles cases where users' default sans-serif fonts are very
  wide: rem measures by character width instead of pixels.
- Make the narrow-optimized multiline-navlinks the default, and make
  widescreens a special case detected with a CSS media query.
  Previously, widescreens were the default; however, this meant that
  browsers that didn't support media queries (like dillo and netsurf)
  couldn't switch to the multi-line navigation at narrow widths. This is
  a good example of progressive enhancement; modern browsers will get
  the same behavior as before, but the lowest common denominator will
  see a better experience.
- Don't further reduce the max-width for narrow screens; narrow screens
  are already narrow. We now have one less CSS rule.
---
 Makefile                                      |  2 +-
 themes/etch-custom/assets/css/main.css        | 13 ++++++------
 themes/etch-custom/assets/css/narrow.css      | 20 -------------------
 themes/etch-custom/assets/css/wide.css        | 18 +++++++++++++++++
 themes/etch-custom/layouts/partials/head.html |  2 +-
 5 files changed, 27 insertions(+), 28 deletions(-)
 delete mode 100644 themes/etch-custom/assets/css/narrow.css
 create mode 100644 themes/etch-custom/assets/css/wide.css

diff --git a/Makefile b/Makefile
index cafbd26..94d3e0f 100644
--- a/Makefile
+++ b/Makefile
@@ -20,7 +20,7 @@ clean:
 	rm -rf $(OUTPUT_DIR) .hintrc-local
 
 lint-css:
-	stylelint $(CSS_DIR)/main.css $(CSS_DIR)/dark.css $(CSS_DIR)/narrow.css
+	stylelint $(CSS_DIR)/main.css $(CSS_DIR)/dark.css $(CSS_DIR)/wide.css
 	csslint $(CSS_DIR)
 
 lint: lint-css hugo .hintrc-local
diff --git a/themes/etch-custom/assets/css/main.css b/themes/etch-custom/assets/css/main.css
index 0d94335..f08af62 100644
--- a/themes/etch-custom/assets/css/main.css
+++ b/themes/etch-custom/assets/css/main.css
@@ -6,12 +6,13 @@ html {
 
 body {
 	margin: 0 auto;
-	max-width: 1000px;
-	padding: 2rem 5rem;
+	max-width: 50rem;
+	padding: 2rem;
 }
 
 header nav {
-	display: inline-block;
+	display: block;
+	padding: 0 0 0.25rem;
 }
 
 header nav ul {
@@ -22,14 +23,14 @@ header nav ul {
 }
 
 header nav ul li {
-	display: inline;
-	padding: 0 0.25rem;
+	display: block;
+	padding: 0.5rem 0.25rem;
 }
 
 .home {
 	font-size: 1.5rem;
 	font-weight: bold;
-	padding: 0 0.4rem 0 0;
+	padding: 0 0.4rem 1rem 0;
 }
 
 /* index.html styles */
diff --git a/themes/etch-custom/assets/css/narrow.css b/themes/etch-custom/assets/css/narrow.css
deleted file mode 100644
index 77e4193..0000000
--- a/themes/etch-custom/assets/css/narrow.css
+++ /dev/null
@@ -1,20 +0,0 @@
-@media (max-width: 600px) {
-	body {
-		max-width: 500px;
-		padding: 2rem 5%;
-	}
-
-	header nav {
-		display: block;
-		padding: 0 0 0.25rem;
-	}
-
-	header nav ul li {
-		display: block;
-		padding: 0.5rem 0.25rem;
-	}
-
-	.home {
-		padding-bottom: 1rem;
-	}
-}
diff --git a/themes/etch-custom/assets/css/wide.css b/themes/etch-custom/assets/css/wide.css
new file mode 100644
index 0000000..f927705
--- /dev/null
+++ b/themes/etch-custom/assets/css/wide.css
@@ -0,0 +1,18 @@
+@media (min-width: 32rem) {
+	body {
+		padding: 2rem 5%;
+	}
+
+	header nav {
+		display: inline-block;
+	}
+
+	header nav ul li {
+		display: inline;
+		padding: 0 0.25rem;
+	}
+
+	.home {
+		padding-bottom: 0;
+	}
+}
diff --git a/themes/etch-custom/layouts/partials/head.html b/themes/etch-custom/layouts/partials/head.html
index b10ebd6..4b7f263 100644
--- a/themes/etch-custom/layouts/partials/head.html
+++ b/themes/etch-custom/layouts/partials/head.html
@@ -24,7 +24,7 @@
 	{{ end -}}
 	{{ $resources := slice -}}
 	{{ $resources = $resources | append (resources.Get "/css/main.css") -}}
-	{{ $resources = $resources | append (resources.Get "/css/narrow.css") -}}
+	{{ $resources = $resources | append (resources.Get "/css/wide.css") -}}
 	{{ $dark := .Site.Params.dark | default "auto" -}}
 	{{ if not (eq $dark "off") -}}
 	{{ $resources = $resources | append (resources.Get "css/dark.css" | resources.ExecuteAsTemplate "dark.css" .) -}}