From a7ccedd792f0579e2351e8c1e175b3f2fb8ee180 Mon Sep 17 00:00:00 2001
From: Quinten0508 <55107945+Quinten0508@users.noreply.github.com>
Date: Mon, 5 Aug 2024 22:57:56 +0200
Subject: [PATCH] gallery entry: Chamonix // fixed cat animation (regressed
 back to gif) // Fixed gallery sidebar (still had main page contents for some
 reason (laziness)

---
 gallery.html  | 99 ++++++++++++++++++++++++++++++++-------------------
 index.html    |  6 ++--
 links.html    |  6 ++--
 template.html |  6 ++--
 updates.html  |  6 ++--
 5 files changed, 74 insertions(+), 49 deletions(-)

diff --git a/gallery.html b/gallery.html
index 33a7e0c..a9ffe4d 100644
--- a/gallery.html
+++ b/gallery.html
@@ -7,9 +7,24 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
-    <script src="https://cdn.jsdelivr.net/npm/macy@2"></script>
 
+    <style>
+        h6 {
+            margin-bottom: 1rem;
+        }
 
+        .masonry { /* Masonry container */
+            column-count: 2;
+            column-gap: 1em;
+        }
+
+        .gallery-img { /* Masonry bricks or child elements */
+          background-color: #eee;
+          display: inline-block;
+          margin: 0 0 1em;
+          width: 100%;
+        }
+    </style>
 
 </head>
 
@@ -23,9 +38,9 @@
 
             <div id="maintitlebox">
                 <div id="titleandcat" class="box">
-                    <img src="/assets/dance_transparent.webp" id="sapari-dance" alt="sapari cat dancing gif">
+                    <img src="/assets/dance_transparent.gif" id="sapari-dance" alt="sapari cat dancing gif">
                     <h1 id="maintitle"><a style="text-decoration: none; color: #E9E9E9;" href="./">Quinten's Outpost</a></h1>
-                    <img src="/assets/dance_transparent.webp" id="sapari-dance" alt="sapari cat dancing gif"></img>
+                    <img src="/assets/dance_transparent.gif" id="sapari-dance" alt="sapari cat dancing gif"></img>
 
                 </div>
                 <button id="oneko-button" class="button">:3</button>
@@ -40,7 +55,7 @@
                     <a class="linkbox link" href="./updates.html">
                     <p>updates</p></a>
                     <a class="linkbox link" href="./gallery.html">
-                    <p>gallery (WIP)</p></a>
+                    <p>gallery</p></a>
                     <!-- new button template
                     <a class="linkbox link" href="" target="_blank">
                     <p></p></a>
@@ -83,21 +98,52 @@
             <div class="box">
                 <h3>Gallery</h3>
                 <p>Just posting some pictures here whenever I feel like it ^^</p>
+                <h6>Warning: full-res images of ~1.5MB each!</h6>
             </div>
 
-            <div class="box gallerybox">
-                <h4>Amsterdam</h4>
-                <h6>2024/07/08</h6>
-                <div id="macy-container">
-                    <img class="gallery-img" src="./assets/gallery/20240708_amsterdam/dda733da-5158-4cef-abf3-df8e179af10d.jpg">
-                    <img class="gallery-img" src="./assets/gallery/20240708_amsterdam/79acb362-9361-4466-bbcd-454bc082406d.jpg">
-                    <img class="gallery-img" src="./assets/gallery/20240708_amsterdam/272d8d9f-e1d3-4910-ac47-f15c908af5fd.jpg">
-                    <img class="gallery-img" src="./assets/gallery/20240708_amsterdam/bd7b70b5-fbe5-43db-be5b-e69576e6e6e5.jpg">
-                  <!--  <img class="gallery-img" src="./assets/gallery/20240708_amsterdam/d8fda49f-2a27-4b1e-ba1c-029152ffa75f.jpg"> -->
+            <div class="box gallerybox" id="Chamonix_20240802">
+                <h4>Chamonix</h4>
+                <p>Heavy thunderstorms a few kms north in the mountains made for some nice shots. These are all raw frames from videos.</p>
+                <h6>2024/08/02</h6>
+                <div class="masonry">
+                    <img class="gallery-img" loading="lazy" src="./assets/gallery/20240802_chamonix/10718a89-7aba-4740-9a98-3ef5703770c6.webp" alt="Photo of a curvy lightning flash coming in from the top right of the frame, lighting a dark sky in hues of purple and blue.">
+                    <img class="gallery-img" loading="lazy" src="./assets/gallery/20240802_chamonix/ea7310c1-8db4-451c-83a8-fbc836c2f88d.webp" alt="Another photo of a lightning bolt, this time in black and white and covering the all horizontal space.">
+                    <img class="gallery-img" loading="lazy" src="./assets/gallery/20240802_chamonix/a286c492-b9fb-4799-a675-472a1db0f3e5.webp" alt="A smaller lightning flash.">
+                    <img class="gallery-img" loading="lazy" src="./assets/gallery/20240802_chamonix/0cc60bc9-0a97-4cf5-a820-f7c8e5f078e0.webp" alt="The largest lightning flash, covering most of the frame. The photo is overexposed, making the entire sky seem a bright purple and blue.">
+                    <img class="gallery-img" loading="lazy" src="./assets/gallery/20240802_chamonix/f43391d0-3665-4ad3-9b06-440bcd71baec.webp" alt="A photo of the night sky, showing a horizontal band of sky surrounded by thick clouds. The sky contains a large amount of stars.">
+                    
                 </div>
-
             </div>
 
+            <div class="box gallerybox" id="Amsterdam_20240708">
+                <h4>Amsterdam</h4>
+                <p>Fun day out in Amsterdam</p>
+                <h6>2024/07/08</h6>
+                <div class="masonry">
+                    <img class="gallery-img" loading="lazy" src="./assets/gallery/20240708_amsterdam/dda733da-5158-4cef-abf3-df8e179af10d.webp" alt="A photo of the park next to the Rijksmuseum in Amsterdam, The Netherlands, taken through a fence. The garden consists of neatly organised rectangular patches, most containing a variety of colorful flowers and being surrounded by small hedges. Many people are sitting on wooden benches or walking around in the small park.">
+                    <img class="gallery-img" loading="lazy" src="./assets/gallery/20240708_amsterdam/79acb362-9361-4466-bbcd-454bc082406d.webp" alt="A photo looking directly up in a narrow street. Both on the left and right are old, narrow, dark-red brick houses typical of Amsterdam (see &quot;grachtenpanden&quot;). There are bare light bulbs hanging on a line across the two sides of the street, a cloudy blue-ish sky and parts of two navy blue patio umbrellas.">
+                    <img class="gallery-img" loading="lazy" src="./assets/gallery/20240708_amsterdam/272d8d9f-e1d3-4910-ac47-f15c908af5fd.webp" alt="A photo taken from inside of a small metro station. It shows art on one of the tunnels. A dog (corgi) and cat (calico?) can be seen in front, with various other inanimate objects also visible further along the tunnel. Context for this art: All of these items and animals have been found while digging up this metro tunnel.">
+                    <img class="gallery-img" loading="lazy" src="./assets/gallery/20240708_amsterdam/bd7b70b5-fbe5-43db-be5b-e69576e6e6e5.webp" alt="A photo taken inside the museum of modern contemporary art. Perspective from inside of a small room with black wall with bright pink round spots all over it, and displays on either side inside of the walls containing more circles of various colors pink, dark blue, and purple. Looking out through a doorway in the center we see a small part of a hallway lit in bright pink, and a completely turqouise stairway leading up behind that.">
+                </div>
+            </div>
+
+
+
+        
+            <!--    TEMPLATE
+            <div class="box gallerybox">
+                <h4>City</h4>
+                <p>Description</p>
+                <h6>YYYY/MM/DD</h6>
+                <div id="masonry">
+                    <img class="gallery-img" loading="lazy" src="./assets/gallery/" alt="">
+                    <img class="gallery-img" loading="lazy" src="./assets/gallery/" alt="">
+                    <img class="gallery-img" loading="lazy" src="./assets/gallery/" alt="">
+                    <img class="gallery-img" loading="lazy" src="./assets/gallery/" alt="">
+                </div>
+            </div>
+            -->
+
 
 
 
@@ -117,8 +163,8 @@
                 <h5 style="padding-bottom: 0;">Tree</h5>
                 <ul style="margin-bottom: 0;">
                     <li><a href="#top">Top</a></li>
-                    <li><a href="#Status">Status</a></li>
-                    <li><a href="#spaceweather">Space Weather</a></li>
+                    <li><a href="#Chamonix_20240802">Chamonix</a></li>
+                    <li><a href="#Amsterdam_20240708">Amsterdam</a></li>
                 </ul>
             </div>      
 
@@ -140,25 +186,4 @@
 <script src="/assets/scripts/heartbeat.js"></script>
 <script src="/assets/scripts/onekoswap.js"></script>
 <script src="/assets/scripts/oneko.js" data-cat="/assets/oneko.gif"></script>
-<script>
-    var masonry = new Macy({
-        container: '#macy-container',
-        trueOrder: false,
-        waitForImages: false,
-        useOwnImageLoader: false,
-        debug: true,
-        mobileFirst: true,
-        columns: 1,
-        margin: {
-            y: 16,
-            x: '2%',
-        },
-        breakAt: {
-            1200: 3,
-            940: 3,
-            520: 2,
-            400: 2
-        },
-    });
-</script>
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index ec4ab1c..df29b7d 100644
--- a/index.html
+++ b/index.html
@@ -20,9 +20,9 @@
 
             <div id="maintitlebox">
                 <div id="titleandcat" class="box">
-                <img src="/assets/dance_transparent.webp" id="sapari-dance" alt="sapari cat dancing gif">
+                <img src="/assets/dance_transparent.gif" id="sapari-dance" alt="sapari cat dancing gif">
                 <h1 id="maintitle"><a style="text-decoration: none; color: #E9E9E9;" href="./">Quinten's Outpost</a></h1>
-                <img src="/assets/dance_transparent.webp" id="sapari-dance" alt="sapari cat dancing gif"></img>
+                <img src="/assets/dance_transparent.gif" id="sapari-dance" alt="sapari cat dancing gif"></img>
 
                 </div>
                 <button id="oneko-button" class="button">:3</button>
@@ -37,7 +37,7 @@
                     <a class="linkbox link" href="./updates.html">
                     <p>updates</p></a>
                     <a class="linkbox link" href="./gallery.html">
-                    <p>gallery (WIP)</p></a>
+                    <p>gallery</p></a>
                     <!-- new button template
                     <a class="linkbox link" href="" target="_blank">
                     <p></p></a>
diff --git a/links.html b/links.html
index b697b84..dfc46c3 100644
--- a/links.html
+++ b/links.html
@@ -54,9 +54,9 @@
 
             <div id="maintitlebox">
                 <div id="titleandcat" class="box">
-                    <img src="/assets/dance_transparent.webp" id="sapari-dance" alt="sapari cat dancing gif">
+                    <img src="/assets/dance_transparent.gif" id="sapari-dance" alt="sapari cat dancing gif">
                     <h1 id="maintitle"><a style="text-decoration: none; color: #E9E9E9;" href="./">Quinten's Outpost</a></h1>
-                    <img src="/assets/dance_transparent.webp" id="sapari-dance" alt="sapari cat dancing gif"></img>
+                    <img src="/assets/dance_transparent.gif" id="sapari-dance" alt="sapari cat dancing gif"></img>
 
                 </div>
                 <button id="oneko-button" class="button">:3</button>
@@ -72,7 +72,7 @@
                     <a class="linkbox link" href="./updates.html">
                     <p>updates</p></a>
                     <a class="linkbox link" href="./gallery.html">
-                    <p>gallery (WIP)</p></a>
+                    <p>gallery</p></a>
                     <!-- new button template
                     <a class="linkbox link" href="" target="_blank">
                     <p></p></a>
diff --git a/template.html b/template.html
index a27e028..a154a29 100644
--- a/template.html
+++ b/template.html
@@ -20,9 +20,9 @@
 
             <div id="maintitlebox">
                 <div id="titleandcat" class="box">
-                <img src="/assets/dance_transparent.webp" id="sapari-dance">
+                <img src="/assets/dance_transparent.gif" id="sapari-dance">
                 <h1 id="maintitle"><a style="text-decoration: none; color: #E9E9E9;" href="./">Quinten's Outpost</a></h1>
-                <img src="/assets/dance_transparent.webp" id="sapari-dance">
+                <img src="/assets/dance_transparent.gif" id="sapari-dance">
 
                 </div>
                 <button id="oneko-button" class="button">:3</button>
@@ -37,7 +37,7 @@
                     <a class="linkbox link" href="./updates.html">
                     <p>updates</p></a>
                     <a class="linkbox link" href="./gallery.html">
-                    <p>gallery (WIP)</p></a>
+                    <p>gallery</p></a>
                     <!-- new button template
                     <a class="linkbox link" href="" target="_blank">
                     <p></p></a>
diff --git a/updates.html b/updates.html
index f538c47..603cd4c 100644
--- a/updates.html
+++ b/updates.html
@@ -25,9 +25,9 @@
 
             <div id="maintitlebox">
                 <div id="titleandcat" class="box">
-                    <img src="/assets/dance_transparent.webp" id="sapari-dance" alt="sapari cat dancing gif">
+                    <img src="/assets/dance_transparent.gif" id="sapari-dance" alt="sapari cat dancing gif">
                     <h1 id="maintitle"><a style="text-decoration: none; color: #E9E9E9;" href="./">Quinten's Outpost</a></h1>
-                    <img src="/assets/dance_transparent.webp" id="sapari-dance" alt="sapari cat dancing gif"></img>
+                    <img src="/assets/dance_transparent.gif" id="sapari-dance" alt="sapari cat dancing gif"></img>
 
                 </div>
                 <button id="oneko-button" class="button">:3</button>
@@ -42,7 +42,7 @@
                     <a class="linkbox link" href="./updates.html">
                     <p>updates</p></a>
                     <a class="linkbox link" href="./gallery.html">
-                    <p>gallery (WIP)</p></a>
+                    <p>gallery</p></a>
                     <!-- new button template
                     <a class="linkbox link" href="" target="_blank">
                     <p></p></a>