From 77a306a0f56f871cb65c49df78a8d79046792016 Mon Sep 17 00:00:00 2001
From: Gabriel Arazas <foo.dogsquared@gmail.com>
Date: Thu, 21 Jan 2021 03:16:26 +0800
Subject: [PATCH] Update the layout and the list template

I've also made small improvements such as adding the appropriate label
for the main footer.
---
 CHANGELOG.adoc               |  3 +++
 assets/scss/base.scss        | 37 ++++++++++++++++++------------------
 assets/scss/layout.scss      | 36 +++++++++++++++++++++++++++++------
 assets/scss/main.scss        |  3 +++
 layouts/partials/footer.html |  2 +-
 5 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index df96473..3806b7a 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -26,6 +26,9 @@ and this project adheres to https://semver.org/spec/v2.0.0.html[Semantic Version
 * Change the style of the horizontal rule with colors.
 
 * Update the link:https://github.com/foo-dogsquared/hugo-mod-simple-icons[Simple Icons module].
+For reference, it is from link:https://github.com/simple-icons/simple-icons/commit/6f83d1dd85662360353c73d42c6b6b4ca75d6e14[this commit].
+
+* Improve the list template to be more considerable to easy eyeing of the posts.
 
 
 
diff --git a/assets/scss/base.scss b/assets/scss/base.scss
index 2c7d7a8..9ffadc0 100644
--- a/assets/scss/base.scss
+++ b/assets/scss/base.scss
@@ -1,7 +1,17 @@
 *, *::before, *::after { box-sizing: border-box; }
 
+*:target {
+  animation: target-fade 3s 1;
+}
+
+@keyframes target-fade {
+  0% { background: var(--base0C); }
+  100% { background: unset; }
+}
+
+
 ::selection {
-  background: var(--base01);
+  background: var(--base0F);
 }
 
 body {
@@ -12,28 +22,15 @@ body {
 
 nav {
   margin: 1rem auto;
-
-  &[aria-label="Primary navigation"] {
-    @include header-link-hover-style;
-
-    a {
-      color: var(--base06);
-    }
-  }
 }
 
 article {
+  h1 { margin: 1rem auto; }
   h2 { margin-top: 3rem; }
   h3 { margin-top: 2rem; }
-}
-
-h2:target {
-  animation: target-fade 3s 1;
-}
-
-@keyframes target-fade {
-  0% { background: var(--base07); color: unset; }
-  100% { background-color: transparent; }
+  h1, h2, h3 {
+    margin-bottom: 1rem;
+  }
 }
 
 
@@ -217,11 +214,13 @@ footer {
   flex-flow: column wrap;
   justify-content: space-evenly;
   text-align: center;
+
+
 }
 
 
 /* Mobile styles */
-@media all and (max-width: 860px) {
+@media all and (max-width: $tablet-breakpoint) {
   html:root {
     --font-size: 17px;
   }
diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss
index 2d127f7..d33e2de 100644
--- a/assets/scss/layout.scss
+++ b/assets/scss/layout.scss
@@ -1,3 +1,18 @@
+nav[aria-label="Primary navigation"] {
+  @include header-link-hover-style;
+
+  a {
+    color: var(--base06);
+  }
+}
+
+footer[aria-label="Site footer"] {
+  > * {
+    margin-top: 1em;
+    margin-bottom: 0;
+  }
+}
+
 .list {
   display: inline-flex;
   flex-flow: row wrap;
@@ -13,9 +28,11 @@
 }
 
 .site__title {
+  --size: 2rem;
   display: inline-block;
-  font-size: 2rem;
-  margin-bottom: 1rem;
+  font-size: var(--size);
+  line-height: var(--size);
+  margin-bottom: unset;
   margin-right: 0.5rem;
 }
 
@@ -24,7 +41,7 @@
 }
 
 .site__languages {
-  margin: 0.5em;
+  margin: 0 0.5em;
 }
 
 .site__socials {
@@ -110,7 +127,9 @@
 }
 
 .post {
+  background: var(--base01);
   margin-top: 1rem;
+  padding: 0.5em;
 
   h1 {
     margin: 0 auto;
@@ -122,16 +141,21 @@
 }
 
 .post__meta {
-  background: var(--base01);
   color: var(--base05);
   font-size: 0.9em;
-  margin: 0.5em auto;
-  padding: 0 0.5em;
+  margin-top: 0.5em;
 
   & > * {
     display: inline-flex;
     align-items: center;
   }
+
+  .post--single & {
+    background: var(--base01);
+    color: var(--base05);
+    font-size: 0.9em;
+    padding: 0 0.5em;
+  }
 }
 
 .post__meta--single {
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 6e2a8d7..3412da9 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -13,6 +13,9 @@
   --border-style: var(--base06) solid 1px;
 }
 
+$mobile-breakpoint: 600px;
+$tablet-breakpoint: 860px;
+
 :root {
   font-family: var(--body-family);
   font-size: var(--font-size);
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 0287af5..fa7c14f 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,4 +1,4 @@
-<footer>
+<footer aria-label="Site footer">
 <!-- A convenient back to top link. -->
 <p><a href="#top">{{ i18n "back_to_top" | default "Back to top" }}</a></p>