Add blog pagination and adapt to dark

assets/sass/components/_post.scss

@@ -9,6 +9,10 @@
   & > * {
     @include container
   }
+
+  @media (prefers-color-scheme: dark) {
+    border-bottom: 1px dashed $border-color-dark;
+  }
 }
 
 .post__title {

assets/sass/components/_posts.scss

@@ -0,0 +1,19 @@
+.posts__pagination {
+  @include container;
+  display: flex;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+.posts__next-link,
+.posts__prev-link {
+  flex-grow: 1;
+}
+
+.posts__next-link {
+  text-align: left;
+}
+
+.posts__prev-link {
+  text-align: right;
+}

assets/sass/components/_site-header.scss

@@ -1,4 +1,8 @@
 .site-header {
   padding: 0 $pad-min;
   border-bottom: 1px dashed $text-color;
+
+  @media (prefers-color-scheme: dark) {
+    border-bottom: 1px dashed $text-color-dark;
+  }
 }

assets/sass/elements/_a.scss

@@ -4,6 +4,16 @@ a {
 
   &:hover,
   &:focus {
+    color: $link-color-hover;
     text-decoration: underline;
   }
+
+  @media (prefers-color-scheme: dark) {
+    color: $link-color-dark;
+
+    &:hover,
+    &:focus {
+      color: $link-color-hover-dark;
+    }
+  }
 }

assets/sass/elements/_html.scss

@@ -1,8 +1,14 @@
 html {
+  background-color: $background-color;
   color: $text-color;
   font-family: $body-font-family;
   font-size: calc(0.85vmin + 13px);
   font-style: normal;
   font-weight: 300;
   line-height: 1.4;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $background-color-dark;
+    color: $text-color-dark;
+  }
 }

assets/sass/main.scss

@@ -33,6 +33,7 @@
 //    This is where majority of our work takes place and our UI components
 //    are often composed of Objects and Components
 @import "components/site-header";
+@import "components/posts";
 @import "components/post";
 
 // 7. Utilities – utilities and helper classes with ability to override

assets/sass/settings/_colors.scss

@@ -18,6 +18,7 @@ $border-color-dark: #666;
 $link-color: rgb(24, 99, 161);
 $link-color-dark: lighten($link-color, 25%);
 $link-color-hover: lighten($link-color, 10%);
+$link-color-hover-dark: lighten($link-color-dark, 10%);
 
 $footer-link-color: lighten($text-color, 25%);
 $footer-link-color-hover: lighten($link-color, 10%);

layouts/section/blog.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
-  <section class="blog-posts">
-  {{ range .Pages }}
+  <section class="posts">
+  {{ range .Paginator.Pages }}
     <article class="post">
       <header>
         <h3 class="post__title"><a href="{{.Permalink}}">{{.Title}}</a></h3>
@@ -18,4 +18,14 @@
     </article>
   {{ end }}
   </section>
+
+  <section class="posts__pagination">
+    {{ if .Paginator.HasNext }}
+      <a class="posts__next-link" href="{{.Paginator.Next.URL}}">← Older</a>
+    {{ end }}
+
+    {{ if .Paginator.HasPrev }}
+      <a class="posts__prev-link" href="{{.Paginator.Prev.URL}}">Newer →</a>
+    {{ end }}
+  </section>
 {{ end }}