<div class="container">
<updatefy-custom-widget widget-uuid="7a9e7994-5efa-4cdd-a7e4-e7b3b79bbc5a">
<div class="show-when-ready">
<div class="column" v-for="post in data" :key="post.key">
<div class="post-module">
<div class="thumbnail">
<div class="date">
<div class="year">{{ post.date }}</div>
</div>
<img v-bind:src="post.image"/>
</div>
<div class="post-content">
<div class="category">{{ post.tags }}</div>
<h1 class="title">{{ post.title }}</h1>
<p class="description">{{ post.description }}</p>
<div class="post-meta">
<span class="comments">
<i class="fa fa-comments"></i>
<a href="#">{{ post.comments }} comments</a>
</span>
</div>
</div>
</div>
</div>
</div>
</updatefy-custom-widget>
</div>
<script src="https://updatefy.co/widget.js"></script>
@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-97/variables.less';
@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/mixins.less';
@accent: #02DEAD;
body {
background: darken(@white, 5%);
font-family: 'proxima-nova-soft', sans-serif;
font-size: 14px;
.font-smoothing;
}
.show-when-ready {
display: none;
}
.post-module {
position: relative;
z-index: 1;
display: block;
background: @white;
min-width: 270px;
height: 470px;
.box-shadow;
.transitions;
cursor: pointer;
&:hover {
.box-shadow(@blur: 35px; @color: fade(@black, 30%););
.thumbnail {
img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
opacity: .6;
}
}
.post-content {
.description {
display: block;
height: auto;
}
}
}
.thumbnail {
background: @black;
height: 400px;
overflow: hidden;
.date {
position: absolute;
top: 20px;
right: 20px;
z-index: 1;
background: @accent;
width: 55px;
height: 55px;
padding: 12.5px 0;
.border-radius(100%);
color: @white;
font-weight: 700;
text-align: center;
.box-size;
.year {
font-size: 18px;
padding-top: 5px;
}
}
img {
display: block;
width: 120%;
.transitions;
}
}
.post-content {
position: absolute;
bottom: 0;
background: @white;
width: 100%;
padding: 30px;
.box-size;
.transitions(@timing: cubic-bezier(.37,.75,.61,1.05));
.category {
position: absolute;
top: -34px;
left: 0;
background: @accent;
padding: 10px 15px;
color: @white;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
}
.title {
margin: 0;
padding: 0 0 10px;
color: @dark_gray;
font-size: 26px;
font-weight: 700;
}
.description {
display: none;
color: @gray;
font-size: 14px;
line-height: 1.8em;
}
.post-meta {
margin: 30px 0 0;
color: @light_gray;
.timestamp {
margin: 0 16px 0 0;
}
a {
color: @light_gray;
text-decoration: none;
}
}
}
}
.container {
max-width: 800px;
min-width: 640px;
margin: 0 auto;
&:before,
&:after {
content: '';
display: block;
clear: both;
}
.column {
width: 50%;
padding: 0 25px;
margin: 20px 0px;
.box-size;
float: left;
}
}
View Compiled
