From caf35975d7ef2c3855c2d38f46a4e60b216ace74 Mon Sep 17 00:00:00 2001
From: amzrk2
Date: Sat, 3 Oct 2020 16:36:03 +0800
Subject: fix: sidebar overflow on small devices

---
 assets/scss/_fuji-style/_sidebar.scss | 71 +++++++++++++++++------------------
 layouts/partials/components.html      |  2 +
 2 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/assets/scss/_fuji-style/_sidebar.scss b/assets/scss/_fuji-style/_sidebar.scss
index 58f23a2..e913d95 100644
--- a/assets/scss/_fuji-style/_sidebar.scss
+++ b/assets/scss/_fuji-style/_sidebar.scss
@@ -16,12 +16,12 @@
     margin: 0 0.1rem; // little space
   }
 
-  &>div,
-  &>nav {
+  & > div,
+  & > nav {
     margin: 0 0.1rem; // little space
   }
 
-  &>img {
+  & > img {
     margin: 0.5rem 0.25rem 0 0.25rem;
     width: 100%;
     border-radius: 2px;
@@ -42,51 +42,48 @@
     right: 0;
     bottom: 0%;
     background-color: var(--color-codebg);
-    padding: 1.5rem 4.5rem 1.5rem 1.5rem;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: space-around;
     z-index: 50;
+    overflow: auto;
+    display: flex;
+    flex-direction: column-reverse;
+
+    .sidebar-wrapper {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: nowrap;
+      justify-content: space-around;
+      margin: 1.5rem 4.25rem 1.5rem 1.5rem;
+    }
 
     .sidebar-item {
       width: 90%; // max 1 module per line
       text-align: right;
 
-      // space only at first 2 modules
-      .sidebar-pages,
-      .sidebar-tags {
-        margin-bottom: 1rem;
-      }
-
-      .sidebar-links,
-      .sidebar-bgm {
-        margin-bottom: 0;
-      }
-
-      &>img {
-        margin: 0.5rem 0.25rem 0 0.25rem;
-        width: 75%;
-        border-radius: 0.25rem;
+      // space only at not first modules
+      margin-top: 1rem;
+      &:last-child {
+        margin-top: 0;
       }
     }
   }
 }
 
-// single page part
-.sidebar-toc {
-  ul ul {
-    font-size: 0.875rem;
-    padding-left: 0.5rem;
-    margin-bottom: 0.25rem;
-  }
+@media screen and (min-width: $width-md) {
+  // single page part
+  .sidebar-toc {
+    ul ul {
+      font-size: 0.875rem;
+      padding-left: 0.5rem;
+      margin-bottom: 0.25rem;
+    }
 
-  position: sticky;
-  top: 1rem;
+    position: sticky;
+    top: 1rem;
 
-  #TableOfContents {
-    max-height: 32rem;
-    overflow: auto;
-    scrollbar-width: thin;
+    #TableOfContents {
+      max-height: 32rem;
+      overflow: auto;
+      scrollbar-width: thin;
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/layouts/partials/components.html b/layouts/partials/components.html
index 5148628..532efad 100644
--- a/layouts/partials/components.html
+++ b/layouts/partials/components.html
@@ -10,6 +10,7 @@
     </div>
 </div>
 <aside class="sidebar-mobile" style="display: none;">
+  <div class="sidebar-wrapper">
     <!-- pages -->
     <div class="sidebar-item sidebar-pages">
         <h3>{{ i18n "sidebarPages" }}</h3>
@@ -52,4 +53,5 @@
     </div>
     {{ end }}
     {{ end }}
+  </div>
 </aside>
\ No newline at end of file
-- 
cgit v1.2.3