diff options
| author | Shin'ya Ueoka <ueokande@i-beam.org> | 2020-08-10 13:42:37 +0900 |
|---|---|---|
| committer | Shin'ya Ueoka <ueokande@i-beam.org> | 2020-08-10 14:19:40 +0900 |
| commit | 8f7cce68a5859eac6ac650ae3c808658b3e5de1e (patch) | |
| tree | bc8b6b1b2457a81cc6f077755131c284c0089ec8 /docs | |
| parent | 490014ae5f1774cedf5addd2a45ea9498bb104ce (diff) | |
Support responsive design for mobile devices
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/_layouts/default.html | 26 | ||||
| -rw-r--r-- | docs/assets/css/style.scss | 132 |
2 files changed, 155 insertions, 3 deletions
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 40080b5..0569452 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -17,7 +17,7 @@ </head> <body> - <header> + <header class='header-wide'> <h1><a href='index.html'>Vim Vixen</a></h1> <ul> <li><a target="_blank" rel="noopener" href='https://github.com/ueokande/vim-vixen'>GitHub</a></li> @@ -25,7 +25,11 @@ </ul> </header> - <aside> + <header class='header-mobile'> + <h1><a href='index.html'>Vim Vixen</a></h1> + </header> + + <aside class='aside-wide'> <h1>Guide</h1> <ul> <li><a href='./keymaps.html'>Keymaps</a></li> @@ -36,6 +40,24 @@ </ul> </aside> + <input class="open-menu-checkbox" type="checkbox" /> + <span class="open-menu-bar-container"> + <span class="open-menu-bar"></span><span class="open-menu-bar"></span><span class="open-menu-bar"></span> + </span> + + <aside class='aside-mobile'> + <ul> + <li><a href='./keymaps.html'>Keymaps</a></li> + <li><a href='./console_commands.html'>Console commands</a></li> + <li><a href='./blacklist.html'>Blacklist</a></li> + <li><a href='./search_engines.html'>Search engines</a></li> + <li><a href='./properties.html'>Properties</a></li> + <li class='separator'></li> + <li><a target="_blank" rel="noopener" href='https://github.com/ueokande/vim-vixen'>GitHub</a></li> + <li><a target="_blank" rel="noopener" href='https://addons.mozilla.org/firefox/addon/vim-vixen/'>Firefox Add-ons</a></li> + </ul> + </aside> + <main> <article> {{ content }} diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss index 18380ed..a4b280e 100644 --- a/docs/assets/css/style.scss +++ b/docs/assets/css/style.scss @@ -37,7 +37,7 @@ h1, h2, h3, h4, h5 { } } -header { +.header-wide { border-bottom: 1px solid $border-color; position: fixed; width: 100%; @@ -63,6 +63,19 @@ header { } } +.header-mobile { + border-bottom: 1px solid $border-color; + position: fixed; + width: 100%; + background-color: white; + + h1 { + padding: 0 1.5rem; + line-height: 4rem; + text-align: center; + } +} + aside { width: 15rem; position: fixed; @@ -85,9 +98,37 @@ aside { line-height: 2.5; } } + + .separator { + height: 0; + border-bottom: 1px solid $border-color; + } } } +.aside-wide { + width: 15rem; + position: fixed; + top: 4rem; + left: 0; + bottom: 0; +} + +.aside-mobile { + width: 15rem; + position: fixed; + top: 0; + bottom: 0; + left: -16rem; + bottom: 0; + border-right: 1px solid $border-color; + padding: 4rem 0; + background-color: white; + box-shadow: 0 0 1rem #aaa; + transition-property: left; + transition-duration: 0.3s; +} + main { padding: 4rem 4rem 4rem 20rem; margin: 0 auto; @@ -166,3 +207,92 @@ footer { right: 0; background-color: lightgreen; } + +.open-menu-checkbox { + display: inline-block; + width: 32px; + height: 32px; + position: fixed; + left: 16px; + top: 16px; + opacity: 0; + z-index: 4; +} + + +.open-menu-bar-container { + position: fixed; + top: 16px; + left: 16px; + width: 32px; + height: 32px; + display: inline-block; + z-index: 2; +} +.open-menu-bar { + display: block; + width: 32px; + height: 4px; + margin: 5px 0; + background: #444; + border-radius: 2px; + transition-duration: 0.3s; + + &:nth-of-type(1) { + transform-origin: 3px 50%; + } + + &:nth-of-type(2) { + transform-origin: 0% 100%; + } + + &:nth-of-type(3) { + transform-origin: 3px 50%; + } +} + +.open-menu-checkbox:checked ~ .aside-mobile { + left: 0; +} + +.open-menu-checkbox:checked ~ .open-menu-bar-container > .open-menu-bar { + &:nth-of-type(1) { + transform: rotate(45deg) translate(3px, -3px); + } + + &:nth-of-type(2) { + opacity: 0; + transform: scale(0.2, 0.2); + } + + &:nth-of-type(3) { + transform: rotate(-45deg) translate(3px, 3px); + } +} + +// for PC +@media (min-width: 769px) { + .header-mobile { + display: none; + } + .aside-mobile { + display: none; + } + .open-menu-checkbox, .open-menu-bar-container { + display: none; + } +} + +// for mobile +@media (max-width: 768px) { + .header-wide { + display: none; + } + .aside-wide { + display: none; + } + + main { + padding: 4rem 2rem 2rem 2rem; + } +} |