nathan
/
aney.co.uk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change colours of site elements

Browse Source 
Make it a little better for the eyes, and add some visual hierarchy.
For both light/dark theme browsers.
Also changed 6 digit Hex codes to similar 3 digit codes for some savings
develop
Nathan Steel 3 years ago
parent 4f3dee855f
commit 068e43c309
1 changed files with 26 additions and 19 deletions
Show Stats Download Patch File Download Diff File

45
main.css
Unescape Escape View File

@ -5,22 +5,24 @@ header hr{display:none}
body{ body{
max-width:54rem; max-width:54rem;
margin:.2rem;padding:0 .62rem; 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; display:-webkit-flex;display:-ms-flexbox;display:flex;
flex-direction:column} flex-direction:column}
main{flex:1 0 auto} main{flex:1 0 auto}
nav>a{ nav>a{
padding:.2rem 0; padding:.2rem 0;
display:block; display:block;
border-top:1px dotted #000} border-top:1px dotted #101}
nav>a:first-child{border:none} nav>a:first-child{border:none}
h1,h2,h3,h4,h5,h6{line-height:1} h1,h2,h3,h4,h5,h6{line-height:1}
header h1{margin:1.4rem 52px 1.2rem auto} 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{text-decoration:none}
a:link,a:visited{color:#087CA7} a:link,a:visited{color:#07C}
a:hover,a:visited:hover{color:#09B2DC} a:hover,a:visited:hover{color:#1AE}
ul{padding-left:0;margin-left:0;list-style:inside} ul{padding-left:0;margin-left:0;list-style:inside}
ul li{margin:.35rem} ul li{margin:.35rem}
@ -29,11 +31,11 @@ li>ul{margin-left:1em}
.tag{ .tag{
font-size:.8rem;vertical-align:middle; font-size:.8rem;vertical-align:middle;
padding:.2rem;border-radius:.33rem; padding:.2rem;border-radius:.33rem;
background:#191919;color:#FFF} background:#777;color:#FFF}
pre{ pre{
background:#191919;color:#FFF; background:#EEE;padding:12px;
white-space:pre-wrap;overflow-x:auto; white-space:pre-wrap;overflow-x:auto;
padding:12px;border:1px solid #FFF} border:1px solid #DDD}
.page-nav{ .page-nav{
float:right; float:right;
padding:14px;border:1px solid; padding:14px;border:1px solid;
@ -41,12 +43,11 @@ margin:1.4rem;margin-right:auto}
footer p{margin:0} footer p{margin:0}
table{text-align:left;width:100%;border-collapse:collapse} table{text-align:left;width:100%;border-collapse:collapse}
td,th{border:1px solid #222;padding:9px 6px} td,th{border:1px solid #CCC;padding:9px 6px}
th{padding:12px;color:#FFF} th{padding:12px}
thead th{background:#191919} thead tr{background:#FFF}
tbody th{background:#292929} tbody tr:nth-child(odd){background:#EEE}
tr:nth-child(even){background:#FEFEFE} tbody tr:hover{background:#DDD}
tr:hover{background:#DEDEDE}
.burger-container{ .burger-container{
position:absolute;height:24px;width:30px; 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~nav{display:block}
#burger-toggle:checked+.burger-container .burger::before{margin-top:0;transform:rotate(45deg)} #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::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 print{body{max-width:none}}
@media(min-width:720px){ @media(min-width:720px){
@ -78,11 +79,17 @@ transition:transform 300ms cubic-bezier(.4,1,.5,1)}
header h1{margin-right:auto} header h1{margin-right:auto}
} }
@media(prefers-color-scheme:dark){ @media(prefers-color-scheme:dark){
body{color:#FFF;background:#191919} body{color:#CCC;background:#101}
a:link,a:visited{color:#9CF} a:link,a:visited{color:#9CF}
a:hover,a:visited:hover{color:#DA4167} a:hover,a:visited:hover{color:#C34}
nav>a{border-color:#FFF} nav>a{border-color:#EEE}
.tag{background:#FFF;color:#000} .burger,.burger::after,.burger::before{background:#EEE}
.burger,.burger::after,.burger::before{background:#FFF} 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}
} }

Write Preview
Loading…
Cancel
Save