diff --git a/content/_index.md b/content/_index.md new file mode 100644 index 0000000..6b5c362 --- /dev/null +++ b/content/_index.md @@ -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 +--- diff --git a/content/index.md b/content/index.md deleted file mode 100644 index 233f83a..0000000 --- a/content/index.md +++ /dev/null @@ -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. diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 8c11af6..aeb908b 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -26,5 +26,7 @@ {{ block "footer" . }} {{ partial "site-footer.html" . }} {{ end }} + {{ block "extrajs" . }} + {{ end }} diff --git a/layouts/index.html b/layouts/index.html index e0e8308..3b210b9 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,3 +1,86 @@ +{{ define "pagename" -}} + +{{- end }} + {{ define "main" }} {{ .Content }} + + + {{ range .Params.georgespics }} +
+
+

+ {{- .name }} + {{ with .osm -}} + + + {{- end -}} +

+
+ {{ time.Format "January 2006" .date }} +
+
+ +
+ {{ range .pics }} + + + + {{ end }} +
+
+ {{ end }} +{{ end }} + +{{ define "extrajs" }} + + {{ end }} diff --git a/scss/_params.scss b/scss/_params.scss index 1063ee9..7b3704c 100644 --- a/scss/_params.scss +++ b/scss/_params.scss @@ -9,6 +9,12 @@ $width_xlarge: 1250px; $width_large: 1000px; $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_med: 11pt; $font_size_large: 12pt; diff --git a/scss/style.scss b/scss/style.scss index 8ecc30a..81c1f11 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -1,6 +1,7 @@ // vim: tabstop=2 shiftwidth=2 expandtab @import url('fonts.css'); +@import url('../blueimp/css/blueimp-gallery.min.css'); @import 'params'; html { @@ -75,6 +76,13 @@ body { } } +#content { + margin: 30px 10px; + + @media (min-width: $width_med) { + margin: 30px 20px; + } +} footer { 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 { color: $link_color; } diff --git a/static/css/style.css b/static/css/style.css index 2dcfa53..511d61b 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,4 +1,5 @@ @import url("fonts.css"); +@import url("../blueimp/css/blueimp-gallery.min.css"); html { box-sizing: border-box; } @@ -57,6 +58,11 @@ body { transition: none .224s ease-in-out; transition-property: background-color, font-size, height; } +#content { + margin: 30px 10px; } + @media (min-width: 650px) { + #content { + margin: 30px 20px; } } footer { font-size: 0.7em; display: flex; @@ -73,5 +79,47 @@ footer { @media (min-width: 650px) { footer > div { 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 { color: #07a; } diff --git a/static/img/georges/2021-06-27-pra1.jpg b/static/img/georges/2021-06-27-pra1.jpg new file mode 100644 index 0000000..e6d6320 Binary files /dev/null and b/static/img/georges/2021-06-27-pra1.jpg differ diff --git a/static/img/georges/2021-06-27-pra2.jpg b/static/img/georges/2021-06-27-pra2.jpg new file mode 100644 index 0000000..32cc7f0 Binary files /dev/null and b/static/img/georges/2021-06-27-pra2.jpg differ diff --git a/static/img/georges/2021-06-27-pra3.jpg b/static/img/georges/2021-06-27-pra3.jpg new file mode 100644 index 0000000..fbe5ba4 Binary files /dev/null and b/static/img/georges/2021-06-27-pra3.jpg differ diff --git a/static/img/georges/2021-06-27-pra4.jpg b/static/img/georges/2021-06-27-pra4.jpg new file mode 100644 index 0000000..cded5a9 Binary files /dev/null and b/static/img/georges/2021-06-27-pra4.jpg differ diff --git a/static/img/georges/2021-06-27-pra5.jpg b/static/img/georges/2021-06-27-pra5.jpg new file mode 100644 index 0000000..4f31f08 Binary files /dev/null and b/static/img/georges/2021-06-27-pra5.jpg differ diff --git a/static/img/georges/2021-07-05-bretagne.jpg b/static/img/georges/2021-07-05-bretagne.jpg new file mode 100644 index 0000000..fa17e2b Binary files /dev/null and b/static/img/georges/2021-07-05-bretagne.jpg differ diff --git a/static/img/georges/2021-07-27-moureze1.jpg b/static/img/georges/2021-07-27-moureze1.jpg new file mode 100644 index 0000000..a9415a3 Binary files /dev/null and b/static/img/georges/2021-07-27-moureze1.jpg differ diff --git a/static/img/georges/2021-07-27-moureze2.jpg b/static/img/georges/2021-07-27-moureze2.jpg new file mode 100644 index 0000000..c62b7fb Binary files /dev/null and b/static/img/georges/2021-07-27-moureze2.jpg differ diff --git a/static/img/georges/2021-07-27-moureze3.jpg b/static/img/georges/2021-07-27-moureze3.jpg new file mode 100644 index 0000000..13f2546 Binary files /dev/null and b/static/img/georges/2021-07-27-moureze3.jpg differ diff --git a/static/img/georges/2021-11-13-crolles1.jpg b/static/img/georges/2021-11-13-crolles1.jpg new file mode 100644 index 0000000..ced03e9 Binary files /dev/null and b/static/img/georges/2021-11-13-crolles1.jpg differ diff --git a/static/img/georges/2021-11-13-crolles2.jpg b/static/img/georges/2021-11-13-crolles2.jpg new file mode 100644 index 0000000..9fc448e Binary files /dev/null and b/static/img/georges/2021-11-13-crolles2.jpg differ diff --git a/static/img/georges/2021-11-13-crolles3.jpg b/static/img/georges/2021-11-13-crolles3.jpg new file mode 100644 index 0000000..51654c9 Binary files /dev/null and b/static/img/georges/2021-11-13-crolles3.jpg differ diff --git a/static/img/georges/2021-11-13-crolles4.jpg b/static/img/georges/2021-11-13-crolles4.jpg new file mode 100644 index 0000000..e243d15 Binary files /dev/null and b/static/img/georges/2021-11-13-crolles4.jpg differ