vertical-rhythm.css

/*
 * Vertical Rhythm
 * -------------------------------------------------- */


/* Variables
 * -------------------------------------------
 * Put your custom variables here. If you use bootstrap, use those
 * and add your own for vertical rhythm */




/* TYPOGRAPHY BASE
 * --------------- */

/* 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
 * ---------------------------------------- */


h1, h2, h3, h4, h5, h6 {
  margin: 10px 0;
  line-height: 20px;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
  line-height: 1;
}
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: 31.5px;
  font-size: 3rem;
}
h3 {
  font-size: 24.5px;
  font-size: 2.5rem;
}
h4 {
  font-size: 17.5px;
  font-size: 2rem;
}
h5 {
  font-size: 14px;
  font-size: 1.6rem;
}
h6 {
  font-size: 11.9px;
  font-size: 1.2rem;
}
h1 small {
  font-size: 24.5px;
}
h2 small {
  font-size: 17.5px;
}
h3 small {
  font-size: 14px;
}
h4 small {
  font-size: 14px;
}



/* 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;
}
dl {
  margin-bottom: 20px;
}
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
 * ------------------------------------------- */


/* Body text & Misc
 * ------------------------------ */

.rhythm p,
.rhythm ul,
.rhythm ol,
.rhythm blockquote,
.rhythm address,
.rhythm pre,
.rhythm form {
  margin-bottom: 20px;
}
.rhythm p:last-child,
.rhythm ul:last-child,
.rhythm ol:last-child,
.rhythm blockquote:last-child,
.rhythm address:last-child,
.rhythm pre:last-child,
.rhythm form:last-child {
  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.
 *
 */

.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. */

.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 {
  list-style-type: disc;
  padding-left: 1.25em;
}
.rhythm .numbered-list {
  list-style-type: decimal;
  padding-left: 1.5em;
}
.rhythm .alpha-list {
  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;
}