Permalink
Browse files

compiled CSS version

  • Loading branch information...
1 parent 7e0794f commit ff6ee0b8bb65709168c6982d8729f3c8b57d1e99 @jonschlinkert committed Feb 16, 2013
Showing with 73 additions and 93 deletions.
  1. +73 −93 vertical-rhythm.css
View
@@ -1,33 +1,31 @@
/*
-// Vertical Rhythm
-// -------------------------------------------------- */
+ * Vertical Rhythm
+ * -------------------------------------------------- */
+
/* Variables
-// -------------------------------------------
-// Put your custom variables here
-// If you use bootstrap, use those
-// and add your own for vertical rhythm */
+ * -------------------------------------------
+ * Put your custom variables here. If you use bootstrap, use those
+ * and add your own for vertical rhythm */
+
+
+
+
+/* TYPOGRAPHY BASE
+ * --------------- */
-/* BASELINE
-// --------
-// First, we establish a baseline to normalize typography.
-// Credit: baseline is based on Twitter Bootstrap's type.less */
+/* First, we establish a baseline to normalize typography.
+ * Credit: this BASE section is based on Twitter Bootstrap's type.less
+ * but with everything that isn't related to rhythm removed. */
/* Headings
-// ------------------------------
-// normalize baselines for headings, remove
-// this block if you use Twitter Bootstrap */
+ * ---------------------------------------- */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+
+h1, h2, h3, h4, h5, h6 {
margin: 10px 0;
- line-height: 1;
+ line-height: 20px;
}
-
h1 small,
h2 small,
h3 small,
@@ -36,98 +34,93 @@ h5 small,
h6 small {
line-height: 1;
}
-
-h1 {
- font-size: 36px;
+h1, h2 {
+ margin-top: 20px;
+ margin-bottom: 10px;
line-height: 40px;
}
-
+h3, h4, h5, h6 {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+h1 {
+ font-size: 38.5px;
+ font-size: 4rem;
+}
h2 {
- font-size: 30px;
- line-height: 40px;
+ font-size: 31.5px;
+ font-size: 3rem;
}
-
h3 {
- font-size: 24px;
- line-height: 40px;
+ font-size: 24.5px;
+ font-size: 2.5rem;
}
-
h4 {
- font-size: 18px;
- line-height: 20px;
+ font-size: 17.5px;
+ font-size: 2rem;
}
-
h5 {
font-size: 14px;
- line-height: 20px;
+ font-size: 1.6rem;
}
-
h6 {
- font-size: 12px;
- line-height: 20px;
+ font-size: 11.9px;
+ font-size: 1.2rem;
}
-
h1 small {
- font-size: 24px;
+ font-size: 24.5px;
}
-
h2 small {
- font-size: 18px;
+ font-size: 17.5px;
}
-
h3 small {
font-size: 14px;
}
-
h4 small {
font-size: 14px;
}
-/* Lists
-// ------------------------------ */
-/* Unordered and Ordered lists */
-ul,
-ol {
+/* Lists
+ * ---------------------------------------- */
+
+ul, ol {
padding: 0;
margin: 0 0 10px 25px;
}
-
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;
}
-
li {
line-height: 20px;
}
-
-/* Description Lists */
-
dl {
margin-bottom: 20px;
}
-
-dt,
-dd {
+dt, dd {
line-height: 20px;
}
-
dd {
margin-left: 10px;
}
+hr {
+ margin: 20px 0;
+ border: 0;
+ border-top: 1px solid #eeeeee;
+ border-bottom: 1px solid #fff;
+}
+
/* VERTICAL RHYTHM
-// ------------------------------------------- */
+ * ------------------------------------------- */
-/* Add .rhythm to parent elements when you
-// wish to apply vertical rhythm to child elements */
-/* Body text & misc
-// ------------------------------ */
+/* Body text & Misc
+ * ------------------------------ */
.rhythm p,
.rhythm ul,
@@ -138,9 +131,6 @@ dd {
.rhythm form {
margin-bottom: 20px;
}
-
-/* Remove margin from last element */
-
.rhythm p:last-child,
.rhythm ul:last-child,
.rhythm ol:last-child,
@@ -151,106 +141,96 @@ dd {
margin-bottom: 0;
}
+
/* Headings & paragraphs
-// ------------------------------
-// Here we apply special spacing to certain
-// typographical patterns. It is impossible to
-// predict the patterns you require for your
-// project, so this is only a starting point. */
+ * ------------------------------ */
+
+/* Here we apply special spacing to certain
+ * typographical patterns. It is impossible to
+ * predict the patterns you require for your
+ * project, so this is only a starting point.
+ *
+ */
.rhythm h1,
.rhythm h2,
.rhythm h3 {
margin-bottom: 5px;
}
-
.rhythm h1 + h2 {
margin-top: 20px;
}
-
.rhythm h4 {
margin-bottom: 3.3333333333333335px;
}
-
.rhythm h1 + p,
.rhythm p + h4 {
margin-top: 30px;
}
-
.rhythm h2 + h3,
.rhythm h2 + h4 {
margin-top: 20px;
}
-
.rhythm h2 + p,
.rhythm h3 + p {
margin-top: 10px;
}
-
.rhythm p + h2 {
margin-top: 60px;
}
-
.rhythm h3 + h4 {
margin-top: 40px;
}
+
/* Lists
-// ------------------------------
-// Special classes for numbered, bulleted,
-// and alpha lists. */
+ * --------------------------------------------------------
+ * Special classes for numbered, bulleted, and alpha lists. */
.rhythm h3 + ul.bullet-list,
.rhythm h3 + ul.numbered-list,
.rhythm h3 + ul.alpha-list,
.rhythm h3 + ol.numbered-list {
margin-top: 10px;
}
-
.rhythm ul.bullet-list + h3,
.rhythm ul.numbered-list + h3,
.rhythm ul.alpha-list + h3 {
margin-top: 40px;
}
-
.rhythm h4 + ul.bullet-list,
.rhythm h4 + ul.numbered-list,
.rhythm h4 + ul.alpha-list,
.rhythm h4 + ol.numbered-list {
margin-top: 10px;
}
-
.rhythm .bullet-list {
- padding-left: 1.25em;
list-style-type: disc;
+ padding-left: 1.25em;
}
-
.rhythm .numbered-list {
- padding-left: 1.5em;
list-style-type: decimal;
+ padding-left: 1.5em;
}
-
.rhythm .alpha-list {
- padding-left: 1.5em;
list-style-type: lower-alpha;
+ padding-left: 1.5em;
}
-
.rhythm .bullet-list li,
.rhythm .numbered-list li,
.rhythm .alpha-list li {
margin-bottom: 10px;
}
-
.rhythm .condensed-list li {
margin-bottom: 0;
}
-
.rhythm .flush-list li {
padding-left: 0;
}
+
/* Blockquotes
-// ------------------------------ */
+ * ------------------------------ */
.rhythm blockquote {
padding: 20px 20px 0;

0 comments on commit ff6ee0b

Please sign in to comment.