diff --git a/sigma9.css b/sigma9.css index 10cda0fc..9340011a 100644 --- a/sigma9.css +++ b/sigma9.css @@ -445,6 +445,78 @@ sup { padding: 0 5px 0; } +@media (max-width: 767px) { + /* Show the button that opens the sidebar on mobile */ + #top-bar .open-menu a { + position: fixed; + top: .5em; + left: .5em; + z-index: 15; + font-family: 'Nanum Gothic', sans-serif; + font-size: 30px; + font-weight: 700; + width: 30px; + height: 30px; + line-height: .9em; + text-align: center; + border: .2em solid #888; + background-color: #fff; + border-radius: 3em; + color: #888; + } + #top-bar .open-menu a:hover { + text-decoration: none; + box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1); + } + + #side-bar { + display: block; + position: fixed; + top: 0; + left: -25em; + width: 17em; + height: 100%; + background-color: rgb(184, 134, 134); + overflow-y: auto; + z-index: 10; + padding: 1em 1em 0 1em; + transition: left .5s ease-in-out .1s; + } + + #side-bar::after { + content: ''; + position: absolute; + top: 0; + width: 0; + height: 100%; + background-color: rgba(0, 0, 0, .2); + } + + #side-bar:target { + display: block; + left: 0; + width: 17em; + margin: 0; + border: 1px solid #dedede; + z-index: 10; + } + + #side-bar:target + #main-content { + left: 0; + } + + #side-bar:target .close-menu { + display: block; + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: rgba(0, 0, 0, .3) 1px 1px repeat; + z-index: -1; + } +} + /* CONTENT */ #main-content { margin: 0 2em 0 22em; @@ -1100,11 +1172,6 @@ img, embed, video, object, iframe, table { max-width: 90%; } - #side-bar { - width: 80%; - position: relative; - } - .top-bar { display: none; } @@ -1206,11 +1273,6 @@ img, embed, video, object, iframe, table { max-width: 90%; } - #side-bar { - width: 80%; - position: relative; - } - .top-bar { display: none; } @@ -1268,11 +1330,6 @@ img, embed, video, object, iframe, table { width: 8em; } - #side-bar { - width: 80%; - position: relative; - } - #main-content { margin: 0 3em 0 2em; } @@ -1401,33 +1458,6 @@ img, embed, video, object, iframe, table { display: none; } - #top-bar .open-menu a { - position: fixed; - top: .5em; - left: .5em; - z-index: 15; - font-family: 'Nanum Gothic', sans-serif; - font-size: 30px; - font-weight: 700; - width: 30px; - height: 30px; - line-height: .9em; - text-align: center; - border: .2em solid #888; - background-color: #fff; - border-radius: 3em; - color: #888; - } - - #top-bar .open-menu a:hover { - text-decoration: none; - -webkit-box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1); - -moz-box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1); - -ms-box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1); - -o-box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1); - box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1); - } - #main-content { max-width: 90%; margin: 0 5%; @@ -1438,57 +1468,6 @@ img, embed, video, object, iframe, table { -o-transition: .5s ease-in-out .1s; transition: .5s ease-in-out .1s; } - - #side-bar { - display: block; - position: fixed; - top: 0; - left: -25em; - width: 17em; - height: 100%; - background-color: rgb(184, 134, 134); - overflow-y: auto; - z-index: 10; - padding: 1em 1em 0 1em; - -webkit-transition: left .5s ease-in-out .1s; - -moz-transition: left .5s ease-in-out .1s; - -ms-transition: left .5s ease-in-out .1s; - -o-transition: left .5s ease-in-out .1s; - transition: left .5s ease-in-out .1s; - } - - #side-bar::after { - content: ''; - position: absolute; - top: 0; - width: 0; - height: 100%; - background-color: rgba(0, 0, 0, .2); - } - - #side-bar:target { - display: block; - left: 0; - width: 17em; - margin: 0; - border: 1px solid #dedede; - z-index: 10; - } - - #side-bar:target + #main-content { - left: 0; - } - - #side-bar:target .close-menu { - display: block; - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - background: rgba(0, 0, 0, .3) 1px 1px repeat; - z-index: -1; - } } div.scpnet-interwiki-wrapper {