Fancy Blockquote Style

Fancy-Blockquote-Style.markdown

Fancy Blockquote Style

An outtake form a fancy blockquote style that I was working on at work.

A Pen by Matt Soria on CodePen.

License.

index.html

<article>
  <h1>Fancy Blockquote Style</h1>
  <p>Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.</p>

  <blockquote><p>I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.</p></blockquote>

  <p>The regret on our side is, they used to say years ago, we are reading about you in science class. Now they say, we are reading about you in history class.</p>

  <p>Science has not yet mastered prophecy. We predict too much for the next year and yet far too little for the next 10.</p>
</article>

style.scss

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

body {
  padding: 25px;
  font-family: 'Droid Serif', serif;
  background: #4F7482;
  @media screen and (min-width: 750px) {
    padding: 50px;
  }
}

article {
  margin: 0 auto;
  background: #fff;
  max-width: 600px;
  border-radius: 3px;
  padding: 36px 50px;
  box-shadow: 0 2px rgba(0,0,0,.25);
  h1 {
    margin-top: 0;
    font-size: 2em;
    color: #4F7482;
    font-weight: 700;
    padding-bottom: .2em;
    border-bottom: 1px solid #c2c2c2;
  }
  p {
    font-size: 18px;
    line-height: 1.5em;
    margin-bottom: 28px;
  }
  blockquote {
    width: 100%;
    margin-left: -50px;
    padding: 36px 50px;
    position: relative;
    background: #c2c2c2;
    margin-bottom: 28px;
    &::before, &::after {
      top: 0;
      bottom: 0;
      width: 25px;
      content: '';
      position: absolute;
      background: #c2c2c2;
      box-shadow: 0 2px rgba(0,0,0,.25);
    }
    &::before {
      right: 100%;
    }
    &::after {
      left: 100%;
    }
    p {
      margin: 0;
      font-size: 1.5em;
      &::before {
        top: 0;
        left: 16px;
        color: #fff;
        content: '“';
        font-size: 3em;
        position: absolute;
        text-shadow: -3px 0 #c2c2c2;
      }
      &::after {
        right: 16px;
        color: #fff;
        content: '”';
        bottom: -32px;
        font-size: 3em;
        position: absolute;
        text-shadow: 3px 0 #c2c2c2;
      }
    }
  }
  
  @media screen and (min-width: 750px) {
    h1 {
      font-size: 3em;
    }
    blockquote {
      padding-right: 0;
      width: calc(100% + 50px);
      &::before {
        display: none;
      }
      &::after {
        width: 50px;
        border-radius: 0 3px 3px 0;
      }
      p {
        font-size: 2.5em;
        &::after {
          bottom: -56px
        }
      }
    }
  }
}