From 6271b427aa8da9e4fdff45a93be4627333071d67 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 3 Jan 2017 10:29:11 +0000
Subject: [PATCH] =?UTF-8?q?Don=E2=80=99t=20skew=20bottom=20half=20of=20let?=
 =?UTF-8?q?ter=20in=20folded=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Skewing the letter results in a bunch of slightly-off-vertical diagonal
lines. This is a bit visually jarring when everything else on the page
lines up vertically or horizontally.

This commit makes the bottom half of the letter straight, by offsetting
it instead of transforming it. The ‘fold’ now has depth, so it has to
be drawn in somehow, that’s what the `:before` is doing.
---
 app/assets/stylesheets/components/letter.scss | 33 ++++++++++++++-----
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/components/letter.scss b/app/assets/stylesheets/components/letter.scss
index 33439893a..f4fce8766 100644
--- a/app/assets/stylesheets/components/letter.scss
+++ b/app/assets/stylesheets/components/letter.scss
@@ -1,10 +1,9 @@
 // Easing function from: http://easings.net/#easeOutBack
 $transition-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-$iso-paper-ratio: 70.7%;
+$iso-paper-ratio: 70.710678118%;
 
 .letter {
 
-  font-family: Helvetica, Arial, sans-serif;
   padding: 0;
   margin: 0 0 $gutter 0;
   position: relative;
@@ -15,22 +14,40 @@ $iso-paper-ratio: 70.7%;
     z-index: 10;
     position: absolute;
     top: 2px;
-    left: 0;
+    left: 5px;
     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;
+    transform: scale(1, 0.99);
     box-shadow: inset 0 0 0 2px $panel-colour;
-    transition: transform 0.2s $transition-easing;
+    transition: all 0.2s $transition-easing;
+  }
+
+  &:before {
+    content: "";
+    z-index: 15;
+    position: absolute;
+    bottom: -3px;
+    right: -5px;
+    width: 5px;
+    height: 6px;
+    background: $white;
+    transform: rotate(45deg);
+    box-shadow: inset 2px 0 0 0 $panel-colour;
   }
 
   &:hover {
 
     &:after {
-      transform: skew(-1.5deg, 0deg) scale(1, 0.97);
-      transition: transform 0.1s $transition-easing;
+      transform: skew(-1.3deg, 0deg) scale(1, 0.96);
+      transition: all 0.1s $transition-easing;
+      background: mix($white, $highlight-colour);
+    }
+
+    &:before {
+      transform: rotate(50deg);
     }
 
   }
@@ -44,7 +61,7 @@ $iso-paper-ratio: 70.7%;
     padding: $iso-paper-ratio 0 0 0;
     position: relative;
     z-index: 20;
-    transition: all 0.1s ease-out;
+    box-shadow: 0 2px 0 0 $panel-colour;
 
     &:focus {