Dribbble #02

dribbble-02.markdown

Dribbble #02

Article from Dribbble. https://dribbble.com/shots/3233474-Photo-Blog

A Pen by Thomas Vaeth on CodePen.

License.

index.html

<article class="post">
  <div>
    <div class="absolute-bg" style="background-image: url('https://source.unsplash.com/f9C8ytxaItI/2000x1200');"></div>
  </div>
  <div class="post__container">
    <span class="post__category">Michelle's Travels</span>
    
    <div class="post__content">
      <header>
        <time class="post__time">Jan 22 2017</time>
        <h1 class="post__header"><span>Visiting</span> <span>the</span> <span>beach</span></h1>
      </header>
    
      <p class="post__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a augue justo. In mollis erat in elit tempus, feugiat luctus ex sollicitudin. Maecenas euismod tortor dolor, vel blandit augue aliquam sit amet. Vestibulum et eros mollis, laoreet nisi ac, condimentum sapien. Aliquam nec nunc enim.</p>
    </div>
    <div class="post__link">
      <a href="#">Older Posts</a>
    </div>
  </div>
</article>

script.js

// https://dribbble.com/shots/3233474-Photo-Blog

style.scss

/**
 * Base Variables
 */
$font: 'Source Sans Pro', sans-serif;

$color-alpha: #d0f2ee;

$color-black: #000;
$color-grey: #a9b1b3;
$color-white: #fff;

$mq-xs: 20em;
$mq-sm: 30em;
$mq-md: 54em;
$mq-lg: 64em;
$mq-xl: 76.5em;
$mq-xxl: 114em;

/**
 * Mixins
 */
@mixin nth-animation-delay($items: 3, $time: 0.1s) {
  @for $i from 1 through $items {
    
    &:nth-child(#{$i}) {   
      animation-delay: $time * $i; 
    }
  }
}

/**
 * Base Settings/Overwrite Normalize
 */
*, *:before, *:after {
  box-sizing: border-box;
}

h1 {
  margin-top: 0;
  margin-bottom: 0.25em;
  
  font-size: 4em;
  font-weight: 900;
  line-height: 0.9;
}

p {
  margin: 0;
  
  color: $color-grey;
}

a {
  padding: 0.5em 1em;
  font-size: 0.8em;
  color: $color-grey;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  border: 1px solid $color-grey;
  transition: all 0.3s ease-in;
  
  &:hover,
  &:active,
  &:focus {
    color: $color-white;
    background-color: $color-grey;
  }
}

figure {
  margin: 0;
}

/**
 * Text Selection
 */
::selection {
  color: $color-white;
  background-color: $color-alpha;
  text-shadow: none;
}

/**
 * Body
 */
body {
  font-family: $font;
  font-size: 100%;
  line-height: 1.6;
  color: $color-black;
  background-color: $color-white;

  @media (min-width: $mq-xs) {
    font-size: 102.5%;
  }

  @media (min-width: $mq-sm) {
    font-size: 105%;
  }

  @media (min-width: $mq-md) {
    font-size: 107.5%;
  }

  @media (min-width: $mq-lg) {
    font-size: 110%;
  }

  @media (min-width: $mq-xl) {
    font-size: 115%;
  }

  @media (min-width: $mq-xxl) {
    font-size: 125%;
  }
}

/**
 * Components
 */
.post {
  min-height: 100vh;
  width: 100%;
  
  border: 0.5em solid $color-white;
  
  @media (min-width: $mq-md) {
    display: flex;
    height: 100vh;
    min-height: 40em;
  }
  
  & > *:first-child {
    position: relative;
    
    height: 14em;
    
    background-color: $color-black;
    
    @media (min-width: $mq-sm) {
      height: 18em;
    }
    
    @media (min-width: $mq-md) {
      flex-basis: 50%;
      max-width: 50%;
      height: auto;
    }
    
    @media (min-width: $mq-xl) {
      flex-basis: 60%;
      max-width: 60%;
    }
  }
  
  & > *:last-child {
    
    @media (min-width: $mq-md) {
      flex-basis: 50%;
      max-width: 50%; 
    }
    
    @media (min-width: $mq-xl) {
      flex-basis: 40%;
      max-width: 40%;
    }
  }
  
  &__container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2em;
    
    overflow-y: auto;
  }
  
  &__category {
    position: relative;
    font-weight: 600;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    overflow: hidden;
    
    &:before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      
      height: 2px;
      width: 3em;

      background-color: $color-black;
      animation: slide-in 1s ease-in both 0.5s;
    }
  }
  
  &__content {
    padding: 2em 0;
    
    @media (min-width: $mq-md) {
      padding: 0 4em; 
    }
  }
  
  &__time {
    display: inline-block;
    margin-bottom: 0.5em;
    
    font-weight: 600;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  
  &__header {
    overflow: hidden;
    
    span {
      @include nth-animation-delay();

      display: inline-block;

      animation: slide-up 0.8s ease-in-out both;
    }
  }
  
  &__text {
    font-weight: 300;
    animation: fade-in 0.8s ease-in-out both 0.5s;
  }
  
  &__link {
    text-align: right;
  }
}

/**
 * Helpers
 */
.absolute-bg {
  position: absolute;
  top: 0;
  left: 0;

  height: 100%;
  width: 100%;

  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  animation: fade-in 0.8s ease-in-out both 1s;
}

/**
 * Animations
 */
@keyframes slide-in {
  0% { transform: translate3d(-100%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes slide-up {
  0% { opacity: 0; transform: translate3d(0, 100%, 0); }
  90% { opacity: 1; }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

styles

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,600,900" rel="stylesheet" />