#wrapper
  %main#main
    .article-list
      %article.article
        %img.lazyload.fadein.article-image{"data-parent-fit" => "contain", "data-sizes" => "auto", "data-src" => "https://unsplash.it/200/200?image=1014", :height => "200", :src => "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%20200%20200'%20%2F%3E", :width => "200"}/
        %ul.article-categories
          %li
            %a{:href => "/"} Inspiration
          %li
            %a{:href => "/"} Photography
        %time.article-date October 17, 2008
        %h1.article-title
          %a{:href => "post.html"} One thing I was sure of, that my uncle Leo was definitely the hero of my childhood.
        .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.lazyload.fadein.article-image{"data-parent-fit" => "contain", "data-sizes" => "auto", "data-src" => "https://unsplash.it/200/200?image=1081", :height => "200", :src => "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%20200%20200'%20%2F%3E", :width => "200"}/
        %ul.article-categories
          %li
            %a{:href => "/"} Inspiration
          %li
            %a{:href => "/"} Photography
        %time.article-date October 17, 2008
        %h1.article-title
          %a{:href => "post.html"} And he believed in the American dream.
        .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.lazyload.fadein.article-image{"data-parent-fit" => "contain", "data-sizes" => "auto", "data-src" => "https://unsplash.it/200/200?image=267", :height => "200", :src => "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%20200%20200'%20%2F%3E", :width => "200"}/
        %ul.article-categories
          %li
            %a{:href => "/"} Inspiration
          %li
            %a{:href => "/"} Photography
        %time.article-date October 17, 2008
        %h1.article-title
          %a{:href => "post.html"} When I was 11, I got this really weird earache that wouldn't go away.
        .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.lazyload.fadein.article-image{"data-parent-fit" => "contain", "data-sizes" => "auto", "data-src" => "https://unsplash.it/200/200?image=923", :height => "200", :src => "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%20200%20200'%20%2F%3E", :width => "200"}/
        %ul.article-categories
          %li
            %a{:href => "/"} Inspiration
          %li
            %a{:href => "/"} Photography
        %time.article-date October 17, 2008
        %h1.article-title
          %a{:href => "post.html"} All in all, I had a very happy childhood.
        .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.
  %aside#sidebar.widget-area{:role => "complementary"}
    %section#recent-posts-3.widget.widget_recent_entries
      %h2.widget-title Recent Posts
      %ul
        %li
          %a{:href => "https://wp-themes.com/?p=19"} Worth A Thousand Words
        %li
          %a{:href => "https://wp-themes.com/?p=36"} Elements
        %li
          %a{:href => "https://wp-themes.com/?p=14"} More Tags
        %li
          %a{:href => "https://wp-themes.com/?p=8"} HTML
        %li
          %a{:href => "https://wp-themes.com/?p=6"} Links
    %section#recent-comments-3.widget.widget_recent_comments
      %h2.widget-title Recent Comments
      %ul#recentcomments
        %li.recentcomments
          %span.comment-author-link
            %a.url{:href => "http://josephscott.org/", :rel => "external nofollow"} Joseph Scott
          on
          %a{:href => "https://wp-themes.com/?p=1#comment-509"} Hello world!
        %li.recentcomments
          %span.comment-author-link
            %a.url{:href => "http://joseph.randomnetworks.com/", :rel => "external nofollow"} Joseph Scott
          on
          %a{:href => "https://wp-themes.com/?p=8#comment-2"} HTML
        %li.recentcomments
          %span.comment-author-link
            %a.url{:href => "http://wordpress.org/", :rel => "external nofollow"} Mr WordPress
          on
          %a{:href => "https://wp-themes.com/?p=1#comment-1"} Hello world!
    %section#archives-3.widget.widget_archive
      %h2.widget-title Archives
      %ul
        %li
          %a{:href => "https://wp-themes.com/?m=200810"} October 2008
        %li
          %a{:href => "https://wp-themes.com/?m=200809"} September 2008
        %li
          %a{:href => "https://wp-themes.com/?m=200806"} June 2008
    %section#categories-3.widget.widget_categories
      %h2.widget-title Categories
      %ul
        %li.cat-item.cat-item-6
          %a{:href => "https://wp-themes.com/?cat=6"} First Child Category
        %li.cat-item.cat-item-8
          %a{:href => "https://wp-themes.com/?cat=8"} One Grandchild Category
        %li.cat-item.cat-item-5
          %a{:href => "https://wp-themes.com/?cat=5"} Parent
        %li.cat-item.cat-item-7
          %a{:href => "https://wp-themes.com/?cat=7"} Second Child Category
        %li.cat-item.cat-item-1
          %a{:href => "https://wp-themes.com/?cat=1"} Uncategorized
View Compiled
.custom-background body
  background-image: url("http://dev.mobilemarkup.com/calibration/wp-content/uploads/2017/09/IMG_0226.jpg")
  background-position: center center
  background-size: cover
  background-repeat: no-repeat
  background-attachment: fixed
  background-color: black

%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
    color: black
    // text-decoration: underline

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

  .updated
    color: rgba(black,.2)

%article-title
  a
    @extend %line-hover

$hover-transition: all .15s ease

%article-list

  +relative
  z-index: 1
  
  &:before
    content: ''
    background: rgba(black,0)
    +absolute(top right left bottom)
    z-index: -1
    pointer-events: none
    transition: $hover-transition
    @media (min-width: $tablet)
      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
    
  .background--dark &
    &:hover
      &:before
        background: none
      > *[class]
        background: rgba(white,0)
      > * > *
        opacity: 0
      h1, h2
        opacity: 1
        color: white
        text-shadow: 0 1px 2px rgba(black,.5)


%article-list-item
  overflow: hidden
  position: relative
  transition: $hover-transition
  padding: $space
  background: #fafafa

  &:before
    content: ''
    +absolute(top right left bottom)
    backface-visibility: hidden
    background: rgba(black, 0)
    z-index: -1
    transition: $hover-transition

    @media (min-width: $tablet)
      margin: $nspace $nspace 0

  img, h1, h2
    transition: $hover-transition
    will-change: opacity

  &:hover
    overflow: visible
    z-index: 10
    background: rgba(white,1)!important

    > *
      opacity: 1

    // dark background  
    h1, h2
      color: black
      text-shadow: none

    &:before
      background: #fafafa

  + *
    margin-top: $space

  @media (min-width: $phone) and (max-width: $tablet - 1px)
    display: flex
    flex-flow: row wrap
    align-items: flex-start
    
  @media (min-width: $desktop)
    display: flex
    flex-flow: row wrap
    align-items: flex-start

  .background--dark &
    background-color: white
    &:hover
      [class*=content]
        // transform: translate(0,-1px)
      &:before
        // background: rgba(black,.02)
        background: none
        margin: 0

%article-list-item-content
  
  font-family: "Droid Serif"
  +absolute(top 100% left 0 right 0)
  padding: 0 $space $space
  background: white
  margin: 0 $nspace $nspace
  border: $space solid rgba(black,.02)
  border-top: none
  overflow: hidden
  max-height: 34vh
  transition: opacity .15s
  backface-visibility: hidden
  transform: translateZ(0)

  > *
    &:first-child
      margin-top: 0
    &:last-child
      margin-bottom: -.333em

  &:after
    content: ''
    +absolute(top calc(34vh + #{$_nspace}) left right)
    height: $double-space
    background: linear-gradient(to top, rgba(white,1) 40%, rgba(white,0))

  @media (max-width: $phone)
    font-size: 14px

  //// transition
  opacity: 0

  //// custom properties

  .background--dark &
    // background-clip: padding-box
    margin: 0
    border: none

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

  ~ h1, ~ h2
    margin-bottom: -.3em
    margin-left: $space
  
  ~ [class*=categories]
    left: calc((#{$_space}) * 6)


  @media (max-width: $phone - 1px), (min-width: $tablet) and (max-width: $desktop - 1px)
    float: left
    margin-right: $space


%article-list-item-date
  display: block
  @media (min-width: $phone) and (max-width: $tablet), (min-width: $desktop)
    +absolute(top $space right $space)

%article-list-item-category
  
  @media (max-width: $phone - 1px), (min-width: $tablet) and (max-width: $desktop - 1px)
    ~ *
      margin-top: .75rem

  @media (min-width: $phone) and (max-width: $tablet), (min-width: $desktop)
    // display: block
    +absolute(top $space left $space right 12em)

  
%article-list-item-title
  @extend h2
  margin-bottom: 0
  line-height: 1.25
  transition: $hover-transition
  align-self: flex-end
  width: calc(100% - (#{$_space}) * 5)
  a
    @extend %line-hover

  @media (min-width: $phone)
    margin-top: calc(1.25rem + .25em)
      
      
.article-list
  @extend %article-list

  .article
    @extend %article-list-item

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

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

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

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

  .article-content
    @extend %article-list-item-content
View Compiled
$('[class*=article-list] article:not(:last-child)').hover (->
  
    space = parseInt($(@).next().css('marginTop'))

    content = $(@).find('[class*=content]')
    contentBottom = content.offset().top + content.innerHeight()

    title = $(@).next().find('[class*=title]')
    titleTop =  title.offset().top

    difference =  titleTop - space * 2 - contentBottom

    console.log space, contentBottom, titleTop, difference

    return if difference >= -space * 1.5
    
    $(@).next().css
      marginTop: -difference

  ), ->
    el = $(@)
    el.next().removeAttr('style')
    # setTimeout ->
    #   el.next().removeAttr('style')
    # , 150
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,600|Droid+Serif:400,400i|PT+Serif:400,700
  2. https://codepen.io/mican/pen/yoOYLZ

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/lazysizes/3.0.0/lazysizes.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  3. https://codepen.io/mican/pen/XgRmNr
  4. https://codepen.io/mican/pen/yoOYLZ