frontage

HTML

<h1>
      <div class='volume dot' data-type='•'>
        •
      </div>
      <div class='volume fron' data-type='FRON'>
        FRON
      </div>
      <div class='volume tage' data-type='TAGE'>
        TAGE
      </div>
      <div class='volume dot' data-type='•'>
        •
      </div>
    </h1>
    <h2>
      <div class='volume dot' data-type='update or die'>
        update or die
        
        </div>
    </h2>

SCSS

body {
  margin: 100px auto;
  width: 600px;
  background: -webkit-gradient(radial, center center, 0, center center, 800, from(#D9674F), to(#8A2C12));
}
@mixin text_shadow {
  $c: #290B01;
  $cc: #A8442D;
  $s: 2;
  $ss: -4;
  text-shadow:
        
    (-1px  - $s)  (3px  - $s) 0 $c,
    (-2px  - $s)  (4px  - $s) 0 $c,
    (-3px  - $s)  (5px  - $s) 0 $c,
    (-4px  - $s)  (6px  - $s) 0 $c,
    (-5px  - $s)  (7px  - $s) 0 $c,
    (-6px  - $s)  (8px  - $s) 0 $c,
    (-7px  - $s)  (9px  - $s) 0 $c,
    
    (-4px  - $ss)  (4px  - $s) 0 $c,
    (-4px  - $ss)  (5px  - $s) 0 $c,
    (-4px  - $ss)  (6px  - $s) 0 $c,
    (-4px  - $ss)  (7px  - $s) 0 $c,
    (-5px  - $ss)  (8px  - $s) 0 $c,
    (-6px  - $ss)  (9px  - $s) 0 $c,
    
    (1px  + $s)  (4px  - $s) 0 $cc,
    (2px  + $s)  (5px  - $s) 0 $cc,
    (3px  + $s)  (6px  - $s) 0 $cc,
    (4px  + $s)  (7px  - $s) 0 $cc,
    (5px  + $s)  (8px  - $s) 0 $cc,
    (6px  + $s)  (9px  - $s) 0 $cc,
    (7px  + $s)  (10px  - $s) 0 $cc,
    (8px  + $s)  (11px  - $s) 0 $cc,
    (9px  + $s)  (12px  - $s) 0 $cc,
    (8px  + $s)  (12px  - $s) 0 $cc,
    (7px  + $s)  (12px  - $s) 0 $cc,
    (6px  + $s)  (12px  - $s) 0 $cc,
    (5px  + $s)  (12px  - $s) 0 $cc,
    (4px  + $s)  (12px  - $s) 0 $cc,
    (3px  + $s)  (12px  - $s) 0 $cc,
    (2px  + $s)  (12px  - $s) 0 $cc,
    (1px  + $s)  (12px  - $s) 0 $cc,
    (0px  + $s)  (12px  - $s) 0 $cc,
    (-1px  + $s)  (12px  - $s) 0 $cc,
    (-2px  + $s)  (12px  - $s) 0 $cc,
   
    (-2px  + $s)  (11px  - $s) 0 $cc,
    (-3px  + $s)  (10px  - $s) 0 $cc,
    (-4px  + $s)  (9px  - $s) 0 $cc,
    (-5px  + $s)  (8px  - $s) 0 $cc;
}
@mixin layer_font {
  text-align: center;
  font-family: "proxima-nova",sans-serif;
  color: #6897C5;
  font-weight: 700;
  letter-spacing: 20px;
}

h1 {
  @include layer_font;
  font-size: 80px;
  margin: 10px 0 10px -80px;
}
h2 {
  @include layer_font;
  font-size: 50px;
  margin: 5px;
}
.volume {
  display: inline-block;
  &:before {
    content: attr(data-type);
   ...