Merge branch 'dev' into main

2026-04-14 10:09:31 -07:00 · 2023-10-29 22:15:47 +08:00
parent b1303970da 6e4213054c
commit 13fa8b21fb
31 changed files with 1375 additions and 314 deletions
--- a/assets/scss/_core/_base.scss
+++ b/assets/scss/_core/_base.scss
@@ -0,0 +1,20 @@
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  user-select: none;
+  background: white;
+}
+
+html,
+body {
+  overscroll-behavior-y: none;
+}
+
+a,
+button {
+  cursor: pointer;
+}
+
--- a/assets/scss/_core/_font.scss
+++ b/assets/scss/_core/_font.scss
@@ -0,0 +1,6 @@
+@font-face {
+  font-family: HelveticaNow;
+  src: url('/fonts/HelveticaNowText-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
--- a/assets/scss/_core/_mixins.scss
+++ b/assets/scss/_core/_mixins.scss
@@ -0,0 +1,28 @@
+$breakpoints: (
+  'mobile': 375px,
+  'tablet': 768px,
+  'laptop': 1024px,
+  'desktop': 1440px
+) !default;
+
+// Breakpoints
+
+@mixin min-width($breakpoint) {
+  @if map-has-key($breakpoints, $breakpoint) {
+    @media (min-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  } @else {
+    @error "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + "Available breakpoints are: #{map-keys($breakpoints)}.";
+  }
+}
+
+@mixin max-width($breakpoint) {
+  @if map-has-key($breakpoints, $breakpoint) {
+    @media (max-width: (map-get($breakpoints, $breakpoint) - 1px)) {
+      @content;
+    }
+  } @else {
+    @error "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + "Available breakpoints are: #{map-keys($breakpoints)}.";
+  }
+}
--- a/assets/scss/_core/_reset.scss
+++ b/assets/scss/_core/_reset.scss
@@ -0,0 +1,109 @@
+/***
+    The new CSS reset - version 1.11.1 (last updated 24.10.2023)
+    GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
+
+/*
+    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+    - The "symbol *" part is to solve Firefox SVG sprite bug
+    - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
+ */
+*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
+  all: unset;
+  display: revert;
+}
+
+/* Preferred box-sizing value */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Fix mobile Safari increase font-size on landscape mode */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/* Reapply the pointer cursor for anchor tags */
+a,
+button {
+  cursor: revert;
+}
+
+/* Remove list styles (bullets/numbers) */
+ol,
+ul,
+menu,
+summary {
+  list-style: none;
+}
+
+/* For images to not be able to exceed their container */
+img {
+  max-inline-size: 100%;
+  max-block-size: 100%;
+}
+
+/* removes spacing between cells in tables */
+table {
+  border-collapse: collapse;
+}
+
+/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
+input,
+textarea {
+  -webkit-user-select: auto;
+}
+
+/* revert the 'white-space' property for textarea elements on Safari */
+textarea {
+  white-space: revert;
+}
+
+/* minimum style to allow to style meter element */
+meter {
+  -webkit-appearance: revert;
+  appearance: revert;
+}
+
+/* preformatted text - use only for this feature */
+:where(pre) {
+  all: revert;
+  box-sizing: border-box;
+}
+
+/* reset default text opacity of input placeholder */
+::placeholder {
+  color: unset;
+}
+
+/* fix the feature of 'hidden' attribute.
+   display:revert; revert to element instead of attribute */
+:where([hidden]) {
+  display: none;
+}
+
+/* revert for bug in Chromium browsers
+   - fix for the content editable attribute will work properly.
+   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
+:where([contenteditable]:not([contenteditable='false'])) {
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+  overflow-wrap: break-word;
+  -webkit-line-break: after-white-space;
+  -webkit-user-select: auto;
+}
+
+/* apply back the draggable feature - exist only in Chromium and Safari */
+:where([draggable='true']) {
+  -webkit-user-drag: element;
+}
+
+/* Revert Modal native behavior */
+:where(dialog:modal) {
+  all: revert;
+  box-sizing: border-box;
+}
--- a/assets/scss/_core/_typography.scss
+++ b/assets/scss/_core/_typography.scss
@@ -0,0 +1,14 @@
+@import 'mixins';
+
+body {
+  line-height: 1.2;
+  font-size: 16px;
+  font-family: HelveticaNow, helvetica, arial, sans-serif;
+
+  @include min-width('tablet') {
+    font-size: 18px;
+  }
+  @include min-width('laptop') {
+    font-size: 19px;
+  }
+}
--- a/assets/scss/_partial/_collection.scss
+++ b/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;
+}
--- a/assets/scss/_partial/_container.scss
+++ b/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;
+}
--- a/assets/scss/_partial/_gallery.scss
+++ b/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;
+}
--- a/assets/scss/_partial/_nav.scss
+++ b/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;
+  }
+}
--- a/assets/scss/_partial/_stage.scss
+++ b/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;
+  }
+}
--- a/assets/scss/_partial/_stageNav.scss
+++ b/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;
+  }
+}
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -0,0 +1,12 @@
+@import '_core/mixins';
+
+:root {
+  --window-height: 100vh;
+  --nav-height: 2rem;
+  --space-standard: 0.625rem;
+
+  --z-curtain: 200;
+  --z-nav-gallery: 500;
+  --z-cursor: 600;
+  --z-nav: 800;
+}
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -0,0 +1,17 @@
+@charset "utf-8";
+
+@import '_core/reset';
+@import '_core/font';
+@import '_core/typography';
+@import '_core/mixins';
+@import '_variables';
+@import '_core/base';
+
+@import '_partial/nav';
+
+@import '_partial/customCursor';
+@import '_partial/stage';
+@import '_partial/stageNav';
+
+@import '_partial/collection';
+@import '_partial/gallery';