Created
January 26, 2012 12:39
-
-
Save niklausgerber/1682591 to your computer and use it in GitHub Desktop.
Scale CSS: http://scalecss.com
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
###### ###### ### ## ######## | |
## ## ## ## ## ## ## ## | |
## ## ## ## ## ## | |
###### ## ## ## ## ###### | |
## ## ######### ## ## | |
## ## ## ## ## ## ## ## | |
###### ###### ## ## ######## ######## | |
Short URL: http://scalecss.com | |
--------------------------------------------- */ | |
html, body, div, span, applet, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, big, cite, code, | |
del, dfn, em, ins, kbd, q, s, samp, | |
small, strike, strong, sub, sup, tt, var, | |
b, u, i, center, | |
dl, dt, dd, ol, ul, li, | |
fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, canvas, details, embed, | |
figure, figcaption, footer, hgroup, | |
menu, nav, output, ruby, section, summary, | |
time, mark, audio, video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-size:100%; | |
font: inherit; | |
vertical-align: baseline; | |
} | |
article, aside, details, figcaption, figure, | |
footer, header, hgroup, menu, nav, section { | |
display: block; | |
} | |
strong, b { | |
font-weight: bold; | |
} | |
i, em, blockquote { | |
font-style: italic; | |
} | |
html, body { | |
min-height: 100%; | |
} | |
html { | |
-webkit-text-size-adjust: 100%; | |
-ms-text-size-adjust: 100%; | |
background: rgb(255,255,255); | |
overflow-y: scroll; | |
} | |
img { | |
-ms-interpolation-mode: bicubic; | |
background: transparent; | |
border: 0; | |
} | |
img, embed, object, video { | |
max-width: 100%; | |
height: inherit; | |
_width: 100%; | |
} | |
/* | |
BASE TYPOGRAPHY | |
--------------------------------------------- */ | |
body { | |
font: 75%/1.5em Georgia, serif; | |
max-width: 40.49984em; | |
color: rgb(0,0,0); | |
margin: 0 auto; | |
padding: 1em; | |
} | |
.ie body { | |
max-width: 32.90612em; | |
_width: 32.90612em; | |
font-size: 100%; | |
} | |
h1, h2, h3, h4, h5, h6 { | |
-moz-font-feature-settings: "liga=1, kern=1"; | |
-ms-font-feature-settings: "liga" 1, "kern" 1; | |
-webkit-font-feature-settings: "liga" 1, "kern" 1; | |
-o-font-feature-settings: "liga" 1, "kern" 1; | |
font-feature-settings: "liga" 1, "kern" 1; | |
text-rendering: optimizeLegibility; | |
margin-bottom: 1.42382em; | |
font-weight: normal; | |
} | |
p, ul, ol, dl, blockquote, .content img { | |
margin-bottom: 1.5em; | |
-webkit-hyphens: auto; | |
-moz-hyphens: auto; | |
hyphens: auto; | |
} | |
abbr { | |
text-transform: lowercase; | |
font-variant: small-caps; | |
letter-spacing: 0.1em; | |
cursor: help; | |
} | |
sub, sup { | |
vertical-align: baseline; | |
position: relative; | |
font-size: 65%; | |
line-height: 0; | |
} | |
sub { | |
bottom: -0.25em; | |
} | |
sup { | |
top: -0.5em; | |
} | |
blockquote { | |
margin: 1.5em 0 1.5em 1.80203em; | |
color: rgb(90,90,90); | |
position: relative; | |
} | |
blockquote:before { | |
-webkit-font-smoothing: antialiased; | |
color: rgb(140,140,140); | |
font-size: 3.60406em; | |
position: absolute; | |
font-style: italic; | |
content: "\201C"; | |
line-height: 1em; | |
left: -0.60180em; | |
top: 0; | |
} | |
ul, ol { | |
margin-left: 1.5em; | |
} | |
ul { | |
list-style-type: circle; | |
} | |
ol { | |
list-style-type: lower-roman; | |
} | |
h1 { | |
margin: .97em 0 .5em; | |
line-height: 1.125em; | |
font-size: 2em; | |
} | |
.ie h1 { | |
font-size: 4em; | |
} | |
h2 { | |
line-height: 1.77777em; | |
margin-bottom: 1em; | |
font-size: 1.2em; | |
} | |
h3 { | |
margin: 1.7em 0 .85em; | |
line-height: 1.5em; | |
font-size: 1.3em; | |
} | |
h4 { | |
line-height: 1.12382em; | |
margin: 0 0 1.3em; | |
font-size: 1.2em; | |
} | |
h5 { | |
text-transform: uppercase; | |
letter-spacing: 2px; | |
line-height: 1.5em; | |
margin: 0 0 1.5em; | |
font-size: 1em; | |
} | |
h6 { | |
font-weight: bold; | |
margin: 0 0 1.5em; | |
} | |
pre,code { | |
font: .9375em/1.26562em monospace, monospace; | |
-webkit-font-smoothing: subpixel-antialiased; | |
} | |
pre { | |
color: rgb(90,90,90); | |
padding: 1.5em 1em; | |
margin-bottom: 3em; | |
line-height: 1em; | |
white-space: pre; | |
white-space: pre-wrap; | |
word-wrap: break-word; | |
} | |
img { | |
margin: .5em auto 1.5em auto; | |
display: block; | |
} | |
.highlight { | |
border-color: rgb(0,0,0); | |
background: #fffccf; | |
color: rgb(0,0,0); | |
margin-top: 3em; | |
padding: 0 .2em; | |
} | |
/* | |
LINKS | |
--------------------------------------------- */ | |
a { | |
border-bottom: 1px solid rgb(200,200,200); | |
text-decoration: none; | |
color: rgb(80,80,80); | |
outline: none; | |
} | |
a:hover { | |
border-bottom: 1px solid rgb(0,0,0); | |
background: rgba(0,0,0,.05); | |
color: rgb(0,0,0); | |
} | |
a:active { | |
outline: none; | |
} | |
sup a { | |
text-decoration: none; | |
} | |
/* | |
PRINT STYLES | |
--------------------------------------------- */ | |
@media print { | |
html { | |
border: 0; | |
} | |
a[href]:after { | |
content: " (" attr(href) ")"; | |
} | |
a[href^="javascript:"]:after, | |
a[href^="#"]:after { | |
content: ""; | |
} | |
} | |
/* | |
MIN-WIDTH: 15.652em | |
--------------------------------------------- */ | |
@media screen and (min-width: 15.652em) { | |
body { | |
font-size: 100%; | |
} | |
h2 { | |
font-size: 1.26562em; | |
} | |
h3 { | |
font-size: 1.5em; | |
} | |
h4 { | |
font-size: 1.26562em; | |
} | |
} | |
/* | |
MIN-WIDTH: 19.9375em | |
--------------------------------------------- */ | |
@media screen and (min-width: 19.9375em) { | |
body { | |
font-size: 112.5%; | |
padding: 1.5em; | |
} | |
h1 { | |
font-size: 3em; | |
} | |
.dropcap:first-letter { | |
font: 3.32956em/0.7em Georgia, serif; | |
-webkit-font-smoothing: antialiased; | |
margin: .2em .15em .1em 0; | |
float: left; | |
} | |
.ie9 .dropcap:first-letter { | |
margin: .2em .45em 0 0; | |
line-height: .9em; | |
} | |
} | |
/* | |
MIN-WIDTH: 29.9375em | |
--------------------------------------------- */ | |
@media screen and (min-width: 29.9375em) { | |
body { | |
padding: 1.5em 3em; | |
max-width: 34.3em; | |
} | |
ul, ol { | |
margin-left: 0; | |
} | |
sup.indent { | |
margin-left: -1.5em; | |
} | |
} | |
/* | |
MIN-WIDTH: 38em | |
--------------------------------------------- */ | |
@media screen and (min-width: 38em) { | |
html { | |
/* background: url('../img/grid.gif') repeat; */ | |
} | |
body { | |
padding: 4.5em 3em 7.59372em; | |
} | |
h1 { | |
margin: .97em 0 .8em; | |
font-size: 4em; | |
} | |
} | |
/* | |
MIN-WIDTH: 99.9375em | |
--------------------------------------------- */ | |
@media screen and (min-width: 99.9375em) { | |
body { | |
max-width: 34.43736em; | |
line-height: 1.75em; | |
font-size: 125%; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment