From d792a2f6afdbc87b7b09530ef7dc48ee06617dea Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Mon, 8 Aug 2022 20:56:38 +0800
Subject: [PATCH] chore: improve responsive design of archive entries

---
 _layouts/archives.html     |  2 +-
 _sass/layout/archives.scss | 79 +++++++++++++++++++-------------------
 2 files changed, 40 insertions(+), 41 deletions(-)

diff --git a/_layouts/archives.html b/_layouts/archives.html
index 7344042..61ad91d 100644
--- a/_layouts/archives.html
+++ b/_layouts/archives.html
@@ -25,7 +25,7 @@ layout: page
     {% assign last_year = cur_year %}
   {% endif %}
 
-  <li class="d-flex align-items-center">
+  <li>
   {% assign ts = post.date | date: '%s' %}
     <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: "%d" }}</span>
     <span class="date month small text-muted ml-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
diff --git a/_sass/layout/archives.scss b/_sass/layout/archives.scss
index c0115e0..50d6dc7 100644
--- a/_sass/layout/archives.scss
+++ b/_sass/layout/archives.scss
@@ -18,13 +18,15 @@
   .year {
     height: 3.5rem;
     font-size: 1.5rem;
+    position: relative;
+    left: 2px;
     margin-left: -$timeline-width;
 
     &::before {
       @extend %timeline;
 
       height: 72px;
-      left: 72px;
+      left: 79px;
       bottom: 16px;
     }
 
@@ -44,7 +46,7 @@
       border-radius: 50%;
       width: 12px;
       height: 12px;
-      left: 14.5px;
+      left: 21.5px;
       border: 3px solid;
       background-color: var(--timeline-year-dot-color);
       border-color: var(--timeline-node-bg);
@@ -62,17 +64,6 @@
       overflow: hidden;
       text-overflow: ellipsis;
 
-      a {
-        /* post title in Archvies */
-        margin-left: 2.5rem;
-        position: relative;
-        top: 0.1rem;
-
-        &:hover {
-          border-bottom: none;
-        }
-      }
-
       &:nth-child(odd) {
         background-color: var(--main-wrapper-bg, #fff);
         background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
@@ -82,14 +73,13 @@
         @extend %timeline;
 
         top: 0;
-        left: 68px;
-        height: 3rem;
+        left: 77px;
+        height: 3.1rem;
       }
     }
 
     &:last-child li:last-child::before {
       height: 1.5rem;
-      top: -12px;
     }
 
   } /* #archives ul */
@@ -97,40 +87,49 @@
   .date {
     white-space: nowrap;
     display: inline-block;
+    position: relative;
+    right: 0.5rem;
 
     &.month {
       width: 1.4rem;
       text-align: center;
-
-      ~ a::before {
-        /* A dot for Month and Day */
-        content: "";
-        display: inline-block;
-        position: relative;
-        -webkit-border-radius: 50%;
-        -moz-border-radius: 50%;
-        border-radius: 50%;
-        width: 8px;
-        height: 8px;
-        float: left;
-        top: 1.35rem;
-        right: 21.5px;
-        background-color: var(--timeline-node-bg);
-        box-shadow: 0 0 3px 0 #c2c6cc;
-        z-index: 1;
-      }
     }
 
     &.day {
       font-size: 85%;
       font-family: 'Lato', sans-serif;
-      text-align: center;
-      margin-right: -2px;
-      width: 1.2rem;
-      position: relative;
-      left: -0.15rem;
+
     }
-  } // #archives .date
+  }
+
+  a {
+    /* post title in Archvies */
+    margin-left: 2.5rem;
+    position: relative;
+    top: 0.1rem;
+
+    &:hover {
+      border-bottom: none;
+    }
+
+    &::before {
+      /* the dot before post title */
+      content: "";
+      display: inline-block;
+      position: relative;
+      -webkit-border-radius: 50%;
+      -moz-border-radius: 50%;
+      border-radius: 50%;
+      width: 8px;
+      height: 8px;
+      float: left;
+      top: 1.35rem;
+      left: 71px;
+      background-color: var(--timeline-node-bg);
+      box-shadow: 0 0 3px 0 #c2c6cc;
+      z-index: 1;
+    }
+  }
 
 } // #archives