From 8f7cce68a5859eac6ac650ae3c808658b3e5de1e Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 10 Aug 2020 13:42:37 +0900 Subject: Support responsive design for mobile devices --- docs/_layouts/default.html | 26 ++++++++- docs/assets/css/style.scss | 132 ++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 155 insertions(+), 3 deletions(-) (limited to 'docs') 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 @@ -

Vim Vixen

GitHub

+ + + + + + + +

{{ 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; + } +} -- cgit v1.2.3