From d985504a1cafa92239341af359af8bd3a54a4833 Mon Sep 17 00:00:00 2001 From: Sped0n Date: Sun, 29 Oct 2023 00:58:09 +0800 Subject: [PATCH] feat: add custom cursor styles Add a new file `_customCursor.scss` to the `assets/css/_partial` directory. This file contains styles for a custom cursor. The `.cursor` class is used to position the cursor and set its appearance. The `.active` class is used to display the cursor. The `.cursorInner` class is used to position the inner content of the cursor. --- refactor: remove unused footer styles Delete the file `_footer.scss` from the `assets/css/_partial` directory. This file contains styles for the footer section of the page. The styles are no longer used and can be safely removed. --- refactor: remove unused image styles Delete the files `_imagesDesktop.scss` and `_imagesMobile.scss` from the `assets/css/_partial` directory. These files contain styles for displaying images on desktop and mobile devices. The styles are no longer used and can be safely removed. --- feat: add navigation styles Add a new file `_nav.scss` to the `assets/css/_partial` directory. This file contains styles for the navigation bar. The styles define the layout and appearance of the navigation bar, including its position, background color, and alignment of its contents. The styles also include media queries to adjust the layout for smaller screens. --- refactor: remove unused overlay styles Delete the file `_overlay.scss` from the `assets/css/_partial` directory. This file contains styles for an overlay element. The styles are no longer used and can be safely removed. --- feat: add stage styles Add a new file `_stage.scss` to the `assets/css/_partial` directory. This file contains styles for the stage element, which is used to display images. The styles define the position and size of the stage, as well as the appearance of the images within it. --- feat: add stage navigation overlay styles Add a new file `_stageNav.scss` to the `assets/css/_partial` directory. This file contains styles for the stage navigation overlay. The styles define the position and size of the overlay, as well as its appearance and behavior. The overlay is used for navigation within the stage. --- assets/css/_partial/_customCursor.scss | 21 +++++++ assets/css/_partial/_footer.scss | 75 ------------------------- assets/css/_partial/_imagesDesktop.scss | 52 ----------------- assets/css/_partial/_imagesMobile.scss | 16 ------ assets/css/_partial/_nav.scss | 44 +++++++++++++++ assets/css/_partial/_overlay.scss | 15 ----- assets/css/_partial/_stage.scss | 22 ++++++++ assets/css/_partial/_stageNav.scss | 21 +++++++ 8 files changed, 108 insertions(+), 158 deletions(-) create mode 100644 assets/css/_partial/_customCursor.scss delete mode 100644 assets/css/_partial/_footer.scss delete mode 100644 assets/css/_partial/_imagesDesktop.scss delete mode 100644 assets/css/_partial/_imagesMobile.scss create mode 100644 assets/css/_partial/_nav.scss delete mode 100644 assets/css/_partial/_overlay.scss create mode 100644 assets/css/_partial/_stage.scss create mode 100644 assets/css/_partial/_stageNav.scss diff --git a/assets/css/_partial/_customCursor.scss b/assets/css/_partial/_customCursor.scss new file mode 100644 index 0000000..591c8f5 --- /dev/null +++ b/assets/css/_partial/_customCursor.scss @@ -0,0 +1,21 @@ +.cursor { + position: fixed; + z-index: var(--z-cursor); + top: 0; + left: 0; + + display: none; + cursor: none; + pointer-events: none; + + color: white; + mix-blend-mode: difference; +} + +.active { + display: block; +} + +.cursorInner { + transform: translate3d(-50%, -50%, 0); +} diff --git a/assets/css/_partial/_footer.scss b/assets/css/_partial/_footer.scss deleted file mode 100644 index 62823fb..0000000 --- a/assets/css/_partial/_footer.scss +++ /dev/null @@ -1,75 +0,0 @@ -footer { - max-height: fit-content; - position: fixed; - bottom: 0; - left: 0; - right: 0; - z-index: 22; - background-color: #fff; - height: 38px; - display: flex; - justify-content: space-between; - align-items: center; - font-size: 20px; - line-height: 1.5; - padding: 4px 9px; - float: none; - - .footer_name { - } - - .footer_categoryWrapper { - .footer_category { - cursor: pointer; - } - - .selected { - text-decoration: underline; - font-style: italic; - } - } - - .footer_threshold { - button { - border: none; - background-color: transparent; - margin: 0; - font-size: 20px; - padding: 0 4px; - cursor: pointer; - } - - .thid{ - display: inline-block; - text-align: center; - width: 48px; - } - } - - .footer_imageIndex { - margin: 0; - - .ftid { - display: inline-block; - text-align: center; - width: 7px; - } - } -} - -@media only screen and (max-width: 768px) { - footer { - top: 0; - padding: 3px 8px; - font-size: 17px; - height: 31px; - - .footer_threshold { - display: none; - } - - .footer_imageIndex { - display: none; - } - } -} \ No newline at end of file diff --git a/assets/css/_partial/_imagesDesktop.scss b/assets/css/_partial/_imagesDesktop.scss deleted file mode 100644 index a3e3a86..0000000 --- a/assets/css/_partial/_imagesDesktop.scss +++ /dev/null @@ -1,52 +0,0 @@ -.imagesDesktop { - - img { - position: absolute; - top: 0; - left: 0; - object-fit: contain; - max-height: 50vmin; - max-width: 100vw; - - &[data-status='null'] { - opacity: 1; - } - - &[data-status='top'] { - opacity: 1; - max-height: calc(100vh - var(--footer-height));; - transition-property: transform, max-height; - transition-timing-function: ease-in-out; - transition-duration: 0.5s, 0.5s; - } - - &[data-status='trail'] { - opacity: 0; - margin-top: 40px; - transition-property: opacity, margin-top; - transition-timing-function: ease-out; - transition-duration: 0.2s; - } - - &[data-status='resumeTop'] { - opacity: 1; - max-height: 50vmin; - transition-property: max-height, transform; - transition-timing-function: ease-in-out; - transition-duration: 0.7s, 0.5s; - } - - &[data-status='resume'] { - opacity: 1; - margin-top: 0; - transition-property: opacity, margin-top; - transition-timing-function: ease-out; - transition-duration: 0.2s; - } - - &[data-status='overlay'] { - opacity: 1; - max-height: calc(100vh - var(--footer-height)); - } - } -} \ No newline at end of file diff --git a/assets/css/_partial/_imagesMobile.scss b/assets/css/_partial/_imagesMobile.scss deleted file mode 100644 index ea94e08..0000000 --- a/assets/css/_partial/_imagesMobile.scss +++ /dev/null @@ -1,16 +0,0 @@ -.imagesMobile { - height: 100vh; - overflow: scroll; - position: relative; - - img { - height: 20vh; - width: 60vw; - object-fit: contain; - position: sticky; - top: 50vh; - margin-left: 0; - margin-right: 0; - margin-bottom: 20vh; - } -} \ No newline at end of file diff --git a/assets/css/_partial/_nav.scss b/assets/css/_partial/_nav.scss new file mode 100644 index 0000000..6b4d1c3 --- /dev/null +++ b/assets/css/_partial/_nav.scss @@ -0,0 +1,44 @@ +@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; + position: sticky; + } + + .index, + .threshold { + display: none; + } +} diff --git a/assets/css/_partial/_overlay.scss b/assets/css/_partial/_overlay.scss deleted file mode 100644 index 9c55b08..0000000 --- a/assets/css/_partial/_overlay.scss +++ /dev/null @@ -1,15 +0,0 @@ -.overlay_cursor { - position: fixed; - top: 0; - left: 0; - mix-blend-mode: difference; - font-size: 19px; - box-sizing: border-box; - cursor: none; - user-select: none; - - .cursor_innerText { - color: white; - transform: translate3d(-50%, -50%, 0); - } -} \ No newline at end of file diff --git a/assets/css/_partial/_stage.scss b/assets/css/_partial/_stage.scss new file mode 100644 index 0000000..ef53850 --- /dev/null +++ b/assets/css/_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; + } +} diff --git a/assets/css/_partial/_stageNav.scss b/assets/css/_partial/_stageNav.scss new file mode 100644 index 0000000..c347049 --- /dev/null +++ b/assets/css/_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; + } +}