improvement: rework comment headers
This commit is contained in:
parent
0ffa2940bb
commit
edacd881c3
5 changed files with 73 additions and 16 deletions
|
@ -685,8 +685,8 @@ ul.social li a:hover {
|
||||||
.card .card-body {
|
.card .card-body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.card .card-body:not(:first-child) {
|
.card .card-body:not(:last-child) {
|
||||||
padding-top: 1em;
|
padding-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
.card-header {
|
.card-header {
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
|
@ -1543,4 +1543,30 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.author-area {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.author-area img.author-avatar {
|
||||||
|
display: block;
|
||||||
|
height: 4.5rem;
|
||||||
|
width: auto;
|
||||||
|
border-radius: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
margin-right: 1.5rem;
|
||||||
|
}
|
||||||
|
.author-area .author-metadata {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.author-area .author-date {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.author-area:not(:last-child) {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
/*# sourceMappingURL=style.css.map */
|
/*# sourceMappingURL=style.css.map */
|
||||||
|
|
File diff suppressed because one or more lines are too long
23
index.html
23
index.html
|
@ -112,10 +112,13 @@ In id suscipit elit.</code></pre>
|
||||||
|
|
||||||
|
|
||||||
<section class="card card-noheader">
|
<section class="card card-noheader">
|
||||||
<div class="media card-meta">
|
<div class="author-area">
|
||||||
<div class="media-left"><a href="#"><img class="media-object" src="img/avatar.png" alt="..."></a></div>
|
<img src="img/avatar.png" class="author-avatar" alt="...">
|
||||||
<div class="media-body"><author class="media-heading">Écrit par <a href="" >Pseudo</a></author><time> Le vendredi 19 septembre 2014 à 07:16 </time></div>
|
<div class="author-metadata">
|
||||||
</div>
|
<div class="author-pseudo">Écrit par <a href="" >Pseudo</a></div>
|
||||||
|
<small class="author-date">Le vendredi 19 septembre 2014 à 07:16</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
|
@ -192,13 +195,11 @@ In id suscipit elit.</code></pre>
|
||||||
<h1>Commentaires :</h1>
|
<h1>Commentaires :</h1>
|
||||||
|
|
||||||
<article class="card comment">
|
<article class="card comment">
|
||||||
<div class="comment-header tile tile-centered">
|
<div class="author-area">
|
||||||
<div class="comment-avatar tile-icon">
|
<img src="img/avatar.png" class="author-avatar" alt="...">
|
||||||
<figure class="avatar avatar-xl"><img src="img/avatar.png" alt="..."></a></figure>
|
<div class="author-metadata">
|
||||||
</div>
|
<div class="author-pseudo">Écrit par <a href="" >Pseudo</a></div>
|
||||||
<div class="comment-info tile-content">
|
<small class="author-date">Le vendredi 19 septembre 2014 à 07:16</small>
|
||||||
<div class="tile-title">Écrit par <a href="" >Pseudo</a></div>
|
|
||||||
<small class="tile-subtitle text-gray">Le vendredi 19 septembre 2014 à 07:16</small>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
|
|
|
@ -48,8 +48,8 @@ $card-smallpad: 0.75rem;
|
||||||
|
|
||||||
.card-body {
|
.card-body {
|
||||||
padding:0;
|
padding:0;
|
||||||
&:not(:first-child) {
|
&:not(:last-child) {
|
||||||
padding-top: 1em;
|
padding-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -148,3 +148,33 @@
|
||||||
margin-bottom:0.4em;
|
margin-bottom:0.4em;
|
||||||
display:block;
|
display:block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.author-area {
|
||||||
|
display:flex;
|
||||||
|
|
||||||
|
img.author-avatar {
|
||||||
|
display:block;
|
||||||
|
height: 4.5rem;
|
||||||
|
width:auto;
|
||||||
|
border-radius:100%;
|
||||||
|
padding:0;
|
||||||
|
margin:0;
|
||||||
|
margin-right:1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author-metadata {
|
||||||
|
align-items:center;
|
||||||
|
display:flex;
|
||||||
|
flex-direction:column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author-date {
|
||||||
|
font-style:italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-bottom:1.5rem;
|
||||||
|
}
|
||||||
|
}
|
Reference in a new issue