Quinten
731f7549d4
* added porter robinson concert * changed gallery layout to multipage * fixed ox element width not stretching on chromium * removed (some) instances of unnecessary relative path linking (./ instead of /)
194 lines
8.9 KiB
HTML
194 lines
8.9 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">
|
|
|
|
<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>: </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>/<a class="link" href="/gallery/20250301_porter.html">20250301_porter</a>
|
|
</p>
|
|
</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-masonry-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-masonry-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-masonry-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-masonry-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>
|
|
|
|
|
|
</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>
|
|
</html> |