#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