feat: new mobile toc

assets/css/_core/_media.scss

@@ -1,10 +1,10 @@
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
   .navbar {
-    display: none;
+    display: none !important;
   }
 
   .post-toc {
-    display: none;
+    display: none !important;
   }
 
   .navbar-mobile {
@@ -149,13 +149,25 @@
   .post-toc {
     margin-left: 580px !important;
   }
+
+  .navbar-mobile {
+    display: none !important;
+  }
+
+  .post-toc-mobile {
+    display: none !important;
+  }
 }
 
 /* Desktops and laptops ----------- */
 
 @media only screen and (min-width: 1224px) {
   .navbar-mobile {
-    display: none;
+    display: none !important;
+  }
+
+  .post-toc-mobile {
+    display: none !important;
   }
 }
 
@@ -163,4 +175,11 @@
 
 @media only screen and (min-width: 1824px) {
   /* Styles */
+  .navbar-mobile {
+    display: none !important;
+  }
+
+  .post-toc-mobile {
+    display: none !important;
+  }
 }

assets/css/_page/_post.scss

@@ -85,6 +85,64 @@
   }
 }
 
+.post-toc-mobile {
+  padding: 10px;
+
+  details {
+    summary {
+      display: block;
+      outline: none;
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      font-size: 1.2em;
+      font-weight: bold;
+      line-height: 2em;
+      padding: 0 10px;
+      background: $code-background-color;
+
+      &::-webkit-details-marker {
+        display: none;
+      }
+
+      i.details {
+        line-height: 2em;
+      }
+
+      .dark-theme & {
+        background: $code-background-color-dark;
+      }
+    }
+  }
+
+  details[open] {
+    i.details {
+      transform: rotate(180deg);
+    }
+  }
+
+  .post-toc-content {
+    border: 2px solid $code-background-color;
+
+    >nav>ul {
+      margin: 10px 0;
+    }
+
+    ul {
+      padding-left: 10px;
+      list-style: none;
+
+      ul {
+        padding-left: 20px;
+      }
+    }
+
+    .dark-theme & {
+      border: 2px solid $code-background-color-dark;
+    }
+  }
+}
+
 .featured_image {
   display: block;
   max-width: 100%;
@@ -145,14 +203,14 @@
   }
 
   ruby {
-    background: $code-background;
+    background: $code-background-color;
 
     rt {
       color: $global-font-secondary-color;
     }
 
     .dark-theme & {
-      background: $code-background-dark;
+      background: $code-background-color-dark;
 
       rt {
         color: $global-font-secondary-color-dark;

assets/css/_partial/_post/_code.scss

@@ -3,10 +3,10 @@ pre {
   padding: 7px;
   font-size: $code-font-size;
   font-family: $code-font-family;
-  background: $code-background;
+  background: $code-background-color;
 
   .dark-theme & {
-    background: $code-background-dark;
+    background: $code-background-color-dark;
   }
 }
 
@@ -14,20 +14,20 @@ code {
   padding: 3px 5px;
   border-radius: 4px;
   color: $code-color;
-  background: $code-background;
+  background: $code-background-color;
 
   .dark-theme & {
     color: $code-color-dark;
-    background: $code-background-dark;
+    background: $code-background-color-dark;
   }
 }
 
 p > code {
-  background: darken($code-background, 3%);
+  background: darken($code-background-color, 3%);
 
   .dark-theme & {
     color: $code-color-dark;
-    background: darken($code-background-dark, 3%);
+    background: darken($code-background-color-dark, 3%);
   }
 }
 
@@ -38,7 +38,7 @@ p > code {
   overflow-x: auto;
   box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
   position: relative;
-  background: $code-background;
+  background: $code-background-color;
 
   code {
     padding: 0;
@@ -56,17 +56,17 @@ p > code {
       font-size: $code-font-size;
       font-weight: bold;
       color: darken($code-info-color, 10%);
-      background: darken($code-background, 3%);
+      background: darken($code-background-color, 3%);
       content: 'Code';
 
       .dark-theme & {
-        background: darken($code-background-dark, 3%);
+        background: darken($code-background-color-dark, 3%);
       }
     }
   }
 
   @each $sign, $text in $code-type-list {
-    &.#{$sign} > table::after {
+    &.#{$sign} table::after {
       content: $text;
     }
   }
@@ -100,10 +100,10 @@ p > code {
     padding: 0;
     width: 100%;
     border-collapse: collapse;
-    border-color: $code-background;
+    border-color: $code-background-color;
 
     .dark-theme & {
-      border-color: $code-background-dark;
+      border-color: $code-background-color-dark;
     }
   }
 
@@ -183,7 +183,7 @@ p > code {
   /* GenericTraceback */  .gt { color: #d33682 }
 
   .dark-theme & {
-    background: $code-background-dark;
+    background: $code-background-color-dark;
 
     /* Keyword */ .chroma .k { color: #D371E3 }
     /* KeywordConstant */ .chroma .kc { color: #D371E3 }

assets/css/_variables.scss

@@ -52,8 +52,8 @@ $code-color: #E74C3C !default;
 $code-color-dark: #E5BF78 !default;
 
 // Color of the code background.
-$code-background: whitesmoke !default;
-$code-background-dark: #272C34 !default;
+$code-background-color: whitesmoke !default;
+$code-background-color-dark: #272C34 !default;
 
 $code-info-color: #cacaca !default;
 

layouts/posts/single.html

@@ -39,6 +39,10 @@
             </div>
         </div>
 
+        {{ with .Params.featured_image }}
+            <img src=/images/loading.svg data-sizes=auto data-src={{ . }} alt="featured image" class="featured_image lazyload">
+        {{ end }}
+
         {{ if or .Params.toc (and .Site.Params.toc (ne .Params.toc false)) -}}
             <div class="post-toc" id="post-toc">
                 <h2 class="post-toc-title">{{ T "toc" }}</h2>
@@ -47,12 +51,16 @@
                     {{ .TableOfContents }}
                 </div>
             </div>
+            <div class="post-toc-mobile" id="post-toc-mobile">
+                <details>
+                    <summary class="post-toc-title">{{ T "toc" }}<i class="details icon fas fa-angle-down"></i></summary>
+                    <div class="post-toc-content">
+                        {{ .TableOfContents }}
+                    </div>
+                </details>
+            </div>
         {{- end }}
 
-        {{ with .Params.featured_image }}
-            <img src=/images/loading.svg data-sizes=auto data-src={{ . }} alt="featured image" class="featured_image lazyload">
-        {{ end }}
-
         <div class="post-content">
             {{ $content := .Content }}
             {{ $REin := `<img src="([^"]+)" alt="([^"]+)?" />` }}