Full Bleed Blog Layout

Full Bleed Blog Layout by Wes Bos

HTML

<!--
  Thanks To Phillipp Rudloff for the .tip Idea
  https://codepen.io/kleinfreund/pen/aLQgYy
 -->
<article class="post">
  <h2>Chapter Three: The Great American Game</h2>

  <p>Dear Diary,</p>

  <p>Grandfather's creaky as his front porch, loads his shotgun beneath the awning, spittoon restless for rain, carpenter's
    chair against the whistling air. Rocking, back and forth, rocking snap shot picture - worth it, just like the movies</p>

  <div class="tip tip-right">
    <p>This is a song by
      <a href="http://levithepoet.net/">Levi The Poet</a>
    </p>
  </div>


  <p>She said that he loved baseball, and James Earl Jones; said that he's got god talking inside of his thoughts while he's
    rounding those bases on his way back home</p>

  <blockquote>
    <p>"If you build it, they will come"</p>
  </blockquote>

  <p>If you build it, they will come (and baby listens to what the Lord say). But I've been getting pretty worn, building for
    nearly a decade</p>

  <figure>
    <img src="https://source.unsplash.com/1000x300" alt="Big Ass Image">
    <figcaption>Super Nice Photo</figcaption>
  </figure>


  <p>In a perfect world we shouldn’t have been allowed to lose sight of what it means to love wholly. I’ve got a Polaroid hanging
    on my wall that a friend took of me and my angel. I remember the day like it’s something I can touch, but it’s stuck
    in the square between the borders of the film, and I can run my fingers over our faces, but I can’t get back to the places
    we were</p>


  <blockquote>
    <p>You’ve got a pain deep in your bones, son.</p>
  </blockquote>
  <p>"You’ve got a pain deep in your bones, son. It compels you forward like you’re tied to a slave master’s cruel hand, and
    it's the same pain that drives that oppressor’s heart of stone, so you’ve grown to love the man. You keep pouring yourself
    out, again and again, into legible lines through a crooked pen." Yeah, it’s painful, but it’s familiar – so habit breeds
   ...

CSS

:root {
  --yellow: #ffc600;
}
html {
  color: #444;
  font-family: Cambria, Cochin, Georgia, 'Times New Roman', Times, serif;
  font-size: 20px;
}
p {
  line-height: 1.8;
}
img {
  max-width: 100%;
}
a {
  color: black;
  text-decoration: underline wavy var(--yellow);
}
h1,
h2 {
  font-size: 80px;
  font-style: italic;
  font-weight: 100;
  margin: 0;
}
.post {
  display: grid;
  max-width: 1000px;
  margin: 200px auto;
  grid-gap: 10px 50px;
  grid-template-columns: 3fr 12fr 5fr;
}
.post>* {
  grid-column: 2 / -2;
}
.post>figure {
  margin: 0;
  grid-column: 1 / -1;
}
figcaption {
  font-size: 10px;
}
.post>blockquote {
  grid-column: 1 / -1;
  font-size: 60px;
  font-style: italic;
  text-align: center;
  margin: 0;
}
.tip {
  background: #FAFAFA;
  padding: 10px;
  grid-row: span 5;
  align-self: start;
}
.tip-left {
  grid-column: 1 / span 1;
  text-align: right;
  border-right: 2px solid var(--yellow);
}
.tip-right {
  grid-column: span 1 / -1;
  border-left: 2px solid var(--yellow);
}