diff --git a/main.css b/main.css index adae330..1a65bfd 100644 --- a/main.css +++ b/main.css @@ -1,99 +1,84 @@ -html,body { height:100% } -html { font-size:14px } -header {position: relative} -header hr {display:none} -body { -margin:.2rem; +html,body{height:100%} +html{font-size:14px} +header{position:relative} +header hr{display:none} +body{ max-width:54rem; -padding:0 .62rem; -font:1.2rem/1.62 sans-serif -} -nav>a { +margin:.2rem;padding:0 .62rem; +font:1.2rem/1.62 sans-serif; +display:-webkit-flex;display:-ms-flexbox;display:flex; +flex-direction:column} +main{flex:1 0 auto} +nav>a{ padding:.2rem 0; display:block; -border-top:1px dotted #000 -} -nav>a:first-child {border:none} +border-top:1px dotted #000} +nav>a:first-child{border:none} -h1,h2,h3,h4,h5,h6 { line-height:1 } -header h1 { margin: 1.4rem auto 1.2rem; margin-right: 52px } +h1,h2,h3,h4,h5,h6{line-height:1} +header h1{margin:1.4rem 52px 1.2rem auto} -a { text-decoration:none } -a:link,a:visited { color:#087CA7 } -a:hover,a:visited:hover { color:#09B2DC } +a{text-decoration:none} +a:link,a:visited{color:#087CA7} +a:hover,a:visited:hover{color:#09B2DC} -ul { -padding-left:0; margin-left:0; -list-style-position:inside -} -ul li{ margin: 0.35rem } -li>ul { margin-left:1em } +ul{padding-left:0;margin-left:0;list-style:inside} +ul li{margin:.35rem} +li>ul{margin-left:1em} -.tag { -font-size:.8rem; +.tag{ +font-size:.8rem;vertical-align:middle; padding:.2rem;border-radius:.33rem; -background-color:#191919;color:#FFF; -vertical-align:middle -} - +background:#191919;color:#FFF} pre{ -background-color: #191919;color: #FFF; -white-space: pre-wrap;overflow-x: auto; -padding: 12px; border: 1px solid #FFF; -} +background:#191919;color:#FFF; +white-space:pre-wrap;overflow-x:auto; +padding:12px;border:1px solid #FFF} +footer p{margin:0} -table{text-align: left;width: 100%;border-collapse: collapse} -td, th{border: 1px solid #222;padding: 9px 6px} -th{padding: 12px;color: white} -thead th{ background-color: #191919 } -tbody th{ background-color: #292929 } -tr:nth-child(even){ background-color: #FEFEFE } -tr:hover{ background-color: #DEDEDE } +table{text-align:left;width:100%;border-collapse:collapse} +td,th{border:1px solid #222;padding:9px 6px} +th{padding:12px;color:#FFF} +thead th{background:#191919} +tbody th{background:#292929} +tr:nth-child(even){background:#FEFEFE} +tr:hover{background:#DEDEDE} -.burger-container { -position: absolute;height: 24px;width: 30px; -cursor: pointer;top: 34px;right: 10px} -#burger-toggle {display: none} -.burger,.burger::after,.burger::before { -position: absolute;background-color: #000; -height: 4px;width: 30px;border-radius: 2px;content:""; -transition: transform 300ms cubic-bezier(0.4, 1, 0.5, 1)} -.burger::before {margin-top: -8px} -.burger::after {margin-top: 8px} -#burger-toggle~nav {display:none;} -#burger-toggle:checked~nav {display:block;} -#burger-toggle:checked+.burger-container .burger::before{margin-top:0px;transform:rotate(45deg)} -#burger-toggle:checked+.burger-container .burger::after{margin-top:0px;transform:rotate(-45deg)} +.burger-container{ +position:absolute;height:24px;width:30px; +cursor:pointer;top:34px;right:10px} +#burger-toggle,#burger-toggle~nav{display:none} +.burger,.burger::after,.burger::before{ +position:absolute;background:#000; +height:4px;width:30px;border-radius:2px;content:""; +transition:transform 300ms cubic-bezier(.4,1,.5,1)} +.burger::before{margin-top:-8px} +.burger::after{margin-top:8px} +#burger-toggle:checked~nav{display:block} +#burger-toggle:checked+.burger-container .burger::before{margin-top:0;transform:rotate(45deg)} +#burger-toggle:checked+.burger-container .burger::after{margin-top:0;transform:rotate(-45deg)} #burger-toggle:checked+.burger-container .burger{background:rgba(255,255,255,0)} -footer p { margin:0 } -body { -display:-webkit-flex;display:-ms-flexbox;display:flex; -flex-direction:column -} -main { flex:1 0 auto } - -@media print {body {max-width:none}} -@media (min-width: 720px) { - body { margin:.2rem auto; } - nav>a { margin-left:2rem; padding: auto; display: inline; border: none } - nav>a:first-child { padding:1rem 0; padding-left:0; margin-left:0 } - ul li{ margin: auto } - .burger-container {display: none} - #burger-toggle~nav {display: block} - header hr {display: block} +@media print{body{max-width:none}} +@media(min-width:720px){ + body{margin:.2rem auto} + nav>a{margin-left:2rem;padding:auto;display:inline;border:none} + nav>a:first-child{padding:1rem 0;margin-left:0} + ul li{margin:auto} + .burger-container{display:none} + #burger-toggle~nav,header hr{display:block} } -@media (max-width:320px) { +@media(max-width:320px){ #burger-toggle~nav{display:block} .burger-container{display:none} header h1{margin-right:auto} } -@media (prefers-color-scheme: dark) { - body { color:#FFF; background:#191919 } - a:link,a:visited {color:#9CF} - a:hover,a:visited:hover {color:#DA4167} - nav>a { border-color:#FFF } - .tag {background-color:#FFF;color:#000} - .burger,.burger::after,.burger::before {background:#FFF} +@media(prefers-color-scheme:dark){ + body{color:#FFF;background:#191919} + a:link,a:visited{color:#9CF} + a:hover,a:visited:hover{color:#DA4167} + nav>a{border-color:#FFF} + .tag{background:#FFF;color:#000} + .burger,.burger::after,.burger::before{background:#FFF} }