refactor: optimize the layout of archive timeline

_layouts/archives.html

@@ -13,36 +13,29 @@ layout: page
   {% assign df_dayjs_m = '/ MM' %}
 {% endif %}
 
-<div id="archives" class="pl-xl-2">
+<div id="archives" class="pl-xl-3">
+
 {% for post in site.posts %}
-  {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
-  {% capture pre_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
-  {% if forloop.first %}
-    {% assign last_day = "" %}
-    {% assign last_month = "" %}
-  <span class="lead">{{this_year}}</span>
-  <ul class="list-unstyled">
-  {% endif %}
-    <li>
-      <div>
-        {% 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" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
-          {{ post.date | date: df_strftime_m }}
-        </span>
-        <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
-      </div>
-    </li>
-  {% if forloop.last %}
-  </ul>
-  {% elsif this_year != pre_year %}
-  </ul>
-  <span class="lead">{{pre_year}}</span>
-  <ul class="list-unstyled">
-    {% assign last_day = "" %}
-    {% assign last_month = "" %}
+  {% capture cur_year %}{{ post.date | date: "%Y" }}{% endcapture %}
+
+  {% if cur_year != last_year %}
+    {% unless forloop.first %}</ul>{% endunless %}
+    <div class="year lead">{{ cur_year }}</div>
+    <ul class="list-unstyled">
+    {% assign last_year = cur_year %}
   {% endif %}
+
+  <li class="d-flex align-items-center">
+  {% 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 }}">
+      {{ post.date | date: df_strftime_m }}
+    </span>
+    <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+  </li>
+
+  {% if forloop.last %}</ul>{% endif %}
+
 {% endfor %}
+
 </div>

_sass/layout/archives.scss

@@ -2,35 +2,49 @@
   Style for Archives
 */
 
-%date-timeline {
-  content: "";
-  width: 4px;
-  left: 75px;
-  display: inline-block;
-  float: left;
-  position: relative;
-  background-color: var(--timeline-color);
-}
-
 #archives {
   letter-spacing: 0.03rem;
 
-  span.lead {
-    font-size: 1.5rem;
+  $timeline-width: 4px;
+
+  %timeline {
+    content: "";
+    width: $timeline-width;
     position: relative;
-    left: 8px;
+    float: left;
+    background-color: var(--timeline-color);
+  }
+
+  .year {
+    height: 3.5rem;
+    font-size: 1.5rem;
+    margin-left: -$timeline-width;
+
+    &::before {
+      @extend %timeline;
+
+      height: 72px;
+      left: 72px;
+      bottom: 16px;
+    }
+
+    &:first-child::before {
+      @extend %timeline;
+
+      height: 32px;
+      top: 24px;
+    }
 
     &::after { /* Year dot */
       content: "";
-      display: block;
+      display: inline-block;
       position: relative;
       -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
       border-radius: 50%;
       width: 12px;
       height: 12px;
-      top: -26px;
-      left: 63px;
+      left: 14.5px;
       border: 3px solid;
       background-color: var(--timeline-year-dot-color);
       border-color: var(--timeline-node-bg);
@@ -38,32 +52,24 @@
       z-index: 1;
     }
 
-    &:not(:first-child) {
-      position: relative;
-      left: 4px;
-
-      &::after {
-        left: 67px;
-      }
-    }
-
-  } // #archives span.lead
+  }
 
   ul {
     li {
       font-size: 1.1rem;
       line-height: 3rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
 
-      div {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+      a {
+        /* post title in Archvies */
+        margin-left: 2.5rem;
+        position: relative;
+        top: 0.1rem;
 
-        a {
-          /* post title in Archvies */
-          margin-left: 2.5rem;
-          position: relative;
-          top: 0.1rem;
+        &:hover {
+          border-bottom: none;
         }
       }
 
@@ -72,29 +78,21 @@
         background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
       }
 
-      &::after {
-        @extend %date-timeline;
+      &::before {
+        @extend %timeline;
 
-        height: 2.8rem;
-        top: -1.3rem;
-      }
-
-      &:first-child::before {
-        @extend %date-timeline;
-
-        height: 3.06rem;
-        top: -1.61rem;
+        top: 0;
+        left: 68px;
+        height: 3rem;
       }
     }
 
-    &:not(:last-child) > li:last-child::after {
-      height: 3.4rem;
+    &:last-child li:last-child::before {
+      height: 1.5rem;
+      top: -12px;
     }
 
-    &:last-child > li:last-child::after {
-      display: none;
-    }
-  } // #archives ul
+  } /* #archives ul */
 
   .date {
     white-space: nowrap;
@@ -116,7 +114,7 @@
         height: 8px;
         float: left;
         top: 1.35rem;
-        left: 69px;
+        right: 21.5px;
         background-color: var(--timeline-node-bg);
         box-shadow: 0 0 3px 0 #c2c6cc;
         z-index: 1;