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

Optimise CSS

Browse Source 
Remove unneeded spaces, characters, and elements.
Change to shorthand where feasible. e.g. background-color
to background, and list-style-position to list-style
develop
Nathan Steel 3 years ago
parent e3075b08f3
commit 83540bc0a9
1 changed files with 64 additions and 79 deletions
Show Stats Download Patch File Download Diff File

143
main.css
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save