Fix Postcard style and hover + rename class

2021-10-16 15:54:11 +02:00
parent 60ea3d2cb1
commit 36f4c5a330
4 changed files with 22 additions and 20 deletions
--- a/src/style/modules/_postcard.scss
+++ b/src/style/modules/_postcard.scss
@@ -0,0 +1,95 @@
+.postcard {
+    --gap: clamp(8px, 0.7vw, 20px);
+    display: grid;
+    grid-template-columns: min(140px, 40%) 1fr;
+    align-items: baseline;
+    height: 100%;
+    width: 100%;
+    height: 100%;
+    max-width: 333px;
+    max-height: 222px;
+    padding: clamp(12px, 1vw, 20px);
+    padding-left: var(--gap);
+    padding-right: calc(var(--gap) * 2);
+    background: $color-cream;
+    box-shadow: 0 16px 12px rgba(#000, 0.15), 0 26px 52px rgba(#000, 0.2);
+
+    &__left {
+        display: flex;
+        align-items: flex-end;
+        height: 100%;
+        padding-bottom: 4px;
+        padding-right: var(--gap);
+        border-right: 1px solid rgba(#000, 0.2);
+    }
+    &__right {
+        position: relative;
+        margin-top: auto;
+        height: 100%;
+        display: flex;
+        align-items: flex-end;
+    }
+
+    // Country Title
+    &__country {
+        position: relative;
+        margin-top: auto;
+        font-size: clamp(#{rem(12px)}, 1.2vw, #{rem(22px)});
+        color: $color-primary;
+        font-family: $font-serif;
+        line-height: 1.1;
+
+        strong {
+            color: $color-secondary;
+            font-weight: 300;
+        }
+    }
+
+    // Stamp
+    &__stamp {
+        position: absolute;
+        top: 0;
+        right: 0;
+
+        img {
+            display: block;
+            width: 100%;
+            height: auto;
+        }
+
+        .flag {
+            position: absolute;
+            top: 10px;
+            left: -8px;
+            transform: rotate(-14deg);
+            width: 24px;
+            height: 24px;
+            box-shadow: 0 0 0 3px $color-cream;
+            border-radius: 100%;
+            overflow: hidden;
+
+            img {
+                display: block;
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+            }
+        }
+    }
+
+    // Address
+    ul {
+        margin-top: auto;
+        padding-left: var(--gap);
+        width: 100%;
+
+        li {
+            display: block;
+            margin-bottom: clamp(2px, 0.25vw, 4px);
+            color: $color-text;
+            font-size: clamp(#{rem(11px)}, 0.8vw, #{rem(16px)});
+            line-height: 1.4;
+            border-bottom: 1px solid #D9CABD;
+        }
+    }
+}