From 6f7255d842f9ac8b9bacee84b59d90fb39245a4d Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 28 Dec 2016 10:18:41 +0000
Subject: [PATCH] Draw the folded half of the letter with CSS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Users might wonder why they can’t see the whole letter. We should make
it obvious that it’s because the letter is folded. We can use CSS to
draw the bottom half of the page behind the top half. With some
transforms this makes it look like the letter is actually folded.

It’s a bit skeumorphic but:
- I think it achives the desired effect
- the way we show emails and text messages is also mildly skeuomorphic
---
 app/assets/stylesheets/components/letter.scss | 57 +++++++++++++++----
 1 file changed, 46 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/components/letter.scss b/app/assets/stylesheets/components/letter.scss
index 2f2f518fc..c74574315 100644
--- a/app/assets/stylesheets/components/letter.scss
+++ b/app/assets/stylesheets/components/letter.scss
@@ -1,26 +1,61 @@
-$outline-width: 5px;
+$iso-paper-ratio: 70.7%;
 
 .letter {
 
   font-family: Helvetica, Arial, sans-serif;
-  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: 0;
-  margin: $outline-width $outline-width $gutter;
-  height: 50%;
-  overflow: hidden;
+  margin: 0 0 $gutter 0;
+  position: relative;
+
+  &:after {
+    content: "";
+    display: block;
+    z-index: 10;
+    position: absolute;
+    top: 2px;
+    left: 0;
+    height: 0;
+    padding: $iso-paper-ratio 0 0 0;
+    width: 100%;
+    background: $highlight-colour;
+    transform: skew(-1deg, 0deg) scale(1, 0.99);
+    transform-origin: left bottom;
+    box-shadow: inset 0 0 0 2px $panel-colour;
+
+  }
 
   a {
+
     display: block;
+    overflow: hidden;
+    width: 100%;
+    height: 0;
+    padding: $iso-paper-ratio 0 0 0;
+    position: relative;
+    z-index: 20;
+    transition: all 0.1s ease-out;
+
+    &:focus {
+
+      outline: none;
+      box-shadow: 0 3px 0 0 $yellow;
+
+      img {
+        box-shadow: inset 0 0 0 3px $yellow;
+      }
+
+    }
+
   }
 
   img {
     display: block;
-    max-width: 100%;
+    width: 100%;
+    background: $white;
+    box-shadow: inset 0 0 0 2px $panel-colour;
+    position: absolute;
+    top: 0;
+    left: 0;
   }
 
 }