Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                #wrapper
  %main#main
    .article-list
      %article.article
        %img.article-image{src: "https://unsplash.it/200/200?image=1014", :height => "200", :width => "200"}/
        %ul.article-category
          %li
            %a{:href => "/"} Inspiration
          %li
            %a{:href => "/"} Photography
        %h1.article-title
          %a{:href => "post.html"} One thing I was sure of, that my uncle Leo was definitely the hero of my childhood.
        %time.article-date October 17, 2008
        .article-content
          %p
            The smell of his
            %a{:href => "gallery.html"} "Old Spice"
            cologne carried me back into that lost childhood more than the home movies did. My uncle didn't know it, but It was the sweet, cheap smell of car dealers that took me back, and made me dissolve into a dream of the past. Leo was the last dinosaur that smelled of cheap cologne.
      %article.article
        %img.article-image{:height => "200", :src => "https://unsplash.it/200/200?image=1081", :width => "200"}/
        %ul.article-category
          %li
            %a{:href => "/"} Inspiration
          %li
            %a{:href => "/"} Photography
        %h1.article-title
          %a{:href => "post.html"} And he believed in the American dream.
        %time.article-date October 17, 2008
        .article-content
          %p I was crazy about him, because he believed in miracles. And Even though he lived inside of life and sold Cadillacs, he always looked like a ten-year-old boy whose sleeves were too long. When I was ten, Leo gave me this great movie camera. And My mother always hoped I'd become the next Milton Berle. But dreams of houses, and cars, and fresh-cut lawns aren't dreams when they become real. And somehow I understood what my mother meant by "Good morning, Columbus." And even if my mother didn't like what I was doing with my life, I think she'd understand.
      %article.article
        %img.article-image{:height => "200", :src => "https://unsplash.it/200/200?image=267", :width => "200"}/
        %ul.article-category
          %li
            %a{:href => "/"} Inspiration
          %li
            %a{:href => "/"} Photography
        %h1.article-title
          %a{:href => "post.html"} When I was 11, I got this really weird earache that wouldn't go away.
        %time.article-date October 17, 2008
        .article-content
          %p I went to about a hundred doctors but none of them could help me... So what Leo did was he went into Mexico, and brought back this fat lady witch doctor who did this mumbo-jumbo and fixed me right up. I was grateful, but somehow I thought I might've been better off mute.
      %article.article
        %img.article-image{:height => "200", :src => "https://unsplash.it/200/200?image=923", :width => "200"}/
        %ul.article-category
          %li
            %a{:href => "/"} Inspiration
          %li
            %a{:href => "/"} Photography
        %h1.article-title
          %a{:href => "post.html"} All in all, I had a very happy childhood.
        %time.article-date October 17, 2008
        .article-content
          %p My father was a border guard, who spent most of his life trying to keep people from crossing lines. Every night for 15 years, he'd go out and smooth down the road between Mexico and Arizona, and every morning he'd be out there looking for footprints in the dirt. But my father always said that work was like a hat you put on your head. And even if you didn't have pants, you didn't have to walk down the street ashamed of your ass, so long as you had a hat.
              
            
!

CSS

              
                %article-category
  font-weight: 300
  text-transform: uppercase
  color: #9b9b9b
  letter-spacing: .15em
  line-height: 1
  margin: 0
  padding: 0
  list-style-type: none
  font-size: 14px

  > *
    display: inline-block
    margin-top: 0
    + *
      margin-left: 1em
      +relative
      &:before
        content: ''
        +absolute(top 50% left -.8em)
        border-left: 2px solid #9b9b9b
        height: 2px
        margin-top: -1px
  a
    &:hover
      // text-decoration: underline

%article-date
  display: block
  color: #4a4a4a
  font-size: 14px
  font-weight: 300
  font-style: italic
  letter-spacing: .1em
  line-height: 1

  .updated
    color: rgba(black,.2)

%article-list

  +relative
  &:before
    content: ''
    background: rgba(black,0)
    +absolute(top right left bottom)
    z-index: -1
    pointer-events: none
    transition: all .2s ease
    @media (min-width: $mobile)
      margin: $nspace

  max-width: 80rem
  margin: 0 auto
  @media (max-width: $phone)
    margin:
      left: $nspace
      right: $nspace

  &:hover
    &:before
      background: rgba(black,.02)
    > *[class]
      background: rgba(black,0)
    > * > *
      opacity: 0.075

%article-list-item-image
  width: calc((#{$_space}) * 4)

%article-list-item-date
  +absolute(top $space right $space)
  @media (max-width: $mobile)
    display: none

%article-list-item-category
  +absolute(top $space left $space)
  @media (max-width: $mobile)
    display: none

%article-list-item-title
  @extend h2
  line-height: 1.25
  transition: all .2s ease
  margin: 0 0 -.3em 0
  align-self: flex-end
  @media (min-width: $mobile)
    margin-top: calc(1rem + .5em)

%article-list-item-content
  opacity: 0
  font-family: "Droid Serif"
  +absolute(top 100% left 0 right 0)
  padding: 0 $space $space
  background: rgba(black,.02)
  margin: 0 $nspace
  @extend %first-last-clear
  border:
    bottom: $space solid rgba(black,.02)
    left: $space solid rgba(black,.02)
    right: $space solid rgba(black,.02)


%article-list-item
  overflow: hidden
  position: relative
  transition: all .2s ease
  padding: $space
  background: rgba(black,.02)

  display: flex
  flex-flow: row wrap
  align-items: flex-start
  justify-content: space-between

  &:before, &:after
    content: ''
    +absolute(right left)
    height: $space
  &:before
    bottom: 100%
  &:after
    top: 100%


  h1, h2, p
    width: calc(100% - (#{$_space}) * 5)
    

  img, h1, h2, .article-content, .post-content
    transition: all .2s ease

  &:hover
    overflow: visible
    z-index: 10

    &, .article-content, .post-content
      background: rgba(white,1)

    > *
      opacity: 1
      will-change: opacity

  + *
    margin-top: $space

.article-list
  @extend %article-list

  .article
    @extend %article-list-item

  .article-image
    @extend %article-list-item-image
    ~ .article-category
      left: calc((#{$_space}) * 6)

  .article-category
    @extend %article-category
    @extend %article-list-item-category

  .article-date
    @extend %article-date
    @extend %article-list-item-date

  .article-title
    @extend %article-list-item-title

  .article-content
    @extend %article-list-item-content
    
    
svg
  path
    fill: black
              
            
!

JS

              
                
              
            
!
999px

Console