From 347b2c189b873363797596b360c09e9402768233 Mon Sep 17 00:00:00 2001 From: rohan kumar Date: Tue, 15 Dec 2020 23:18:18 -0800 Subject: [PATCH] Greatly simplify CSS, dark theme fixes - Changed: Make all color codes 3-char. Shave off a few bytes. - Removed: all responsive layout besides the navigation links. Everything else should work well at all window sizes without making allowances for special cases. - Removed: redundant CSS rules - Added: centered images. Left-aligned images in a center-aligned column of text break flow. - Added: dark mode link colors for visited/active. Active link colors give better a11y. - Fix: don't show unnecessary scrollbar for 
 blocks

Also put more comments in the source to explain why each rule is
important.

All this shrunk the CSS from 1065 bytes to 882 bytes (17% reduction)
---
 Makefile                                      |   2 +-
 themes/etch-custom/assets/css/dark.css        |  19 +--
 themes/etch-custom/assets/css/main.css        | 113 ++++++++++--------
 themes/etch-custom/assets/css/wide.css        |  18 ---
 themes/etch-custom/layouts/partials/head.html |   1 -
 5 files changed, 77 insertions(+), 76 deletions(-)
 delete mode 100644 themes/etch-custom/assets/css/wide.css

diff --git a/Makefile b/Makefile
index 94d3e0f..cbffe28 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)/wide.css
+	stylelint $(CSS_DIR)/main.css $(CSS_DIR)/dark.css
 	csslint $(CSS_DIR)
 
 lint: lint-css hugo .hintrc-local
diff --git a/themes/etch-custom/assets/css/dark.css b/themes/etch-custom/assets/css/dark.css
index 4926e29..4d01349 100644
--- a/themes/etch-custom/assets/css/dark.css
+++ b/themes/etch-custom/assets/css/dark.css
@@ -1,19 +1,24 @@
 @media (prefers-color-scheme: dark) {
 	html {
-		background: black;
-		color: white;
+		background: #000;
+		color: #fff;
 	}
 
 	a {
-		color: #00b1ed;
+		color: #0af;
 	}
 
-	hr {
-		border-color: #5c5c5c;
+	a:visited {
+		color: #d7c;
+	}
+
+	a:active {
+		color: #f33;
 	}
 
 	pre,
-	code {
-		border: 1px solid #333;
+	code,
+	hr {
+		border-color: #333;
 	}
 }
diff --git a/themes/etch-custom/assets/css/main.css b/themes/etch-custom/assets/css/main.css
index f08af62..ab230c6 100644
--- a/themes/etch-custom/assets/css/main.css
+++ b/themes/etch-custom/assets/css/main.css
@@ -1,3 +1,19 @@
+/* CSS that adds the bare minimum for a simple layout */
+
+/* This site's CSS only does 9 things:
+ * 1. sans-serif instead of serif for low-res screens.
+ * 2. Consistent font size; 
 and  shouldn't be smaller.
+ * 3. max text width for readability
+ * 4. single-row nav links widescreen, multiline nav on narrow screens
+ * 5. Bigger "home" link that doubles as a site header
+ * 6. Soft border around code in case it looks too similar to regular
+ *    text, and to show it continue across more than one line
+ * 7. Horizontally center inline images; left-aligned stick out.
+ * 8. Padding fixes so the above changes don't make elements misalign.
+ * 9. dark.css changes a few colors if the browser wants dark mode.
+ * Everything else is browser defaults:
+ * default fonts, non-dark-mode colors, etc.
+ */
 html {
 	font-family: sans-serif;
 	font-size: 16px;
@@ -5,86 +21,85 @@ html {
 }
 
 body {
-	margin: 0 auto;
+	margin: auto;
 	max-width: 50rem;
-	padding: 2rem;
+	padding: 2rem 5%;
 }
 
-header nav {
-	display: block;
-	padding: 0 0 0.25rem;
-}
-
-header nav ul {
-	font-size: 1.25rem;
-	list-style-type: none;
-	margin: 0;
+/* The posts list doesn't need bullets; simple spacing and repetition
+ * of the "date + title" format is enough to convey separation
+ * between elements.
+ */
+.posts {
 	padding: 0;
 }
 
-header nav ul li {
-	display: block;
-	padding: 0.5rem 0.25rem;
-}
-
-.home {
-	font-size: 1.5rem;
-	font-weight: bold;
-	padding: 0 0.4rem 1rem 0;
-}
-
-/* index.html styles */
-main .posts {
+.posts li {
 	list-style-type: none;
-	padding: 0;
-}
-
-main .posts li {
 	margin-bottom: 1rem;
 }
 
-h1 {
-	font-size: 1.5rem;
-	line-height: 2rem;
-	margin: 1.5rem 0 1rem;
-}
-
-h2 {
+nav ul {
+	/* nav links should look more prominent than normal links */
 	font-size: 1.25rem;
-	margin: 1.5rem 0 1rem;
+
+	/* Use whitespace instead of bullets to separate nav from article.
+	   Also avoid top-padding at the top of the page. */
+	list-style-type: none;
+	margin: 0 0 2rem;
+	padding: 0;
 }
 
+/* nav links should be easy to tap with fat fingers */
+nav ul li:not(.home) {
+	padding: 0.5rem 0.25rem;
+}
+
+/* Make the home link a bit bigger to serve as a site heading */
+.home {
+	font-size: 1.5rem;
+	font-weight: bold;
+	padding: 0 0.5rem 0.75rem 0;
+}
+
+/* single-line nav on widescreen, multi-line nav on narrow screens */
+@media (min-width: 32rem) {
+	header nav ul li {
+		display: inline;
+	}
+}
+
+h1,
+h2,
 h3 {
-	font-size: 1.125rem;
-	margin: 1.5rem 0 1rem;
+	line-height: 1.25em;
 }
 
 img {
+	display: block;
 	height: auto;
-	margin: 0 auto;
+	margin: auto;
 	max-width: 100%;
 }
 
 code {
-	font-size: 16px;
-	padding: 0.1rem 0.25rem;
+	padding: 0 0.25rem;
 }
 
 pre,
 code {
-	border: 1px solid #e3e3e3;
+	border: 1px solid #bbb;
 }
 
 pre code {
-	border: none;
+	border: 0; /* don't border each line in a pre block */
+	padding: 0; /* otherwise the first line in a pre block gets indented. */
 }
 
+/* Allow horizontal scroll in a pre block, but don't clip it vertically */
 pre {
-	overflow-x: scroll;
-	overflow-y: visible;
-	padding: 0.5rem;
-}
+	/* csslint ignore:start */
+	overflow: auto visible;
 
-footer {
-	margin: 2rem 0;
+	/* csslint ignore:end */
 }
diff --git a/themes/etch-custom/assets/css/wide.css b/themes/etch-custom/assets/css/wide.css
deleted file mode 100644
index f927705..0000000
--- a/themes/etch-custom/assets/css/wide.css
+++ /dev/null
@@ -1,18 +0,0 @@
-@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 4b7f263..9a18309 100644
--- a/themes/etch-custom/layouts/partials/head.html
+++ b/themes/etch-custom/layouts/partials/head.html
@@ -24,7 +24,6 @@
 	{{ end -}}
 	{{ $resources := slice -}}
 	{{ $resources = $resources | append (resources.Get "/css/main.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" .) -}}