<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/chrisburton/pen/dlFky?limit=all&page=3&q=comment" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i");
* {
box-sizing: border-box;
}
a, a:hover {
-webkit-transition: .25s color linear;
transition: .25s color linear;
}
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
article time, article:hover time,
.icon-rocknroll, .like-count {
-webkit-transition: .25s opacity linear;
transition: .25s opacity linear;
}
/*
|---------------------------------
|
| Project Start
|
|---------------------------------
*/
html {
font-size: 16px;
}
html body {
color: #444;
font-family: 'Source Sans Pro', sans-serif;
font-size: 1rem;
font-weight: 300;
line-height: 1.65;
margin: 50px 0;
padding: 0 25px;
}
html body .comments {
max-width: 450px;
margin: 50px auto;
}
html body .comments article {
position: relative;
border-bottom: solid 1px rgba(178, 179, 153, 0.125);
margin: 0 auto 50px auto;
}
html body .comments article:last-child {
border: none;
}
html body .comments article:hover time {
opacity: 1;
}
html body .comments article img {
position: absolute;
top: -10px;
left: -75px;
width: 50px;
height: 50px;
border-width: 0;
border-radius: 100%;
}
html body .comments article h4 {
display: inline-block;
font-weight: 400;
margin-bottom: 25px;
}
html body .comments article h4 a {
color: #404040;
text-transform: lowercase;
text-decoration: none;
}
html body .comments article h4 a:hover {
color: #BFBFA8;
}
html body .comments article time {
color: #545454;
margin-left: 1rem;
text-transform: uppercase;
}
html body .comments article .icon-rocknroll {
color: #545454;
font-size: .85rem;
}
html body .comments article .icon-rocknroll:hover {
opacity: .5;
}
html body .comments article time,
html body .comments article .like-count,
html body .comments article .icon-rocknroll {
font-size: .75rem;
opacity: 0;
}
html body .comments article time, html body .comments article .like-count {
font-weight: 300;
}
html body .comments article p {
margin-bottom: 50px;
}
html body .comments article p .reply {
color: #BFBFA8;
cursor: pointer;
}
html body .comments article .active {
opacity: 1;
}
.like-data {
float: right;
}
.icon-rocknroll {
background: none;
border: 0;
outline: none;
cursor: pointer;
margin: 0 .125rem 0 0;
padding: 0;
}
.comments article:hover .icon-rocknroll,
.comments article:hover .like-count {
opacity: 1;
}
@media (max-width: 650px) {
.comments {
width: 100%;
padding: 0 1rem;
}
.comments article {
width: 90%;
}
.comments article #profile-photo {
position: relative;
left: -1rem;
display: inline-block;
vertical-align: middle;
}
.comments article h4 {
display: inline-block;
vertical-align: middle;
}
.comments article h4 time {
display: block;
margin-left: 0 !important;
opacity: .5 !important;
}
}
</style></head><body>
<section id="app" class="comments">
<article>
<img id="profile-photo" src="https://en.gravatar.com/userimage/18343163/3fd908393aedf6423ec12cacec9a1f50.jpg?size=200" />
<h4><a href="#">chrisburton</a></h4>
<time>5 months ago</time>
<like></like>
<p>Thank you for visiting all the way from New York. This is just a test to determine if the Twitter API is working as it should. You should see your profile image and your username at the very top that links to your account. You should also see that
I wrote in a thank you introduction with your location.</p>
</article>
<article>
<img id="profile-photo" src="https://d17oy1vhnax1f7.cloudfront.net/items/0W2c1j2B0S0v3X0Z4407/Screen%20Shot%202017-01-28%20at%201.01.44%20AM.png" />
<h4><a href="#">AnnaWintour</a></h4> <time>1 month ago</time>
<like></like>
<p>
<span class="reply">@chrisburton</span> +1. Really interesting reply.
</p>
</article>
<article>
<img id="profile-photo" src="https://25.media.tumblr.com/avatar_c5eeb4b2e95b_128.png" />
<h4><a href="#">wooster</a></h4>
<time>2 weeks ago</time>
<like></like>
<p>Thank you for visiting all the way from an unknown location. This is just a test to determine if the Twitter API is working as it should. You should see your profile image and your username at the very top that links to your account. You should also
see that I wrote in a thank you introduction with your location.</p>
</article>
<article>
<img id="profile-photo" src="https://randomuser.me/api/portraits/men/32.jpg" />
<h4><a href="#">randomuser3</a></h4>
<time>1 week ago</time>
<like></like>
<p>Thank you for visiting all the way from NYC. This is just a test to determine if the Twitter API is working as it should. You should see your profile image and your username at the very top that links to your account. You should also see that I wrote
in a thank you introduction with your location.</p>
</article>
<article>
<img id="profile-photo" src="https://randomuser.me/api/portraits/women/19.jpg" />
<h4><a href="#">cathater_</a></h4>
<time>3 days ago</time>
<like></like>
<p>Thank you for visiting all the way from New York, NY.</p>
</article>
<article>
<img id="profile-photo" src="https://randomuser.me/api/portraits/men/58.jpg" />
<h4><a href="#">edwardshair</a></h4>
<time>5 minutes ago</time>
<like></like>
<p>Thank you for visiting all the way from San Francisco, CA. This is just a test to determine if the Twitter API is working as it should. You should see your profile image and your username at the very top that links to your account. You should also
see that I wrote in a thank you introduction with your location.</p>
</article>
</section>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.14/vue.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.0.0/caman.full.min.js'></script>
<script >// Design: Chris Burton
// URL: chrisburton.me
// JS by: https://github.com/vitorarjol
Vue.component('like', {
template: "<div class='like-data'><button class='icon-rocknroll' v-class='active: liked' v-on='click: toggleLike'>♥</button><span class='like-count' v-class='active: liked'>{{ likesCount }}</span></div>",
data: function() {
return {
liked: false,
likesCount: 0
}
},
methods: {
toggleLike: function() {
this.liked = !this.liked;
this.liked ? this.likesCount++ : this.likesCount--;
}
}
});
new Vue({
el: '#app',
});
//# sourceURL=pen.js
</script>
</body></html>
