mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-08-24 15:28:57 +00:00
Cell
17d7bc1781
* feat(assets): refactor SCSS variables with Hugo config via hugo:vars Use Hugo's hugo:vars mechanism (v0.161.0+) to configure SCSS variables via [params.appearance] in hugo.toml, replacing the override.scss file. - Add [params.appearance] config section in hugo.toml - Create scss-vars.html partial for SCSS default values - Pass vars to toCSS via head/index.html - Rewrite _variables.scss to use @use "hugo:vars" as h with !default - Update all 20 consumer files from @use "override" to @use "variables" - Delete override.scss - Add admonition mixin in core/mixins/_admonition.scss - Update deprecation detection to use fileExists * refactor(assets): standardize module setup() and simplify main.ts init - Add setup() method to all modules (menu, theme, search, enc, misc, events) - Rename initMenu to setup, initMenuDesktop/initMenuMobile to initDesktop/initMobile - Rename initSearch, initFixItDecryptor to setup - Standardize setup() position at end of each module class and interface - Simplify main.ts init sequence to uniform setup() calls * refactor(assets): replace config.template.scss with hugo:vars/internal - Delete config.template.scss and its ExecuteAsTemplate pipeline - Pass internal config (base URL, logo, loading) via hugo:vars/internal namespace - Move CSS custom properties to _root.scss using set-fi-vars mixin - Simplify _variables.scss by removing config namespace dependency - Update CLAUDE.md to reflect new SCSS architecture * style(i18n): fix spacing in Korean translation strings * fix(assets): resolve dead SCSS config keys and deduplicate defaults - Wire up 5 config keys with v.$ references: menu-active-color, tag-cloud-start, tag-cloud-end, tag-cloud-end-dark, pagination-link-color-dark (were reading from SCSS vars, ignoring hugo:vars overrides) - Remove dead !default flags from all v.$ references (hugo:vars always provides values, making !default unreachable) - Compute derived defaults in scss-vars.html from base values instead of hardcoding duplicates - Extract admonition mixin set-fi-vars map to shared $vars variable
54 lines
1.9 KiB
SCSS
54 lines
1.9 KiB
SCSS
@use "variables" as *;
|
|
|
|
// Shared defaults for theme-switch icon motion.
|
|
// Keep them overridable so other entries can reuse the same mixin with different pacing.
|
|
$theme-switch-animation-duration: 0.5s !default;
|
|
$theme-switch-animation-easing: cubic-bezier(0.22, 1, 0.36, 1) !default;
|
|
|
|
/// Bind a theme mode selector to an icon glyph and its matching animation.
|
|
/// @param {String} $mode - Theme mode name: auto | light | dark
|
|
/// @param {String|null} $icon - Optional Font Awesome glyph code assigned to --fa
|
|
/// @example
|
|
/// @include theme-switch-mode('auto');
|
|
/// @include theme-switch-mode('light', '\f185');
|
|
@mixin theme-switch-mode($mode, $icon: null) {
|
|
[data-theme-mode='#{$mode}'] & {
|
|
@if $icon != null {
|
|
--fa: '#{$icon}';
|
|
}
|
|
|
|
animation: #{$prefix}theme-switch-#{$mode} $theme-switch-animation-duration $theme-switch-animation-easing;
|
|
}
|
|
}
|
|
|
|
/// Generate one theme-switch keyframes block from a compact parameter list.
|
|
/// The final state is intentionally shared so all modes settle on the same resting pose.
|
|
/// @param {String} $name - Animation suffix used in the generated keyframes name
|
|
/// @param {Angle} $from-rotate - Initial rotation angle
|
|
/// @param {Number} $from-scale - Initial icon scale
|
|
/// @param {Number} $from-opacity - Initial icon opacity
|
|
/// @param {String} $mid-step - Intermediate keyframe percentage such as 55% or 60%
|
|
/// @param {Angle} $mid-rotate - Intermediate rotation angle
|
|
/// @param {Number} $mid-scale - Intermediate icon scale
|
|
@mixin theme-switch-keyframes($name, $from-rotate, $from-scale, $from-opacity, $mid-step, $mid-rotate, $mid-scale) {
|
|
@keyframes #{$prefix}theme-switch-#{$name} {
|
|
0% {
|
|
rotate: $from-rotate;
|
|
scale: $from-scale;
|
|
opacity: $from-opacity;
|
|
}
|
|
|
|
#{$mid-step} {
|
|
rotate: $mid-rotate;
|
|
scale: $mid-scale;
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
rotate: 225deg;
|
|
scale: 1;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|