diff --git a/main.css b/main.css index db1ced0..4956b3d 100644 --- a/main.css +++ b/main.css @@ -5,22 +5,24 @@ header hr{display:none} body{ max-width:54rem; margin:.2rem;padding:0 .62rem; -font:1.2rem/1.62 sans-serif; +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>a{ padding:.2rem 0; display:block; -border-top:1px dotted #000} +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:#087CA7} -a:hover,a:visited:hover{color:#09B2DC} +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} @@ -29,11 +31,11 @@ li>ul{margin-left:1em} .tag{ font-size:.8rem;vertical-align:middle; padding:.2rem;border-radius:.33rem; -background:#191919;color:#FFF} +background:#777;color:#FFF} pre{ -background:#191919;color:#FFF; +background:#EEE;padding:12px; white-space:pre-wrap;overflow-x:auto; -padding:12px;border:1px solid #FFF} +border:1px solid #DDD} .page-nav{ float:right; padding:14px;border:1px solid; @@ -41,12 +43,11 @@ margin:1.4rem;margin-right:auto} 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:#FFF} -thead th{background:#191919} -tbody th{background:#292929} -tr:nth-child(even){background:#FEFEFE} -tr:hover{background:#DEDEDE} +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:24px;width:30px; @@ -61,7 +62,7 @@ transition:transform 300ms cubic-bezier(.4,1,.5,1)} #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)} +#burger-toggle:checked+.burger-container .burger{background:rgba(0,0,0,0)} @media print{body{max-width:none}} @media(min-width:720px){ @@ -78,11 +79,17 @@ transition:transform 300ms cubic-bezier(.4,1,.5,1)} header h1{margin-right:auto} } @media(prefers-color-scheme:dark){ - body{color:#FFF;background:#191919} + body{color:#CCC;background:#101} 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} + a:hover,a:visited:hover{color:#C34} + nav>a{border-color:#EEE} + .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} }