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.
100 lines
2.8 KiB
CSS
100 lines
2.8 KiB
CSS
html,body { height:100% }
|
|
html { font-size:14px }
|
|
header {position: relative}
|
|
header hr {display:none}
|
|
body {
|
|
margin:.2rem;
|
|
max-width:54rem;
|
|
padding:0 .62rem;
|
|
font:1.2rem/1.62 sans-serif
|
|
}
|
|
nav>a {
|
|
padding:.2rem 0;
|
|
display:block;
|
|
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 }
|
|
|
|
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 }
|
|
|
|
.tag {
|
|
font-size:.8rem;
|
|
padding:.2rem;border-radius:.33rem;
|
|
background-color:#191919;color:#FFF;
|
|
vertical-align:middle
|
|
}
|
|
|
|
pre{
|
|
background-color: #191919;color: #FFF;
|
|
white-space: pre-wrap;overflow-x: auto;
|
|
padding: 12px; border: 1px solid #FFF;
|
|
}
|
|
|
|
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 }
|
|
|
|
.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-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 (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}
|
|
}
|
|
|