chore: merge components and stylesheets in same directory name

apps/website/src/components/molecules/NewsletterIssue/NewsletterIssue.scss

@@ -0,0 +1,119 @@
+.issue {
+    position: relative;
+    display: flex;
+    background: #fff;
+    border-radius: 6px;
+    transition: background-color 0.4s, transform 0.7s var(--ease-quart);
+    will-change: transform;
+
+    a {
+        display: flex;
+        width: 100%;
+        padding: 20px;
+        text-decoration: none;
+    }
+    // Image
+    :global(picture) {
+        $shadow-color: rgba(#936B47, 0.06);
+        width: 80px;
+        margin-right: 16px;
+        margin-bottom: auto;
+        overflow: hidden;
+        border-radius: 3px;
+        box-shadow:
+            0 1.5px 1.5px $shadow-color,
+            0 3px 3px $shadow-color,
+            0 12px 12px $shadow-color;
+
+        :global(img) {
+            display: block;
+            width: 100%;
+            height: auto;
+            object-fit: cover;
+        }
+    }
+    // Title
+    dt {
+        margin-bottom: 8px;
+        color: $color-secondary;
+        font-size: rem(20px);
+        font-family: $font-serif;
+        font-weight: 400;
+        transition: color 0.2s;
+    }
+    // Description
+    dd {
+        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(-1.25deg) translateZ(0) !important;
+
+        dt {
+            color: $color-primary;
+        }
+        &:after {
+            transform: rotate(3deg) translateZ(0);
+        }
+    }
+
+
+    // Large Variant
+    &.is-large {
+        a {
+            @include bp (sm) {
+                padding: 28px 64px;
+                align-items: center;
+            }
+        }
+        dt {
+            @include bp (sm) {
+                font-size: rem(24px);
+            }
+        }
+        dd {
+            @include bp (sm) {
+                font-size: rem(16px);
+            }
+        }
+        time {
+            @include bp (sm) {
+                margin-top: 16px;
+                font-size: rem(14px);
+            }
+        }
+        :global(picture) {
+            @include bp (sm) {
+                width: 200px;
+                max-height: 140px;
+                border-radius: 6px;
+                margin-right: 40px;
+            }
+        }
+    }
+}

apps/website/src/components/molecules/NewsletterIssue/NewsletterIssue.svelte

@@ -0,0 +1,33 @@
+<style lang="scss">
+    @import "./NewsletterIssue";
+</style>
+
+<script lang="ts">
+    import dayjs from 'dayjs'
+    import Image from '$components/atoms/Image.svelte'
+
+    export let title: string
+    export let issue: number
+    export let date: string
+    export let link: string
+    export let thumbnail: { id: string }
+    export let size: string = undefined
+</script>
+
+<div class="issue" class:is-large={size === 'large'}>
+    <a href={link} target="_blank" rel="external noopener" tabindex="0">
+        <Image
+            id={thumbnail.id}
+            sizeKey="issue-thumbnail-small"
+            width={160} height={112}
+            alt="Issue {issue} thumbnail"
+        />
+        <dl>
+            <dt>Issue #{issue}</dt>
+            <dd>
+                <p>{title}</p>
+                <time>{dayjs(date).format('DD/MM/YYYY')}</time>
+            </dd>
+        </dl>
+    </a>
+</div>