Refactor CSS

public/css/index.css

@@ -16,7 +16,7 @@
 	--background-color: #FAF5F5;
 	--text-color: var(--color-gray-90);
 	--text-color-link: var(--text-color);
-	--text-color-tag: rgba(255,255,255,1);
+	--text-color-tag: var(--contrast-color);
 
 	/* Space & Size */
 	--syntax-tab-size: 2;
@@ -25,9 +25,10 @@
 	/* Spacing */
 	--single-gap: 1rem;
 	--double-gap: 2rem;
+	--triple-gap: 3rem;
 
-	/* Animation Timing */
+	/* Transitions */
-	--transition-time: .3s;
+	--transition-normal: all .3s;
 
 	/* Font Sizes */
 	--font-xxl: 3.75rem;
@@ -80,13 +81,13 @@
 
 html,
 body {
-	padding: 0;
-	margin: 0 auto;
-	font-family: var(--font-family);
-	font-weight: var(--weight-normal);
-	font-variant-Ligatures: normal;
-	color: var(--text-color);
 	background-color: var(--background-color);
+	color: var(--text-color);
+	font-family: var(--font-family);
+	font-variant-Ligatures: normal;
+	font-weight: var(--weight-normal);
+	margin: 0 auto;
+	padding: 0;
 }
 html {
 	overflow-y: scroll;
@@ -97,7 +98,7 @@ body {
 a {
 	text-decoration-color: var(--contrast-color);
 	text-decoration-thickness: .1rem;
-	transition: all .5s;
+	transition: var(--transition-normal);
 }
 /* https://www.a11yproject.com/posts/how-to-hide-content/ */
 .visually-hidden {
@@ -118,7 +119,7 @@ h1 {
 	font-size: var(--font-xxl);
 	font-style: normal;
 	line-height: 4rem;
-	margin-top: 3rem;
+	margin-top: var(--triple-gap);
 	margin-bottom: 0;
 }
 h2 {
@@ -130,6 +131,9 @@ h3 {
 	font-size: var(--font-l);
 	line-height: 1.25;
 }
+hr {
+	border-top: var(--border-thin);
+}
 main {
 	padding: var(--single-gap);
 }
@@ -159,8 +163,7 @@ figcaption {
 	padding-top: var(--single-gap);
 }
 .page-block {
-	margin-top: 3rem;
+	margin-top: var(--triple-gap);
-	margin-bottom: 3rem;
 }
 a[href] {
 	color: var(--text-color-link);
@@ -251,7 +254,7 @@ nav ul {
 	height: .8rem;
 	margin-right: .25rem;
 	padding-bottom: .3rem;
-	transition: all .5s;
+	transition: var(--transition-normal);
 	width: var(--single-gap);
 }
 .nav-item {
@@ -269,7 +272,7 @@ nav ul {
 	margin-right: .5em;
 	margin-bottom: 0;
 	text-transform: uppercase;
-	transition: all .5s;
+	transition: var(--transition-normal);
 	letter-spacing: .15rem;
 }
 .nav-item li:hover {
@@ -361,21 +364,20 @@ nav ul {
 	align-items: center;
 	color: var(--text-color-tag);
 	display: inline-flex;
-	font-size: .75rem;
 	justify-content: center;
 	padding: .2rem .4rem .2rem .4rem;
 	text-decoration: none;
 	text-transform: capitalize;
 }
-
+a.post-tag:before {
+	content: "#";
+}
 a.post-tag:visited {
 	color: var(--text-color-tag);
 }
-
 a.post-tag:hover {
 	color: var(--text-color-tag);
 }
-
 .taglist {
 	display: flex;
 	flex-flow: row wrap;
@@ -387,12 +389,6 @@ a.post-tag:hover {
 }
 .taglist li a {
 	font-size: var(--font-l);
-	font-weight: var(--weight-extraheavy);
-	padding: .4rem .8rem .4rem .8rem;
-	text-decoration-color: var(--contrast-color);
-	text-decoration-thickness: .1rem;
-	text-decoration-skip: none;
-	transition: all .5s;
 }
 .postlist-item > .post-tag {
 	align-self: center;
@@ -403,15 +399,15 @@ a.post-tag:hover {
 	align-items: center;
 	display: inline-flex;
 	flex-wrap: wrap;
-	font-size: var(--font-s);
+	font-size: var(--font-n);
 	gap: .5em;
 	list-style: none;
-	margin-bottom: 5em;
+	margin-bottom: var(--triple-gap);
 	padding: 0 0 0 .4em;
 }
 .post-metadata time {
-	font-size: var(--font-n);
 	margin-right: .5em;
+	font-size: var(--font-n);
 }
 
 /* Direct Links / Markdown Headers */