feat: use margin to make card padding more flexible

src/scss/components/_cards.scss

@@ -11,11 +11,20 @@ $card-smallpad: $lineheight_half;
 @mixin card($size) {
     @include border-radius();
     background-color: $color-background-alt;
-	box-shadow: $large-shadow;
+    box-shadow: $large-shadow;
     border: none;
     margin:0;
     margin-bottom:$lineheight;
-    padding: $size;
+    & > * {
+      margin-left: $size;
+      margin-right: $size;
+      &:first-child {
+        margin-top: $size;
+      }
+      &:last-child {
+        margin-bottom: $size;
+      }
+    }
 }
 
 @mixin card-header($size) {
@@ -27,13 +36,15 @@ $card-smallpad: $lineheight_half;
     padding-right:0;
     padding-bottom: $size/2!important;
     margin-bottom:$lineheight_half;
+    margin-top:$lineheight_half;
     line-height:$lineheight;
     white-space: nowrap;
+    @include border-radius();
 
     position:relative;
     left: -$size*1.25;
 
-    width:95%;
+    width:85%;
 
     @include button-style($size);
 
@@ -62,7 +73,6 @@ $card-smallpad: $lineheight_half;
 
     &-body {
         padding:0!important;
-        margin:0!important;
     }
 
     &-header {

src/static/index.html

@@ -52,7 +52,6 @@
 	<section class="sidebar">
 		<div class="card card-info">
 		  <div class="card-header"><i class="fa fa-info"></i> Cémwha</div>
-		  <p class="mwarea"><img src="/img/avatar.png" alt="Une armée de cochon regarde de manière menaçante." class="mwaimg" /></p>
 		  <table style="width:100%" class="table-primary">
 		      <tr>
 		        <th>PSEUDO</th>
@@ -75,6 +74,7 @@
 		        <td>LibreOffice & Krita</td>
 		      </tr>
 		    </table>
+				<div class="card-header"><i class="fa fa-info"></i> Cétémwah</div>
 		</div>
 
 		<!--=include includes/components/_sidebar.html -->