Merge branch 'dev' into main

assets/scss/_partial/_collection.scss

@@ -0,0 +1,29 @@
+.collection {
+  display: flex;
+  flex-direction: column;
+  gap: 20vh;
+
+  padding-top: 50vh;
+  margin-top: calc(var(--nav-height) * -1);
+
+  img {
+    position: sticky;
+    top: 50vh;
+
+    width: 60vw;
+    height: 20vh;
+
+    object-fit: contain;
+
+    transform: translate3d(0, -50%, 0);
+    align-self: center;
+
+    &:last-child {
+      margin-bottom: 20vh;
+    }
+  }
+}
+
+.hidden {
+  display: none;
+}

assets/scss/_partial/_container.scss

@@ -0,0 +1,19 @@
+.container {
+  position: fixed;
+  top: 0;
+  z-index: 0;
+
+  width: 100vw;
+  height: var(--window-height);
+
+  overflow-y: scroll;
+  overflow-x: hidden;
+  background: white;
+
+  overscroll-behavior: none;
+  -webkit-overflow-scrolling: none;
+}
+
+.disableScroll {
+  pointer-events: none;
+}

assets/scss/_partial/_gallery.scss

@@ -0,0 +1,56 @@
+.gallery {
+  pointer-events: all;
+
+  position: fixed;
+  top: var(--nav-height);
+  z-index: var(--z-nav-gallery);
+
+  display: flex;
+  flex-direction: column;
+
+  width: 100vw;
+  height: calc(var(--window-height) - var(--nav-height));
+  background: white;
+  transform: translate3d(0, 100%, 0);
+
+  .galleryInner {
+    flex: 1;
+    height: 0;
+
+    .swiper-slide {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+  }
+
+  .nav {
+    height: var(--nav-height);
+    padding: var(--space-standard);
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+.curtain {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--z-curtain);
+
+  width: 100vw;
+  height: var(--window-height);
+
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+
+  pointer-events: none;
+}

assets/scss/_partial/_nav.scss

@@ -0,0 +1,43 @@
+@import '../_core/mixins';
+$tablet: map-get($breakpoints, 'tablet') - 1;
+
+nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  width: 100%;
+  height: var(--nav-height);
+  padding: 0 var(--space-standard);
+
+  position: fixed;
+  bottom: 0;
+  background: white;
+
+  z-index: var(--z-nav);
+
+  // Maintain functionality while container is locked
+  pointer-events: all;
+}
+
+.num {
+  width: 0.625em;
+  display: inline-block;
+  text-align: center;
+}
+
+.current {
+  font-style: italic;
+  text-decoration: underline;
+}
+
+@media (max-width: $tablet), (hover: none) {
+  nav {
+    top: 0;
+  }
+
+  .index,
+  .threshold {
+    display: none;
+  }
+}

assets/scss/_partial/_stage.scss

@@ -0,0 +1,22 @@
+.stage {
+  position: relative;
+  overflow: hidden;
+  width: 100vw;
+  height: calc(var(--window-height) - var(--nav-height));
+
+  cursor: pointer;
+
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100vw;
+    height: var(--window-height);
+    object-fit: contain;
+
+    transform: scale(0.6);
+    opacity: 0;
+    pointer-events: none;
+  }
+}

assets/scss/_partial/_stageNav.scss

@@ -0,0 +1,21 @@
+.navOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--z-nav-gallery);
+
+  width: 100vw;
+  height: calc(var(--window-height) - var(--nav-height));
+
+  display: flex;
+  cursor: none;
+
+  &:not(.active) {
+    pointer-events: none;
+    display: none;
+  }
+
+  .overlay {
+    flex: 1;
+  }
+}