From 4a0c860a04594b35eb3d7a3214b96343c4e9a4ec Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Thu, 10 Nov 2016 14:31:25 +0000
Subject: [PATCH] Make border around letter neater

The drop shadow stolen from GOV.UK was a bit crude; this commit makes
it a bit more refined.

Also makes things line up a bit better.
---
 app/assets/stylesheets/components/letter.scss | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/letter.scss b/app/assets/stylesheets/components/letter.scss
index 825968d46..009c53286 100644
--- a/app/assets/stylesheets/components/letter.scss
+++ b/app/assets/stylesheets/components/letter.scss
@@ -1,6 +1,13 @@
+$outline-width: 5px;
+
 .letter {
   font-family: Helvetica, Arial, sans-serif;
-  box-shadow: 0 2px 2px rgba($text-colour, 0.4);
-  outline: 5px solid rgba($text-colour, 0.1);
+  box-shadow:
+  1px 1px 0 0 $panel-colour,
+  2px 2px 0 0 rgba($panel-colour, 0.5),
+  -1px 1px 0 0 $panel-colour,
+  -2px 2px 0 0 rgba($panel-colour, 0.5);
+  outline: $outline-width solid rgba($text-colour, 0.1);
   padding: 20px;
+  margin: $outline-width $outline-width $gutter;
 }