kazhnuz/kazhnuz.css
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

improvement: rework comment headers

Browse source
This commit is contained in:
Kazhnuz 2019-10-17 10:26:19 +02:00
parent 0ffa2940bb
commit edacd881c3
5 changed files with 73 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
css/style.css
View file

@ -685,8 +685,8 @@ ul.social li a:hover {
.card .card-body {
padding: 0;
}
.card .card-body:not(:first-child) {
padding-top: 1em;
.card .card-body:not(:last-child) {
padding-bottom: 1.5rem;
}
.card-header {
font-size: 1.1em;
@ -1543,4 +1543,30 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
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 */

2
css/style.css.map
View file

File diff suppressed because one or more lines are too long

21
index.html
View file

@ -112,9 +112,12 @@ In id suscipit elit.</code></pre>
<section class="card card-noheader">
<div class="media card-meta">
<div class="media-left"><a href="#"><img class="media-object" src="img/avatar.png" alt="..."></a></div>
<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-area">
<img src="img/avatar.png" class="author-avatar" alt="...">
<div class="author-metadata">
<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>
@ -192,13 +195,11 @@ In id suscipit elit.</code></pre>
<h1>Commentaires :</h1>
<article class="card comment">
<div class="comment-header tile tile-centered">
<div class="comment-avatar tile-icon">
<figure class="avatar avatar-xl"><img src="img/avatar.png" alt="..."></a></figure>
</div>
<div class="comment-info tile-content">
<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 class="author-area">
<img src="img/avatar.png" class="author-avatar" alt="...">
<div class="author-metadata">
<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>
<div class="card-body">

4
scss/_cards.scss
View file

@ -48,8 +48,8 @@ $card-smallpad: 0.75rem;
.card-body {
padding:0;
&:not(:first-child) {
padding-top: 1em;
&:not(:last-child) {
padding-bottom: 1.5rem;
}
}

30
scss/_commons.scss
View file

@ -148,3 +148,33 @@
margin-bottom:0.4em;
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;
}
}