Styling tweaks

public/css/index.css

@@ -18,11 +18,12 @@
 	--text-color-link: var(--text-color);
 	--text-color-tag: var(--contrast-color);
 
-	/* Space & Size */
-	--syntax-tab-size: 2;
+	/* Corners */
 	--corner-radius: .3rem;
 
-	/* Spacing */
+	/* Space & Size */
+	--syntax-tab-size: 2;
+	--half-gap: .5rem;
 	--single-gap: 1rem;
 	--double-gap: 2rem;
 	--triple-gap: 3rem;
@@ -35,7 +36,7 @@
 	--font-xl: 2rem;
 	--font-l: 1.5rem;
 	--font-n: 1rem;
-	--font-s: .75rem;
+	--font-s: .85rem;
 	--font-xs: .65rem;
 
 	/* Font Weights */
@@ -66,6 +67,9 @@
 
 @media(max-width: 556px) {
 	:root {
+		/* Borders */
+		--border-nav-currentpage: 15px solid var(--contrast-color);
+
 		/* Font Sizes */
 		--font-xxl: 2.25rem;
 		--font-xl: 1.5rem;
@@ -134,7 +138,8 @@ h3 {
 hr {
 	border-top: var(--border-thin);
 }
-main {
+main {		--border-nav-currentpage: 15px solid var(--contrast-color);
+
 	padding: var(--single-gap);
 }
 main > p > img, main > p > a > img {
@@ -360,14 +365,10 @@ nav ul {
 }
 
 /* Tags */
-.post-tag, a.post-tag, .taglist li a {
-	align-items: center;
+a.post-tag {
 	color: var(--text-color-tag);
-	display: inline-flex;
-	justify-content: center;
-	padding: .2rem .4rem .2rem .4rem;
+	padding-right: var(--half-gap);
 	text-decoration: none;
-	text-transform: capitalize;
 }
 a.post-tag:before {
 	content: "#";
@@ -394,20 +395,20 @@ a.post-tag:hover {
 	align-self: center;
 }
 
-/* Tags list */
+/* Post Metadata */
 .post-metadata {
-	align-items: center;
-	display: inline-flex;
-	flex-wrap: wrap;
-	font-size: var(--font-n);
-	gap: .5em;
-	list-style: none;
 	margin-bottom: var(--triple-gap);
-	padding: 0 0 0 .4em;
+	margin-top: var(--single-gap);
+	padding: 0 0 0 .4rem;
 }
-.post-metadata time {
-	margin-right: .5em;
-	font-size: var(--font-n);
+.post-metadata p, .post-metadata ul, .post-metadata ul li, .post-metadata time {
+	display: flex;
+	flex-flow: row wrap;
+	font-size: var(--font-s);
+	font-weight: var(--weight-heavy);
+	list-style: none;
+	margin: 0;
+	padding-left: 0em;
 }
 
 /* Direct Links / Markdown Headers */
@@ -442,8 +443,9 @@ h2 + .header-anchor {
 	}
 	h1 {
 		font-size: var(--font-xxl);
-		padding-top: 0;
 		line-height: 2.75rem;
+		margin-top: var(--single-gap);
+		padding-top: 0;
 	}
 	h2, .postlist h2, main h2 {
 		font-size: var(--font-xl);
@@ -455,8 +457,8 @@ h2 + .header-anchor {
 
 	/* Header */
 	header {
-		padding: 0rem .5rem var(--single-gap) .5rem;
-		margin-bottom: var(--single-gap);
+		padding: 0rem var(--half-gap) var(--single-gap) var(--half-gap);
+		margin-bottom: 0;
 	}
 	.home-link {
 		max-width: 1rem;
@@ -468,7 +470,7 @@ h2 + .header-anchor {
 		flex-flow: row wrap;
 	}
 	.nav-item {
-		margin-right: .5rem;
+		margin-right: var(--half-gap);
 	}
 	.nav-item li {
 		height: 2rem;
@@ -477,15 +479,16 @@ h2 + .header-anchor {
 		border-top: 2px solid var(--contrast-color);
 	}
 	nav ul {
-		display: flex;
 		align-items: end;
+		display: flex;
+		flex-flow: row nowrap;
 		justify-content: auto;
 		width: auto;
 	}
 
 	/* Posts List */
 	.post-copy a h3 {
-		margin-top: .5em;
+		margin-top: var(--half-gap);
 	}
 	.postlist {
 		padding-top: 0;