Super fancy snap scrolling photos page

apexskier · Oct 25, 2020 · ba3c2f7 · ba3c2f7
1 parent 0ba70ed
commit ba3c2f7
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 25 deletions.
diff --git 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
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{ .Site.Language }}">
+<html lang="{{ .Site.Language }}" data-type="{{ .Page.Type }}" data-kind="{{ .Page.Kind }}">
     {{- partial "head.html" . -}}
     <body>
         <div id="bun" class="bun" style="display: none">
@@ -13,7 +13,7 @@
             {{ end }}
         </div>
         <div id="wrapper">
-            <div id="container" data-type="{{ .Page.Type }}" data-kind="{{ .Page.Kind }}">
+            <div id="container">
                 <div id="content">
                     <div id="headerish">
                         {{- partial "header.html" . -}}

diff --git a/layouts/photos/li.html b/layouts/photos/li.html
@@ -1,9 +1,42 @@
-<li class="photo-link">
+{{ $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 "") }}
+
+<style>
+#{{ $id }} {
+    max-width: calc({{ mul $aspectRatio 100 }}vh - {{ mul $aspectRatio 3 }}em);
+}
+@media only screen and (min-width: 45em) {
+    #{{ $id }} {
+        max-width: calc({{ mul $aspectRatio 100 }}vh - {{ mul $aspectRatio 8 }}em);
+    }
+}
+
+#{{ $id }} picture {
+    {{ with $mini }}
+    {{/* padding based forced aspect ratio */}}
+    padding-bottom: {{ (mul (div .Height (float .Width)) 100) }}%;
+    height: 0;
+    {{ end }}
+    {{ with .Params.color }}
+    {{/* fallback/preloading image */}}
+    {{/* with .Params.color.average }}
+    background-color: {{ . }};
+    {{ end */}}
+    background-image: url(data:image/svg+xml,{{ partial "placeholder.svg" . | safeHTML }});
+    background-repeat: no-repeat;
+    background-size: 100%;
+    {{ end }}
+}
+</style>
+
+<li id="{{ $id }}" class="photo-link">
+    <!-- this outer container forces the padding based aspect ratio to be constrained to the height of the page -->
     <a href="{{ .RelPermalink }}">
         <picture title="{{ .Title }}">
-            <source srcset="https://content.camlittle.com/photos/{{ .Params.photo }}_640.webp" type="image/webp" />
-            <source srcset="https://content.camlittle.com/photos/{{ .Params.photo }}_640.jpg" />
-            <img alt="{{ .Title }}" src="https://content.camlittle.com/photos/{{ .Params.photo }}_640.jpg" height="420" />
+            <source srcset="https://content.camlittle.com/photos/{{ .Params.photo }}_1280.webp" type="image/webp" />
+            <source srcset="https://content.camlittle.com/photos/{{ .Params.photo }}_1280.jpg" />
+            <img src="https://content.camlittle.com/photos/{{ .Params.photo }}_1280.jpg" />
         </picture>
     </a>
 </li>
diff --git a/layouts/photos/section.html b/layouts/photos/section.html
@@ -1,8 +1,5 @@
 {{ define "main" }}
-<h1>
-    {{ .Title }}
-    {{ partial "section/titlePagination" . }}
-</h1>
-
 {{ partial "section/list" . }}
+
+<div class="scroll-bottom-stopper"><!-- when scrolling to the very bottom, stop before footer is revealed --></div>
 {{ end }}
diff --git a/layouts/photos/single.html b/layouts/photos/single.html
@@ -59,12 +59,14 @@ <h1>{{ .Title }}</h1>
 
 {{ .Content }}
 
+<!--
 <div class="palette">
     <div style="background-color: {{ .Params.color.top }}"></div>
     <div style="background-color: {{ .Params.color.left }}"></div>
     <div style="background-color: {{ .Params.color.right }}"></div>
     <div style="background-color: {{ .Params.color.bottom }}"></div>
     <div style="background-color: {{ .Params.color.average }}"></div>
 </div>
+-->
 
 {{ end }}