From dc6cfaf4f692939ab64c197cdf8153ec2ebfefd4 Mon Sep 17 00:00:00 2001
From: Quinten <quinten0508@protonmail.com>
Date: Mon, 3 Mar 2025 23:02:53 +0100
Subject: [PATCH] * edited the "tree" remnant on gallery pages, it's just a
 back button now since keeping an up-to-date list of all *other* articles on
 every article page will get really fucking annoying * added a template.html
 to the gallery section containing an example of basically every element i've
 used so far

---
 gallery.html                    |  46 --------
 gallery/20240708_amsterdam.html |   6 +-
 gallery/20240802_chamonix.html  |   6 +-
 gallery/20250301_porter.html    |   6 +-
 gallery/template.html           | 198 ++++++++++++++++++++++++++++++++
 5 files changed, 204 insertions(+), 58 deletions(-)
 create mode 100644 gallery/template.html

diff --git a/gallery.html b/gallery.html
index af43b28..a51f1ea 100644
--- a/gallery.html
+++ b/gallery.html
@@ -189,53 +189,7 @@
                         </ul>
             </div>
 
-
-
-
-
-
-        
-            <!--    TEMPLATE
-            <div class="box gallerybox">
-                <h4>City</h4>
-                <p>Description</p>
-                <h6>YYYY/MM/DD</h6>
-                <div class="masonry">
-                    <img class="gallery-masonry-img" loading="lazy" src="./assets/gallery/" alt="">
-                    <img class="gallery-masonry-img" loading="lazy" src="./assets/gallery/" alt="">
-                    <img class="gallery-masonry-img" loading="lazy" src="./assets/gallery/" alt="">
-                    <img class="gallery-masonry-img" loading="lazy" src="./assets/gallery/" alt="">
-                </div>
-            </div>
-            -->
-
-
-
-
-
-
-
-
-
-
-        
-
-
         </div> <!--container-main-->
-
-        <div class="sidebar sidebar-right" id="links-tree">
-            <div class="box" style="margin: 0;">
-                <h5 style="padding-bottom: 0;">Tree</h5>
-                <ul style="margin-bottom: 0;">
-                    <li><a href="#top">Top</a></li>
-                    <li><a href="#Chamonix_20240802">Chamonix</a></li>
-                    <li><a href="#Amsterdam_20240708">Amsterdam</a></li>
-                </ul>
-            </div>      
-
-        </div>
-        <!--</div>
-        </div>-->
         
         
         </div> <!--sidebar-->
diff --git a/gallery/20240708_amsterdam.html b/gallery/20240708_amsterdam.html
index bf04448..1eb19d7 100644
--- a/gallery/20240708_amsterdam.html
+++ b/gallery/20240708_amsterdam.html
@@ -170,11 +170,9 @@
             <div class="box" style="margin: 0;">
                 <h5 style="padding-bottom: 0;">Tree</h5>
                 <ul style="margin-bottom: 0;">
-                    <li><a href="#top">Top</a></li>
-                    <li><a href="#Chamonix_20240802">Chamonix</a></li>
-                    <li><a href="#Amsterdam_20240708">Amsterdam</a></li>
+                    <li><a href="/gallery.html">Back</a></li>
                 </ul>
-            </div>      
+            </div>
 
         </div>
         <!--</div>
diff --git a/gallery/20240802_chamonix.html b/gallery/20240802_chamonix.html
index 2e1b075..7f4ecff 100644
--- a/gallery/20240802_chamonix.html
+++ b/gallery/20240802_chamonix.html
@@ -172,11 +172,9 @@
             <div class="box" style="margin: 0;">
                 <h5 style="padding-bottom: 0;">Tree</h5>
                 <ul style="margin-bottom: 0;">
-                    <li><a href="#top">Top</a></li>
-                    <li><a href="#Chamonix_20240802">Chamonix</a></li>
-                    <li><a href="#Amsterdam_20240708">Amsterdam</a></li>
+                    <li><a href="/gallery.html">Back</a></li>
                 </ul>
-            </div>      
+            </div>  
 
         </div>
         <!--</div>
diff --git a/gallery/20250301_porter.html b/gallery/20250301_porter.html
index 96994a9..7291d00 100644
--- a/gallery/20250301_porter.html
+++ b/gallery/20250301_porter.html
@@ -152,7 +152,7 @@
 
 
 <div class="box gallerybox">
-    <h3><a href="/gallery" rel="me" style="text-decoration: none;">←</a> Porter Robinson & Underscores Concert</h3>
+    <h3>Porter Robinson & Underscores Concert</h3>
     <h4>Melkweg, Amsterdam</h4>
     <h6>2025/03/01</h6>
     <p>Yesterday I visited the SMILE :D World Tour, felt like sharing some highlights ^^</p>
@@ -215,9 +215,7 @@
             <div class="box" style="margin: 0;">
                 <h5 style="padding-bottom: 0;">Tree</h5>
                 <ul style="margin-bottom: 0;">
-                    <li><a href="#top">Top</a></li>
-                    <li><a href="#Chamonix_20240802">Chamonix</a></li>
-                    <li><a href="#Amsterdam_20240708">Amsterdam</a></li>
+                    <li><a href="/gallery.html">Back</a></li>
                 </ul>
             </div>      
 
diff --git a/gallery/template.html b/gallery/template.html
new file mode 100644
index 0000000..0dbdcf4
--- /dev/null
+++ b/gallery/template.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Gallery - Quintens Outpost</title>
+    <meta name="description" content="Quinten's gallery, where they infrequently post images of whatever.">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/style.css">
+
+    <script defer src="/assets/scripts/heartbeat.js"></script>
+    <script defer src="/assets/scripts/onekoswap.js"></script>
+    <script defer src="/assets/scripts/oneko.js" data-cat="/assets/oneko.gif"></script>
+
+    <style>
+        h6 {
+            margin-bottom: 1rem;
+        }
+        .gallery-divider {
+            width: 100%; /* Fill the horizontal space */
+            white-space: nowrap; /* Prevent wrapping */
+            overflow: hidden; /* Hide overflow */
+            font-size: 2rem;
+            margin: 0;
+            margin-top: 1em;
+            margin-bottom: 1em;
+        }
+        .masonry { /* Masonry container */
+            column-count: 2;
+            column-gap: 1em;
+        }
+            .gallery-masonry-img { /* Masonry bricks or child elements */
+              background-color: #eee;
+              display: inline-block;
+              margin: 0 0 1em;
+              width: 100%;
+            }
+
+        .gallery-img {
+            margin-top: 1em;
+            margin-bottom: 3em;
+            display: block;
+            margin-left: auto;
+            margin-right: auto;
+            width: 60%;
+            height: auto;
+        }
+
+        .gallery-video-box {
+            margin-top: 1em;
+            margin-bottom: 3em;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+            .gallery-video {
+                width: 100%;
+                height: auto;
+            }
+            .gallery-media-caption {
+                font-weight: 500;
+                font-style: italic;
+                font-size: 1.2rem;
+                margin: 0;
+                padding: 0;
+                margin-top: 0.5em;
+                color: #e9e9e9a2;
+                }
+
+            .gallery-spoiler-text {
+              background: white;
+              color: transparent;
+              cursor: help;
+              user-select: none;
+              transition: background 0.2s ease, color 0.1s ease;;
+            }
+            .gallery-spoiler-text:hover,
+            .gallery-spoiler-text:focus {
+              background: black;
+              color: inherit;
+            }
+    </style>
+
+</head>
+
+<body>
+
+    <div class="container" id="top">
+
+        <div class="sidebar sidebar-left">
+        </div>
+        <div class="container-main">
+
+            <div id="maintitlebox">
+                <div id="titleandcat" class="box">
+                    <!-- <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.gif" id="sapari-dance" alt="sapari cat dancing gif"></img> -->
+
+                </div>
+                <button id="oneko-button" class="button">:3</button>
+            </div>
+
+            <div id="subtitlebox">
+                <div id="links" class="box">
+                    <a class="linkbox link" href="/">
+                    <p>home</p></a>
+                    <a class="linkbox link" href="/links.html">
+                    <p>links</p></a>
+                    <a class="linkbox link" href="/updates.html">
+                    <p>updates</p></a>
+                    <a class="linkbox link" href="/gallery.html">
+                    <p>gallery</p></a>
+                    <!-- new button template
+                    <a class="linkbox link" href="" target="_blank">
+                    <p></p></a>
+                    -->
+                </div>
+                <div id="heartbeatbox" class="box">
+                    <a href="https://heartbeat.quinten0508.com" target="_blank" class="link"><p>Status</p></a><p>:&nbsp;</p>
+                    <p id="heartbeat-time">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p> <!-- &nbsp; prevents text shift after load, doenst work with online T-T -->
+                </div>
+            </div>
+
+            <div id="external-links">
+                <div id="links" class="box">
+                    <a class="linkbox link" href="https://x.com/quinten0508" rel="me" target="_blank">
+                    <p>twitter</p></a>
+                    <a class="linkbox link" href="https://www.last.fm/user/Quinten0508" rel="me" target="_blank">
+                    <p>last.fm</p></a>
+                    <a class="linkbox link" href="https://gitea.quinten0508.com/quinten/website-frontend" rel="me" target="_blank">
+                    <p>source</p></a>
+                    <a class="linkbox link" href="https://t.me/quinten0508" rel="me" target="_blank">
+                    <p>telegram</p></a>
+                    <!-- :3 13 year old firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=646552 -->
+                    <a class="linkbox link" onClick="javascript:window.open('mailto:quinten@tuta.com', 'mail');event.preventDefault()" href="mailto:quinten@tuta.com" rel="me" target="_blank"> 
+                    <p>email</p></a>
+                    <!-- new button template
+                    <a class="linkbox link" href="" target="_blank">
+                    <p></p></a>
+                    -->
+                </div>
+            </div>
+
+            <div id="directory-box" class="box">
+                <!-- must resist the urge to dynamically generate this, fuck js -->
+                 <h5 style="display: inline-block;  padding: 0;">Current directory:</h5>
+                 <p style="display: inline-block;">
+                <img src="/assets/icons/tux.svg" id="directory-icon">/<a class="link" href="/">home/quinten</a>/<a class="link" href="/gallery.html">gallery</a>/<a class="link" href="/gallery/20250301_porter.html">20250301_porter</a>
+                </p>
+            </div>
+
+
+<div class="box gallerybox">
+    <h3>Title</h3>
+    <h4>Melkweg, Amsterdam</h4>
+    <h6>2025/03/01</h6>
+    <p>Yesterday I visited the SMILE :D World Tour, felt like sharing some highlights ^^</p>
+    <br>
+    <p>The concert started off with underscores, who was the main reason I came to the show!</p>
+    <div class="gallery-divider">-------------------------------------------------------------------------</div>
+    <p>After about 30 mins, underscores' act concluded and following a short break Porter finally came on stage. He also had this big blow-up cat called Paws with him which was rather silly (pictured below).</p>
+    <img class="gallery-img" src="/assets/gallery/20250301_porter/porter_cat_paws_alive.jpg" alt="">
+    <p style="margin-top: 0.8em; margin-bottom: 1em"><span class="gallery-spoiler-text">The cat is fucking dead.</span></p>
+    <p>And thus, in retaliation, the crowd focused their rage on its rightful target.</p>
+    <div class="gallery-video-box">
+        <video controls preload="metadata" class="gallery-video" src="/assets/gallery/20250301_porter/porter_wedontlikefrance.mp4" alt=""></video>
+        <p class="gallery-media-caption"></p>
+    </div>
+</div>
+
+
+        </div> <!--container-main-->
+
+        <div class="sidebar sidebar-right" id="links-tree">
+            <div class="box" style="margin: 0;">
+                <h5 style="padding-bottom: 0;">Tree</h5>
+                <ul style="margin-bottom: 0;">
+                    <li><a href="/gallery.html">Back</a></li>
+                </ul>
+            </div>      
+
+        </div>
+        <!--</div>
+        </div>-->
+        
+        
+        </div> <!--sidebar-->
+        <div id="stripes">
+            <img src="/assets/stripes.svg" id="stripes">
+        </div>
+
+    </div>  <!--container-->
+
+
+
+</body>
+</html>
\ No newline at end of file