Improve blog post CSS

Author: febog

src/_layouts/base.html

@@ -227,34 +227,32 @@
     }
 
     /* Blog post rulesets */
-    .blog-post-header {
-      > h1 {
-        line-height: 1.5;
-        margin-bottom: 1rem;
-      }
+    .blog-post-header h1 {
+      line-height: 1.5;
+      margin-bottom: 1rem;
+    }
 
-      > p {
-        padding-bottom: 0.5rem;
-        border-bottom: var(--site-border);
-      }
+    .blog-post-header p {
+      padding-bottom: 0.5rem;
+      border-bottom: var(--site-border);
     }
 
     .blog-navigator {
       padding: 1rem 0;
       border-top: var(--site-border);
       display: flex;
       gap: 1rem;
+    }
 
-      .navigator-container {
-        border: var(--site-border);
-        border-radius: var(--site-radius);
-        padding: 1rem;
-        flex: 1 1 0;
-        text-decoration: none;
+    .blog-navigator-item {
+      border: var(--site-border);
+      border-radius: var(--site-radius);
+      padding: 1rem;
+      flex: 1 1 0;
+      text-decoration: none;
 
-        &:hover {
-          border-color: var(--secondary-color);
-        }
+      &:hover {
+        border-color: var(--secondary-color);
       }
     }
   </style>

src/_layouts/post.html

@@ -24,13 +24,13 @@ <h1>{{ page.title }}</h1>
 {% if page.previous != nil or page.next != nil %}
 <nav class="blog-navigator secondary-text">
   {% if page.previous != nil %}
-    <a class="navigator-container" href="{{ page.previous.url }}">
+    <a class="blog-navigator-item" href="{{ page.previous.url }}">
       <div class="secondary-text">Previous post</div>
       <div>{{ page.previous.title }}</div>
     </a>
   {% endif %}
   {% if page.next != nil %}
-    <a class="navigator-container" href="{{ page.next.url }}">
+    <a class="blog-navigator-item" href="{{ page.next.url }}">
       <div class="secondary-text">Next post</div>
       <div>{{ page.next.title }}</div>
     </a>