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 @@
{#each issues as { issue, title, date_sent, link, thumbnail: { id } }}
-
-
-
+
+
- Issue #{issue}
-
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