You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
3.6 KiB
CSS
132 lines
3.6 KiB
CSS
html,body{height:100%}
|
|
html{font-size:15px}
|
|
header{position:relative}
|
|
header hr{display:none}
|
|
body{
|
|
max-width:768px;
|
|
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;
|
|
border-top:1px dotted #101}
|
|
nav>a:first-child{border:none}
|
|
|
|
h1,h2,h3,h4,h5,h6{line-height:1}
|
|
header h1{margin:1.4rem 52px 1.2rem auto}
|
|
h1{color:#000}h2{color:#111}h3{color:#222}
|
|
h4,h5,h6{color:#333}
|
|
|
|
a{text-decoration:none}
|
|
a:link,a:visited{color:#07C}
|
|
a:hover,a:visited:hover{color:#1AE}
|
|
|
|
ul{padding-left:0;margin-left:0;list-style:inside}
|
|
ul li{margin:.35rem}
|
|
li>ul{margin-left:1em}
|
|
|
|
.tag{
|
|
font-size:.8rem;vertical-align:middle;
|
|
padding:.2rem .5rem;border-radius:.33rem;
|
|
border:1px solid #9CF}
|
|
pre{
|
|
background:#EEE;padding:1rem;
|
|
white-space:pre-wrap;overflow-x:auto;
|
|
border:1px solid #DDD;border-radius:6px}
|
|
.page-nav{
|
|
float:right;
|
|
padding:14px;border:1px solid;
|
|
margin:1.4rem;margin-right:auto}
|
|
.sr{
|
|
position:absolute;overflow:hidden;
|
|
left:-9999px;top:auto;
|
|
width:1px;height:1px;
|
|
}
|
|
.vh{
|
|
position:absolute;
|
|
clip:rect(1px,1px,1px,1px);
|
|
height:1px;width:1px;
|
|
padding:2px 8px;overflow:hidden;
|
|
white-space:nowrap;
|
|
background:#FFF;z-index:10}
|
|
.vh:focus{
|
|
clip:auto;overflow:auto;
|
|
height:auto;width:auto}
|
|
footer p{margin:0}
|
|
|
|
table{text-align:left;width:100%;
|
|
border-collapse:collapse;
|
|
margin:24px 0}
|
|
td,th{border:1px solid #CCC;padding:9px 6px}
|
|
th{padding:12px}
|
|
thead tr{background:#FFF}
|
|
tbody tr:nth-child(odd){background:#EEE}
|
|
tbody tr:hover{background:#DDD}
|
|
|
|
.burger-container{
|
|
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:"";
|
|
transition:transform 300ms cubic-bezier(.4,1,.5,1)}
|
|
.burger::before{margin-top:8px}
|
|
.burger::after{margin-top:16px}
|
|
#burger-toggle:checked~nav{display:block}
|
|
#burger-toggle:checked+.burger-container .burger::before{margin-top:8px;transform:rotate(45deg)}
|
|
#burger-toggle:checked+.burger-container .burger::after{margin-top:8px;transform:rotate(-45deg)}
|
|
#burger-toggle:checked+.burger-container .burger{background:rgba(0,0,0,0)}
|
|
|
|
@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(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}
|
|
header h1{margin-right:auto}
|
|
}
|
|
@media(prefers-color-scheme:dark){
|
|
body{color:#CCC;background:#101}
|
|
a:link,a:visited{color:#9CF}
|
|
a:hover,a:visited:hover{color:#C34}
|
|
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}
|
|
td,th{border-color:#444}
|
|
thead tr{background:#101}
|
|
tbody tr:nth-child(odd){background:#222}
|
|
tbody tr:hover{background:#333}
|
|
pre{background:#333;color:#EEE;border-color:#555}
|
|
.tag{border-color:#359}
|
|
}
|
|
|