diff options
| -rw-r--r-- | assets/scss/_fuji-style/_components.scss | 1 | ||||
| -rw-r--r-- | assets/scss/_fuji-style/_sidebar.scss | 50 | ||||
| -rw-r--r-- | layouts/partials/components.html | 55 |
3 files changed, 89 insertions, 17 deletions
diff --git a/assets/scss/_fuji-style/_components.scss b/assets/scss/_fuji-style/_components.scss index 8131f34..8545349 100644 --- a/assets/scss/_fuji-style/_components.scss +++ b/assets/scss/_fuji-style/_components.scss @@ -7,6 +7,7 @@ display: flex; justify-content: space-between; flex-direction: column; + z-index: 100; div { flex: 0 1 auto; 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; + } } diff --git a/layouts/partials/components.html b/layouts/partials/components.html index a374598..987d409 100644 --- a/layouts/partials/components.html +++ b/layouts/partials/components.html @@ -5,4 +5,57 @@ <div class="btn-scroll-top"> <i class="iconfont icon-chevron-up-circle-sharp"></i> </div> -</div>
\ No newline at end of file +</div> +<aside class="sidebar-mobile" style="display: none;"> + <!-- pages --> + <div class="sidebar-item sidebar-pages"> + <h3>{{ i18n "sidebarPages" }}</h3> + <ul> + {{ range .Site.Menus.nav }} + <li> + <a href="{{ .URL }}">{{ .Name }}</a> + </li> + {{ end }} + </ul> + </div> + <!-- links --> + <div class="sidebar-item sidebar-links"> + <h3>{{ i18n "sidebarLinks" }}</h3> + <ul> + {{ range .Site.Menus.link }} + <li> + <a href="{{ .URL }}" target="_blank"><span>{{ .Name }}</span></a> + </li> + {{ end }} + </ul> + </div> + <!-- tags --> + <div class="sidebar-item sidebar-tags"> + <h3>{{ i18n "sidebarTags" }}</h3> + <div> + {{ range .Site.Taxonomies.tags }} + <span> + <a href="{{ .Page.RelPermalink }}">{{ .Page.Title }}</a> + </span> + {{ end }} + </div> + </div> + <!-- in-post toc --> + {{ if in .Site.Params.mainSections .Type }} + {{ if and (or .Site.Params.showToc .Params.showToc) (ne .Params.showToc false) }} + <div class="sidebar-item sidebar-toc"> + <h3>{{ i18n "sidebarToc" }}</h3> + {{ .TableOfContents }} + </div> + {{ end }} + {{ else }} + {{ with .Site.Params.bgmImageChart }} + <!-- bgm.tv image chart --> + <div class="sidebar-item sidebar-bgm"> + <h3>{{ i18n "sidebarBangumiChart" }}</h3> + <img class="lazyload" src="{{ $.Site.Params.lazyPlaceholder | relURL }}" + data-src="https://bgm.tv/chart/img/{{ . }}" alt="Bangumi εΎεζ¦ε" /> + </div> + {{ end }} + {{ end }} +</aside>
\ No newline at end of file |