jekyll-theme-chirpy 5.0.2 → 6.2.2

data/_sass/layout/archives.scss

@@ -2,139 +2,136 @@
   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 {
+  $timeline-width: 4px;
+
+  %timeline {
+    content: '';
+    width: $timeline-width;
+    position: relative;
+    float: left;
+    background-color: var(--timeline-color);
+  }
+
+  .year {
+    height: 3.5rem;
     font-size: 1.5rem;
     position: relative;
-    left: 8px;
+    left: 2px;
+    margin-left: -$timeline-width;
 
-    &::after { /* Year dot */
-      content: "";
-      display: block;
+    &::before {
+      @extend %timeline;
+
+      height: 72px;
+      left: 79px;
+      bottom: 16px;
+    }
+
+    &:first-child::before {
+      @extend %timeline;
+
+      height: 32px;
+      top: 24px;
+    }
+
+    /* Year dot */
+    &::after {
+      content: '';
+      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: 21.5px;
       border: 3px solid;
       background-color: var(--timeline-year-dot-color);
       border-color: var(--timeline-node-bg);
       box-shadow: 0 0 2px 0 #c2c6cc;
       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;
-
-      div {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        a {
-          /* post title in Archvies */
-          margin-left: 2.5rem;
-          position: relative;
-          top: 0.1rem;
-        }
-      }
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
 
       &:nth-child(odd) {
-        background-color: var(--main-wrapper-bg, #fff);
-        background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
+        background-color: var(--main-bg, #ffffff);
+        background-image: linear-gradient(
+          to left,
+          #ffffff,
+          #fbfbfb,
+          #fbfbfb,
+          #fbfbfb,
+          #ffffff
+        );
       }
 
-      &::after {
-        @extend %date-timeline;
+      &::before {
+        @extend %timeline;
 
-        height: 2.8rem;
-        top: -1.3rem;
+        top: 0;
+        left: 77px;
+        height: 3.1rem;
       }
-
-      &:first-child::before {
-        @extend %date-timeline;
-
-        height: 3.06rem;
-        top: -1.61rem;
-      }
-    }
-
-    &:not(:last-child) > li:last-child::after {
-      height: 3.4rem;
     }
 
-    &:last-child > li:last-child::after {
-      display: none;
+    &:last-child li:last-child::before {
+      height: 1.5rem;
     }
-  } // #archives ul
+  } /* #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;
-        left: 69px;
-        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;
+      font-family: Lato, sans-serif;
+    }
+  }
+
+  a {
+    /* post title in Archvies */
+    margin-left: 2.5rem;
+    position: relative;
+    top: 0.1rem;
+
+    &:hover {
+      border-bottom: none;
     }
-  } // #archives .date
 
-} // #archives
+    &::before {
+      /* the dot before post title */
+      content: '';
+      display: inline-block;
+      position: relative;
+      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 */
 
 @media all and (max-width: 576px) {
   #archives {

data/_sass/layout/categories.scss

@@ -8,15 +8,30 @@
 
 .categories {
   margin-bottom: 2rem;
+  border-color: var(--categories-border);
+
+  &.card,
+  .list-group {
+    @extend %rounded;
+  }
 
   .card-header {
-    padding-right: 12px;
+    $radius: calc($base-radius - 1px);
+
+    padding: 0.75rem;
+    border-radius: $radius;
+    border-bottom: 0;
+
+    &.hide-border-bottom {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
   }
 
   i {
     @extend %category-icon-color;
 
-    font-size: 86%; // fontawesome icons
+    font-size: 86%; /* fontawesome icons */
   }
 
   .list-group-item {
@@ -29,9 +44,11 @@
       border-top-right-radius: 0;
     }
 
+    &:last-child {
+      border-bottom: 0;
+    }
   }
-
-} // .categories
+} /* .categories */
 
 .category-trigger {
   width: 1.7rem;
@@ -40,28 +57,27 @@
   text-align: center;
   color: #6c757d !important;
 
-  &:hover {
-    i {
-      color: var(--categories-icon-hover-color);
-    }
-  }
-
   i {
     position: relative;
     height: 0.7rem;
     width: 1rem;
     transition: transform 300ms ease;
   }
+
+  &:hover {
+    i {
+      color: var(--categories-icon-hover-color);
+    }
+  }
 }
 
-@media (hover: hover) { // only works on desktop
+/* only works on desktop */
+@media (hover: hover) {
   .category-trigger:hover {
     background-color: var(--categories-hover-bg);
   }
 }
 
 .rotate {
-  -ms-transform: rotate(-90deg); /* IE 9 */
-  -webkit-transform: rotate(-90deg); /* Safari 3-8 */
   transform: rotate(-90deg);
 }

data/_sass/layout/category-tag.scss

@@ -13,31 +13,30 @@
     line-height: 1.5rem;
     padding: 0.6rem 0;
 
-    &::before { // dot
-      background: #999;
+    /* dot */
+    &::before {
+      background: #999999;
       width: 5px;
       height: 5px;
       border-radius: 50%;
       display: block;
-      content: "";
+      content: '';
       position: relative;
       top: 0.6rem;
       margin-right: 0.5rem;
     }
 
-    > a { /* post's title */
+    /* post's title */
+    > a {
       @extend %no-bottom-border;
 
       font-size: 1.1rem;
     }
-
-    > span:last-child {
-      white-space: nowrap;
-    } /* post's date */
   }
 }
 
-#page-tag h1 > i { // tag icon
+/* tag icon */
+#page-tag h1 > i {
   font-size: 1.2rem;
 }
 
@@ -51,7 +50,7 @@
   a:hover {
     @extend %link-hover;
 
-    margin-bottom: -1px; // Avoid jumping
+    margin-bottom: -1px; /* Avoid jumping */
   }
 }
 

data/_sass/layout/home.scss

@@ -2,9 +2,97 @@
   Style for Homepage
 */
 
+#post-list {
+  margin-top: 2rem;
+
+  .card-wrapper {
+    display: block;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 1.25rem;
+    }
+  }
+
+  .card {
+    %img-radius {
+      border-radius: $base-radius $base-radius 0 0;
+    }
+
+    .preview-img {
+      height: 10rem;
+
+      @extend %img-radius;
+
+      img {
+        width: 100%;
+        height: 100%;
+        -o-object-fit: cover;
+        object-fit: cover;
+
+        @extend %img-radius;
+      }
+    }
+
+    .card-body {
+      min-height: 10.5rem;
+      padding: 1rem;
+
+      .card-title {
+        @extend %text-clip;
+
+        color: var(--heading-color) !important;
+        font-size: 1.25rem;
+      }
+
+      %muted {
+        color: var(--text-muted-color) !important;
+      }
+
+      .card-text.content {
+        @extend %muted;
+
+        p {
+          @extend %text-clip;
+
+          line-height: 1.5;
+          margin: 0;
+        }
+      }
+
+      .post-meta {
+        @extend %muted;
+
+        i {
+          &:not(:first-child) {
+            margin-left: 1.5rem;
+          }
+        }
+
+        em {
+          @extend %normal-font-style;
+
+          color: inherit;
+        }
+
+        > div:first-child {
+          display: block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+} /* #post-list */
+
 .pagination {
-  color: var(--btn-patinator-text-color);
-  font-family: 'Lato', sans-serif;
+  color: var(--text-color);
+  font-family: Lato, sans-serif;
+  justify-content: space-evenly;
 
   a:hover {
     text-decoration: none;
@@ -12,26 +100,27 @@
 
   .page-item {
     .page-link {
-      color: inherit;
-      width: 2.5rem;
-      height: 2.5rem;
-      padding: 0;
+      color: var(--btn-patinator-text-color);
+      padding: 0 0.6rem;
       display: -webkit-box;
       -webkit-box-pack: center;
       -webkit-box-align: center;
-      border-radius: 50%;
-      border: 1px solid var(--btn-paginator-border-color);
-      background-color: var(--button-bg);
+      border-radius: 0.5rem;
+      border: 0;
+      background-color: inherit;
+    }
 
-      &:hover {
+    &.active {
+      .page-link {
         background-color: var(--btn-paginator-hover-color);
       }
     }
 
-    &.active {
+    &:not(.active) {
       .page-link {
-        background-color: var(--btn-paginator-hover-color);
-        color: var(--btn-text-color);
+        &:hover {
+          box-shadow: inset var(--btn-border-color) 0 0 0 1px;
+        }
       }
     }
 
@@ -40,145 +129,74 @@
 
       .page-link {
         color: rgba(108, 117, 125, 0.57);
-        border-color: var(--btn-paginator-border-color);
-        background-color: var(--button-bg);
       }
     }
+  } /* .page-item */
+} /* .pagination */
 
-    &:first-child .page-link,
-    &:last-child .page-link {
-      border-radius: 50%;
-    }
-  } // .page-item
-
-} // .pagination
-
-#post-list {
-  margin-top: 1rem;
-  padding-right: 0.5rem;
-
-  .post-preview {
-    padding-top: 1.5rem;
-    padding-bottom: 1rem;
-    border-bottom: 1px solid var(--main-border-color);
-
-    a:hover {
-      @extend %link-hover;
-    }
-
-    h1 {
-      font-size: 1.4rem;
-      margin: 0;
+/* Tablet */
+@media all and (min-width: 768px) {
+  #post-list {
+    %img-radius {
+      border-radius: 0 $base-radius $base-radius 0;
     }
 
-    .post-meta {
-      i {
-        font-size: 0.73rem;
-
-        &:not(:first-child) {
-          margin-left: 1.2rem;
-        }
+    .card {
+      .preview-img {
+        width: 20rem;
+        height: 11.55rem; // can hold 2 lines each for title and content
       }
 
-      em {
-        @extend %normal-font-style;
-      }
-    }
-
-    .post-content {
-      margin-top: 0.6rem;
-      margin-bottom: 0.6rem;
-      color: var(--post-list-text-color);
-
-      > p {
-        /* Make preview shorter on the homepage */
-        margin: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-      }
-    }
+      .card-body {
+        min-height: 10.75rem;
+        width: 60%;
+        padding: 1.75rem 1.75rem 1.25rem 1.75rem;
 
-    .pin {
-      > i {
-        transform: rotate(45deg);
-        padding-left: 3px;
-        color: var(--pin-color);
-      }
+        .card-text {
+          display: inherit !important;
+        }
 
-      > span {
-        display: none;
+        .post-meta {
+          i {
+            &:not(:first-child) {
+              margin-left: 1.75rem;
+            }
+          }
+        }
       }
     }
-
-  } // .post-preview
-} // #post-list
+  }
+}
 
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
   .pagination {
-    justify-content: space-evenly;
-
     .page-item {
       &:not(:first-child):not(:last-child) {
         display: none;
       }
-
     }
-
   }
 }
 
 /* Sidebar is visible */
 @media all and (min-width: 831px) {
   #post-list {
-    margin-top: 1.5rem;
-
-    .post-preview .post-meta {
-      .pin {
-        background: var(--pin-bg);
-        border-radius: 5px;
-        line-height: 1.4rem;
-        height: 1.3rem;
-        margin-top: 3px;
-        padding-left: 1px;
-        padding-right: 6px;
-
-        > span {
-          display: inline;
-        }
-      }
-    }
+    margin-top: 2.5rem;
   }
 
   .pagination {
     font-size: 0.85rem;
+    justify-content: center;
 
     .page-item {
       &:not(:last-child) {
         margin-right: 0.7rem;
       }
-
-      .page-link {
-        width: 2rem;
-        height: 2rem;
-      }
-
     }
 
     .page-index {
       display: none;
     }
-
-  } // .pagination
-
-}
-
-/* Pannel hidden */
-@media all and (max-width: 1200px) {
-  #post-list {
-    padding-right: 0;
-  }
+  } /* .pagination */
 }