feat(style): adjust mobile TOC style (#155)

2 files changed, 16 insertions, 14 deletions

diff --git a/assets/css/_page/_home.scss b/assets/css/_page/_home.scss
index 0de22fe..bfb8460 100644
--- a/assets/css/_page/_home.scss
+++ b/assets/css/_page/_home.scss
@@ -48,14 +48,11 @@
 
         .home-social-links {
           padding-top: .6rem;
-
-          i {
-            font-size: 1.45rem;
-          }
+          font-size: 1.5rem;
+          line-height: 1.5rem;
 
           img {
-            width: 1.5rem;
-            height: 1.5rem;
+            max-height: 1.4rem;
           }
         }
       }
diff --git a/assets/css/_partial/_single/_toc.scss b/assets/css/_partial/_single/_toc.scss
index ec7b1d5..c1001fb 100644
--- a/assets/css/_partial/_single/_toc.scss
+++ b/assets/css/_partial/_single/_toc.scss
@@ -81,6 +81,11 @@
   details {
     summary {
       list-style: none;
+      background: darken($code-background-color, 3%);
+
+      .dark-theme & {
+        background: darken($code-background-color-dark, 3%);
+      }
 
       .toc-title {
         display: block;
@@ -89,14 +94,13 @@
         font-weight: bold;
         line-height: 2em;
         padding: 0 .625rem;
-        background: $code-background-color;
 
         i.details {
           line-height: 2em;
         }
 
-        .dark-theme & {
-          background: $code-background-color-dark;
+        &:hover {
+          cursor: pointer;
         }
       }
 
@@ -113,14 +117,15 @@
   }
 
   .toc-content {
-    border: 2px solid $code-background-color;
+    background-color: $code-background-color;
 
-    >nav>ul {
-      margin: .625rem 0;
+    > nav > ul {
+      margin: 0;
+      padding: .4rem .8rem;
     }
 
     ul {
-      padding-left: .625rem;
+      list-style: none;
 
       ul {
         padding-left: 1.25rem;
@@ -128,7 +133,7 @@
     }
 
     .dark-theme & {
-      border: 2px solid $code-background-color-dark;
+      background-color: $code-background-color-dark;
     }
   }
 }