summaryrefslogtreecommitdiffstats
path: root/assets/scss/_fuji-style/_sidebar.scss
diff options
context:
space:
mode:
authoramzrk22020-10-02 09:36:28 +0800
committeramzrk22020-10-02 09:36:28 +0800
commit739ce7c416f51f847dff7002faf07d0695dc7f78 (patch)
tree66eec1472c58b50886611d513e7a243d45d6abce /assets/scss/_fuji-style/_sidebar.scss
parent7871c01b7c24c69a9bfd07091797a4ff29e12ab2 (diff)
downloadhugo-theme-fuji-739ce7c416f51f847dff7002faf07d0695dc7f78.tar.gz
hugo-theme-fuji-739ce7c416f51f847dff7002faf07d0695dc7f78.tar.bz2
hugo-theme-fuji-739ce7c416f51f847dff7002faf07d0695dc7f78.zip
new: mobile sidebar
Diffstat (limited to 'assets/scss/_fuji-style/_sidebar.scss')
-rw-r--r--assets/scss/_fuji-style/_sidebar.scss50
1 files changed, 34 insertions, 16 deletions
diff --git a/assets/scss/_fuji-style/_sidebar.scss b/assets/scss/_fuji-style/_sidebar.scss
index 6eb255e..a300c4c 100644
--- a/assets/scss/_fuji-style/_sidebar.scss
+++ b/assets/scss/_fuji-style/_sidebar.scss
@@ -30,31 +30,43 @@
@media screen and (max-width: $width-md) {
.sidebar {
+ display: none !important;
+ }
+}
+
+@media screen and (max-width: $width-md) {
+ .sidebar-mobile {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0%;
+ background-color: var(--color-codebg);
padding: 1.5rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
- }
+ z-index: 50;
- .sidebar-item {
- width: 40%; // max 2 modules per line
+ .sidebar-item {
+ width: 40%; // max 2 modules per line
- // space only at first 2 modules
- .sidebar-pages,
- .sidebar-tags {
- margin-bottom: 1rem;
- }
+ // space only at first 2 modules
+ .sidebar-pages,
+ .sidebar-tags {
+ margin-bottom: 1rem;
+ }
- .sidebar-links,
- .sidebar-bgm {
- margin-bottom: 0;
- }
+ .sidebar-links,
+ .sidebar-bgm {
+ margin-bottom: 0;
+ }
- & > img {
- margin: 0.5rem 0.25rem 0 0.25rem;
- width: 75%;
- border-radius: 0.25rem;
+ & > img {
+ margin: 0.5rem 0.25rem 0 0.25rem;
+ width: 75%;
+ border-radius: 0.25rem;
+ }
}
}
}
@@ -69,4 +81,10 @@
position: sticky;
top: 1rem;
+
+ #TableOfContents {
+ max-height: 32rem;
+ overflow: auto;
+ scrollbar-width: thin;
+ }
}