From ba3c2f705ec52bc364202044979bea287a4d2b60 Mon Sep 17 00:00:00 2001 From: Cameron Little Date: Sun, 25 Oct 2020 22:30:36 +0100 Subject: [PATCH] Super fancy snap scrolling photos page --- assets/css/main.css | 101 ++++++++++++++++++++++++++++++----- layouts/_default/baseof.html | 4 +- layouts/photos/li.html | 41 ++++++++++++-- layouts/photos/section.html | 7 +-- layouts/photos/single.html | 2 + 5 files changed, 130 insertions(+), 25 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index 334353f..e3c7bbd 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -358,7 +358,7 @@ li:target { transition: opacity 200ms ease-in-out; } - &[data-type="photos"] { + html[data-type="photos"] & { & #headerish > * { opacity: 0.2; @@ -663,6 +663,7 @@ nav.social-links { & .photo-link { list-style: none; padding: 0; + margin: 0; } & .post-link { @@ -678,18 +679,6 @@ nav.social-links { } } - & .photo-link { - margin: 0 0 4em; - - &:last-of-type { - margin-bottom: 0; - } - - & img { - margin: 0; - } - } - & .thumbnail { margin-right: var(--copy-spacing); margin-bottom: 0; @@ -733,7 +722,6 @@ main { box-shadow: var(--minimal-box-shadow); max-width: 100%; height: auto; - max-height: calc(100vh - 3em); } & picture { @@ -1223,6 +1211,91 @@ pre code { } } +html[data-type="photos"][data-kind="section"] { + /* Ensure the body element scrolls. In Chrome it's the html element by default; in Safari it's body */ + + overflow: hidden; + height: 100%; + + & body { + overflow: scroll; + scroll-snap-type: block mandatory; + height: 100%; + } + + & #container { + padding-top: 0; + } + + & #headerish { + padding-top: 1.5em; + scroll-snap-align: start; + } + + & footer { + scroll-margin-bottom: 1.5em; + scroll-snap-align: end; + } + + & .photo-link { + scroll-snap-align: start; + padding-top: 1.5em; + padding-bottom: 1.5em; + height: calc(100vh - 3em); + display: flex; + align-items: center; + justify-content: center; + margin-left: auto; + margin-right: auto; + + &:first-of-type { + /* scroll-snap-align: start; */ + } + + &:last-of-type { + margin-bottom: 0; + } + + & picture { + margin: 0; + background-repeat: no-repeat; + background-size: 100%; + } + + & a { + display: block; + width: 100%; + max-height: 100%; + } + + & img { + width: 100%; + } + } + + & .scroll-bottom-stopper { + scroll-snap-stop: always; + scroll-snap-align: end; + } + + @media only screen and (min-width: 45em) { + /* + NOTE: + there's really weird behavior in chrome when two elements have scroll snapping + at the same position (e.g. header in sidebar and top image) + To avoid this, disable scroll snapping on one of them + */ + + & .photo-link { + padding-top: 4em; + padding-bottom: 4em; + height: calc(100vh - 8em); + justify-content: flex-start; + margin-left: 0; + } + } +} + /* * Clearfix: contain floats * diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index ca45880..64cc274 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,5 +1,5 @@ - + {{- partial "head.html" . -}}
-
+
{{- partial "header.html" . -}} diff --git a/layouts/photos/li.html b/layouts/photos/li.html index ef5bf9e..7b041e8 100644 --- a/layouts/photos/li.html +++ b/layouts/photos/li.html @@ -1,9 +1,42 @@ -
  • +{{ $mini := .Resources.GetMatch (printf "%s_128.jpg" .Params.photo) }} +{{ $aspectRatio := div $mini.Width (float $mini.Height) }} +{{ $id := printf "item-%s" ($mini.Content | md5 | truncate 10 "") }} + + + +
    • diff --git a/layouts/photos/section.html b/layouts/photos/section.html index 0c5646b..2328598 100644 --- a/layouts/photos/section.html +++ b/layouts/photos/section.html @@ -1,8 +1,5 @@ {{ define "main" }} -

    - {{ .Title }} - {{ partial "section/titlePagination" . }} -

    - {{ partial "section/list" . }} + +
    {{ end }} diff --git a/layouts/photos/single.html b/layouts/photos/single.html index 8a0888d..c09142d 100644 --- a/layouts/photos/single.html +++ b/layouts/photos/single.html @@ -59,6 +59,7 @@

    {{ .Title }}

    {{ .Content }} + {{ end }}