From 44c8aa3c9e558e9ced939e5c95c229c3ecea607b Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sun, 12 Jun 2016 16:36:25 +0200
Subject: [PATCH] tweak alert styles

---
 _src/_assets/styl/_kremalicious/alerts.styl | 28 ++++++++++++---------
 _src/styleguide.md                          | 17 +++++++++++++
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/_src/_assets/styl/_kremalicious/alerts.styl b/_src/_assets/styl/_kremalicious/alerts.styl
index e17b9ab6..cbb26da4 100644
--- a/_src/_assets/styl/_kremalicious/alerts.styl
+++ b/_src/_assets/styl/_kremalicious/alerts.styl
@@ -4,31 +4,35 @@
 // Alerts
 //
 
+$alert-info          = #f7f1e4
+$alert-success       = #dff0d8
+$alert-error         = #f2dede
+
 .alert
-    padding: $padding-base-vertical $padding-base-horizontal
+    padding: $spacer
     margin-bottom: $spacer
     border-radius: $border-radius-base
-    font-size: $font-size-small
     border: 1px solid transparent
+    box-shadow: 0 1px 3px rgba($brand-grey, .1), inset 0 1px 0 #fff
 
     > p,
     > ul
         margin-bottom: 0
     > p + p
-        margin-top: 5px
+        margin-top: $spacer
 
 .alert-success
-    color: #468847
-    background: #dff0d8
-    border-color: darken(#dff0d8, 5%)
+    color: darken($alert-success, 60%)
+    background: $alert-success
+    border-color: darken($alert-success, 10%)
 
 .alert-danger,
 .alert-error
-    color: #b94a48
-    background: #f2dede
-    border-color: darken(#f2dede, 5%)
+    color: darken($alert-error, 60%)
+    background: $alert-error
+    border-color: darken($alert-error, 10%)
 
 .alert-info
-    color: #3a87ad
-    background: #d9edf7
-    border-color: darken(#d9edf7, 5%)
+    color: darken($alert-info, 60%)
+    background: $alert-info
+    border-color: darken($alert-info, 10%)
diff --git a/_src/styleguide.md b/_src/styleguide.md
index 33d1fbd7..75b9ea2b 100644
--- a/_src/styleguide.md
+++ b/_src/styleguide.md
@@ -733,6 +733,23 @@ Forms can be used when you wish to collect data from users. The `fieldset` eleme
 
 Design and mark-up patterns unique to this site.
 
+### Alerts
+
+<div class="alert alert-info">
+    <p>I'm sure those windmills will keep them cool. Interesting. No, wait, the other thing: tedious. But, like most politicians, he promised <a href="#">more than he could</a> deliver. Why not indeed! We're rescuing ya.</p>
+    <p>Isn't it true that you have been paid for your testimony? Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Oh right. I forgot about the battle. Who are those horrible orange men?</p>
+</div>
+
+<div class="alert alert-success">
+    <p>I'm sure those windmills will keep them cool. Interesting. No, wait, the other thing: tedious. But, like most politicians, he promised <a href="#">more than he could</a> deliver. Why not indeed! We're rescuing ya.</p>
+    <p>Isn't it true that you have been paid for your testimony? Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Oh right. I forgot about the battle. Who are those horrible orange men?</p>
+</div>
+
+<div class="alert alert-error">
+    <p>I'm sure those windmills will keep them cool. Interesting. No, wait, the other thing: tedious. But, like most politicians, he promised <a href="#">more than he could</a> deliver. Why not indeed! We're rescuing ya.</p>
+    <p>Isn't it true that you have been paid for your testimony? Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Oh right. I forgot about the battle. Who are those horrible orange men?</p>
+</div>
+
 ### Pagination
 
 <nav class="paginator">