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

@@ -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.
 
 
 

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;
   }

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 {

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);

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>