add source codes

src/routes/(DefaultStyle)/[slug]/grid.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+    export let title: string;
+    export let description: string;
+    export let thumbnail: string;
+    export let emoji: string;
+    export let date: Date;
+    export let category: string;
+    export let id: string;
+
+    let twemoji = async (url: string)=>{
+        let res = await (await fetch(url)).text()
+        return res
+    }
+</script>
+
+<div class='grid'>
+    <div class='thumbnail'>
+        {#if thumbnail }
+            <img src="{thumbnail}" alt='thumbnail' style='view-transition-name: {id}'/>
+        {:else if emoji}
+            {#await twemoji(emoji)}
+                <div></div>
+            {:then emojisvg}
+                <div class="emoji">
+                    {@html emojisvg}
+                </div>
+            {/await}
+            <!-- <div class='emoji'><img class='svg' src="{emoji}" alt="thumbnail" style='view-transition-name: {id}'/></div> -->
+        {:else}
+            <img src='data:image/svg+xml,{encodeURIComponent('<svg fill="#aaa" version="1.1" viewBox="0 -960 96 96" xmlns="http://www.w3.org/2000/svg"><path d="m41-903q-0.8 0-1.4-0.6t-0.6-1.4v-14q0-0.8 0.6-1.4t1.4-0.6h14q0.8 0 1.4 0.6t0.6 1.4v14q0 0.8-0.6 1.4t-1.4 0.6zm0-2h14v-14h-14zm1-2h12l-3.8-5-3 4-2.25-3zm-1 2v-14z"/></svg>')}' alt="fallback"/>
+        {/if}
+
+        <div class="tag date">{date.toLocaleDateString('sv-SE')}</div>
+        <div class="tag category">{category}</div>
+    </div>
+    <div class='label'>
+        <div class='title'>{title}</div>
+        <div class='description'>{description}</div>
+    </div>
+</div>
+
+<style>
+    .grid {
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+        position: relative;
+        background-color: var(--grid-color);
+        transition: background-color 1s;
+        &:hover {
+            img {
+                transform: scale(1.03);
+            }
+            .title{
+                text-decoration-line: underline;
+                text-decoration-color: var(--font-color);
+            }
+        }
+    }
+
+    .thumbnail {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        aspect-ratio: 1/0.6;
+        width: 100%;
+        max-height: 200px;
+
+        & img {
+            display: block;
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+            margin: 0 auto;
+            transition: transform .3s ease-out;
+        }
+        & div.emoji {
+            height: 70%;
+            aspect-ratio: 1/1;
+        }
+
+        & .tag{
+            position: absolute;
+            top: 5px;
+            padding:2px;
+            color: var(--font-color);
+            background-color: var(--back-color);
+            border-radius: 3px;
+            font-size: 0.85em;   
+        }
+        & .date {
+            right:5px;
+        }
+        & .category {
+            left: 5px;
+        }
+    }
+
+    .label {
+        flex-grow: 1;
+        height: 100%;
+        width: 100%;
+        color: var(--font-color);
+
+        & .title {
+            font-size: 1.17em;
+            font-weight: bold;
+            margin: 4px 8px;
+        }
+
+        & .description {
+            margin:8px;
+            font-size: .9em;
+            text-decoration: none;
+        }
+    }
+</style>