Tentative gallery design

This commit is contained in:
Théophile Bastian 2022-02-02 23:46:26 +01:00
parent 37ff486081
commit 4b28fad141
20 changed files with 241 additions and 125 deletions

36
content/_index.md Normal file
View file

@ -0,0 +1,36 @@
---
title: "Georges"
date: 2022-02-02T12:52:22+01:00
draft: false
georgespics:
- name: Autour de la Pra, Alpes
osm: https://www.openstreetmap.org/#map=14/45.1612/5.9444
date: 2021-06-27
pics:
- path: img/georges/2021-06-27-pra1.jpg
- path: img/georges/2021-06-27-pra2.jpg
- path: img/georges/2021-06-27-pra3.jpg
- path: img/georges/2021-06-27-pra4.jpg
- path: img/georges/2021-06-27-pra5.jpg
- name: Pen-Bé, Bretagne
osm: https://www.openstreetmap.org/#map=14/47.4205/-2.4575
date: 2021-07-05
pics:
- path: img/georges/2021-07-05-bretagne.jpg
- name: Mourèze, Hérault
osm: https://www.openstreetmap.org/#map=15/43.6191/3.3517
date: 2021-07-27
pics:
- path: img/georges/2021-07-27-moureze1.jpg
- path: img/georges/2021-07-27-moureze2.jpg
- path: img/georges/2021-07-27-moureze3.jpg
- name: Dent de Crolles, Alpes
osm: https://www.openstreetmap.org/#map=15/45.3105/5.8559
date: 2021-11-13
pics:
- path: img/georges/2021-11-13-crolles1.jpg
- path: img/georges/2021-11-13-crolles2.jpg
- path: img/georges/2021-11-13-crolles3.jpg
- path: img/georges/2021-11-13-crolles4.jpg
---

View file

@ -1,125 +0,0 @@
---
title: "Georges"
date: 2022-02-02T12:52:22+01:00
draft: false
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur convallis
malesuada leo. Donec tincidunt gravida ullamcorper. Aenean magna quam, pretium
at ipsum vel, vulputate viverra nibh. In bibendum nulla id augue feugiat
consequat. In sed viverra sem, et maximus nunc. Phasellus ut purus at lorem
rutrum bibendum at vel nisl. Etiam vestibulum dui ligula, at eleifend elit
mollis eu. Donec lorem urna, lacinia vitae justo quis, pellentesque molestie
lacus. Donec dapibus pretium diam nec gravida. Quisque cursus sem eu erat
dictum, et accumsan nunc consequat.
Nam tincidunt, purus ac sagittis blandit, mauris nulla malesuada tortor, eget
vehicula velit risus at dolor. Nam et imperdiet odio, et congue lorem. Etiam
volutpat volutpat erat sed scelerisque. Donec tortor dui, laoreet nec suscipit
et, tristique quis dui. Aenean vulputate ut nisl nec fermentum. Aliquam eget
ante vitae eros tempor maximus. Sed consequat tempor risus, eu consectetur
justo placerat faucibus. Donec nisl dolor, dapibus nec ex vel, eleifend
interdum eros. Sed vel suscipit elit. Phasellus tincidunt porta mi, id tempor
nunc fringilla in.
Proin tristique enim et fringilla fermentum. Suspendisse potenti. Sed
malesuada, eros lobortis pellentesque tempus, est turpis eleifend ante, vitae
cursus tellus elit vel mi. Maecenas vitae risus et orci efficitur eleifend a id
enim. Cras aliquam sapien nisi. Duis risus tortor, placerat a mauris vitae,
suscipit interdum lorem. Nulla ultricies ultrices convallis. Curabitur ligula
nulla, ultrices nec dapibus eget, mattis quis sem. Vivamus consectetur commodo
elit, accumsan vulputate nisl rutrum sed. Etiam ullamcorper enim ut ligula
cursus blandit. Quisque iaculis sit amet nunc id blandit. Nunc nec lorem
libero. Quisque nec hendrerit felis. Sed maximus dapibus metus, et faucibus
diam. Suspendisse dolor urna, feugiat vitae consectetur a, tempus at ante.
Aliquam dignissim nibh in purus elementum molestie.
In convallis dapibus dignissim. Duis dignissim tortor bibendum, sollicitudin
mauris eget, iaculis lacus. In vel consectetur augue. Mauris maximus, urna non
bibendum iaculis, massa velit consectetur augue, id blandit purus velit sed ex.
Suspendisse semper quam sed hendrerit porttitor. Aenean aliquam, diam eu
vestibulum tristique, velit nunc pulvinar ligula, sed feugiat nisl sapien non
mauris. Pellentesque efficitur ut nunc sit amet elementum. Aenean laoreet
placerat erat quis fermentum. Integer ultricies iaculis magna, vitae posuere
erat aliquet et.
Donec scelerisque ultrices libero quis imperdiet. Pellentesque id orci quam.
Aliquam vel pretium felis, a tempor metus. Nullam bibendum, eros sit amet
sollicitudin aliquet, neque nisl tempus quam, a malesuada lacus nisl a lacus.
Mauris volutpat ornare lacus, sit amet pretium eros dapibus eu. Proin ut ante
scelerisque velit eleifend varius. Maecenas vehicula hendrerit lectus quis
feugiat.
Proin finibus quam non faucibus vehicula. Nullam vel leo nunc. Nullam sed
turpis vel erat gravida efficitur ac sed augue. Sed maximus mi ut augue ornare
tincidunt. Duis id fermentum lacus. Integer vehicula nulla mauris, non blandit
sem euismod eu. Donec faucibus malesuada placerat. Cras non est scelerisque
nulla elementum euismod. Nam efficitur quam quis nisi sagittis dapibus. Aliquam
placerat ipsum ac nunc placerat imperdiet. Fusce mattis tincidunt odio, ut
faucibus nunc laoreet a. Morbi sodales sodales massa sed tempor. Donec aliquet
suscipit quam eget malesuada. Quisque commodo nisi sit amet tincidunt
imperdiet.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent placerat
lectus consequat, iaculis ante vitae, lobortis velit. Integer sed nibh quis sem
condimentum luctus. Nunc ut luctus nibh. Suspendisse pellentesque tortor id
ligula luctus tincidunt. Donec turpis mi, auctor non ligula quis, gravida
euismod est. Proin ullamcorper velit lacus, vitae porta tortor ultrices sit
amet. Nunc augue tellus, consectetur eu urna vel, auctor porta nunc. Duis
vestibulum at urna et aliquet. Quisque scelerisque, tellus id interdum dapibus,
libero arcu pretium lorem, non ultricies turpis urna id ante. Cras et arcu
egestas, luctus dolor eget, cursus orci. In condimentum tempus pharetra.
Pellentesque auctor metus nec augue condimentum, et posuere felis fermentum.
Nullam at sagittis mauris.
Donec tincidunt leo a nisl commodo finibus. Mauris tincidunt nibh enim, eget
interdum dui imperdiet quis. Donec aliquet augue vel ex euismod, id iaculis
elit blandit. Donec sit amet venenatis turpis, vel mollis dolor. Integer purus
sem, malesuada vitae varius vitae, auctor eget dolor. Aliquam ullamcorper nisl
id sem iaculis vehicula. Mauris imperdiet, quam sodales blandit vestibulum,
nisi dui rhoncus felis, sit amet commodo dolor lorem quis elit. Sed consequat
et ipsum eget hendrerit. Duis feugiat odio arcu, vitae aliquam arcu bibendum
congue.
Vestibulum commodo sed mauris a facilisis. Quisque vitae turpis volutpat,
pharetra tortor eget, cursus urna. Cras lorem quam, ornare at pellentesque ut,
rhoncus sed dolor. Ut quis felis urna. Vivamus quis risus fringilla, elementum
velit at, elementum diam. Curabitur viverra urna vitae rhoncus elementum.
Curabitur et vestibulum mauris. Aliquam molestie neque purus, porta ultrices ex
mollis vel. Sed malesuada quam tortor.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur
interdum rhoncus rhoncus. Phasellus vestibulum erat ut laoreet tristique.
Maecenas dignissim ultricies mauris eget feugiat. Sed sem odio, pulvinar ac
mauris ut, volutpat rhoncus mauris. Nulla facilisi. Nulla lacus sem, pharetra
et lacus pharetra, sodales convallis nulla. Integer id odio luctus, venenatis
nulla a, cursus diam. Nulla nibh mauris, accumsan vel ullamcorper eu, molestie
et mauris. Morbi at purus purus. Sed non metus mattis purus mattis sodales. Ut
aliquam, ex a mattis aliquet, dolor eros tempus sem, a convallis quam odio at
diam. In suscipit erat at nunc scelerisque consectetur. Cras facilisis quis
turpis ac posuere. Sed ut euismod lectus. Suspendisse sit amet lacinia magna.
Donec placerat nisi sit amet elit interdum interdum. In congue nunc eu lorem
lobortis blandit. Nam lobortis lobortis lacus consequat tincidunt. Integer
sapien nisl, scelerisque in neque ut, euismod fringilla mi. Vestibulum sed nisl
quis libero laoreet tempor ut vitae ante. Phasellus id quam vel felis convallis
semper eget sed dolor. Nullam nec commodo diam, id dignissim velit. Phasellus
semper tortor ipsum. Praesent scelerisque orci vitae quam vestibulum, sed
dictum quam tempus. Aenean porttitor ut nunc ut tempor. Nulla facilisi. Nullam
at sem id quam fringilla sagittis et eget diam. Vivamus fermentum laoreet elit,
ut convallis odio facilisis eu.
Mauris ut vulputate diam. Donec in consectetur justo. Vivamus feugiat, ligula
quis suscipit congue, massa purus luctus lorem, luctus pellentesque dolor magna
sed odio. Curabitur tempus dolor justo, vitae feugiat risus placerat sit amet.
Sed pellentesque aliquet velit vitae auctor. Aliquam porttitor, est in dictum
vestibulum, elit ligula varius metus, vitae sollicitudin orci lacus at arcu.
Cras nisl justo, aliquam ut diam quis, blandit interdum justo. Donec fringilla,
velit non mattis mollis, lacus sapien cursus dolor, sed interdum tortor nibh id
diam. Vestibulum rutrum sodales ipsum, quis aliquam odio pharetra at. Nullam
interdum nibh augue, vitae accumsan tortor elementum at. Integer in enim
porttitor est vulputate sollicitudin. Duis non pretium ipsum. Donec vitae purus
sit amet sem placerat viverra vel sed ligula. Integer fermentum finibus augue,
sit amet blandit lacus sagittis non.

View file

@ -26,5 +26,7 @@
{{ block "footer" . }} {{ block "footer" . }}
{{ partial "site-footer.html" . }} {{ partial "site-footer.html" . }}
{{ end }} {{ end }}
{{ block "extrajs" . }}
{{ end }}
</body> </body>
</html> </html>

View file

@ -1,3 +1,86 @@
{{ define "pagename" -}}
<!-- -->
{{- end }}
{{ define "main" }} {{ define "main" }}
{{ .Content }} {{ .Content }}
<div
id="blueimp-gallery"
class="blueimp-gallery blueimp-gallery-controls"
aria-label="image gallery"
aria-modal="true"
role="dialog"
>
<div class="slides" aria-live="polite"></div>
<h3 class="title"></h3>
<a
class="prev"
aria-controls="blueimp-gallery"
aria-label="previous slide"
aria-keyshortcuts="ArrowLeft"
></a>
<a
class="next"
aria-controls="blueimp-gallery"
aria-label="next slide"
aria-keyshortcuts="ArrowRight"
></a>
<a
class="close"
aria-controls="blueimp-gallery"
aria-label="close"
aria-keyshortcuts="Escape"
></a>
<a
class="play-pause"
aria-controls="blueimp-gallery"
aria-label="play slideshow"
aria-keyshortcuts="Space"
aria-pressed="false"
role="button"
></a>
<ol class="indicator"></ol>
</div>
{{ range .Params.georgespics }}
<div class="galleryblock">
<div class="blockhead">
<h2>
{{- .name }}
{{ with .osm -}}
<a class="osmlink" href="{{ . }}"><i class="fa fa-map-marker" aria-hidden="true"></i>
</a>
{{- end -}}
</h2>
<div class="gallerydate">
{{ time.Format "January 2006" .date }}
</div>
</div>
<div class="gallery">
{{ range .pics }}
<a href="{{ .path }}">
<img src="{{ .path }}" />
</a>
{{ end }}
</div>
</div>
{{ end }}
{{ end }}
{{ define "extrajs" }}
<script src="blueimp/js/blueimp-gallery.min.js"></script>
<script>
var galleries = document.getElementsByClassName('gallery');
for(gallery of galleries) {
gallery.onclick = function (event) {
event = event || window.event
var target = event.target || event.srcElement
var link = target.src ? target.parentNode : target
var options = { index: link, event: event }
var links = this.getElementsByTagName('a')
blueimp.Gallery(links, options)
}
}
</script>
{{ end }} {{ end }}

View file

@ -9,6 +9,12 @@ $width_xlarge: 1250px;
$width_large: 1000px; $width_large: 1000px;
$width_med: 650px; $width_med: 650px;
$gallery_2col: 400px;
$gallery_3col: 700px;
$gallery_autocol: 1000px;
$gallery_autocol_minwidth: 200px;
$gallery_autocol_maxwidth: 350px;
$font_size_small: 10pt; $font_size_small: 10pt;
$font_size_med: 11pt; $font_size_med: 11pt;
$font_size_large: 12pt; $font_size_large: 12pt;

View file

@ -1,6 +1,7 @@
// vim: tabstop=2 shiftwidth=2 expandtab // vim: tabstop=2 shiftwidth=2 expandtab
@import url('fonts.css'); @import url('fonts.css');
@import url('../blueimp/css/blueimp-gallery.min.css');
@import 'params'; @import 'params';
html { html {
@ -75,6 +76,13 @@ body {
} }
} }
#content {
margin: 30px 10px;
@media (min-width: $width_med) {
margin: 30px 20px;
}
}
footer { footer {
font-size: 0.7em; font-size: 0.7em;
@ -98,6 +106,64 @@ footer {
} }
} }
.galleryblock {
.blockhead {
display: flex;
flex-direction: column;
h2 {
margin: 0;
}
.gallerydate {
align-self: flex-end;
}
margin: 15px 0;
gap: 5px;
margin-top: 35px;
@media (min-width: $width_med) {
flex-direction: row;
justify-content: space-between;
align-items: center;
.gallerydate {
align-self: auto;
}
}
}
.gallery {
display: flex;
align-items: stretch;
flex-direction: column;
gap: 15px;
@media (min-width: $gallery_2col) {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: $gallery_3col) {
grid-template-columns: repeat(3, 1fr);
}
@media (min-width: $gallery_autocol) {
grid-template-columns: repeat(
auto-fill,
minmax($gallery_autocol_minwidth, 1fr)
);
}
a {
@media (min-width: $gallery_autocol) {
max-width: $gallery_autocol_maxwidth;
}
}
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
aspect-ratio: 1/1;
}
}
}
a, a:visited { a, a:visited {
color: $link_color; color: $link_color;
} }

View file

@ -1,4 +1,5 @@
@import url("fonts.css"); @import url("fonts.css");
@import url("../blueimp/css/blueimp-gallery.min.css");
html { html {
box-sizing: border-box; } box-sizing: border-box; }
@ -57,6 +58,11 @@ body {
transition: none .224s ease-in-out; transition: none .224s ease-in-out;
transition-property: background-color, font-size, height; } transition-property: background-color, font-size, height; }
#content {
margin: 30px 10px; }
@media (min-width: 650px) {
#content {
margin: 30px 20px; } }
footer { footer {
font-size: 0.7em; font-size: 0.7em;
display: flex; display: flex;
@ -73,5 +79,47 @@ footer {
@media (min-width: 650px) { @media (min-width: 650px) {
footer > div { footer > div {
margin: 0 15px; } } margin: 0 15px; } }
.galleryblock .blockhead {
display: flex;
flex-direction: column;
margin: 15px 0;
gap: 5px;
margin-top: 35px; }
.galleryblock .blockhead h2 {
margin: 0; }
.galleryblock .blockhead .gallerydate {
align-self: flex-end; }
@media (min-width: 650px) {
.galleryblock .blockhead {
flex-direction: row;
justify-content: space-between;
align-items: center; }
.galleryblock .blockhead .gallerydate {
align-self: auto; } }
.galleryblock .gallery {
display: flex;
align-items: stretch;
flex-direction: column;
gap: 15px; }
@media (min-width: 400px) {
.galleryblock .gallery {
display: grid;
grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) {
.galleryblock .gallery {
grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) {
.galleryblock .gallery {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
@media (min-width: 1000px) {
.galleryblock .gallery a {
max-width: 350px; } }
.galleryblock .gallery img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
aspect-ratio: 1/1; }
a, a:visited { a, a:visited {
color: #07a; } color: #07a; }

Binary file not shown.

After

Width:  |  Height:  |  Size: 474 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 494 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 456 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 261 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 518 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 555 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 459 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 474 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 567 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 497 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 506 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 567 KiB