gallery entry: Chamonix // fixed cat animation (regressed back to gif) // Fixed gallery sidebar (still had main page contents for some reason (laziness)
This commit is contained in:
Quinten0508
parent
a51c44307c
commit
a7ccedd792
99
gallery.html
99
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 "grachtenpanden"). 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>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user