added /drawings

src/routes/drawings/+page.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+    import Content from "$lib/viewport/content.svelte";
+    import Banner2 from "$lib/banner2.svelte";
+    import { drawings } from "./drawings";
+
+    let selectedIndex: number = $state(0);
+</script>
+
+<svelte:head>
+    <title>Drawing Gallery | denizk0461</title>
+</svelte:head>
+
+<Content>
+    <Banner2
+        title="Drawing Gallery"
+        banner="banner.webp"
+        bannerAlt="Mirror picture of me, pixelated beyond recognition"
+        subtitle="minor things I have worked on"
+        />
+    
+    <div class="selected-container">
+        <img
+            class="selected-img"
+            src={drawings[selectedIndex].src}
+            alt={drawings[selectedIndex].alt}
+        />
+        
+        <div class="selected-text-container">
+            <p class="selected-date">from {drawings[selectedIndex].date}</p>
+            {#each drawings[selectedIndex].desc as d}
+                <p>{@html d}</p>
+            {/each}
+        </div>
+    </div>
+
+    <hr>
+
+    <div class="img-button-container">
+        {#each drawings as d, index}
+            <button class="img-button" onclick={() => selectedIndex = index}>
+                <img src={d.src} alt={d.alt} loading="lazy" />
+            </button>
+        {/each}
+    </div>
+
+</Content>
+
+<style>
+    .selected-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 16px;
+    }
+
+    .selected-img {
+        object-fit: cover;
+        width: 100%;
+        height: 400px;
+        max-height: initial;
+    }
+
+    .selected-text-container {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    .selected-date {
+        font-size: 1.0rem;
+        font-weight: 600;
+        font-style: italic;
+    }
+
+    .selected-text-container * {
+        margin: 0;
+    }
+
+    .img-button-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+        gap: 8px;
+    }
+
+    .img-button {
+        cursor: pointer;
+        width: 100%;
+        overflow: hidden;
+    }
+
+    .img-button img {
+        width: 100%;
+        height: 200px;
+        object-fit: cover;
+        transition: scale var(--duration-animation) var(--anim-curve);
+    }
+    .img-button:hover img {
+        scale: 1.16;
+    }
+    .img-button:active img {
+        scale: 1.1;
+    }
+</style>