diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/js/fuji.js | 15 | ||||
| -rw-r--r-- | assets/scss/_fuji-style/_components.scss | 16 | ||||
| -rw-r--r-- | assets/scss/_fuji-style/_sidebar.scss | 50 | ||||
| -rw-r--r-- | assets/scss/_iconfont.scss | 10 |
4 files changed, 70 insertions, 21 deletions
diff --git a/assets/js/fuji.js b/assets/js/fuji.js index 994119b..d2eab58 100644 --- a/assets/js/fuji.js +++ b/assets/js/fuji.js @@ -161,3 +161,18 @@ if (urlParams.has('s')) { }; xhr.send(null); } + +/* mobile menu */ +const openMenu = document.getElementById('btn-menu'); +if (openMenu) { + openMenu.addEventListener('click', () => { + const menu = document.querySelector('.sidebar-mobile'); + if (menu) { + if (menu.style.display === 'none') { + menu.setAttribute('style', 'display: flex;'); + } else { + menu.setAttribute('style', 'display: none;'); + } + } + }); +} diff --git a/assets/scss/_fuji-style/_components.scss b/assets/scss/_fuji-style/_components.scss index 8131f34..2b90bfe 100644 --- a/assets/scss/_fuji-style/_components.scss +++ b/assets/scss/_fuji-style/_components.scss @@ -3,10 +3,10 @@ right: 1.5rem; bottom: 1.5rem; width: 2.5rem; - height: 5rem; display: flex; justify-content: space-between; flex-direction: column; + z-index: 100; div { flex: 0 1 auto; @@ -16,19 +16,29 @@ align-items: center; justify-content: center; cursor: pointer; + font-size: 1.25rem; &:first-child { border-radius: 0.25rem 0.25rem 0 0; - font-size: 1.25rem; + font-size: 1.125rem; } &:last-child { border-radius: 0 0 0.25rem 0.25rem; - font-size: 1.3125rem; + font-size: 1.325rem; } } } +@media screen and (min-width: $width-md) { + .btn div:first-child { + display: none; + } + .btn div:nth-child(2) { + border-radius: 0.25rem 0.25rem 0 0; + } +} + #post-aplayer { margin: 0 0.125rem 1.25rem 0.125rem; font-family: inherit; 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/assets/scss/_iconfont.scss b/assets/scss/_iconfont.scss index a5a3ff4..bbd9337 100644 --- a/assets/scss/_iconfont.scss +++ b/assets/scss/_iconfont.scss @@ -1,7 +1,9 @@ @font-face { font-family: 'iconfont'; - src: url('../iconfont/iconfont.woff2') format('woff2'), url('../iconfont/iconfont.woff') format('woff'), - url('../iconfont/iconfont.ttf') format('truetype'), url('../iconfont/iconfont.svg') format('svg'); + src: url('../iconfont/iconfont.woff2') format('woff2'), + url('../iconfont/iconfont.woff') format('woff'), + url('../iconfont/iconfont.ttf') format('truetype'), + url('../iconfont/iconfont.svg') format('svg'); } .iconfont { @@ -12,6 +14,10 @@ -moz-osx-font-smoothing: grayscale; } +.icon-grid-sharp:before { + content: '\e612'; +} + .icon-search-circle-sharp:before { content: '\e60c'; } |