Draft of photos page
This commit is contained in:
parent
3e0d8da479
commit
f8562fa4f7
2 changed files with 134 additions and 3 deletions
|
|
@ -24,6 +24,3 @@ menu:
|
|||
meta:
|
||||
siteName: "abi abi"
|
||||
themeColour: "#df3062"
|
||||
|
||||
photos:
|
||||
baseURL: "http://127.0.0.1:9010/"
|
||||
134
site/content/_photos/index.html
Normal file
134
site/content/_photos/index.html
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
---
|
||||
title: "Photography"
|
||||
---
|
||||
{# magick R1-09081-0008.JPG -resize 25% -strip -interlace Plane -gaussian-blur 0.05 -quality 50% R1-09081-0008.crunch.JPG #}
|
||||
|
||||
{% extends "_layouts/base.html" %}
|
||||
|
||||
{% block head %}
|
||||
<style>
|
||||
.header {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
--bs-gutter-x: 1.5rem;
|
||||
--bs-gutter-y: 0;
|
||||
width: 95%;
|
||||
padding-right: calc(var(--bs-gutter-x) * 0.5);
|
||||
padding-left: calc(var(--bs-gutter-x) * 0.5);
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.bodycols {
|
||||
padding-top: 1rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 771px) {
|
||||
.bodycols>div:nth-of-type(1) {
|
||||
flex: 0 0 25vw;
|
||||
}
|
||||
}
|
||||
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
#gallery .grid-item {
|
||||
height: 40vh;
|
||||
flex-grow: 1
|
||||
}
|
||||
|
||||
#gallery .grid-item img {
|
||||
max-height: 100%;
|
||||
min-width: 100%;
|
||||
object-fit: cover;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 770px) {
|
||||
.bodycols>div:nth-of-type(1) {
|
||||
flex: unset;
|
||||
}
|
||||
|
||||
.bodycols {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#gallery .grid-item {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/assets/photoswipe/photoswipe.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="container">
|
||||
<header class="header">
|
||||
{% with items = [({"url": "/", "name": "back to the main site"})] %}
|
||||
{% include "_includes/header.html" %}
|
||||
{% endwith %}
|
||||
</header>
|
||||
|
||||
<div class="bodycols">
|
||||
<div>
|
||||
<h1>Photography</h1>
|
||||
</div>
|
||||
<div>
|
||||
<div id="gallery">
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780001.crunch.jpg"><img src="http://127.0.0.1:8001/000020780001.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780002.crunch.jpg"><img src="http://127.0.0.1:8001/000020780002.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780003.crunch.jpg"><img src="http://127.0.0.1:8001/000020780003.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780004.crunch.jpg"><img src="http://127.0.0.1:8001/000020780004.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780005.crunch.jpg"><img src="http://127.0.0.1:8001/000020780005.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780006.crunch.jpg"><img src="http://127.0.0.1:8001/000020780006.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780007.crunch.jpg"><img src="http://127.0.0.1:8001/000020780007.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1512" data-pswp-height="1003" target="_blank" href="http://127.0.0.1:8001/000020780008.crunch.jpg"><img src="http://127.0.0.1:8001/000020780008.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780009.crunch.jpg"><img src="http://127.0.0.1:8001/000020780009.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780010.crunch.jpg"><img src="http://127.0.0.1:8001/000020780010.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780011.crunch.jpg"><img src="http://127.0.0.1:8001/000020780011.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780012.crunch.jpg"><img src="http://127.0.0.1:8001/000020780012.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780013.crunch.jpg"><img src="http://127.0.0.1:8001/000020780013.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780014.crunch.jpg"><img src="http://127.0.0.1:8001/000020780014.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780015.crunch.jpg"><img src="http://127.0.0.1:8001/000020780015.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780016.crunch.jpg"><img src="http://127.0.0.1:8001/000020780016.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780017.crunch.jpg"><img src="http://127.0.0.1:8001/000020780017.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780018.crunch.jpg"><img src="http://127.0.0.1:8001/000020780018.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780019.crunch.jpg"><img src="http://127.0.0.1:8001/000020780019.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780020.crunch.jpg"><img src="http://127.0.0.1:8001/000020780020.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780021.crunch.jpg"><img src="http://127.0.0.1:8001/000020780021.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780022.crunch.jpg"><img src="http://127.0.0.1:8001/000020780022.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780023.crunch.jpg"><img src="http://127.0.0.1:8001/000020780023.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780024.crunch.jpg"><img src="http://127.0.0.1:8001/000020780024.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780025.crunch.jpg"><img src="http://127.0.0.1:8001/000020780025.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780026.crunch.jpg"><img src="http://127.0.0.1:8001/000020780026.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780027.crunch.jpg"><img src="http://127.0.0.1:8001/000020780027.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780028.crunch.jpg"><img src="http://127.0.0.1:8001/000020780028.crunch.jpg"></a>
|
||||
<a class="grid-item" data-pswp-width="1003" data-pswp-height="1512" target="_blank" href="http://127.0.0.1:8001/000020780029.crunch.jpg"><img src="http://127.0.0.1:8001/000020780029.crunch.jpg"></a>
|
||||
</div>
|
||||
<script type="module">
|
||||
import PhotoSwipeLightbox from '/assets/photoswipe/photoswipe-lightbox.esm.js';
|
||||
import PhotoSwipe from '/assets/photoswipe/photoswipe.esm.js';
|
||||
|
||||
const lightbox = new PhotoSwipeLightbox({
|
||||
gallery: '#gallery',
|
||||
children: 'a',
|
||||
pswpModule: PhotoSwipe
|
||||
});
|
||||
|
||||
lightbox.init();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue