jekyll-theme-chirpy 3.0.1

data/_sass/jekyll-theme-chirpy.scss

@@ -0,0 +1,22 @@
+/*!
+ * The styles for Jekyll theme Chirpy
+ *
+ * Chirpy v3.0.1 (https://github.com/cotes2020/jekyll-theme-chirpy)
+ * © 2021 Cotes Chung
+ * MIT Licensed
+ */
+
+@import "colors/light-typography";
+@import "colors/dark-typography";
+
+@import "addon/module";
+@import "addon/variables";
+@import 'addon/syntax';
+@import "addon/commons";
+
+@import "layout/home";
+@import "layout/post";
+@import "layout/tags";
+@import "layout/archives";
+@import "layout/categories";
+@import "layout/category-tag";

data/_sass/layout/archives.scss

@@ -0,0 +1,137 @@
+/*
+  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;
+  li {
+    font-size: 1.1rem;
+    line-height: 3rem;
+    &:nth-child(odd) {
+      background-color: var(--main-wrapper-bg, #fff);
+      background-image: linear-gradient(
+        to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
+    }
+    > div {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  span.lead {
+    font-size: 1.5rem;
+    position: relative;
+    left: 8px;
+
+    &:not(:first-child) {
+      position: relative;
+      left: 4px;
+      &::after {
+        left: 67px;
+      }
+    }
+
+    &::after { /* Year dot */
+      content: "";
+      display: block;
+      position: relative;
+      -webkit-border-radius: 50%;
+      -moz-border-radius: 50%;
+      border-radius: 50%;
+      width: 12px;
+      height: 12px;
+      top: -26px;
+      left: 63px;
+      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;
+    }
+  } // #archives span.lead
+
+  .date {
+    white-space: nowrap;
+    display: inline-block;
+    &.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: -.15rem;
+    }
+  } // #archives .date
+
+  ul {
+    > li {
+      > div > a {
+        /* post title in Archvies */
+        margin-left: 2.5rem;
+        position: relative;
+        top: 0.1rem;
+      }
+      &::after {
+        @extend %date-timeline;
+        height: 2.8rem;
+        top: -1.3rem;
+      }
+      &: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;
+    }
+  } // #archives ul
+
+} // #archives
+
+
+@media all and (max-width: 576px) {
+  #archives {
+    margin-top: -1rem;
+    ul {
+      letter-spacing: 0;
+    }
+  }
+}

data/_sass/layout/categories.scss

@@ -0,0 +1,64 @@
+/*
+  Style for Tab Categories
+*/
+
+%category-icon-color {
+  color: gray;
+}
+
+.categories {
+  margin-bottom: 2rem;
+  .card-header {
+    padding-right: 12px;
+  }
+  .list-group-item {
+    border-left: none;
+    border-right: none;
+    padding-left: 2rem;
+    > i {
+      @extend %category-icon-color;
+    }
+    &:first-child {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+  }
+
+  .card-header > span > i:first-child {
+    @extend %category-icon-color;
+  }
+
+  i {
+    &.far, &.fas {
+      font-size: 86%; // fontawesome icons
+    }
+  }
+
+} // .categories
+
+.category-trigger {
+  width: 1.7rem;
+  height: 1.7rem;
+  border-radius: 50%;
+  text-align: center;
+  color: #6c757d!important;
+  > i.fas {
+    position: relative;
+    height: 0.7rem;
+    width: 1rem;
+    transition: 300ms ease all;
+  }
+}
+
+@media (hover: hover) { // only works on desktop
+  .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

@@ -0,0 +1,66 @@
+/*
+  Style for page Category and Tag
+*/
+
+#page-category, #page-tag {
+  ul > li {
+    line-height: 1.5rem;
+    padding: 0.6rem 0;
+    &::before { // dot
+      background: #999;
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      display: block;
+      content: "";
+      position: relative;
+      top: 0.6rem;
+      margin-right: 0.5rem;
+    }
+    > a { /* post's title */
+      font-size: 1.1rem;
+      @extend %no-bottom-border;
+    }
+    > span:last-child {
+      white-space: nowrap;
+    }
+    /* post's date */
+  }
+}
+
+#page-tag h1 > i { // tag icon
+  font-size: 1.2rem;
+}
+
+#page-category h1 > i {
+  font-size: 1.25rem;
+}
+
+a:hover {
+  #page-category &,
+  #page-tag &,
+  #access-lastmod & {
+    @extend %link-hover;
+    margin-bottom: -1px; // Avoid jumping
+  }
+}
+
+.dash {
+  margin: 0 .5rem .6rem .5rem;
+  border-bottom: 2px dotted var(--dash-color);
+}
+
+@media all and (max-width: 576px) {
+  #page-category, #page-tag {
+    ul > li {
+      &::before {
+        margin: 0 .5rem;
+      }
+      > a {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}

data/_sass/layout/home.scss

@@ -0,0 +1,156 @@
+/*
+  Style for Homepage
+*/
+
+#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);
+
+    h1 {
+      font-size: 1.4rem;
+      margin: 0;
+    }
+
+    .post-meta {
+      i {
+        font-size: 0.73rem;
+      }
+      span:not(:last-child) {
+        margin-right: 1.2rem;
+      }
+    }
+
+    .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;
+      }
+    }
+
+    .pin {
+      > i {
+        transform: rotate(45deg);
+        padding-left: 3px;
+        color: var(--pin-color);
+      }
+      > span {
+        display: none;
+      }
+    }
+
+  } // .post-preview
+
+} // #post-list
+
+.pagination {
+  font-size: 1rem;
+  a:hover {
+    text-decoration: none;
+  }
+
+  .page-item {
+    .page-link {
+      color: var(--btn-patinator-text-color);
+      width: 2.5rem;
+      height: 2.5rem;
+      padding: 0;
+      text-align: center;
+      display: -webkit-box;
+      display: flex;
+      -webkit-box-pack: center;
+      justify-content: center;
+      -webkit-box-align: center;
+      align-items: center;
+      border-radius: 50%;
+      border: 1px solid var(--btn-paginator-border-color);
+      font-family: 'Lato', sans-serif;
+      background-color: var(--button-bg);
+      &:hover {
+        background-color: var(--btn-paginator-hover-color)
+      }
+    }
+    &.active {
+      .page-link {
+        background-color: var(--btn-active-bg);
+        border-color: var(--btn-active-border-color);
+        box-shadow: 0 0 8px 0 var(--btn-paginator-shadow) !important;
+        color: var(--btn-text-color);
+      }
+    }
+    &.disabled {
+      cursor: not-allowed;
+      .page-link {
+        color: rgba(108, 117, 125, 0.57);
+        border-color: var(--btn-paginator-border-color);
+        background-color: var(--button-bg);
+      }
+    }
+    &:first-child .page-link,
+    &:last-child .page-link {
+      border-radius: 50%;
+    }
+    &:not(:last-child) {
+      margin-right: 0.7rem;
+    }
+  } // .page-item
+
+} // .pagination
+
+/* Hide SideBar and TOC */
+@media all and (max-width: 830px) {
+  .pagination {
+    justify-content: center;
+  }
+}
+
+/* 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;
+        }
+      }
+    }
+  }
+
+  .pagination {
+    font-size: 0.85rem;
+    .page-item .page-link {
+      width: 2.2rem;
+      height: 2.2rem;
+    }
+  }
+
+}
+
+/* Pannel hidden */
+@media all and (max-width: 1200px) {
+  #post-list {
+    padding-right: 0;
+  }
+}