200 lines
11 KiB
HTML
200 lines
11 KiB
HTML
<!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">
|
|
|
|
<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>
|
|
|
|
<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>: </p>
|
|
<p id="heartbeat-time"> </p> <!-- 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>
|
|
</p>
|
|
</div>
|
|
|
|
<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>Home</h4>
|
|
<p>Clear skies = starry night! Came for the Pleiades (saw plenty, but no photos) and stayed for the pretty stars up above. Also snatched a hint of the northern lights as they faded away (Kp7+ during daytime).</p>
|
|
<h6>2024/08/11</h6>
|
|
<div class="masonry">
|
|
<img class="gallery-img" loading="lazy" src="./assets/gallery/20240811_home/98f78a31-4b39-4120-8ed8-62f36c3ca70e.webp" alt="A long-exposure image of a clear night sky, full with stars and a clear density difference in the form of a band: the milky way.">
|
|
<img class="gallery-img" loading="lazy" src="./assets/gallery/20240811_home/1f6fd402-7b5b-420c-a940-f37a2d858c17.webp" alt="An image of a blueish horizon taken at night, silhouettes of a forest at the bottom. Two large blobs of a purple/pink-ish hue are visible.">
|
|
</div>
|
|
</div>
|
|
|
|
<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 class="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>
|
|
-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</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-->
|
|
<div id="stripes">
|
|
<img src="/assets/stripes.svg" id="stripes">
|
|
</div>
|
|
|
|
</div> <!--container-->
|
|
|
|
|
|
|
|
</body>
|
|
<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>
|
|
</html> |