From 152b1f525682f5279f2589aabe89dbaf87ee02ec Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 6 Mar 2018 15:50:56 +0000
Subject: [PATCH] Fix border around letter images

Things in CSS stack top to bottom like this:
- image
- `box-shadow`
- `background`

We are drawing the border around the letter using `box-shadow`. This was
working fine because the images of our letters had a transparent
background, so you could see the border through them.

At some point our letters have changed to have a white background. So
you can no longer see the border.

This commit:
- adds a new pseudo element which stacks above the image of the letter
- moves the border from the image itself to said pseudo element
---
 app/assets/stylesheets/components/letter.scss | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/components/letter.scss b/app/assets/stylesheets/components/letter.scss
index bfe193fa4..61cc2f28b 100644
--- a/app/assets/stylesheets/components/letter.scss
+++ b/app/assets/stylesheets/components/letter.scss
@@ -28,11 +28,20 @@ $iso-paper-ratio: 141.42135624%;
     width: 0px;
   }
 
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-shadow: inset 0 0 0 1px $border-colour;
+  }
+
   img {
     display: block;
     width: 100%;
     background: $white;
-    box-shadow: inset 0 0 0 1px $border-colour;
     position: absolute;
     top: 0;
     left: 0;