From 53fe05d12fe3b2026df2bb17172b9895eb315155 Mon Sep 17 00:00:00 2001
From: Zach Leatherman <zachleatherman@gmail.com>
Date: Mon, 23 Jan 2023 17:29:22 -0600
Subject: [PATCH] Fix lighthouse touch targets (gap addition), convert
 whitespace

---
 public/css/index.css       | 251 +++++++++++++++++++------------------
 public/css/message-box.css |  16 +--
 2 files changed, 134 insertions(+), 133 deletions(-)

diff --git a/public/css/index.css b/public/css/index.css
index 5f6a10a..fbf7c04 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -1,108 +1,108 @@
 /* Defaults */
 :root {
-  --font-family: -apple-system, system-ui, sans-serif;
-  --font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
+	--font-family: -apple-system, system-ui, sans-serif;
+	--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
 }
 
 /* Theme colors */
 :root {
-  --color-gray-20: #e0e0e0;
-  --color-gray-50: #C0C0C0;
-  --color-gray-90: #333;
+	--color-gray-20: #e0e0e0;
+	--color-gray-50: #C0C0C0;
+	--color-gray-90: #333;
 
-  --background-color: #fff;
+	--background-color: #fff;
 
-  --text-color: var(--color-gray-90);
-  --text-color-link: #082840;
-  --text-color-link-active: #5f2b48;
-  --text-color-link-visited: #17050F;
+	--text-color: var(--color-gray-90);
+	--text-color-link: #082840;
+	--text-color-link-active: #5f2b48;
+	--text-color-link-visited: #17050F;
 
-  --syntax-tab-size: 2;
+	--syntax-tab-size: 2;
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
-    --color-gray-20: #e0e0e0;
-    --color-gray-50: #C0C0C0;
-    --color-gray-90: #dad8d8;
+	:root {
+		--color-gray-20: #e0e0e0;
+		--color-gray-50: #C0C0C0;
+		--color-gray-90: #dad8d8;
 
-    /* --text-color is assigned to --color-gray-_ above */
-    --text-color-link: #1493fb;
-    --text-color-link-active: #6969f7;
-    --text-color-link-visited: #a6a6f8;
+		/* --text-color is assigned to --color-gray-_ above */
+		--text-color-link: #1493fb;
+		--text-color-link-active: #6969f7;
+		--text-color-link-visited: #a6a6f8;
 
-    --background-color: #15202b;
-  }
+		--background-color: #15202b;
+	}
 }
 
 
 /* Global stylesheet */
 * {
-  box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 html,
 body {
-  padding: 0;
-  margin: 0 auto;
-  font-family: var(--font-family);
-  color: var(--text-color);
-  background-color: var(--background-color);
+	padding: 0;
+	margin: 0 auto;
+	font-family: var(--font-family);
+	color: var(--text-color);
+	background-color: var(--background-color);
 }
 html {
-  overflow-y: scroll;
+	overflow-y: scroll;
 }
 body {
-  max-width: 40em;
+	max-width: 40em;
 }
 
 /* https://www.a11yproject.com/posts/how-to-hide-content/ */
 .visually-hidden {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
 }
 
 p:last-child {
-  margin-bottom: 0;
+	margin-bottom: 0;
 }
 p {
-  line-height: 1.5;
+	line-height: 1.5;
 }
 
 li {
-  line-height: 1.5;
+	line-height: 1.5;
 }
 
 a[href] {
-  color: var(--text-color-link);
+	color: var(--text-color-link);
 }
 a[href]:visited {
-  color: var(--text-color-link-visited);
+	color: var(--text-color-link-visited);
 }
 a[href]:hover,
 a[href]:active {
-  color: var(--text-color-link-active);
+	color: var(--text-color-link-active);
 }
 
 main {
-  padding: 1rem;
+	padding: 1rem;
 }
 main :first-child {
-  margin-top: 0;
+	margin-top: 0;
 }
 
 header {
-  border-bottom: 1px dashed var(--color-gray-20);
+	border-bottom: 1px dashed var(--color-gray-20);
 }
 header:after {
-  content: "";
-  display: table;
-  clear: both;
+	content: "";
+	display: table;
+	clear: both;
 }
 
 .links-nextprev {
@@ -112,152 +112,153 @@ header:after {
 }
 
 table {
-  margin: 1em 0;
+	margin: 1em 0;
 }
 table td,
 table th {
-  padding-right: 1em;
+	padding-right: 1em;
 }
 
 pre,
 code {
-  font-family: var(--font-family-monospace);
+	font-family: var(--font-family-monospace);
 }
 pre:not([class*="language-"]) {
-  margin: .5em 0;
-  line-height: 1.375; /* 22px /16 */
-  -moz-tab-size: var(--syntax-tab-size);
-  -o-tab-size: var(--syntax-tab-size);
-  tab-size: var(--syntax-tab-size);
-  -webkit-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-  direction: ltr;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
+	margin: .5em 0;
+	line-height: 1.375; /* 22px /16 */
+	-moz-tab-size: var(--syntax-tab-size);
+	-o-tab-size: var(--syntax-tab-size);
+	tab-size: var(--syntax-tab-size);
+	-webkit-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
 }
 code {
-  word-break: break-all;
+	word-break: break-all;
 }
 
 /* Header */
 header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  padding: 1em;
+	display: flex;
+	gap: 1em .5em;
+	flex-wrap: wrap;
+	align-items: center;
+	padding: 1em;
 }
 .home-link {
-  font-size: 1em; /* 16px /16 */
-  font-weight: 700;
-  margin-right: 2em;
+	font-size: 1em; /* 16px /16 */
+	font-weight: 700;
+	margin-right: 2em;
 }
 .home-link:link:not(:hover) {
-  text-decoration: none;
+	text-decoration: none;
 }
 
 /* Nav */
 .nav {
-  display: flex;
-  padding: 0;
-  margin: 0;
-  list-style: none;
+	display: flex;
+	padding: 0;
+	margin: 0;
+	list-style: none;
 }
 .nav-item {
-  display: inline-block;
-  margin-right: 1em;
+	display: inline-block;
+	margin-right: 1em;
 }
 .nav-item a[href]:not(:hover) {
-  text-decoration: none;
+	text-decoration: none;
 }
 .nav a[href][aria-current="page"] {
-  text-decoration: underline;
+	text-decoration: underline;
 }
 
 /* Posts list */
 .postlist {
-  list-style: none;
-  padding: 0;
-  padding-left: 1.5rem;
+	list-style: none;
+	padding: 0;
+	padding-left: 1.5rem;
 }
 .postlist-item {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  counter-increment: start-from -1;
-  margin-bottom: 1em;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	counter-increment: start-from -1;
+	margin-bottom: 1em;
 }
 .postlist-item:before {
-  display: inline-block;
-  pointer-events: none;
-  content: "" counter(start-from, decimal-leading-zero) ". ";
-  line-height: 100%;
-  text-align: right;
-  margin-left: -1.5rem;
+	display: inline-block;
+	pointer-events: none;
+	content: "" counter(start-from, decimal-leading-zero) ". ";
+	line-height: 100%;
+	text-align: right;
+	margin-left: -1.5rem;
 }
 .postlist-date,
 .postlist-item:before {
-  font-size: 0.8125em; /* 13px /16 */
-  color: var(--color-gray-90);
+	font-size: 0.8125em; /* 13px /16 */
+	color: var(--color-gray-90);
 }
 .postlist-date {
-  word-spacing: -0.5px;
+	word-spacing: -0.5px;
 }
 .postlist-link {
-  font-size: 1.1875em; /* 19px /16 */
-  font-weight: 700;
-  flex-basis: calc(100% - 1.5rem);
-  padding-left: .25em;
-  padding-right: .5em;
-  text-underline-position: from-font;
-  text-underline-offset: 0;
-  text-decoration-thickness: 1px;
+	font-size: 1.1875em; /* 19px /16 */
+	font-weight: 700;
+	flex-basis: calc(100% - 1.5rem);
+	padding-left: .25em;
+	padding-right: .5em;
+	text-underline-position: from-font;
+	text-underline-offset: 0;
+	text-decoration-thickness: 1px;
 }
 .postlist-item-active .postlist-link {
-  font-weight: bold;
+	font-weight: bold;
 }
 
 /* Tags */
 .post-tag {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-transform: capitalize;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	text-transform: capitalize;
 	font-style: italic;
 }
 .postlist-item > .post-tag {
-  align-self: center;
+	align-self: center;
 }
 
 /* Tags list */
 .post-metadata {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: .5em;
-  list-style: none;
-  padding: 0;
-  margin: 0;
+	display: inline-flex;
+	flex-wrap: wrap;
+	gap: .5em;
+	list-style: none;
+	padding: 0;
+	margin: 0;
 }
 .post-metadata time {
-  margin-right: 1em;
+	margin-right: 1em;
 }
 
 /* Direct Links / Markdown Headers */
 .direct-link {
-  font-family: sans-serif;
-  text-decoration: none;
-  font-style: normal;
-  margin-left: .1em;
+	font-family: sans-serif;
+	text-decoration: none;
+	font-style: normal;
+	margin-left: .1em;
 }
 a[href].direct-link,
 a[href].direct-link:visited {
-  color: transparent;
+	color: transparent;
 }
 a[href].direct-link:focus,
 a[href].direct-link:focus:visited,
 :hover > a[href].direct-link,
 :hover > a[href].direct-link:visited {
-  color: #aaa;
+	color: #aaa;
 }
diff --git a/public/css/message-box.css b/public/css/message-box.css
index d81b9af..a6e142e 100644
--- a/public/css/message-box.css
+++ b/public/css/message-box.css
@@ -1,18 +1,18 @@
 /* Message Box */
 .message-box {
-  --color-message-box: #ffc;
+	--color-message-box: #ffc;
 
-  display: block;
-  background-color: var(--color-message-box);
-  color: var(--color-gray-90);
-  padding: 1em 0.625em; /* 16px 10px /16 */
+	display: block;
+	background-color: var(--color-message-box);
+	color: var(--color-gray-90);
+	padding: 1em 0.625em; /* 16px 10px /16 */
 }
 .message-box ol {
 	margin-top: 0;
 }
 
 @media (prefers-color-scheme: dark) {
-  .message-box {
-    --color-message-box: #082840;
-  }
+	.message-box {
+		--color-message-box: #082840;
+	}
 }