diff --git a/main.css b/main.css index 3b220e3..f904792 100644 --- a/main.css +++ b/main.css @@ -4,11 +4,14 @@ header{position:relative} header hr{display:none} body{ max-width:768px; -padding:0 1rem; +margin:auto;padding:0 1.24rem; font:1.2rem/1.62 sans-serif;color:#444; display:-webkit-flex;display:-ms-flexbox;display:flex; flex-direction:column} main{flex:1 0 auto} +nav{ +box-sizing:border-box; +z-index:9} nav>a{ padding:.2rem 0; display:block; @@ -51,7 +54,7 @@ clip:rect(1px,1px,1px,1px); height:1px;width:1px; padding:2px 8px;overflow:hidden; white-space:nowrap; -background:#FFF} +background:#FFF;z-index:10} .vh:focus{ clip:auto;overflow:auto; height:auto;width:auto} @@ -67,9 +70,13 @@ tbody tr:nth-child(odd){background:#EEE} tbody tr:hover{background:#DDD} .burger-container{ -position:absolute;height:21px;width:30px; -cursor:pointer;top:34px;right:10px} +position:absolute;height:34px;width:36px; +cursor:pointer;top:25px;right:1.24rem; +position:fixed;background:#FFF; +border:2px solid #EEE;border-radius:6px; +z-index:9} #burger-toggle,#burger-toggle~nav{display:none} +.burger{left:3px;top:7px} .burger,.burger::after,.burger::before{ position:absolute;background:#000; height:4px;width:30px;border-radius:2px;content:""; @@ -90,6 +97,15 @@ transition:transform 300ms cubic-bezier(.4,1,.5,1)} .burger-container{display:none} #burger-toggle~nav,header hr{display:block} } +@media(min-width:320px) and (max-width:719px){ + nav{height:100%; + width:50%;min-width:250px; + position:fixed; + top:0;right:1.24rem; + padding:85px 1.24rem 1.24rem; + background:#FFF;border-left:1px solid #EEE; + z-index:8} +} @media(max-width:320px){ #burger-toggle~nav{display:block} .burger-container{display:none} @@ -99,7 +115,9 @@ transition:transform 300ms cubic-bezier(.4,1,.5,1)} body{color:#CCC;background:#101} a:link,a:visited{color:#9CF} a:hover,a:visited:hover{color:#C34} - nav>a{border-color:#EEE} + nav{background:#101;border-color:#555} + nav>a{border-color:#555} + .burger-container{border:2px solid #555;background:#555;} .burger,.burger::after,.burger::before{background:#EEE} h1{color:#FFF}h2{color:#EEE} h3,h4,h5,h6{color:#DDD}