Minify CSS file
Manual minified the CSS file, moving bits around for correct cascading, and removing un-needed spacing, trailing ;, etc. whilst still keeping the stylesheet readable, and workable.master
Nathan Steel
3 years ago
parent
c0b2baea41
commit
c2fb8a10f4
@ -1,134 +1,73 @@
|
||||
html, body {height: 100%;}
|
||||
html{font-size: 14px;}
|
||||
body{
|
||||
margin:0.2rem auto;
|
||||
max-width:48rem;
|
||||
padding:0 .62rem;
|
||||
font:1.2rem/1.62 sans-serif;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
line-height: 1;
|
||||
}
|
||||
header h1{
|
||||
margin-top: 1.4rem;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
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;
|
||||
}
|
||||
li > ul{
|
||||
margin-left: 1em;
|
||||
}
|
||||
footer p{
|
||||
margin: 0;
|
||||
html,body { height:100% }
|
||||
html { font-size:14px }
|
||||
body {
|
||||
margin:.2rem;
|
||||
max-width:48rem;
|
||||
padding:0 .62rem;
|
||||
font:1.2rem/1.62 sans-serif
|
||||
}
|
||||
pre{
|
||||
background-color: #191919;
|
||||
color: white;
|
||||
white-space: pre-wrap;
|
||||
overflow-x: auto;
|
||||
padding: 12px;
|
||||
nav>a {
|
||||
padding:.2rem 0;
|
||||
display:block;
|
||||
border-top:1px dotted #000
|
||||
}
|
||||
nav>a:first-child {border:none}
|
||||
|
||||
/* Table Design */
|
||||
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; }
|
||||
h1,h2,h3,h4,h5,h6 { line-height:1 }
|
||||
header h1 { margin: 1.4rem auto 1.2rem }
|
||||
|
||||
tr:nth-child(even){ background-color: #FEFEFE; }
|
||||
tr:hover{ background-color: #DEDEDE; }
|
||||
a { text-decoration:none }
|
||||
a:link,a:visited { color:#087CA7 }
|
||||
a:hover,a:visited:hover { color:#09B2DC }
|
||||
|
||||
/* Special Design */
|
||||
.tag{
|
||||
font-size: 0.8rem;
|
||||
padding: 0.2rem;
|
||||
border-radius: 0.33rem;
|
||||
background-color: #191919;
|
||||
color: white;
|
||||
vertical-align: middle;
|
||||
ul {
|
||||
padding-left:0; margin-left:0;
|
||||
list-style-position:inside
|
||||
}
|
||||
ul li{ margin: 0.35rem }
|
||||
li>ul { margin-left:1em }
|
||||
|
||||
/*
|
||||
* Flex is only there to put the footer at the bottom.
|
||||
* Not actually needed. BLOAT!!
|
||||
*/
|
||||
body {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
main{
|
||||
flex: 1 0 auto;
|
||||
.tag {
|
||||
font-size:.8rem;
|
||||
padding:.2rem;border-radius:.33rem;
|
||||
background-color:#191919;color:#FFF;
|
||||
vertical-align:middle
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark){
|
||||
body {color:#fff;background:#191919;}
|
||||
a:link, a:visited {color:#9cf;}
|
||||
a:hover, a:visited:hover {color:#DA4167;}
|
||||
.tag{background-color:white; color:black;}
|
||||
pre{ background-color:#D9D9E2; color: #191919;}
|
||||
pre{
|
||||
background-color: #191919;color: #FFF;
|
||||
white-space: pre-wrap;overflow-x: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
@media print{
|
||||
body{
|
||||
max-width:none;
|
||||
}
|
||||
}
|
||||
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 }
|
||||
|
||||
/* For Media over the mobile view */
|
||||
@media screen and (min-width: 601px){
|
||||
nav>a{
|
||||
margin-left: 2rem;
|
||||
}
|
||||
nav>a:first-child{
|
||||
padding: 1rem 0;
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
footer p { margin:0 }
|
||||
body {
|
||||
display:-webkit-flex;display:-ms-flexbox;display:flex;
|
||||
flex-direction:column
|
||||
}
|
||||
main { flex:1 0 auto }
|
||||
|
||||
/* For Media under the mobile view */
|
||||
@media screen and (max-width: 600px){
|
||||
body{
|
||||
margin: 0.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
nav>a{
|
||||
padding: 0.2rem 0;
|
||||
display: block;
|
||||
border-top: 1px dotted black;
|
||||
}
|
||||
nav>a:first-child{
|
||||
border: none;
|
||||
}
|
||||
ul li{
|
||||
margin: 0.35rem;
|
||||
}
|
||||
}
|
||||
@media print {body {max-width:none}}
|
||||
|
||||
@media screen and (max-width: 600px) and (prefers-color-scheme: dark){
|
||||
nav>a{
|
||||
border-color: white;
|
||||
}
|
||||
@media (min-width: 600px) {
|
||||
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 }
|
||||
}
|
||||
@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}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue