added drawings to drawing gallery

src/routes/drawings/+page.svelte

@@ -4,6 +4,8 @@
     import { drawings } from "./drawings";
 
     let selectedIndex: number = $state(0);
+
+    let drawingsRev = drawings.toReversed();
 </script>
 
 <svelte:head>
@@ -14,20 +16,27 @@
     <Banner2
         title="Drawing Gallery"
         banner="banner.webp"
-        bannerAlt="Mirror picture of me, pixelated beyond recognition"
-        subtitle="minor things I have worked on"
+        bannerAlt="Several Faber-Castell Polychromos colour pencils lined up with markings next to them in the same colour on a sheet of paper."
+        subtitle="???"
         />
     
     <div class="selected-container">
-        <img
+        <a class="selected-img-link" href={drawingsRev[selectedIndex].src}>
+            <img
             class="selected-img"
-            src={drawings[selectedIndex].src}
-            alt={drawings[selectedIndex].alt}
+            src={drawingsRev[selectedIndex].src}
+            alt={drawingsRev[selectedIndex].alt}
         />
+        </a>
         
         <div class="selected-text-container">
-            <p class="selected-date">from {drawings[selectedIndex].date}</p>
-            {#each drawings[selectedIndex].desc as d}
+            <div class="selected-text-header">
+                {#if drawingsRev[selectedIndex].title}
+                    <p class="selected-title">{drawingsRev[selectedIndex].title}</p>
+                {/if}
+                <p class="selected-date">from {drawingsRev[selectedIndex].date}</p>
+            </div>
+            {#each drawingsRev[selectedIndex].desc as d}
                 <p>{@html d}</p>
             {/each}
         </div>
@@ -36,7 +45,7 @@
     <hr>
 
     <div class="img-button-container">
-        {#each drawings as d, index}
+        {#each drawingsRev as d, index}
             <button class="img-button" onclick={() => selectedIndex = index}>
                 <img src={d.src} alt={d.alt} loading="lazy" />
             </button>
@@ -52,8 +61,12 @@
         gap: 16px;
     }
 
+    .selected-img-link {
+        margin: 0;
+    }
+
     .selected-img {
-        object-fit: cover;
+        object-fit: contain;
         width: 100%;
         height: 400px;
         max-height: initial;
@@ -62,13 +75,20 @@
     .selected-text-container {
         display: flex;
         flex-direction: column;
-        gap: 4px;
+        gap: 8px;
+    }
+
+    .selected-text-header p {
+        font-weight: 600;
+        font-style: italic;
+    }
+
+    .selected-title {
+        font-size: 1.1rem;
     }
 
     .selected-date {
         font-size: 1.0rem;
-        font-weight: 600;
-        font-style: italic;
     }
 
     .selected-text-container * {
@@ -78,13 +98,19 @@
     .img-button-container {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-        gap: 8px;
+        gap: 4px;
     }
 
     .img-button {
         cursor: pointer;
         width: 100%;
         overflow: hidden;
+        border-radius: var(--border-radius);
+        filter: brightness(70%) saturate(60%);
+        transition: filter var(--duration-animation) var(--anim-curve);
+    }
+    .img-button:hover {
+        filter: brightness(100%) saturate(100%);
     }
 
     .img-button img {
@@ -94,9 +120,9 @@
         transition: scale var(--duration-animation) var(--anim-curve);
     }
     .img-button:hover img {
-        scale: 1.16;
+        scale: 1.12;
     }
     .img-button:active img {
-        scale: 1.1;
+        scale: 1.08;
     }
 </style>