quinten/website-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gallery entry: Chamonix // fixed cat animation (regressed back to gif) // Fixed gallery sidebar (still had main page contents for some reason (laziness)

Browse Source
This commit is contained in:
Quinten0508 2024-08-05 22:57:56 +02:00
parent a51c44307c
commit a7ccedd792
5 changed files with 74 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
gallery.html
View File

@ -7,9 +7,24 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <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> </head>
@ -23,9 +38,9 @@
<div id="maintitlebox"> <div id="maintitlebox">
<div id="titleandcat" class="box"> <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> <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> </div>
<button id="oneko-button" class="button">:3</button> <button id="oneko-button" class="button">:3</button>
@ -40,7 +55,7 @@
<a class="linkbox link" href="./updates.html"> <a class="linkbox link" href="./updates.html">
<p>updates</p></a> <p>updates</p></a>
<a class="linkbox link" href="./gallery.html"> <a class="linkbox link" href="./gallery.html">
<p>gallery (WIP)</p></a> <p>gallery</p></a>
<!-- new button template <!-- new button template
<a class="linkbox link" href="" target="_blank"> <a class="linkbox link" href="" target="_blank">
<p></p></a> <p></p></a>
@ -83,21 +98,52 @@
<div class="box"> <div class="box">
<h3>Gallery</h3> <h3>Gallery</h3>
<p>Just posting some pictures here whenever I feel like it ^^</p> <p>Just posting some pictures here whenever I feel like it ^^</p>
<h6>Warning: full-res images of ~1.5MB each!</h6>
</div> </div>
<div class="box gallerybox"> <div class="box gallerybox" id="Chamonix_20240802">
<h4>Amsterdam</h4> <h4>Chamonix</h4>
<h6>2024/07/08</h6> <p>Heavy thunderstorms a few kms north in the mountains made for some nice shots. These are all raw frames from videos.</p>
<div id="macy-container"> <h6>2024/08/02</h6>
<img class="gallery-img" src="./assets/gallery/20240708_amsterdam/dda733da-5158-4cef-abf3-df8e179af10d.jpg"> <div class="masonry">
<img class="gallery-img" src="./assets/gallery/20240708_amsterdam/79acb362-9361-4466-bbcd-454bc082406d.jpg"> <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" src="./assets/gallery/20240708_amsterdam/272d8d9f-e1d3-4910-ac47-f15c908af5fd.jpg"> <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" src="./assets/gallery/20240708_amsterdam/bd7b70b5-fbe5-43db-be5b-e69576e6e6e5.jpg"> <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" src="./assets/gallery/20240708_amsterdam/d8fda49f-2a27-4b1e-ba1c-029152ffa75f.jpg"> --> <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> </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> <h5 style="padding-bottom: 0;">Tree</h5>
<ul style="margin-bottom: 0;"> <ul style="margin-bottom: 0;">
<li><a href="#top">Top</a></li> <li><a href="#top">Top</a></li>
<li><a href="#Status">Status</a></li> <li><a href="#Chamonix_20240802">Chamonix</a></li>
<li><a href="#spaceweather">Space Weather</a></li> <li><a href="#Amsterdam_20240708">Amsterdam</a></li>
</ul> </ul>
</div> </div>
@ -140,25 +186,4 @@
<script src="/assets/scripts/heartbeat.js"></script> <script src="/assets/scripts/heartbeat.js"></script>
<script src="/assets/scripts/onekoswap.js"></script> <script src="/assets/scripts/onekoswap.js"></script>
<script src="/assets/scripts/oneko.js" data-cat="/assets/oneko.gif"></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> </html>

6
index.html
View File

@ -20,9 +20,9 @@
<div id="maintitlebox"> <div id="maintitlebox">
<div id="titleandcat" class="box"> <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> <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> </div>
<button id="oneko-button" class="button">:3</button> <button id="oneko-button" class="button">:3</button>
@ -37,7 +37,7 @@
<a class="linkbox link" href="./updates.html"> <a class="linkbox link" href="./updates.html">
<p>updates</p></a> <p>updates</p></a>
<a class="linkbox link" href="./gallery.html"> <a class="linkbox link" href="./gallery.html">
<p>gallery (WIP)</p></a> <p>gallery</p></a>
<!-- new button template <!-- new button template
<a class="linkbox link" href="" target="_blank"> <a class="linkbox link" href="" target="_blank">
<p></p></a> <p></p></a>

6
links.html
View File

@ -54,9 +54,9 @@
<div id="maintitlebox"> <div id="maintitlebox">
<div id="titleandcat" class="box"> <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> <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> </div>
<button id="oneko-button" class="button">:3</button> <button id="oneko-button" class="button">:3</button>
@ -72,7 +72,7 @@
<a class="linkbox link" href="./updates.html"> <a class="linkbox link" href="./updates.html">
<p>updates</p></a> <p>updates</p></a>
<a class="linkbox link" href="./gallery.html"> <a class="linkbox link" href="./gallery.html">
<p>gallery (WIP)</p></a> <p>gallery</p></a>
<!-- new button template <!-- new button template
<a class="linkbox link" href="" target="_blank"> <a class="linkbox link" href="" target="_blank">
<p></p></a> <p></p></a>

6
template.html
View File

@ -20,9 +20,9 @@
<div id="maintitlebox"> <div id="maintitlebox">
<div id="titleandcat" class="box"> <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> <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> </div>
<button id="oneko-button" class="button">:3</button> <button id="oneko-button" class="button">:3</button>
@ -37,7 +37,7 @@
<a class="linkbox link" href="./updates.html"> <a class="linkbox link" href="./updates.html">
<p>updates</p></a> <p>updates</p></a>
<a class="linkbox link" href="./gallery.html"> <a class="linkbox link" href="./gallery.html">
<p>gallery (WIP)</p></a> <p>gallery</p></a>
<!-- new button template <!-- new button template
<a class="linkbox link" href="" target="_blank"> <a class="linkbox link" href="" target="_blank">
<p></p></a> <p></p></a>

6
updates.html
View File

@ -25,9 +25,9 @@
<div id="maintitlebox"> <div id="maintitlebox">
<div id="titleandcat" class="box"> <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> <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> </div>
<button id="oneko-button" class="button">:3</button> <button id="oneko-button" class="button">:3</button>
@ -42,7 +42,7 @@
<a class="linkbox link" href="./updates.html"> <a class="linkbox link" href="./updates.html">
<p>updates</p></a> <p>updates</p></a>
<a class="linkbox link" href="./gallery.html"> <a class="linkbox link" href="./gallery.html">
<p>gallery (WIP)</p></a> <p>gallery</p></a>
<!-- new button template <!-- new button template
<a class="linkbox link" href="" target="_blank"> <a class="linkbox link" href="" target="_blank">
<p></p></a> <p></p></a>