%ul#comments
%li
%em.time
20. August 2013, 08:18 Uhr
%div.user
%img{:src => "https://si0.twimg.com/profile_images/1522080224/me.jpg"}
%h3 emgerold
%div.info
%blockquote
Websiten sollten so automatisch und einfach zu bedienen sein, wie das Abschliessen einer oeffentlichen Toilette.
%div.entry
%h2
Li Europan lingues
%p
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
%div.options
%a{:href => 'javascript:void(0);'} Reply
%a{:href => 'javascript:void(0);'} Like
%li
%em.time
20. September 2013, 15:18 Uhr
%div.user
%img{:src => "http://img.dummy-image-generator.com/people/dummy-150x150-BodyLanguage.jpg"}
%h3 User356
%div.info
%blockquote
All the people like us are we, and everyone else is They.
%div.entry
%h2
Far far away
%p
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
%div.options
%a{:href => 'javascript:void(0);'} Reply
%a{:href => 'javascript:void(0);'} Like
%li
%em.time
02. Januar 2013, 12:01 Uhr
%div.user
%img{:src => "http://files.softicons.com/download/web-icons/user-icons-by-mike-demetriou/png/256/user%20grey.png"}
%h3 Example22
%div.info
%blockquote
Many are called but few get up.
%div.entry
%h2
A wonderful serenity
%p
A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.
%div.options
%a{:href => 'javascript:void(0);'} Reply
%a{:href => 'javascript:void(0);'} Like
%li
%em.time
20. August 2013, 08:18 Uhr
%div.user
%img{:src => "http://img.dummy-image-generator.com/people/dummy-150x150-BodyLanguage.jpg"}
%h3 Flower82
%div.info
%blockquote
If I didn't choose art, I would have become an astronomer.
%div.entry
%h2
Li Europan lingues
%p
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
%div.options
%a{:href => 'javascript:void(0);'} Reply
%a{:href => 'javascript:void(0);'} Like
View Compiled
@import "compass/css3";
/* User styles
included from: https://codepen.io/emgerold/pen/ApuCg
*/
#comments {
width:70%;
margin:30px auto;
li {
padding:15px 15px 25px;
border-bottom:1px solid #252525;
position:relative;
overflow:hidden;
.user {
max-width:70%;
}
.time {
float:right;
line-height:50px;
font-size:12px;
font-style:italic;
}
.entry {
padding:0 69px;
h2 {
font-size:20px;
margin-bottom:15px;
color:#AEACAC;
}
p {
line-height:1.2;
}
}
.options {
position:absolute;
right:-138px;
bottom:15px;
line-height:23px;
width:150px;
box-shadow:0 0 3px 0 rgba(0,0,0,0);
transition:all .4s ease-in;
&:before {
content:"";
display:inline-block;
width:0;
height:0;
border-style:solid;
border-width:12px 0 12px 12px;
border-color:transparent #D4AA03;
position:relative;
left:0px;
float:left;
cursor:pointer;
}
> a {
color:#D4AA03;
text-decoration:none;
font-size:12px;
padding:0 5px;
border-right:1px solid #D4AA03;
&:first-child {
margin-left:12px;
}
&:last-child {
border-right:0;
}
&:hover {
text-decoration:underline;
}
}
&:hover {
right:0;
background:#252525;
&:before {
border-width:12px 12px 12px 0px;
left:-12px;
}
}
}
}
}
View Compiled
