unbreak cards
This commit is contained in:
Kazhnuz
parent
053a3ff09b
commit
245f2d0ef4
2 changed files with 36 additions and 78 deletions
|
|
@ -61,30 +61,17 @@ footer {
|
||||||
|
|
||||||
/* ------------------ PANELS ------------------- */
|
/* ------------------ PANELS ------------------- */
|
||||||
|
|
||||||
.panel {
|
.card {
|
||||||
margin-bottom: 20px;
|
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3);
|
||||||
background-color: #FFF;
|
|
||||||
border-radius: 3px;
|
|
||||||
border-top-left-radius: 5px;
|
|
||||||
border-top-right-radius: 5px;
|
|
||||||
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.3);
|
|
||||||
border-color: rgba(0,0,0,0.15);
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-heading {
|
|
||||||
border-top-left-radius:3px;
|
|
||||||
border-top-right-radius:3px;
|
|
||||||
border-width:0px;
|
border-width:0px;
|
||||||
|
margin-bottom:1.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-noheader {
|
.card-shadow {
|
||||||
border-top-left-radius: 3px;
|
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
|
||||||
border-top-right-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-title {
|
.card-title {
|
||||||
color:#FFF;
|
color:#FFF;
|
||||||
text-align:center;
|
text-align:center;
|
||||||
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
|
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
|
||||||
|
|
@ -92,27 +79,29 @@ footer {
|
||||||
|
|
||||||
/* meta */
|
/* meta */
|
||||||
|
|
||||||
.article-meta .media-left .media-object {
|
.card-meta {
|
||||||
|
padding:1em;
|
||||||
|
border-bottom:1px solid rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-meta.media {
|
||||||
|
-ms-flex-align: center !important;
|
||||||
|
align-items: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-meta .media-left .media-object {
|
||||||
height: 64px;
|
height: 64px;
|
||||||
width: 64px;
|
width: 64px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
margin-right:1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-meta author {
|
.card-meta author {
|
||||||
display:block;
|
display:block;
|
||||||
font-weight:600;
|
font-weight:600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-meta .media-body {
|
.card-meta time {
|
||||||
padding-top:8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-meta {
|
|
||||||
margin-bottom:15px;
|
|
||||||
margin-left:15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-meta time {
|
|
||||||
display:block;
|
display:block;
|
||||||
font-style:italic;
|
font-style:italic;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
61
index.html
61
index.html
|
|
@ -89,12 +89,12 @@
|
||||||
|
|
||||||
<article>
|
<article>
|
||||||
|
|
||||||
<section class="panel panel-success">
|
<section class="card card-success">
|
||||||
<div class="panel-heading">
|
<div class="card-header">
|
||||||
<h2 class="panel-title">Nom de l'article :</h2>
|
<h2 class="card-title">Nom de l'article :</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="panel-body">
|
<div class="card-body">
|
||||||
<ul>
|
<ul>
|
||||||
<li>1 - Filmographie de Joachim du Poulet
|
<li>1 - Filmographie de Joachim du Poulet
|
||||||
<ul>
|
<ul>
|
||||||
|
|
@ -142,8 +142,8 @@ In id suscipit elit.</code></pre>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
<section class="panel panel-noheader">
|
<section class="card card-noheader">
|
||||||
<div class="media article-meta panel-body">
|
<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-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="media-body"><author class="media-heading">Écrit par <a href="" >Pseudo</a></author><time> Le vendredi 19 septembre 2014 à 07:16 </time></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -154,42 +154,11 @@ In id suscipit elit.</code></pre>
|
||||||
<section class="commentaires">
|
<section class="commentaires">
|
||||||
<h3 class="titre-commentaires">Commentaires :</h3>
|
<h3 class="titre-commentaires">Commentaires :</h3>
|
||||||
|
|
||||||
<article class="panel panel-noheader">
|
|
||||||
<div class="panel-body">
|
|
||||||
<div class="media article-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>
|
|
||||||
|
|
||||||
<p>First !</p>
|
|
||||||
|
|
||||||
<div class="reagir"><i class="fa fa-quote"></i> <i class="fa fa-arrow"></i></div>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="panel panel-noheader">
|
|
||||||
<div class="panel-body">
|
|
||||||
|
|
||||||
<div class="media article-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>
|
|
||||||
|
|
||||||
<blockquote>
|
|
||||||
<p><strong>Écrit par Pseudo le XX septembre XXXX :</strong></p>
|
|
||||||
<p>First !</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
<p>Sérieux mais brulons-le.</p>
|
|
||||||
<div class="reagir"><i class="fa fa-quote"></i> <i class="fa fa-arrow"></i></div>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<aside class="sidebar col-md-3">
|
<aside class="sidebar col-md-3">
|
||||||
<section class="panel panel-primary">
|
<section class="card card-primary">
|
||||||
<div class="panel-heading">
|
<div class="card-header">
|
||||||
<h3 class="panel-title">Catégories</h3>
|
<h3 class="card-title">Catégories</h3>
|
||||||
</div>
|
</div>
|
||||||
<ul class="list-group">
|
<ul class="list-group">
|
||||||
<li class="no-pills"><a class="list-group-item"><i class="fa fa-folder-open"></i> Lorem <span class="badge">3</span></a></li>
|
<li class="no-pills"><a class="list-group-item"><i class="fa fa-folder-open"></i> Lorem <span class="badge">3</span></a></li>
|
||||||
|
|
@ -199,9 +168,9 @@ In id suscipit elit.</code></pre>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="panel panel-warning">
|
<section class="card card-warning">
|
||||||
<div class="panel-heading">
|
<div class="card-header">
|
||||||
<h3 class="panel-title"> Archive</h3>
|
<h3 class="card-title"> Archive</h3>
|
||||||
</div>
|
</div>
|
||||||
<ul class="list-group">
|
<ul class="list-group">
|
||||||
<li class="no-pills"><a class="list-group-item">1986 <span class="badge">3</span></a></li>
|
<li class="no-pills"><a class="list-group-item">1986 <span class="badge">3</span></a></li>
|
||||||
|
|
@ -212,9 +181,9 @@ In id suscipit elit.</code></pre>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="panel panel-danger">
|
<section class="card card-danger">
|
||||||
<div class="panel-heading">
|
<div class="card-header">
|
||||||
<h3 class="panel-title">Navigation</h3>
|
<h3 class="card-title">Navigation</h3>
|
||||||
</div>
|
</div>
|
||||||
<ul class="list-group">
|
<ul class="list-group">
|
||||||
<li class="no-pills"><a class="list-group-item">Forum</a></li>
|
<li class="no-pills"><a class="list-group-item">Forum</a></li>
|
||||||
|
|
|
||||||
Reference in a new issue