component.scss in jekyll-theme-fica-0.3.0

- old
+ new

@@ -80,11 +80,10 @@
   th {
     background-color: $table-header-bg-color;
   }
 }
 
-
 .btn {
   padding: 8px 25px;
   border: none;
   border-radius: 5px;
   cursor: pointer;
@@ -198,56 +197,76 @@
   padding-top: 13px;
   border-top: 3px solid $border-color;
   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;
   }
 
   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;
+    }
   }
-}
\ No newline at end of file
+  @media screen and (max-width: 1111px) {
+    display: none;
+    width: 0px;
+  }
+}