Edit in JSRun


            
<section class="share-buttons">
  <h1>Share this article:</h1>
  <ul class="share-list">
    <li><i class="ri ri-gplus"></i>Share on Google Plus</li>
    <li><i class="ri ri-facebook"></i>Share on Facebook</li>
    <li><i class="ri ri-twitter"></i>Share on Twitter</li>
  </ul>
</section>
<section class="head">
  <div class="twrapper">
    <hgroup class="title">
      <h1>This is a Title</h1>
      <h3>This is an awesome headline</h3>
    </hgroup>
    <hgroup class="author">
      <h1>Jonathan Ohayon</h1>
      <h3>Written by</h3>
    </hgroup>
  </div>
</section>
<section class="text">
  <h1>Welcome to the mainland</h1>
  <a href="http://google.com">Google</a>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores dolorum ea error pariatur maiores nobis iusto, officiis fuga repellat? Dolor id voluptatibus ullam voluptates ducimus natus accusantium veniam illum repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi neque libero, beatae sunt sed distinctio, tempora eos porro tempore ea numquam vel iste dolore est recusandae deserunt atque rerum saepe.<br /><br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores dolorum ea error pariatur maiores nobis iusto, officiis fuga repellat? Dolor id voluptatibus ullam voluptates ducimus natus accusantium veniam illum repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi neque libero, beatae sunt sed distinctio, tempora eos porro tempore ea numquam vel iste dolore est recusandae deserunt atque rerum saepe.
  <blockquote>
    <h1>Yo dawg it's me</h1>
    <h3>Albert Einstein</h3>
  </blockquote>
  <h2>So what's the difference?</h2>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores dolorum ea error pariatur maiores nobis iusto, officiis fuga repellat? Dolor id voluptatibus ullam voluptates ducimus natus accusantium veniam illum repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi neque libero, beatae sunt sed distinctio, tempora eos porro tempore ea numquam vel iste dolore est recusandae deserunt atque rerum saepe:<br /><br />
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim magnam quaerat quasi deleniti similique, nihil quam autem dolore voluptates accusantium dolorum quia, est eum facilis quas, ea vitae quos fuga!</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim magnam quaerat quasi deleniti similique, nihil quam autem dolore voluptates accusantium dolorum quia, est eum facilis quas, ea vitae quos fuga!</li>
  </ul>
</section>
<a href="#" class="back">
  <hgroup>
    <h1>&lang;</h1>
    <h1>Back to top</h1>
  </hgroup>
</a>
<section class="share">
  <a href="javascript:void(0)" class="btn">
    <i class="material-icons">share</i> Share this article
  </a>
</section>
<section class="next-up">
  <div class="left" style="background-image: url(https://images.unsplash.com/photo-1463595842152-d998efae7bf1?crop=entropy);">
    <h4>Next up</h4>
    <hgroup>
      <h1>Stop procrastinating</h1>
      <h3>Damn you, millennials.</h3>
    </hgroup>
  </div>
  <div class="right" style="background-image: url(https://images.unsplash.com/photo-1463595515259-d8ef281955b9?crop=entropy);">
    <h4>Next up</h4>
    <hgroup>
      <h1>Some shit about the millennials</h1>
      <h3>Cuz why not.</h3>
    </hgroup>
  </div>
</section>
*:not(.material-icons, .ri) {
  font-family: 'PT Serif', serif;
  transition: all .3s ease-in-out !important;
}

html {
  width: 100%;
}

body {
  margin-top: calc(100vh + 50px);
  width: 100%;
}

@mixin dark-overlay {
  &:after {
    content: "";
    width: 100%;
    height: auto;
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
  }
}

@mixin title-thingy {
  display: flex;
  flex: {
    direction: column;
    wrap: wrap;
  }
  border-bottom: 1px solid #aaa;
  
  > h1 {
    font-size: 55px;
    color: #fff;
    line-height: 1.3;
  }
  > h3 {
    font: {
      size: 24px;
      style: italic;
    }
    color: #bbb;
    line-height: 1.3;
    padding-bottom: 10px;
  }
}

@mixin author-thingy {
  display: flex;
  flex: {
    direction: column-reverse;
    wrap: wrap;
  }
  padding-top: 15px;
  > h1, h3 { font-family: 'Open Sans', sans-serif; font-weight: 700; }
  > h3 {
    font-size: 13px;
    color: #bbb;
    text-transform: uppercase;
    line-height: 1.3;
  }
  > h1 {
    font-size: 18px;
    color: #fff;
    line-height: 1.3;
  }
}

@mixin back-btn {
  display: flex;
  flex: {
    direction: column;
    wrap: wrap;
  }
  > h1 {
    color: #aaa;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    &:first-child {
      transform: rotate(90deg);
    }
    &:last-child {
      font-size: 12px;
      line-height: 1.4;
      text-transform: uppercase;
    }
  }
}

@mixin next-thingy {
  display: flex;
  flex: {
    direction: column;
    wrap: wrap;
  }

  > h1 {
    font-size: 27px;
    color: #fff;
    line-height: 1.3;
  }
  > h3 {
    font: {
      size: 24px;
      style: italic;
    }
    color: #bbb;
    line-height: 1.3;
  }
}

.head {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: {
    image: url(https://images.unsplash.com/photo-1464013778555-8e723c2f01f8?crop=entropy);
    position: center;
    attachment: fixed;
  }
  z-index: 1;
  @include dark-overlay;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  
  .twrapper {
    margin-bottom: 50px;
    width: 38%;
    .title { @include title-thingy; }
    .author { @include author-thingy; }
  }
}

.text {
  max-width: calc(38% + 10px);
  margin: 50px auto;
  font-size: 17px;
  line-height: 1.3;
  
  > blockquote {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: {
      direction: column;
      wrap: wrap;
    }
    padding: 25px;
    > h1 {
      font-size: 25px;
      color: #626262;
      font-style: italic;
      &:before { content: "“"; }
      &:after { content: "”"; }
    }
    > h3 {
      &:before { content: " — "; }
    }
  }
  
  > ul {
    list-style: initial;
    padding: 0 35px;
  }
  
  > h1 {
    font-size: 30px;
    font-weight: 700;
    color: rgba(0,0,0,.8);
    line-height: 1.15;
  }
  
  > h2 {
    font-size: 23px;
    color: rgba(0,0,0,.44);
    line-height: 1.22;
  }
  
  > h3 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.58;
  }
  
  > a {
    color: inherit;
  }
}

.back {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;
  > hgroup {
    @include back-btn;
  }
  margin: 25px 0;
}

.btn {
  padding: 17px 25px;
  border: 2px solid #2ecc71;
  color: #2ecc71;
  border-radius: 10000px;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  &:hover {
    color: #fff;
    background-color: #2ecc71;
  }
  display: flex;
  align-items: center;
  > .material-icons {
    font-size: 14px;
    padding-right: 5px;
  }
}

section.share {
  padding: 60px;
  flex: {
    direction: column;
    wrap: wrap;
  }
  display: flex;
  justify-content: center;
  align-items: center;
}

.next-up {
  display: flex;
  flex: {
    direction: row;
    wrap: wrap;
  }
  > * {
    height: 255px;
    padding: 0 60px;
    min-width: calc(50% - 120px);
    flex-grow: 1;
    background: {
      size: 110%;
      position: center;
    }
    overflow: hidden;
    z-index: 1;
    position: relative;
    display: flex;
    flex: {
      direction: column;
      wrap: wrap;
    }
    justify-content: center;
    @include dark-overlay;
    
    > h4 {
      font-family: 'Open Sans', sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      color: #fff;
      font-size: 15px;
      line-height: 1.3;
      margin-bottom: 25px;
      position: absolute;
      left: 60px;
      top: 60px;
    }
    > hgroup { @include next-thingy; }
    
    &:hover {
      background-size: 100%;
    }
  }
}

.share-buttons {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  background-color: rgba(0,0,0,.75);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex: {
    direction: column;
    wrap: wrap;
  }
  h1 {
    font-size: 24px;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
  }
  li {  
    cursor:pointer;
    padding: 17px 25px;
    margin: 15px 0;
    font-size: 16px;
    background-color: #3b5998;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    border-radius: 10000px;
    display: flex;
    align-items: center;
    text-align: left;
    &:first-child { background-color: #DC4E41; }
    &:last-child { background-color: #55acee; }
    .ri {
      margin-right: 15px;
      font-size: 20px;
      &.ri-gplus { margin-right: 10px; }
    }
  }
}

// Mobile query
@media only screen and (max-width: 768px) {
  .next-up > .right { display: none; } // Hide the last recommendation on mobile; One is enough
  .text {
    max-width: calc(100% - 60px);
    margin: 30px auto;
  }
  body {
    margin-top: calc(100vh + 25px);
  }
  .head .twrapper {
    width: calc(100% - 60px);
  }
}