kEsJe

index.html

<div class='line-through'>
  <h1>Branchy</h1>
</div>

<a href='#'>About</a>
<a href='#'>Contribute</a>
<a href='#'>Archives</a>

<div class='line-through' style='margin-top:10em;'>
  <h2>Study Shows: Connecting Lines Improve Readability</h2>
</div>

<p>I could write lorem ipsum in here. But I won't do that. Instead, I'll tell you all about how much I'd like to make some more Jekyll themes, like this one. 
<br><br>
  Oh yes. Baskerville is a lovely typeface. Look at this ampersand! <em style='font-size:6em;padding-left:30px;letter-spacing:-2px;'>j<span style='font-size:.61em;'>&amp;</span>se shawl</em>
</p>
  

kesje.markdown

kEsJe

A Pen by Jesse Shawl on CodePen.

License.

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import "compass/css3";

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,200italic);


body{
margin-top:5em;
  font-family:'Montserrat';
  background:#333;
}
.line-through{
  height:1px;
  width:100%;
  background:#DDD;
}
.line-through h1, .line-through h2{
  display:inline-block;
  border:1px solid #DDD;
  padding:10px;
  margin-top:-.9em;
  border-radius:5px;
  position:absolute;
  background:#333;
  margin-left:1em;
}

h1{
  font-weight:700;
  color:#fff;
  font-size:3em;
}

h2{
  color:#fff;
  margin-left:2em !important;
  font-weight:400;
}

a{
border:1px solid #CCC;
  color:#fff;
 float:right;
  padding:.5em;
  border-radius:5px;
  margin-top:1em;
  margin-right:.9em; 
  position:relative;
  text-decoration:none;
  &:before{
    content:'';
      display:block;
      height:1em;
      width:1px;
      position:absolute;
      background:#ccc;
      top:-1.1em;
      left:48%;
    }
}

p{
border:1px solid #fff;
  padding:10px;
  width:650px;
  color:#fff;
  margin-top:3em;
  border-radius:5px;
  margin-left:5em;
  font-family:'Baskerville';
  font-size:1.5em;
  position:relative;
}

p:before{
  content:'';
  display:block;
  position:absolute;
  width:1px;
  height:45px;
  background:#CCC;
  top:-45px;
  left:30px;
}