From a2d1a4c64cf9b1d091216adf3d9add1221980234 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sat, 16 Oct 2021 13:14:55 +0200
Subject: [PATCH] Add target on newsletter issue link and complete styling with
 hover

---
 src/routes/subscribe.svelte     |  4 +--
 src/style/molecules/_issue.scss | 47 ++++++++++++++++++++++++++++++---
 2 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/src/routes/subscribe.svelte b/src/routes/subscribe.svelte
index 67a95e7..9fb18ab 100644
--- a/src/routes/subscribe.svelte
+++ b/src/routes/subscribe.svelte
@@ -24,8 +24,8 @@
         <ul>
             {#each issues as { issue, title, date_sent, link, thumbnail: { id } }}
                 <li class="issue">
-                    <a href={link} rel="external noreferrer noopener">
-                        <Image id={id} width={80} height={56} alt="Issue {issue} thumbnail" />
+                    <a href={link} target="_blank" rel="external noreferrer noopener">
+                        <Image id={id} width={160} height={112} alt="Issue {issue} thumbnail" />
                         <dl>
                             <dt>Issue #{issue}</dt>
                             <dd>
diff --git a/src/style/molecules/_issue.scss b/src/style/molecules/_issue.scss
index 6d2f2f6..c25c776 100644
--- a/src/style/molecules/_issue.scss
+++ b/src/style/molecules/_issue.scss
@@ -1,7 +1,10 @@
 .issue {
+    position: relative;
     display: flex;
-    background-color: #fff;
+    background: #fff;
     border-radius: 6px;
+    transition: background-color 0.4s, transform 0.7s var(--ease-quart);
+    will-change: transform;
 
     a {
         display: flex;
@@ -10,27 +13,65 @@
     }
     // Image
     img {
+        $shadow-color: rgba(#936B47, 0.06);
         display: block;
         width: 80px;
         height: 56px;
         margin-right: 16px;
+        border-radius: 3px;
+        box-shadow:
+            0 1.5px 1.5px $shadow-color,
+            0 3px 3px $shadow-color,
+            0 12px 12px $shadow-color;
     }
     // Title
     dt {
+        margin-bottom: 8px;
         color: $color-secondary;
         font-size: rem(20px);
-        margin-bottom: 8px;
         font-family: $font-serif;
         font-weight: 400;
+        transition: color 0.2s;
     }
     // Description
     dd {
-        font-size: rem(16px);
+        font-size: rem(14px);
         color: $color-gray;
     }
     // Date
     time {
+        display: block;
+        margin-top: 8px;
         opacity: 0.6;
         font-size: rem(12px);
     }
+
+    // Under layer
+    &:after {
+        content: "";
+        display: block;
+        position: absolute;
+        z-index: -1;
+        top: 0;
+        left: 2%;
+        width: 96%;
+        height: 100%;
+        border-radius: 6px;
+        background: rgba(#fff, 0.4);
+        transition: transform 0.7s var(--ease-quart);
+    }
+
+
+    // Hover
+    &:hover {
+        background: $color-cream;
+        transform: rotate(-1deg) translateZ(0);
+
+        dt {
+            color: $color-primary;
+        }
+        &:after {
+            transform: rotate(3deg)translateZ(0);
+        }
+    }
 }
\ No newline at end of file