Tentative gallery design

Add blueimp-gallery as submodule
Begin design
2022-02-02 23:46:26 +01:00 · 2022-02-02 23:45:29 +01:00 · 2022-02-02 15:59:34 +01:00 · 2022-01-21 19:03:39 +01:00
42 changed files with 3341 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,2 @@
 .hugo_build.lock
 public
--- a/.gitmodules
+++ b/.gitmodules
@ -0,0 +1,3 @@
 [submodule "contrib/blueimp-gallery"]
 	path = contrib/blueimp-gallery
 	url = https://github.com/blueimp/Gallery.git
--- a/archetypes/default.md
+++ b/archetypes/default.md
@ -0,0 +1,6 @@
 ---
 title: "{{ replace .Name "-" " " | title }}"
 date: {{ .Date }}
 draft: true
 ---
--- a/config.yaml
+++ b/config.yaml
@ -0,0 +1,49 @@
 baseURL: https://georges.tobast.fr/
 languageCode: fr-fr
 title: Georges
 disableHugoGeneratorInject: true
 enableRobotsTXT: false
 params:
  sourceURL: "https://git.tobast.fr/tobast/georges"
  siteLicenseURL: "https://www.gnu.org/licenses/gpl-3.0.en.html"
  siteLicenseName: "GNU GPLv3"
 privacy:
  disqus:
    disable: true
  googleAnalytics:
    disable: true
  instagram:
    disable: true
  twitter:
    disable: true
  vimeo:
    disable: true
  youtube:
    disable: true
 module:
  mounts:
  # Default mounts
  - source: content
    target: content
  - source: static
    target: static
  - source: layouts
    target: layouts
  - source: data
    target: data
  - source: assets
    target: assets
  - source: i18n
    target: i18n
  - source: archetypes
    target: archetypes
  # Blueimp Gallery
  - source: contrib/blueimp-gallery/css
    target: static/blueimp/css
  - source: contrib/blueimp-gallery/js
    target: static/blueimp/js
  - source: contrib/blueimp-gallery/img
    target: static/blueimp/img
--- a/content/_index.md
+++ 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
 ---
--- a/contrib/blueimp-gallery
+++ b/contrib/blueimp-gallery
@ -0,0 +1 @@
 Subproject commit beddb391b0fd89959ac2a9607f3b6e59551ba0ef
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -0,0 +1,32 @@
 <!DOCTYPE html>
 <html lang="fr">
  <head>
    <link rel="stylesheet" href="/css/style.css">
    <meta charset="utf-8">
    <title>{{ block "title" . }}
      {{- .Site.Title -}}
    {{ end }}</title>
  </head>
  <body>
    {{ block "header" . }}
      {{ partial "site-header.html" . }}
    {{ end }}
    <div id="content">
 			{{ block "pagename" . }}
 			{{ partial "pagetitle.html" . }}
 			{{ end }}
 			<div id="main">
 				{{ block "main" . }}
 				{{ end }}
 			</div>
    </div>
    {{ block "footer" . }}
      {{ partial "site-footer.html" . }}
    {{ end }}
    {{ block "extrajs" . }}
    {{ end }}
  </body>
 </html>
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@ -0,0 +1,13 @@
 {{ define "main" }}
  <div class="descr">
    {{ .Content }}
  </div>
  <div class="list">
    <ul>
      {{ range .Pages }}
      <li><a href="{{ .Permalink }}">{{ .Title }}</a>
      {{ end }}
    </ul>
  </div>
 {{ end }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -0,0 +1,3 @@
 {{ define "main" }}
  {{ .Content }}
 {{ end }}
--- a/layouts/index.html
+++ b/layouts/index.html
@ -0,0 +1,86 @@
 {{ define "pagename" -}}
 <!-- -->
 {{- end }}
 {{ define "main" }}
  {{ .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 }}
--- a/layouts/partials/pagetitle.html
+++ b/layouts/partials/pagetitle.html
@ -0,0 +1,3 @@
  <div id="pagename">
    {{ .Page.Title }}
  </div>
--- a/layouts/partials/site-footer.html
+++ b/layouts/partials/site-footer.html
@ -0,0 +1,9 @@
 <footer id="foot">
  <div id="footer-legal">
    Site sous license libre
    <a href="{{ $.Site.Params.siteLicenseURL }}">
      {{- $.Site.Params.siteLicenseName -}}
    </a> (<a href="{{ $.Site.Params.sourceURL }}">code</a>).
  </div>
  <div id="madeby">Made by <a href="https://tobast.fr/">tobast</a>.</div>
 </footer>
--- a/layouts/partials/site-header.html
+++ b/layouts/partials/site-header.html
@ -0,0 +1,38 @@
 <header id="head">
  <div class="sitetitle">
    <a href="/">{{ .Site.Title }}</a>
  </div>
 </header>
 <div id="headbg"></div>
 <script>
  const GEORGES_POS = 0.2;
  let isHeaderMenu = false;
  let ticking = false;
  function setHeaderbar(scrollPos) {
      if(!isHeaderMenu && scrollPos > GEORGES_POS * window.innerHeight) {
          header_elt = document.getElementsByTagName('header')[0];
          header_elt.classList.add('headerbar');
          isHeaderMenu = true;
        } else if(isHeaderMenu && scrollPos < GEORGES_POS * window.innerHeight) {
            document.getElementsByTagName('header')[0].classList.remove('headerbar');
            isHeaderMenu = false;
          }
    }
  setHeaderbar(window.scrollY);
  document.addEventListener('scroll', function(e) {
      if (!ticking) {
          window.requestAnimationFrame(function() {
              setHeaderbar(window.scrollY);
              ticking = false;
            });
          ticking = true;
        }
    });
 </script>
--- a/layouts/shortcodes/partial1.html
+++ b/layouts/shortcodes/partial1.html
@ -0,0 +1 @@
 {{- partial (.Get 0) (.Get 1) -}}
--- a/scss/Makefile
+++ b/scss/Makefile
@ -0,0 +1,10 @@
 STYLES=style.scss
 IMPORTS=$(shell ls -1 _*.scss)
 OUTDIR=../static/css
 SASS=sassc
 all: $(addprefix $(OUTDIR)/,$(STYLES:.scss=.css))
 $(OUTDIR)/%.css: %.scss $(IMPORTS)
 	$(SASS) "$<" "$@"
--- a/scss/_params.scss
+++ b/scss/_params.scss
@ -0,0 +1,20 @@
 // vim: tabstop=2 shiftwidth=2 expandtab
 $bg_color: white;
 $link_color: #07a;
 $fg_color: #555;
 $head_bg_color: #060033;
 $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;
--- a/scss/style.scss
+++ b/scss/style.scss
@ -0,0 +1,169 @@
 // vim: tabstop=2 shiftwidth=2 expandtab
@import url('fonts.css');
@import url('../blueimp/css/blueimp-gallery.min.css');
@import 'params';
 html {
  box-sizing: border-box;
 }
 *, *:before, *:after {
  box-sizing: inherit;
 }
 html {
  background-color: $bg_color;
  color:$fg_color;
  height: 100%;
 }
 body {
  font-family:Open Sans,Arial;
  font-size: $font_size_small;
  line-height:1.4;
  @media (min-width: $width_med) {
    font-size: $font_size_med;
  }
  @media (min-width: $width_large) {
    font-size: $font_size_large;
  }
  text-align:justify;
  margin: 0;
  padding: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
 }
 #headbg {
  background-image: url("../img/headbg.jpg");
  /* Full height */
  height: 100vh;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
 }
 #head {
  position: absolute;
  top: 20%;
  width: 100%;
  height: 100px;
  text-align: center;
  font: 400 65px/1.8 sans-serif;
  color: white;
  letter-spacing: 10px;
  z-index: 100;
 	a {
    color: white;
    text-decoration: none;
 	}
  &.headerbar {
    position: fixed;
    top: 0px;
    background-color: black;
    height: 75px;
    font-size: 45px;
    transition: none .224s ease-in-out;
    transition-property: background-color, font-size, height;
  }
 }
 #content {
  margin: 30px 10px;
  @media (min-width: $width_med) {
    margin: 30px 20px;
  }
 }
 footer {
  font-size: 0.7em;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  @media (min-width: $width_med) {
    flex-direction: row;
  }
  margin: 10px 20px;
  margin-top: auto;
  > div {
    margin: 5px 15px;
    @media (min-width: $width_med) {
      margin: 0 15px;
    }
  }
 }
 .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;
 }
--- a/static/css/font-awesome.min.css
+++ b/static/css/font-awesome.min.css
--- a/static/css/font-opensans.css
+++ b/static/css/font-opensans.css
@ -0,0 +1,58 @@
 /**** OPEN SANS **************************************************************/
 /* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.woff') format('woff');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.woff') format('woff');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.woff') format('woff');
  unicode-range: U+1F00-1FFF;
 }
 /* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.woff') format('woff');
  unicode-range: U+0370-03FF;
 }
 /* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.woff') format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.woff') format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
--- a/static/css/fonts.css
+++ b/static/css/fonts.css
@ -0,0 +1,2 @@
@import url('font-opensans.css');
@import url('font-awesome.min.css');
--- a/static/css/style.css
+++ b/static/css/style.css
@ -0,0 +1,125 @@
@import url("fonts.css");
@import url("../blueimp/css/blueimp-gallery.min.css");
 html {
  box-sizing: border-box; }
 *, *:before, *:after {
  box-sizing: inherit; }
 html {
  background-color: white;
  color: #555;
  height: 100%; }
 body {
  font-family: Open Sans,Arial;
  font-size: 10pt;
  line-height: 1.4;
  text-align: justify;
  margin: 0;
  padding: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column; }
  @media (min-width: 650px) {
    body {
      font-size: 11pt; } }
  @media (min-width: 1000px) {
    body {
      font-size: 12pt; } }
 #headbg {
  background-image: url("../img/headbg.jpg");
  /* Full height */
  height: 100vh;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }
 #head {
  position: absolute;
  top: 20%;
  width: 100%;
  height: 100px;
  text-align: center;
  font: 400 65px/1.8 sans-serif;
  color: white;
  letter-spacing: 10px;
  z-index: 100; }
  #head a {
    color: white;
    text-decoration: none; }
  #head.headerbar {
    position: fixed;
    top: 0px;
    background-color: black;
    height: 75px;
    font-size: 45px;
    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;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  margin: 10px 20px;
  margin-top: auto; }
  @media (min-width: 650px) {
    footer {
      flex-direction: row; } }
  footer > div {
    margin: 5px 15px; }
    @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; }
--- a/static/fonts/FontAwesome.otf
+++ b/static/fonts/FontAwesome.otf
--- a/static/fonts/OpenSans-Regular.woff
+++ b/static/fonts/OpenSans-Regular.woff
--- a/static/fonts/fontawesome-webfont.eot
+++ b/static/fonts/fontawesome-webfont.eot
--- a/static/fonts/fontawesome-webfont.svg
+++ b/static/fonts/fontawesome-webfont.svg
--- a/static/fonts/fontawesome-webfont.ttf
+++ b/static/fonts/fontawesome-webfont.ttf
--- a/static/fonts/fontawesome-webfont.woff
+++ b/static/fonts/fontawesome-webfont.woff
--- a/static/fonts/fontawesome-webfont.woff2
+++ b/static/fonts/fontawesome-webfont.woff2
--- a/static/img/georges/2021-06-27-pra1.jpg
+++ b/static/img/georges/2021-06-27-pra1.jpg
--- a/static/img/georges/2021-06-27-pra2.jpg
+++ b/static/img/georges/2021-06-27-pra2.jpg
--- a/static/img/georges/2021-06-27-pra3.jpg
+++ b/static/img/georges/2021-06-27-pra3.jpg
--- a/static/img/georges/2021-06-27-pra4.jpg
+++ b/static/img/georges/2021-06-27-pra4.jpg
--- a/static/img/georges/2021-06-27-pra5.jpg
+++ b/static/img/georges/2021-06-27-pra5.jpg
--- a/static/img/georges/2021-07-05-bretagne.jpg
+++ b/static/img/georges/2021-07-05-bretagne.jpg
--- a/static/img/georges/2021-07-27-moureze1.jpg
+++ b/static/img/georges/2021-07-27-moureze1.jpg
--- a/static/img/georges/2021-07-27-moureze2.jpg
+++ b/static/img/georges/2021-07-27-moureze2.jpg
--- a/static/img/georges/2021-07-27-moureze3.jpg
+++ b/static/img/georges/2021-07-27-moureze3.jpg
--- a/static/img/georges/2021-11-13-crolles1.jpg
+++ b/static/img/georges/2021-11-13-crolles1.jpg
--- a/static/img/georges/2021-11-13-crolles2.jpg
+++ b/static/img/georges/2021-11-13-crolles2.jpg
--- a/static/img/georges/2021-11-13-crolles3.jpg
+++ b/static/img/georges/2021-11-13-crolles3.jpg
--- a/static/img/georges/2021-11-13-crolles4.jpg
+++ b/static/img/georges/2021-11-13-crolles4.jpg
--- a/static/img/headbg.jpg
+++ b/static/img/headbg.jpg
Author	SHA1	Message	Date
Théophile Bastian	4b28fad141	Tentative gallery design	2022-02-02 23:46:26 +01:00
Théophile Bastian	37ff486081	Add blueimp-gallery as submodule	2022-02-02 23:45:29 +01:00
Théophile Bastian	714fea62d0	Begin design	2022-02-02 15:59:34 +01:00
Théophile Bastian	b216fdcf50	Hugo: initialize project	2022-01-21 19:03:39 +01:00
		`@ -0,0 +1 @@`
							`Subproject commit beddb391b0fd89959ac2a9607f3b6e59551ba0ef`
		`@ -0,0 +1,2 @@`
							`@import url('font-opensans.css');`
							`@import url('font-awesome.min.css');`