Skip to content

Instantly share code, notes, and snippets.

@niklausgerber
Created January 26, 2012 12:39
Show Gist options
  • Save niklausgerber/1682591 to your computer and use it in GitHub Desktop.
Save niklausgerber/1682591 to your computer and use it in GitHub Desktop.
Scale CSS: http://scalecss.com
/*
###### ###### ### ## ########
## ## ## ## ## ## ## ##
## ## ## ## ## ##
###### ## ## ## ## ######
## ## ######### ## ##
## ## ## ## ## ## ## ##
###### ###### ## ## ######## ########
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