add related posts and update some styling

css/main.css

@@ -49,8 +49,6 @@
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
-
-	--header-offset: 3.1rem;
 }
 
 /* Base */
@@ -71,7 +69,7 @@ main {
 	width: 60vw;
 	max-width: 1000px;
 	margin: 0 auto;
-	scroll-margin-top: var(--header-offset);
+	scroll-margin-top: 7rem;
 }
 
 @media (max-width: 1050px) {
@@ -90,7 +88,6 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
-	scroll-margin-top: var(--header-offset);
 }
 
 h1 {
@@ -99,6 +96,10 @@ h1 {
 	text-align: center;
 }
 
+h2, h3, h4, h5, h6 {
+	scroll-margin-top: 5rem;
+}
+
 h2 {
 	margin-top: 2rem;
 	font-size: 2.2rem;
@@ -260,13 +261,9 @@ time {
 
 /* Horizontal rules */
 hr {
-	color: var(--color-teal);
-	border: .25rem solid var(--color-teal);
+	border: .25rem solid var(--color-pink);
 	margin: 2rem 0;
 }
-hr:last-child {
-	margin-bottom: 0;
-}
 
 /* Used on home, reference, gallery pages */
 .centered {

css/nav.css

@@ -3,9 +3,10 @@ header {
 	position: sticky;
 	top: 0;
 	background-color: var(--color-bg);
-	box-shadow: 0 .25rem .15rem var(--color-shadow);
 	padding: .75rem 0;
 	z-index: 10;
+	border-bottom: .5rem solid var(--color-teal);
+	box-shadow: 0 .25rem .15rem var(--color-shadow);
 }
 
 /* Header links, pagination links */
@@ -198,6 +199,7 @@ header li {
 footer {
 	padding: 1rem 0;
 	font-size: .9rem;
+	border-top: .5rem solid var(--color-pink);
 }
 
 footer ul {

css/post.css

@@ -72,4 +72,3 @@
 	left: .1rem;
 	box-shadow: .05rem .05rem var(--color-shadow);
 }
-