added date metadata to project n5 devlog pages

src/routes/drawing-gallery/+page.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+    import Banner2 from "$lib/banner2.svelte";
+    import Content from "$lib/viewport/content.svelte";
+    import { drawings, type DrawingData } from "./drawing-data";
+
+    let selectedDrawingIndex: number = $state(-1);
+
+    function selectDrawing(index: number) {
+        selectedDrawingIndex = index;
+    }
+</script>
+
+<svelte:head>
+    <title>Drawing Gallery | denizk0461</title> 
+</svelte:head>
+
+{#snippet drawing({ drawing }: { drawing: DrawingData })}
+    <button class="drawing-link-container" onclick={(event) => selectDrawing(drawings.indexOf(drawing))}>
+        <div class="drawing-content-container">
+            <img class="drawing-img" src="{drawing.fileName}" alt="{drawing.altText}">
+            <div class="drawing-overlay"></div>
+        </div>
+    </button>
+{/snippet}
+
+{#snippet inspector({ index }: { index: number })}
+    {#if index == -1}
+        <p class="inspector-img-note">click on an image to view details about it</p>
+    {:else}
+        <a class="inspector-link" href="{drawings[index].fileName}">
+            <img class="inspector-img" src="{drawings[index].fileName}" alt="{drawings[index].altText}">
+        </a>
+        <p class="inspector-date">{drawings[index].date}</p>
+        <hr>
+        {#each drawings[index].notes as n}
+            <p class="inspector-paragraph">{n}</p>
+        {/each}
+    {/if}
+{/snippet}
+
+<Content>
+    <Banner2
+        title="Drawing Gallery" />
+
+    <p>I'm trying this to motivate myself to draw more now. Let's see where this takes us.</p>
+
+    <div class="page-container">
+        <div class="drawing-gallery">
+            {#each drawings as d}
+                {@render drawing({drawing: d})}
+            {/each}
+        </div>
+        <div class="inspector">
+            {@render inspector({ index: selectedDrawingIndex })}
+        </div>
+    </div>
+</Content>
+
+<style>
+    .page-container {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .drawing-gallery {
+        display: flex;
+        flex-wrap: wrap;
+        width: 60%;
+        padding-right: 16px;
+        box-sizing: border-box;
+    }
+
+    .drawing-link-container {
+        display: flex;
+        height: 14vh;
+        flex-grow: 1;
+        overflow: hidden;
+    }
+
+    .drawing-content-container {
+        position: relative;
+        cursor: pointer;
+    }
+
+    .drawing-img {
+        max-height: 100%;
+        min-width: 100%;
+        object-fit: cover;
+        vertical-align: bottom;
+        transition: scale 0.06s ease-out, filter 0.06s ease-out;
+    }
+
+    .drawing-overlay {
+        opacity: 0;
+        transition: opacity 0.06s ease-out;
+        background-color: var(--color-background-highlight-hover-dark);
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        pointer-events: none;
+        display: flex;
+        flex-direction: column;
+        justify-content: end;
+    }
+
+    .drawing-content-container:hover .drawing-overlay {
+        opacity: 1;
+    }
+
+    .drawing-content-container:hover .drawing-img, .inspector-link:hover .inspector-img {
+        scale: 1.1;
+        /* filter: grayscale(60%); */
+    }
+
+    .inspector {
+        width: 40%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .inspector-link {
+        width: 100%;
+        margin-left: auto;
+        margin-right: auto;
+        overflow: hidden;
+    }
+
+    .inspector-img {
+        width: 100%;
+        margin: 0;
+        transition: scale 0.06s ease-out;
+    }
+
+    .inspector-date {
+        font-family: var(--font-mono);
+        font-weight: 600;
+        color: var(--color-highlight);
+        margin: 2px 0;
+    }
+
+    .inspector-paragraph {
+        margin: 2px 0;
+    }
+
+    .inspector-img-note {
+        padding: 64px 16px;
+        background-color: var(--color-background-highlight);
+    }
+</style>