jekyll-theme-fica 0.2.2 → 0.3.0

data/_sass/layouts/component.scss

@@ -82,7 +82,6 @@ table {
   }
 }
 
-
 .btn {
   padding: 8px 25px;
   border: none;
@@ -200,40 +199,42 @@ table {
   margin: 0px;
 }
 
-
-// 
+//
 // Table Of Contents(Toc)
-// 
+//
 .post-toc {
-  flex: 0 0 20%;
+  position: sticky;
+  top: 2rem;
   border-left: 1px solid $text-color;
   margin-left: 10px;
   padding-left: 10px;
-  display: none;
-  height: 10%;
+  align-self: start;
+  margin-bottom: 15px;
 
-  ul, li {
+  li {
+    margin-left: 1rem;
+    margin: 7px;
+    padding-left: 1rem;
     list-style: none;
-    width: 100%;
-    margin-left: 0px;
-    padding: 4px 20px;
+  }
+  ul,
+  ol {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  a {
+    padding-left: 1rem;
+    color: $text-mute-color;
 
-    >a {
+    &:visited {
       color: $text-mute-color;
-      font-size: 15px;
-      font-weight: 400;
-      word-spacing: 0px;
-
-      &:visited {
-        color: $text-mute-color;
-      }
+    }
 
-      &:hover {
-        color: $text-color;
-      }
+    &:hover {
+      color: $text-color;
     }
   }
-
   ul {
     padding: 0;
   }
@@ -241,13 +242,31 @@ table {
   li {
     padding-bottom: 5px;
   }
-
-  h2 {
-    font-size: 20px;
-    padding-left: 5px;
+  li.active > a {
+    border-radius: 5px;
+    display: flex;
+    border: 1px solid;
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    animation-name: TOC-Entrance;
   }
+  li.decative {
+    a {
+      animation-duration: 0.3s;
+      animation-fill-mode: both;
+      animation-name: TOC-Exit;
+      opacity: 0.5;
 
-  @media screen and (min-width: 1111px) {
-    display: block;
+      &:hover {
+        opacity: 1;
+      }
+    }
+    ul {
+      display: none;
+    }
   }
-}
+  @media screen and (max-width: 1111px) {
+    display: none;
+    width: 0px;
+  }
+}

data/_sass/layouts/layout.scss

@@ -2,66 +2,90 @@
 // Site Header
 //
 .site-nav {
+  display: flex;
+  align-items: center;
   background: $site-header-bg;
   height: 80px;
   width: 100%;
   z-index: 100;
-  .nav-links {
-    float: right;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  .site-nav-link-container {
     margin-right: 25px;
     margin-left: 0;
+    a {
+      &:first-child {
+        color: rgba(0, 0, 0, 0.54);
+        background-color: $link-color;
+        transition: $transition-links;
+        padding: 11px 19px 13px;
+        border-radius: 40px;
+        @include animation-fade-in(0.3);
+
+        &:hover {
+          background-color: $btn-color-hover;
+        }
+      }
+    }
   }
+
   a {
-    line-height: 80px;
     margin: 0 5px;
     color: $text-color;
     font-size: 17px;
     padding: 7px 13px;
     border-radius: 3px;
-    text-transform: uppercase;
     transition: $transition-links;
-
+    @include animation-fade-in(0.6);
+    @include title-small;
+    text-transform: uppercase;
     &:hover {
       color: $text-mute-color;
     }
-
-    // Download btn
-    &:first-child {
-      color: rgba(0, 0, 0, 0.54);
-      background-color: $link-color;
-      transition: $transition-links;
-      padding: 11px 19px 13px;
-      border-radius: 40px;
-
-      &:hover {
-        background-color: $btn-color-hover;
-      }
-    }
   }
 
-  .logo {
+  .site-nav-logo {
+    display: flex;
     text-transform: none;
     color: $text-color;
-    font-size: 35px;
+    font-size: 32px;
     line-height: 80px;
     padding: 0 13px;
     font-weight: bold;
+    margin-right: auto;
+    @include animation-fade-in(0.1);
 
     &:hover {
       color: $text-mute-color;
       background-color: transparent;
-    }
 
+      img {
+        opacity: 0.5;
+        transition: $transition-links;
+      }
+    }
+    img {
+      width: 32px;
+      height: 32px;
+      transition: all 0.7s ease-in-out;
+    }
+    p {
+      margin-bottom: 0px;
+      line-height: 32px;
+    }
     @media screen and (min-width: $pc-width) {
       padding: 0 30px;
     }
+    @media screen and (max-width: $Site-Nav-Logo-text-autohide) {
+      p {
+        display: none;
+      }
+    }
   }
   .checkbtn {
     font-size: 40px;
     color: $text-color;
-    float: right;
     top: 20px;
-    // line-height: 80px;
     cursor: pointer;
     display: none;
     margin: 1% 20px 1% 0;
@@ -73,14 +97,14 @@
       background: rgba(232, 234, 237, 0.04);
     }
   }
-  #check {
+  #site-nav-check {
     display: none;
   }
   @media (max-width: 885px) {
     .checkbtn {
       display: block;
     }
-    .nav-links {
+    .site-nav-link-container {
       position: fixed;
       width: 100%;
       height: 100vh;
@@ -109,18 +133,25 @@
         }
       }
     }
-    #check {
+    #site-nav-check {
       &:checked {
         ~ {
-          .nav-links {
+          .site-nav-link-container {
             left: 0;
           }
         }
       }
     }
+    a {
+      line-height: 80px;
+    }
   }
 }
-
+// .sticky {
+//   position: fixed;
+//   top: 0;
+//   width: 100%;
+// }
 //
 // Header Banner
 //
@@ -136,7 +167,7 @@
   justify-content: space-around;
   line-height: 1.5;
 
-  .img {
+  .site-banner-img-container {
     padding-top: 61px;
     width: 100%;
 
@@ -144,9 +175,11 @@
       @include animation-fade-in(2.1);
       box-shadow: 0px 0px 20px 0px #00000052;
       transition: all 300ms ease 0ms;
+      border-radius: 15px;
 
       &:hover {
         box-shadow: 0px 0px 0px 0px #00000052;
+        border-radius: 0px;
       }
     }
   }
@@ -160,13 +193,14 @@
     > a {
       display: block;
       margin-top: 30px;
-      padding: 15px 81px;
+      padding: 21px 81px;
       border: none;
-      border-radius: 5px;
+      border-radius: 15px;
       cursor: pointer;
       color: $BTT-svg-color;
       background-color: $link-color;
       transition: $transition-btn;
+      @include title-medium;
 
       @include animation-fade-in(1.65);
 
@@ -184,26 +218,19 @@
     }
 
     .page-header-title {
+      @include display-medium;
       border-top: 8px;
       margin-bottom: 0%;
-      font-size: $site-banner-title-fnt-sze;
       color: $header-bg-color;
       text-align: center;
-      font-weight: bold;
-      font-family: $font-family;
       padding-bottom: 7px;
-      line-height: 1.5;
       @include animation-fade-in(0.1);
     }
 
     .site-banner-description {
       border-top: 8px;
       margin-bottom: 0%;
-      font-size: $site-banner-description-fnt-sze;
-      color: $text-color;
-      text-align: center;
-      font-weight: bold;
-      font-family: $font-family;
+      @include title-medium;
       padding-bottom: 7px;
       @include animation-fade-in(1);
     }
@@ -224,7 +251,7 @@
     display: flex;
     padding: 40px 10px 40px 10px;
 
-    .img {
+    .site-banner-img-container {
       width: $site-banner-picture-sze_wdth;
 
       > img {
@@ -244,8 +271,6 @@
   }
 }
 
-
-
 .text-muted {
   @include text-muted;
 }
@@ -254,41 +279,116 @@
   @include text-unmuted;
 }
 
-// 
+//
 // Posts
-// 
-.post-header {
-  margin-bottom: $font-spacing;
-}
+//
+.post {
+  // Animation
+  opacity: 0;
+  transform: translateY(3rem);
+  animation: 208.898ms linear 0s 1 normal forwards running slide-up;
+  animation-delay: 252.00568990042672ms;
+  .post-header {
+    margin-bottom: $font-spacing;
+  }
+
+  .post-title {
+    @include display-large;
+    line-height: 1.15;
+    margin-bottom: 5px;
+  }
+  .post-info {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 15px;
+    cursor: default;
+    user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -o-user-select: none;
+    align-items: baseline;
 
-.post-title {
-  @include relative-font-size(2.925);
-  line-height: 1.15;
-  margin-bottom: 5px;
+    .post-info-date {
+      color: $text-mute-color;
+      font-size: $small-font-size;
+      word-spacing: 1px;
+
+      &::before {
+        content: "calendar_today";
+        font-family: "Material Icons Round";
+        font-size: 12px;
+        line-height: 1;
+        padding-right: 5px;
+      }
+    }
+
+    .post-info-pin {
+      background-color: $table-header-bg-color;
+      color: $text-mute-color;
+      border-radius: 5px;
+      padding: 2px 5px 2px 5px;
+      cursor: default;
+      user-select: none;
+      -moz-user-select: none;
+      -khtml-user-select: none;
+      -webkit-user-select: none;
+      -o-user-select: none;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      > span {
+        transform: rotate(45deg);
+        font-size: 15px;
+        line-height: 1.4rem;
+        height: 1.3rem;
+      }
+
+      > p {
+        margin-bottom: 0;
+        display: none;
+        text-transform: capitalize;
+      }
 
-  @media screen and (min-width: $pc-width) {
-    @include relative-font-size(3.7);
+      @media screen and (min-width: $mobile-width) {
+        > p {
+          display: inline-block;
+        }
+      }
+    }
   }
 }
 .post-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
   padding: 9px;
   margin-left: 0;
   list-style: none;
-
-  .post {
-    border-bottom: 2px solid $border-color;
+  .post-container {
+    border: 2px solid $border-color;
     padding-bottom: 10px;
-    padding-top: 10px;
-
+    padding: 10px;
+    cursor: pointer;
+    border-radius: 12px;
+    a {
+      color: $text-color;
+    }
+    &:hover {
+      background: linear-gradient(0deg,rgba(68,71,70,.15),rgba(68,71,70,.15));
+    }
+  }
+  .post {
     .post-meta {
       font-size: $small-font-size;
       color: $text-color;
       word-spacing: 1px;
     }
 
-    .post-link {
-      @include relative-font-size(3);
-      line-height: 1.5;
+    .post-header {
+      @include headline-large;
+      margin: 12px 0px 0px 0px;
     }
 
     .post-info {
@@ -354,87 +454,34 @@
       }
     }
 
-    > p {
-      //  Make the description shorter
-      margin: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 3; // line height
-      -webkit-box-orient: vertical;
-    }
-
-    > h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      font-size: $font-size;
-    }
-  }
-}
-
-.post-info {
-  display: flex;
-  justify-content: space-between;
-  padding-bottom: 15px;
-  cursor: default;
-  user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -o-user-select: none;
-  align-items: baseline;
-
-  .post-info-date {
-    color: $text-mute-color;
-    font-size: $small-font-size;
-    word-spacing: 1px;
-
-    &::before {
-      content: "calendar_today";
-      font-family: "Material Icons Round";
-      font-size: 12px;
-      line-height: 1;
-      padding-right: 5px;
-    }
-  }
-
-  .post-info-pin {
-    background-color: $table-header-bg-color;
-    color: $text-mute-color;
-    border-radius: 5px;
-    padding: 2px 5px 2px 5px;
-    cursor: default;
-    user-select: none;
-    -moz-user-select: none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-    -o-user-select: none;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-
-    > span {
-      transform: rotate(45deg);
-      font-size: 15px;
-      line-height: 1.4rem;
-      height: 1.3rem;
-    }
-
-    > p {
-      margin-bottom: 0;
-      display: none;
-      text-transform: capitalize;
-    }
+  }    
+  .post-descriptions {
+      p {
+        //  Make the description shorter
+        margin: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 3; // line height
+        -webkit-box-orient: vertical;
+      }
 
-    @media screen and (min-width: $mobile-width) {
-      > p {
-        display: inline-block;
+      > h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      a {
+        @include body-medium;
+        a[href^="#"] {
+          display: none
+        }
       }
     }
-  }
+}
+.site-post-list-title {
+  @include display-large;
 }
 
 //
@@ -443,7 +490,6 @@
 .site-footer {
   background-color: $footer-bg-color;
   padding-top: $font-spacing;
-  padding-bottom: 10px;
 
   .site-footer-wrapper {
     display: flex;
@@ -454,34 +500,32 @@
     list-style: none;
     font-size: 20px;
     margin-bottom: 10px;
+    p {
+      font-weight: 700;
+      letter-spacing: 1px;
+      text-transform: uppercase;
+      margin-bottom: 10px;
+    }
 
-    .links-footer {
+    a {
+      display: block;
       width: calc(100% - (#{$font-spacing} / 2));
       transition: $transition-links;
       word-break: break-all;
-
-      &:first-child {
-        font-weight: 700;
-        letter-spacing: 1px;
-        text-transform: uppercase;
-        margin-bottom: 10px;
-      }
+      color: rgba(128, 134, 139, 0.57);
+      font-weight: 500;
+      line-height: 3.3;
 
       &:not(:first-child) {
         padding: 2px 0;
       }
 
-      > a {
+      &:visited {
         color: rgba(128, 134, 139, 0.57);
-        font-weight: 500;
-
-        &:visited {
-          color: rgba(128, 134, 139, 0.57);
-        }
+      }
 
-        &:hover {
-          color: $footer-links-hover-color;
-        }
+      &:hover {
+        color: $footer-links-hover-color;
       }
     }
 
@@ -495,6 +539,7 @@
         padding: 1px 0px 0px;
         font-size: 2rem;
         font-weight: 900;
+        font-family: $md-ref-typeface-plain;
       }
 
       &:hover {
@@ -522,13 +567,12 @@
   }
 }
 .footer-info {
-  padding-top: 10px;
+  @include label-small;
   border-top: 1px solid $border-color;
-  font-size: 0.8rem;
   justify-content: space-between;
   display: flex;
   flex-direction: column;
-  padding: 10px 10px 0;
+  padding: 20px 10px 20px;
   margin-left: 0px;
   margin-right: 0px;
 
@@ -583,6 +627,7 @@
 
   &:hover {
     background-color: rgba(255, 255, 255, 0.1);
+    color: inherit;
   }
 }