Generated by SassMeister.com.

SassMeister-input-HTML.html

<script type="text/javascript">
  window.onkeydown = function(evt) {
    if (evt.keyCode == 68) {
      document.getElementById('demo').className = 'demo debug';
    }
  };

  window.onkeyup = function(evt) {
    if (evt.keyCode == 68) {
      document.getElementById('demo').className = 'demo';
    }
  };
</script>
<div id="demo" class="demo" lang="la">
  <div class="scale"><span></span></div>
  <p class="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
  <h1 class="title-1">Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
  <h2 class="title-2">Lorem ipsum dolor sit amet</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
  <h3 class="title-3">Lorem ipsum dolor sit amet</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
  <h4 class="title-4">Lorem ipsum dolor sit amet</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
  <h5 class="title-5">Lorem ipsum dolor sit amet</h5>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
  <h6 class="title-6">Lorem ipsum dolor sit amet</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// SassyLists (v2.2.1)
// ----

// ratios pré-définis qu’il sera possible d’appliquer aux échelles typographiques
// (http://24ways.org/2011/composing-the-new-canon/)

$ratios:(
  double-octave: 	         1/4,         // 0.25
  major-twelfth: 	         1/3,         // 0.33333
  major-eleventh: 	       3/8,         // 0.375
  major-tenth: 	           2/5,         // 0.4
  octave: 	               1/2,         // 0.5
  major-seventh: 	         8/15,        // 0.53333
  minor-seventh: 	         9/16,        // 0.5625
  major-sixth: 	           3/5,         // 0.6
  golden:                  1/1.618,     // 0.61805
  minor-sixth: 	           5/8,         // 0.625
  fifth: 	                 2/3,         // 0.66667
  augmented-fourth:        1/1.4142135, // 0.70711 // 1/√2 
  fourth: 	               3/4,         // 0.75
  major-third: 	           4/5,         // 0.8
  minor-third: 	           5/6,         // 0.83333
  major-second: 	         8/9,         // 0.88889
  minor-second: 	        15/16         // 0.9375
)!default;

// paramètres d’entrée

// $ratio appliqué pour le calcul des échelles typographiques
// $number1 est la taille de texte « importante » de l’échelle 1 (utilisée comme niveau 0 par défaut)
// $number2 est la taille de texte « importante » de l’échelle 2 (si $scale1 et $scale2 sont identiques, il n’y aura pas de double échelle)
// $offset permet de décaler le niveau 0 sur l’échelle
// $debug permet d’afficher/masquer la grille et des valeurs calculées

$ratio: map-get($ratios, augmented-fourth)!default;
$number1: 16px!default;
$number2: 20px!default;
$offset: 0;

$debug: true;

// $amplitude, $scale1, $scale2, $i et $steps sont des variables internes

$amplitude: 10!default;
$scale1: $number1;
$scale2: $number2;
$i: 0;
$steps: ();
  
// on calcule les deux échelles à partir des tailles « importantes » en appliquant le ratio choisi

@while $i < $amplitude
{
  $next1: nth($scale1, length($scale1)) / $ratio;
  $next2: nth($scale2, length($scale2)) / $ratio;
  
  $prev1: nth($scale1, 1) * $ratio;
  $prev2: nth($scale2, 1) * $ratio;
    
  $scale1: join($scale1, $next1);
  $scale2: join($scale2, $next2);
  
  $scale1: join($prev1, $scale1);
  $scale2: join($prev2, $scale2);
  
  $i: $i + 1;
}

// fusion + tri + arrondis sur les échelles (avec une dépendance pour jouer sur les array)

@import 'SassyLists';

$scale: sl-sort(join($scale1, $scale2));
$steps: sl-sort($steps);

$roundscale: ();

@each $step in $scale
{
  $roundscale: join($roundscale, round($step));
}

$scale: $roundscale;
$scale: sl-remove-duplicates($scale);

// on regarde les paramètres de la nouvelle echelle ainsi calculée et on créé une échelle identique dont les barreaux sont numérotés

@if $debug == true
{
  $i: index($scale, $number1) * - 1 - $offset;
  
  @while $i < length($scale) - index($scale, $number1) - $offset
  {
    $i: $i + 1;
  
    $steps: join($steps, $i);
  }
}

// function qui permet d’obtenir la valeur d’un des « barreaux » de l’échelle en fonction d’une hauteur (avec décalage éventuel de l’offset)

@function scale($level: 0)
{
  $start: nth($scale1, $amplitude + 1);

  @return nth($scale, index($scale, $start) + $level + $offset);
}

////////////////////////////////////////////////////////////////////////////////

// exemple d’utilisation (avec un rythme vertical en bonus)

$bfs:              16px!default; // base-font-size
$fs:            scale()!default; // font-size (le barreau 0 (par défaut) sur l’échelle typo)
$lh: round($fs * 3 / 2)!default; // line-height (par défaut 1.5 fois plus grand que le font-size)

// une fonction de conversion de pixels en ems, en fonction du contexte

@function em($px, $contexte: $bfs)
{
    @return($px / $contexte * 1em);
}

// une fonction pour ajuster le line-height automatiquement en fonction de la taille de texte

@function lines($font-size, $line-height: $lh)
{
  @return ceil(2 * $font-size / $line-height) / 2;
}

// un mixin pour formater tout les titres ainsi que leurs marges

@mixin title($size)
{
  // la valeur $size est convertie en ems, en fonction du contexte sur le body
  // le line-height est revu aussi en fonction de cette nouvelle taille de texte
  // les marges du paragraphes sont également revues avec : 
  //  - une marge basse égale au line-height
  //  - une marge haute égale au double de la marge basse
  
  font-size:     em($size, $fs);
  line-height:   em($lh * lines($size), $size);
  margin-top:    em($lh, $size) * 2;
  margin-bottom: em($lh, $size);
  white-space:   nowrap;
  
  // quand le debug est activé, on affiche la taille du texte et la hauteur de ligne
  
  @if $debug == true
  {
    .debug &:after
    {
      content: ' – '+ $size + ' / ' + $lh * lines($size);
    }
  }
}

// on charge normalize
@import 'http://necolas.github.io/normalize.css/3.0.1/normalize.css';

body
{
  // on applique le font-size et le line-height
  font-size:   em($fs);
  line-height: em($lh * lines($fs), $fs);

  // quelques règles pour présenter le contenu
  margin:      em($lh, $fs) auto;
  padding:     0 em($lh, $fs);
  max-width:   em(1000px, $fs);
}
@if $debug == true
{
  .debug {
    // quand le debug est activé, on affiche l’échelle calculée et la hauteur respective de chaque barreau
    .scale
    {
      font-size: 14px;
      line-height: 20px;
      position: fixed;
      left:   0;
      top:    0;
      bottom: 0;
      background-color: transparentize(#F00, 0.9);
      padding: 10px;
      overflow: auto;
      width: 120px;
      font-family: monospace;
      
      &:before
      {
        content: '' + $scale;
        width: 1px;
        display: block;
      }
      &:after
      {
        position: absolute;
        left:   100px;
        top:    0;
        bottom: 0;
        width: 1px;
        content: '' + $steps;
        margin-top: 10px;
      }
      & > *
      {
        // avec un fond coloré, on retrouve le barreau 0
        
        position: absolute;
        left:  0;
        right: 0;
        top: 20px * ((index($scale, $number1) - 1));
        height: 20px;
        margin-top: 10px;
        background-color: transparent!important;
        background-image: linear-gradient(#F00 0, transparent 1px, transparent calc(100% - 1px), #F00 100%);
        
        // éventuellement décalé d’un offset, signalé par des bordures
        
        &:after
        {
          content: '';
          position: absolute;
          left:  0;
          right: 0;
          height: 100%;
          top: 20px * $offset;
        }
      }
    }
  }
}
p
{
  // on revoit les marges par défaut des paragraphes en fonction du line-height
  margin: em($lh, $fs) 0;
  
  // quand le debug est activé, on affiche la taille du texte et la hauteur de ligne
  @if $debug == true
  {
    .debug &:after
    {
      content: ' – '+ $fs + ' / ' + $lh * lines($fs);
    }
  }
}

@if $debug == true
{
  .demo.debug
  {
    // pour afficher une grille horizontale en fond de page
    background-image: linear-gradient(transparent calc(100% - 1px), #F00 100%);
    background-position: 0 0;
    background-size: em($lh, $fs) / 2 em($lh, $fs) / 2;
    
    // quand le debug est activé, on affiche aussi le ratio utilisé
    &:before
    {
      font-size: 14px;
      line-height: 20px;
      content: '' + $ratio;
      position: fixed;
      right: 0;
      top: 0;
      background-color: transparentize(#F00, 0.9);
      padding: 10px;
      font-family: monospace;
    }
    *:not(.scale)
    {
      // mise en évidence des blocs et des hauteurs de lignes
      background-color: transparentize(#000, 0.9);
      
      &:before,
      &:after
      {
        background-color: transparentize(#F00, 0.9);
        font-weight: normal;
        font-family: monospace;
        line-height: 1em;
      }
      &[class]
      {
        &:before
        {
          content: '.' attr(class) ' – ';
        }
      }
    }
  }
}

.small
{
  // on va chercher le barreau -1 sur l’échelle typographique
  $size: scale(-1);
  
  // on applique cette taille convertie en ems, en fonction du contexte sur le body
  // le line-height est revu en fonction de cette nouvelle taille de texte
  // les marges du paragraphes sont aussi revues
  font-size:   em($size, $fs);
  line-height: em($lh * lines($size), $size);
  margin:      em($lh, $size) 0;
  
  // quand le debug est activé, on affiche la taille du texte et la hauteur de ligne
  @if $debug == true
  {
    .debug &:after
    {
      content: ' – '+ $size + ' / ' + $lh * lines($size);
    }
  }
}

[class*='title'] // IE8
{
  font-weight: bold;
}
.title-6
{
  // on va chercher le barreau 1 sur l’échelle typographique et on applique le mixin title
  @include title(scale(1));
}
.title-5
{
  // on va chercher le barreau 2 sur l’échelle typographique et on applique le mixin title
  @include title(scale(2));
}
.title-4
{
  // on va chercher le barreau 3 sur l’échelle typographique et on applique le mixin title
  @include title(scale(3));
}
.title-3
{
  // on va chercher le barreau 4 sur l’échelle typographique et on applique le mixin title
  @include title(scale(4));
}
.title-2
{
  // on va chercher le barreau 5 sur l’échelle typographique et on applique le mixin title
  @include title(scale(5));
}
.title-1
{
  // on va chercher le barreau 6 sur l’échelle typographique et on applique le mixin title
  @include title(scale(6));
}

SassMeister-output.css

@charset "UTF-8";
@import "http://necolas.github.io/normalize.css/3.0.1/normalize.css";
body {
  font-size: 1em;
  line-height: 1.5em;
  margin: 1.5em auto;
  padding: 0 1.5em;
  max-width: 62.5em;
}

.debug .scale {
  font-size: 14px;
  line-height: 20px;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(255, 0, 0, 0.1);
  padding: 10px;
  overflow: auto;
  width: 120px;
  font-family: monospace;
}
.debug .scale:before {
  content: "1px 2px 3px 4px 5px 6px 7px 8px 10px 11px 14px 16px 20px 23px 28px 32px 40px 45px 57px 64px 80px 91px 113px 128px 160px 181px 226px 256px 320px 362px 453px 512px 640px";
  width: 1px;
  display: block;
}
.debug .scale:after {
  position: absolute;
  left: 100px;
  top: 0;
  bottom: 0;
  width: 1px;
  content: "-11 -10 -9 -8 -7 -6 -5 -4 -3 -2 -1 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21";
  margin-top: 10px;
}
.debug .scale > * {
  position: absolute;
  left: 0;
  right: 0;
  top: 220px;
  height: 20px;
  margin-top: 10px;
  background-color: transparent !important;
  background-image: linear-gradient(#F00 0, transparent 1px, transparent calc(100% - 1px), #F00 100%);
}
.debug .scale > *:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  top: 0px;
}

p {
  margin: 1.5em 0;
}
.debug p:after {
  content: " – 16px / 24px";
}

.demo.debug {
  background-image: linear-gradient(transparent calc(100% - 1px), #F00 100%);
  background-position: 0 0;
  background-size: 0.75em 0.75em;
}
.demo.debug:before {
  font-size: 14px;
  line-height: 20px;
  content: "0.7071068124";
  position: fixed;
  right: 0;
  top: 0;
  background-color: rgba(255, 0, 0, 0.1);
  padding: 10px;
  font-family: monospace;
}
.demo.debug *:not(.scale) {
  background-color: rgba(0, 0, 0, 0.1);
}
.demo.debug *:not(.scale):before, .demo.debug *:not(.scale):after {
  background-color: rgba(255, 0, 0, 0.1);
  font-weight: normal;
  font-family: monospace;
  line-height: 1em;
}
.demo.debug *:not(.scale)[class]:before {
  content: "." attr(class) " – ";
}

.small {
  font-size: 0.875em;
  line-height: 1.7142857143em;
  margin: 1.7142857143em 0;
}
.debug .small:after {
  content: " – 14px / 24px";
}

[class*='title'] {
  font-weight: bold;
}

.title-6 {
  font-size: 1.25em;
  line-height: 1.2em;
  margin-top: 2.4em;
  margin-bottom: 1.2em;
  white-space: nowrap;
}
.debug .title-6:after {
  content: " – 20px / 24px";
}

.title-5 {
  font-size: 1.4375em;
  line-height: 1.0434782609em;
  margin-top: 2.0869565217em;
  margin-bottom: 1.0434782609em;
  white-space: nowrap;
}
.debug .title-5:after {
  content: " – 23px / 24px";
}

.title-4 {
  font-size: 1.75em;
  line-height: 1.2857142857em;
  margin-top: 1.7142857143em;
  margin-bottom: 0.8571428571em;
  white-space: nowrap;
}
.debug .title-4:after {
  content: " – 28px / 36px";
}

.title-3 {
  font-size: 2em;
  line-height: 1.125em;
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  white-space: nowrap;
}
.debug .title-3:after {
  content: " – 32px / 36px";
}

.title-2 {
  font-size: 2.5em;
  line-height: 1.2em;
  margin-top: 1.2em;
  margin-bottom: 0.6em;
  white-space: nowrap;
}
.debug .title-2:after {
  content: " – 40px / 48px";
}

.title-1 {
  font-size: 2.8125em;
  line-height: 1.0666666667em;
  margin-top: 1.0666666667em;
  margin-bottom: 0.5333333333em;
  white-space: nowrap;
}
.debug .title-1:after {
  content: " – 45px / 48px";
}

SassMeister-rendered.html

<script type="text/javascript">
  window.onkeydown = function(evt) {
    if (evt.keyCode == 68) {
      document.getElementById('demo').className = 'demo debug';
    }
  };

  window.onkeyup = function(evt) {
    if (evt.keyCode == 68) {
      document.getElementById('demo').className = 'demo';
    }
  };
</script>
<div id="demo" class="demo" lang="la">
  <div class="scale"><span></span></div>
  <p class="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
  <h1 class="title-1">Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
  <h2 class="title-2">Lorem ipsum dolor sit amet</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
  <h3 class="title-3">Lorem ipsum dolor sit amet</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
  <h4 class="title-4">Lorem ipsum dolor sit amet</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
  <h5 class="title-5">Lorem ipsum dolor sit amet</h5>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
  <h6 class="title-6">Lorem ipsum dolor sit amet</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
</div>