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

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

themes/etch-custom/assets/css/main.css

@@ -6,12 +6,13 @@ html {
 
 body {
 	margin: 0 auto;
-	max-width: 1000px;
+	max-width: 50rem;
-	padding: 2rem 5rem;
+	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;
+	display: block;
-	padding: 0 0.25rem;
+	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 */

themes/etch-custom/assets/css/narrow.css

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

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

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" .) -}}