From 245f2d0ef453554d9e6b4090450530d3bcf05fdd Mon Sep 17 00:00:00 2001
From: Kazhnuz <antoine@sortilege.net>
Date: Fri, 8 Jun 2018 00:55:56 +0200
Subject: [PATCH] unbreak cards

---
 css/style.css | 53 ++++++++++++++++++--------------------------
 index.html    | 61 +++++++++++++--------------------------------------
 2 files changed, 36 insertions(+), 78 deletions(-)

diff --git a/css/style.css b/css/style.css
index 04cb9ab..39085a4 100644
--- a/css/style.css
+++ b/css/style.css
@@ -61,30 +61,17 @@ footer {
 
 /* ------------------ PANELS ------------------- */
 
-.panel {
-  margin-bottom: 20px;
-  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;
+.card {
+	box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3);
+  border-width:0px;
+  margin-bottom:1.2em;
 }
 
-.panel-heading {
-	border-top-left-radius:3px;
-	border-top-right-radius:3px;
-	border-width:0px;
+.card-shadow {
+  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
 }
 
-.panel-noheader {
-	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
-}
-
-.panel-title {
+.card-title {
 	color:#FFF;
 	text-align:center;
 	text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
@@ -92,27 +79,29 @@ footer {
 
 /* 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;
 	width: 64px;
 	border-radius: 10px;
+  margin-right:1em;
 }
 
-.article-meta author {
+.card-meta author {
 	display:block;
 	font-weight:600;
 }
 
-.article-meta .media-body {
-	padding-top:8px;
-}
-
-.article-meta {
-	margin-bottom:15px;
-	margin-left:15px;
-}
-
-.article-meta time {
+.card-meta time {
 	display:block;
 	font-style:italic;
 }
diff --git a/index.html b/index.html
index 5db1462..e5e3760 100644
--- a/index.html
+++ b/index.html
@@ -89,12 +89,12 @@
 
 <article>
 
-<section class="panel panel-success">
-<div class="panel-heading">
-	<h2 class="panel-title">Nom de l'article :</h2>
+<section class="card card-success">
+<div class="card-header">
+	<h2 class="card-title">Nom de l'article :</h2>
 </div>
 
-<div class="panel-body">
+<div class="card-body">
 <ul>
 	<li>1 - Filmographie de Joachim du Poulet
 		<ul>
@@ -142,8 +142,8 @@ In id suscipit elit.</code></pre>
 </section>
 
 
-<section class="panel panel-noheader">
-<div class="media article-meta panel-body">
+<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>
@@ -154,42 +154,11 @@ In id suscipit elit.</code></pre>
 <section class="commentaires">
 <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>
 <aside class="sidebar col-md-3">
-  <section class="panel panel-primary">
-    <div class="panel-heading">
-      <h3 class="panel-title">Catégories</h3>
+  <section class="card card-primary">
+    <div class="card-header">
+      <h3 class="card-title">Catégories</h3>
     </div>
     <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>
@@ -199,9 +168,9 @@ In id suscipit elit.</code></pre>
     </ul>
   </section>
 
-  <section class="panel panel-warning">
-    <div class="panel-heading">
-      <h3 class="panel-title"> Archive</h3>
+  <section class="card card-warning">
+    <div class="card-header">
+      <h3 class="card-title"> Archive</h3>
     </div>
     <ul class="list-group">
       <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>
   </section>
 
-  <section class="panel panel-danger">
-    <div class="panel-heading">
-      <h3 class="panel-title">Navigation</h3>
+  <section class="card card-danger">
+    <div class="card-header">
+      <h3 class="card-title">Navigation</h3>
     </div>
     <ul class="list-group">
       <li class="no-pills"><a class="list-group-item">Forum</a></li>