- Update font files for different languages: NotoSansCJKsc-Regular.woff2, NotoSansCJKtc-Regular.woff2, NotoSansCJKjp-Regular.woff2, NotoSansCJKkr-Regular.woff2, NotoSans-Regular.woff2
- Update font-family declarations in _typography.scss to use the new font files:
- Change font-family for body to 'sans-serif'
- Change font-family for button to 'Noto Sans', sans-serif
- Add font-family declarations for different languages in _typography.scss:
- For English language (en), use 'Geist', sans-serif
- For Simplified Chinese language (zh-cn, zh-sg), use 'Noto Sans', 'Noto Sans CJK SC', sans-serif
- For Traditional Chinese language (zh-hk, zh-mo, zh-tw), use 'Noto Sans', 'Noto Sans CJK TC', sans-serif
- For Japanese language (ja), use 'Noto Sans', 'Noto Sans CJK JP', sans-serif
- For Korean language (ko), use 'Noto Sans', 'Noto Sans CJK KR', sans-serif
chore(font.scss): add font-face declaration for 'fw' font and set font-display property for better font loading performance
chore(typography.scss): update font-family property for body element to use 'Geist' font as the primary font
chore(typography.scss): update font-family property for button element to use 'fw' font as the primary font
The media query was added to ensure that the .info element is positioned correctly on tablets and devices with no hover support. The top property was set to the height of the navigation bar and the position was set to fixed to keep the element in place. This change improves the layout and user experience on different devices.
The changes in this commit reorganize the code in the _customCursor.scss file to improve readability and maintainability. The changes include:
- Moving the .cursorInner selector inside the .customCursor selector for better organization.
- Adding a new line before the .cursorInner selector for better separation.
- Adding a new line after the mix-blend-mode property for better separation.
- Adding a new line after the .active selector for better separation.
These changes aim to make the code easier to understand and modify in the future.
feat(container.ts): create container module to handle scrollable behavior and add/remove disableScroll class
fix(customCursor.ts): update append target for cursor element to use container instead of main
fix(stage.ts): update append target for stage element to use container instead of main
fix(stageNav.ts): update append target for navOverlay element to use container instead of main
feat(main.ts): initialize container module and conditionally initialize stage and stageNav modules based on device type
fix(nav.ts): update references to state module functions to use state.get() instead of getState()
- Added styles for the navigation bar to improve the appearance and functionality of the navigation component.
- The navigation bar now has a fixed position at the bottom of the screen and is displayed as a flex container with space between and aligned center.
- The width of the navigation bar is set to 100% and the height is set using a CSS variable (--nav-height).
- Added padding to the navigation bar for spacing.
- The navigation bar has a white background and a z-index value of (--z-nav) to ensure it appears above other elements.
- The pointer-events property is set to "all" to maintain functionality while the container is locked.
- Added styles for the ".num" and ".current" classes.
- Added media queries to adjust the position and visibility of the navigation bar on smaller screens or devices without hover capability.
- Added a new SCSS partial `_collection.scss` to define styles for the collection component.
- Added a new SCSS partial `_gallery.scss` to define styles for the gallery component.
The new partials contain styles for the collection and gallery components, including layout, positioning, and animations.
---
feat: add support for gallery functionality in mobile
- Created a new file `gallery.ts` to handle the gallery functionality in the mobile view.
- Added functions `slideUp()` and `slideDown()` to handle the sliding animation of the gallery.
- Initialized the gallery with the provided image data in the `initGallery()` function.
- Added event listeners to update the active slide and index text when the slide is changed.
- Created a helper function `changeSlide()` to change the active slide in the gallery.
- Created a helper function `scrollToActive()` to scroll to the active image in the collection.
- Created a helper function `updateIndexText()` to update the index text in the navigation.
- Created a helper function `createGallery()` to dynamically create the gallery HTML structure.
---
feat: add scrollable flag for mobile view
- Created a new file `scroll.ts` to handle the scrollable flag for the mobile view.
- Added a `scrollable` variable as a Watchable object to control the scrollability of the view.
---
fix: change port variable case from lowercase `port` to uppercase `PORT` to improve semantics
- Changed the variable name `port` to `PORT` in the `server.ts` file to improve code readability and semantics.
- The variable `PORT` is now used to define the port number for the server to listen on.
The new CSS reset file is added to the project. This file is used to reset default styles applied by the user agent stylesheet and provide a clean starting point for styling. The reset file includes various CSS rules to remove default styles and improve cross-browser consistency.
Some of the changes made in the reset.scss file include:
- Removing all styles of the "User-Agent-Stylesheet" except for the 'display' property to solve Firefox SVG sprite bug and prevent a bug in Chrome that breaks the CSS hyphens property.
- Setting the box-sizing property to border-box for all elements and pseudo-elements to ensure consistent box sizing.
- Fixing the increase in font-size on mobile Safari in landscape mode.
- Reapplying the pointer cursor for anchor tags and buttons.
- Removing list styles (bullets/numbers) from ordered lists, unordered lists, menus, and summary elements.
- Setting max-inline-size and max-block-size properties to 100% for images to prevent them from exceeding their container.
- Removing spacing between cells in tables.
- Fixing an issue in Safari where the user-select:none property doesn't work on the <body> text input.
- Reverting the 'white-space' property for textarea elements on Safari.
- Applying minimum styles to allow styling of the meter element.
- Reverting all styles for preformatted text.
- Resetting the default text opacity of input placeholders.
- Fixing the 'hidden' attribute to use display: none instead of the attribute itself.
- Fixing a bug in Chromium browsers where the content editable attribute doesn't work properly.
- Applying the draggable feature for elements with the draggable attribute set to 'true'.
- Reverting the native behavior of modal dialogs.
These changes are made to ensure a consistent and predictable starting point for styling in the project and improve cross-browser compatibility.
Add a new file `_base.scss` to the `_core` directory. This file contains base styles for the entire application. The styles include setting font smoothing properties, setting the background color of the body, and disabling overscroll behavior on the html and body elements. Additionally, the styles set the cursor property to pointer for anchor tags and buttons.
feat(scss): add core font styles
Add a new file `_font.scss` to the `_core` directory. This file defines the `HelveticaNow` font face and specifies the font weight and style.
feat(scss): add core mixins
Add a new file `_mixins.scss` to the `_core` directory. This file defines mixins for working with breakpoints. The mixins allow for specifying styles based on minimum and maximum widths of breakpoints defined in the `$breakpoints` map.
feat(scss): add core typography styles
Add a new file `_typography.scss` to the `_core` directory. This file defines typography styles for the body element. The styles set the line height, font size, and font family. Additionally, the styles use the `min-width` mixin to increase the font size at tablet and laptop breakpoints.
feat(scss): add partial customCursor styles
Add a new file `_customCursor.scss` to the `_partial` directory. This file defines styles for a custom cursor. The styles position the cursor element, set its color and blend mode, and define an inner element for the cursor.
feat(scss): add partial stage styles
Add a new file `_stage.scss` to the `_partial` directory. This file defines styles for a stage element. The styles position the stage element, set its width and height, and define styles for an image element within the stage.
feat(scss): add partial stageNav styles
Add a new file `_stageNav.scss` to the `_partial` directory. This file defines styles for a stage navigation overlay. The styles position the overlay element and set its width and height. The styles also define an inactive state for the overlay.
feat(scss): add variables
Add a new file `_variables.scss` to the root directory. This file defines CSS variables for various aspects of the application, such as window height, navigation height, spacing, and z-index values.
feat(scss): import styles in main style.scss
Add import statements for the newly created files in the `style.scss` file. This ensures that the
