Vertical rhythm

index.pug

header.top-bar
  .top-bar-brand
    a.brand(href="#") brand
aside.sidebar-nav

main.main
  h1 Typography
  h2 Headings
  h1 h1 The quick fox jumps over the lazy dog
  h2 h2 The quick fox jumps over the lazy dog
  h3 h3 The quick fox jumps over the lazy dog
  h4 h4 The quick fox jumps over the lazy dog
  h5 h5 The quick fox jumps over the lazy dog
  h6 h6 The quick fox jumps over the lazy dog
  h2 Paragraphs <p>
  p I'm baby occupy tumeric intelligentsia, sartorial banh mi try-hard green juice taxidermy blue bottle cliche chillwave chicharrones. Sustainable marfa actually, lumbersexual umami everyday carry lyft. Ugh four dollar toast tousled listicle heirloom, butcher actually vegan. Pork belly gastropub tilde crucifix butcher. Four loko pickled messenger bag, quinoa brunch locavore narwhal wayfarers bespoke hella PBR&B. Crucifix fingerstache shoreditch pork belly lumbersexual gluten-free dreamcatcher, edison bulb poutine quinoa.
  
  h2 Small
  small I'm baby occupy tumeric intelligentsia, sartorial banh mi try-hard green juice taxidermy blue bottle cliche chillwave chicharrones. Sustainable marfa actually, lumbersexual umami everyday carry lyft. Ugh four dollar toast tousled listicle heirloom, butcher actually vegan. Pork belly gastropub tilde crucifix butcher. Four loko pickled messenger bag, quinoa brunch locavore narwhal wayfarers bespoke hella PBR&B. Crucifix fingerstache shoreditch pork belly lumbersexual gluten-free dreamcatcher, edison bulb poutine quinoa.
  
  script(src="http://files.keyes.ie/things/baseliner/baseliner-latest.js")

mwkzrwm.markdown

MWKzrWM

A Pen by Mohamed Cherif Bouchelaghem on CodePen.

License.

script.js

//baseliner = new Baseliner({'gridHeight': 24, 'gridOffset': 0});
//

style.scss

* {
  margin: 0;
  padding: 0;
}

body, html {
  font-size: 16px;
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  line-height: 1.5;
}

// Typography
// https://www.modularscale.com/?16&px&1.125
h1 {
  font-size: 28.833px;
   line-height: 48px;
    margin-top: 72px;
    margin-bottom: 24px;
}

h2 {
  font-size: 25.629px;
   line-height: 48px;
    margin-bottom: 24px;
    margin-top: 48px;
}

h3 {
  font-size: 22.781px;
    margin-top: 24px;
    margin-bottom: 24px;
    line-height: 36px;
}

h4 {
      font-size: 20.25px;
    margin-top: 24px;
    line-height: 24px;

}

h5 {
  font-size: 18px;
    margin-top: 24px;
   line-height: 24px;
}

h6 {
  margin-top: 24px;
  font-size: 1em;
}
p {
    font-size: 16px;
    font-weight: 300;
  letter-spacing: .2px;
}

small {
  font-size: 0.889em;
  font-weight: 300;
}

a {
  color: #000;
  text-decoration: none;
}

//Components
// top bar
.top-bar {
  background-color: #ccc;
  height: 48px;
  display: flex;
  justify-items: center;
  &-brand {
    align-self: center;
  }
  .brand {
    padding: .5rem;
  }
}

.main {
  width: 370px;
  margin: auto;
}