Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dribbble #02
<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>
// https://dribbble.com/shots/3233474-Photo-Blog
/**
* 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; }
}
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,600,900" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment