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">
+  <section class="posts">
-  {{ range .Pages }}
+  {{ 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 }}

resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

@@ -314,7 +314,13 @@ a {
   color: #1863a1;
   text-decoration: none; }
   a:hover, a:focus {
+    color: #1f7ecd;
     text-decoration: underline; }
+  @media (prefers-color-scheme: dark) {
+    a {
+      color: #53a3e5; }
+      a:hover, a:focus {
+        color: #80bbec; } }
 
 blockquote {
   padding-left: 2rem;
@@ -339,12 +345,17 @@ h1 {
   font-size: 2rem; }
 
 html {
+  background-color: #fff;
   color: #333;
   font-family: "Mercury SSm A", "Mercury SSm B", serif;
   font-size: calc(0.85vmin + 13px);
   font-style: normal;
   font-weight: 300;
   line-height: 1.4; }
+  @media (prefers-color-scheme: dark) {
+    html {
+      background-color: #282828;
+      color: #ddd; } }
 
 pre {
   overflow: auto;
@@ -361,6 +372,27 @@ pre {
 .site-header {
   padding: 0 6.5%;
   border-bottom: 1px dashed #333; }
+  @media (prefers-color-scheme: dark) {
+    .site-header {
+      border-bottom: 1px dashed #ddd; } }
+
+.posts__pagination {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 40rem;
+  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; }
 
 .post {
   border-bottom: 1px dashed #ccc;
@@ -371,6 +403,9 @@ pre {
     margin-left: auto;
     margin-right: auto;
     max-width: 40rem; }
+  @media (prefers-color-scheme: dark) {
+    .post {
+      border-bottom: 1px dashed #666; } }
 
 .post__title {
   margin-bottom: 0.25em; }