chore: improve responsive design of archive entries

cotes2020 · Aug 8, 2022 · d792a2f · d792a2f
1 parent 22d4275
commit d792a2f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 40 deletions.
diff --git a/_layouts/archives.html b/_layouts/archives.html
@@ -25,7 +25,7 @@
     {% 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
@@ -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,55 +73,63 @@
         @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 */
 
   .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;
+
+    }
+  }
+
+  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;
-      left: -0.15rem;
+      -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 .date
+  }
 
 } // #archives