Simplify all the things!

─────────────────────────────▄██▄
─────────────────────────────▀███
────────────────────────────────█
───────────────▄▄▄▄▄────────────█
──────────────▀▄────▀▄──────────█
──────────▄▀▀▀▄─█▄▄▄▄█▄▄─▄▀▀▀▄──█
─────────█──▄──█────────█───▄─█─█
─────────▀▄───▄▀────────▀▄───▄▀─█
──────────█▀▀▀────────────▀▀▀─█─█
──────────█───────────────────█─█
▄▀▄▄▀▄────█──▄█▀█▀█▀█▀█▀█▄────█─█
█▒▒▒▒█────█──█████████████▄───█─█
█▒▒▒▒█────█──██████████████▄──█─█
█▒▒▒▒█────█───██████████████▄─█─█
█▒▒▒▒█────█────██████████████─█─█
█▒▒▒▒█────█───██████████████▀─█─█
█▒▒▒▒█───██───██████████████──█─█
▀████▀──██▀█──█████████████▀──█▄█
──██───██──▀█──█▄█▄█▄█▄█▄█▀──▄█▀
──██──██────▀█─────────────▄▀▓█
──██─██──────▀█▀▄▄▄▄▄▄▄▄▄▀▀▓▓▓█
──████────────█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█
──███─────────█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█
──██──────────█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█
──██──────────█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█
──██─────────▐█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█
──██────────▐█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█
──██───────▐█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█▌
──██──────▐█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█▌
──██─────▐█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█▌
──██────▐█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█▌

assets/sass/components/_photos.scss

@@ -1,5 +1,6 @@
 .photos {
-  padding: 8vmin $pad-min 4vmin;
+  padding-bottom: 4vmin;
+  padding-top: 1em;
 }
 
 .photos__container {

assets/sass/components/_post.scss

@@ -1,7 +1,6 @@
 .post {
-  border-bottom: 1px dashed $border-color;
   margin-top: 2em;
-  padding-bottom: 1.5em;
+  margin-bottom: 4em;
 
   img {
     max-width: 100%;
@@ -10,10 +9,6 @@
   & > * {
     @include container
   }
-
-  @media (prefers-color-scheme: dark) {
-    border-bottom: 1px dashed $border-color-dark;
-  }
 }
 
 .post__title {

assets/sass/components/_posts.scss

@@ -1,9 +1,8 @@
 .posts__pagination {
-  padding: 1em $pad-min;
+  @include container;
-}
-
-.posts__pagination-container {
   display: flex;
+  margin-top: 1em;
+  margin-bottom: 1em;
 }
 
 .posts__next-link,

assets/sass/components/_site-header.scss

@@ -1,9 +1,7 @@
 .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/_main.scss

@@ -1,3 +1,3 @@
-.outer {
+main {
   padding: 0 $pad-min;
 }

assets/sass/main.scss

@@ -24,11 +24,11 @@
 @import "elements/headings";
 @import "elements/html";
 @import "elements/pre";
+@import "elements/main";
 
 // 5. Objects – class-based selectors which define undecorated design patterns,
 //    for example media object known from OOCSS
 @import "objects/container";
-@import "objects/outer";
 
 // 6. Components – specific UI components.
 //    This is where majority of our work takes place and our UI components

layouts/_default/single.html

@@ -1,11 +1,9 @@
 {{ define "main" }}
-  <article class="post outer">
+  <article class="post container">
     <header>
-      <div class="container">
       <h2 class="post__title">{{.Title}}</h2>
 
       <p class="post__date">{{.Date.Format "Jan 2, 2006"}}</p>
-      </div>
     </header>
 
     {{.Content}}

layouts/index.html

@@ -1,13 +1,13 @@
 {{ define "main" }}
-  <section class="home__about outer">
+  <section class="home__about">
     <article class="container">
       {{ .Content }}
     </article>
   </section>
 
-  <section class="home__photos outer">
+  <section class="home__photos">
     <article class="container">
-      <header>
+      <header class="home__header">
         <h2>Latest Photos</h2>
       </header>
 
@@ -26,21 +26,17 @@
   </section>
 
   <section class="home__blog">
-    <article>
+    <article class="container">
-      <header class="outer">
+      <header class="home__header">
-        <div class="container">
         <h2>From the Blog</h2>
-        </div>
       </header>
 
       {{ range first 3 (where .Site.RegularPages "Section" "blog") }}
         {{ partial "blog_post_summary.html" . }}
       {{ end }}
 
-      <footer class="home__more outer">
+      <footer class="home__more">
-        <div class="container">
+        <p><a href="/blog">More posts →</a></p>
-          <p><a href="/blog">More →</a></p>
-        </div>
       </footer>
     </article>
   </section>

layouts/partials/blog_post_summary.html

@@ -1,7 +1,7 @@
 <article class="post outer">
   <header>
     <div class="container">
-      <h3 class="post__title"><a href="{{.Permalink}}">{{.Title}}</a></h3>
+      <h3 class="post__title"><a href="{{.URL}}">{{.Title}}</a></h3>
 
       <p class="post__date">{{.Date.Format "Jan 2, 2006"}}</p>
     </div>
@@ -10,7 +10,7 @@
   {{ if .Truncated }}
     {{.Summary}}
 
-    <p class="post__read-more"><a href="{{.Permalink}}">Read on →</a></p>
+    <p class="post__read-more"><a href="{{.URL}}">Read on →</a></p>
   {{ else }}
     {{.Content}}
   {{ end }}

layouts/partials/photo_thumb.html

@@ -15,7 +15,7 @@
 {{ $tiny := .Scratch.Get "tiny" }}
 {{ $small := .Scratch.Get "small" }}
 
-<a class="photos__link" href={{.Permalink}}>
+<a class="photos__link" href={{.URL}}>
   <img class="photos__thumb"
     srcset="
     {{ if ge $src.Width "300" }}

layouts/section/blog.html

@@ -6,7 +6,6 @@
   </section>
 
   <section class="posts__pagination">
-    <div class="container posts__pagination-container">
     {{ if .Paginator.HasNext }}
       <a class="posts__next-link" href="{{.Paginator.Next.URL}}">← Older</a>
     {{ end }}
@@ -14,6 +13,5 @@
     {{ if .Paginator.HasPrev }}
       <a class="posts__prev-link" href="{{.Paginator.Prev.URL}}">Newer →</a>
     {{ end }}
-    </div>
   </section>
 {{ end }}

layouts/section/photos.html

@@ -1,16 +1,13 @@
 {{ define "main" }}
-  <section class="photos">
+  <section class="photos photos__container">
-    <div class="photos__container">
     {{ range (.Paginator 24).Pages }}
       <article class="photos__thumb-container">
         {{ partial "photo_thumb.html" . }}
       </article>
     {{ end }}
-    </div>
   </section>
 
   <section class="posts__pagination">
-    <div class="container posts__pagination-container">
     {{ if .Paginator.HasNext }}
       <a class="posts__next-link" href="{{.Paginator.Next.URL}}">← Older</a>
     {{ end }}
@@ -18,6 +15,5 @@
     {{ if .Paginator.HasPrev }}
       <a class="posts__prev-link" href="{{.Paginator.Prev.URL}}">Newer →</a>
     {{ end }}
-    </div>
   </section>
 {{ end }}

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

@@ -365,21 +365,17 @@ pre {
   border-radius: 0.5rem;
   padding: 1em; }
 
+main {
+  padding: 0 6.5%; }
+
 .container {
   margin-left: auto;
   margin-right: auto;
   max-width: 40rem; }
 
-.outer {
+.site-header {
   padding: 0 6.5%; }
 
-.site-header {
-  padding: 0 6.5%;
-  border-bottom: 1px dashed #333; }
-  @media (prefers-color-scheme: dark) {
-    .site-header {
-      border-bottom: 1px dashed #ddd; } }
-
 .site-header__container {
   margin-left: auto;
   margin-right: auto;
@@ -397,10 +393,12 @@ pre {
   text-align: right; }
 
 .posts__pagination {
-  padding: 1em 6.5%; }
+  margin-left: auto;
-
+  margin-right: auto;
-.posts__pagination-container {
+  max-width: 40rem;
-  display: flex; }
+  display: flex;
+  margin-top: 1em;
+  margin-bottom: 1em; }
 
 .posts__next-link,
 .posts__prev-link {
@@ -413,18 +411,14 @@ pre {
   text-align: right; }
 
 .post {
-  border-bottom: 1px dashed #ccc;
   margin-top: 2em;
-  padding-bottom: 1.5em; }
+  margin-bottom: 4em; }
   .post img {
     max-width: 100%; }
   .post > * {
     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; }
@@ -436,7 +430,8 @@ pre {
   text-transform: uppercase; }
 
 .photos {
-  padding: 8vmin 6.5% 4vmin; }
+  padding-bottom: 4vmin;
+  padding-top: 1em; }
 
 .photos__container {
   margin-left: auto;