From 095c944f3a5a1632e4988b5a409779305f3a88a1 Mon Sep 17 00:00:00 2001
From: Kazhnuz <antoine@sortilege.net>
Date: Sat, 25 May 2019 16:45:49 +0200
Subject: [PATCH] style/cards: add basic styling (sans shadows and radius)

---
 scss/_cards.scss |   7 ++-
 style.css        | 160 ++++++++++++++++++++++++++++++-----------------
 2 files changed, 107 insertions(+), 60 deletions(-)

diff --git a/scss/_cards.scss b/scss/_cards.scss
index e1f82dc..a59e698 100644
--- a/scss/_cards.scss
+++ b/scss/_cards.scss
@@ -10,13 +10,18 @@
 
 @mixin card-color($background-color, $text-color) {
   & > .card-header { background-color: $background-color; color:$text-color; }
+  border-color: $background-color;
 }
 
 .card {
   @include border-radius();
 	box-shadow: $large-shadow;
-  border: none;
+  border-style: solid;
+  border-width: 0px;
+  border-left-width: 3px;
   margin-bottom:1.2em;
+  border-color: $color-primary;
+  background-color: rgba(0,0,0,0.05);
 }
 
 .card {
diff --git a/style.css b/style.css
index cf80fb8..f46dacf 100644
--- a/style.css
+++ b/style.css
@@ -624,84 +624,126 @@ ul.social {
 .card {
   border-radius: 0px 0px 0px 0px;
   box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
-  border: none;
-  margin-bottom: 1.2em; }
+  border-style: solid;
+  border-width: 0px;
+  border-left-width: 3px;
+  margin-bottom: 1.2em;
+  border-color: #42a0f3;
+  background-color: rgba(0, 0, 0, 0.05); }
 
-.card-blue > .card-header {
-  background-color: #4e63c9;
-  color: #FFF; }
+.card-blue {
+  border-color: #4e63c9; }
+  .card-blue > .card-header {
+    background-color: #4e63c9;
+    color: #FFF; }
 
-.card-violet > .card-header {
-  background-color: #ce4dcd;
-  color: #FFF; }
+.card-violet {
+  border-color: #ce4dcd; }
+  .card-violet > .card-header {
+    background-color: #ce4dcd;
+    color: #FFF; }
 
-.card-purple > .card-header {
-  background-color: #7951c0;
-  color: #FFF; }
+.card-purple {
+  border-color: #7951c0; }
+  .card-purple > .card-header {
+    background-color: #7951c0;
+    color: #FFF; }
 
-.card-red > .card-header {
-  background-color: #e33d22;
-  color: #FFF; }
+.card-red {
+  border-color: #e33d22; }
+  .card-red > .card-header {
+    background-color: #e33d22;
+    color: #FFF; }
 
-.card-orange > .card-header {
-  background-color: #eb790a;
-  color: #FFF; }
+.card-orange {
+  border-color: #eb790a; }
+  .card-orange > .card-header {
+    background-color: #eb790a;
+    color: #FFF; }
 
-.card-green > .card-header {
-  background-color: #75b82d;
-  color: #FFF; }
+.card-green {
+  border-color: #75b82d; }
+  .card-green > .card-header {
+    background-color: #75b82d;
+    color: #FFF; }
 
-.card-skyblue > .card-header {
-  background-color: #42a0f3;
-  color: #FFF; }
+.card-skyblue {
+  border-color: #42a0f3; }
+  .card-skyblue > .card-header {
+    background-color: #42a0f3;
+    color: #FFF; }
 
-.card-dark > .card-header {
-  background-color: #2D2D2D;
-  color: #FFF; }
+.card-dark {
+  border-color: #2D2D2D; }
+  .card-dark > .card-header {
+    background-color: #2D2D2D;
+    color: #FFF; }
 
-.card-light > .card-header {
-  background-color: #eeeeec;
-  color: #111; }
+.card-light {
+  border-color: #eeeeec; }
+  .card-light > .card-header {
+    background-color: #eeeeec;
+    color: #111; }
 
-.card-turquoise > .card-header {
-  background-color: #46bd9e;
-  color: #FFF; }
+.card-turquoise {
+  border-color: #46bd9e; }
+  .card-turquoise > .card-header {
+    background-color: #46bd9e;
+    color: #FFF; }
 
-.card-yellow > .card-header {
-  background-color: #f6d32d;
-  color: #FFF; }
+.card-yellow {
+  border-color: #f6d32d; }
+  .card-yellow > .card-header {
+    background-color: #f6d32d;
+    color: #FFF; }
 
-.card-brown > .card-header {
-  background-color: #986a44;
-  color: #FFF; }
+.card-brown {
+  border-color: #986a44; }
+  .card-brown > .card-header {
+    background-color: #986a44;
+    color: #FFF; }
 
-.card-grey > .card-header {
-  background-color: #77767b;
-  color: #FFF; }
+.card-grey {
+  border-color: #77767b; }
+  .card-grey > .card-header {
+    background-color: #77767b;
+    color: #FFF; }
 
-.card-primary > .card-header {
-  background-color: #42a0f3;
-  color: #FFF; }
+.card-primary {
+  border-color: #42a0f3; }
+  .card-primary > .card-header {
+    background-color: #42a0f3;
+    color: #FFF; }
 
-.card-secondary > .card-header {
-  background-color: #2D2D2D;
-  color: #FFF; }
+.card-secondary {
+  border-color: #2D2D2D; }
+  .card-secondary > .card-header {
+    background-color: #2D2D2D;
+    color: #FFF; }
 
-.card-warning > .card-header {
-  background-color: #eb790a;
-  color: #FFF; }
+.card-warning {
+  border-color: #eb790a; }
+  .card-warning > .card-header {
+    background-color: #eb790a;
+    color: #FFF; }
 
-.card-danger > .card-header {
-  background-color: #e33d22;
-  color: #FFF; }
+.card-danger {
+  border-color: #e33d22; }
+  .card-danger > .card-header {
+    background-color: #e33d22;
+    color: #FFF; }
 
-.card-info > .card-header {
-  background-color: #42a0f3;
-  color: #FFF; }
+.card-info {
+  border-color: #42a0f3; }
+  .card-info > .card-header {
+    background-color: #42a0f3;
+    color: #FFF; }
 
-.card-success > .card-header {
-  background-color: #75b82d;
-  color: #FFF; }
+.card-success {
+  border-color: #75b82d; }
+  .card-success > .card-header {
+    background-color: #75b82d;
+    color: #FFF; }
 
 .card-shadow {
   box-shadow: 0px 2px 10px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }