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
196 lines
6.5 KiB
SCSS
196 lines
6.5 KiB
SCSS
// ==========================================================================
|
|
// SCSS Variables
|
|
// Configured via [params.appearance] in hugo.toml using hugo:vars.
|
|
// Default values are defined in layouts/_partials/function/scss-vars.html.
|
|
// ==========================================================================
|
|
@forward "core/maps";
|
|
@use "sass:color";
|
|
@use "hugo:vars" as v;
|
|
|
|
// ========== Internal ========== //
|
|
$prefix: fi- !default;
|
|
$rootPrefix: --#{$prefix} !default;
|
|
// ========== Internal ========== //
|
|
|
|
// ========== Global ========== //
|
|
// Font and Line Height
|
|
$global-font-family: v.$global-font-family;
|
|
$global-font-size: v.$global-font-size;
|
|
$global-font-weight: v.$global-font-weight;
|
|
$global-line-height: v.$global-line-height;
|
|
|
|
// Radius of the border
|
|
$global-border-radius: v.$global-border-radius;
|
|
|
|
// Color of the background
|
|
$global-background-color: v.$global-background-color;
|
|
$global-background-color-dark: v.$global-background-color-dark;
|
|
|
|
// Color of the text
|
|
$global-font-color: v.$global-font-color;
|
|
$global-font-color-dark: v.$global-font-color-dark;
|
|
|
|
// Color of the secondary text
|
|
$global-font-secondary-color: v.$global-font-secondary-color;
|
|
$global-font-secondary-color-dark: v.$global-font-secondary-color-dark;
|
|
|
|
// Color of the link
|
|
$global-link-color: v.$global-link-color;
|
|
$global-link-color-dark: v.$global-link-color-dark;
|
|
|
|
// Color of the hover link
|
|
$global-link-hover-color: v.$global-link-hover-color;
|
|
$global-link-hover-color-dark: v.$global-link-hover-color-dark;
|
|
|
|
// Color of the border
|
|
$global-border-color: v.$global-border-color;
|
|
$global-border-color-dark: v.$global-border-color-dark;
|
|
// ========== Global ========== //
|
|
|
|
// ========== Scrollbar ========== //
|
|
// Color of the scrollbar
|
|
$scrollbar-color: v.$scrollbar-color;
|
|
|
|
// Color of the hover scrollbar
|
|
$scrollbar-hover-color: v.$scrollbar-hover-color;
|
|
// ========== Scrollbar ========== //
|
|
|
|
// ========== Selection ========== //
|
|
// Color of the selected text
|
|
$selection-color: v.$selection-color;
|
|
$selection-color-dark: v.$selection-color-dark;
|
|
// ========== Selection ========== //
|
|
|
|
// ========== Header ========== //
|
|
// Height of the header
|
|
$header-height: v.$header-height;
|
|
|
|
// Color of the header background
|
|
$header-background-color: v.$header-background-color;
|
|
$header-background-color-dark: v.$header-background-color-dark;
|
|
|
|
// Font style of the header title
|
|
$header-title-font-family: $global-font-family !default;
|
|
$header-title-font-size: v.$header-title-font-size;
|
|
|
|
// Color of the active menu item
|
|
$menu-active-color: v.$menu-active-color;
|
|
$menu-active-color-dark: v.$menu-active-color-dark;
|
|
|
|
// Border color of the menu item
|
|
$menu-border-color: v.$menu-border-color;
|
|
$menu-border-color-dark: v.$menu-border-color-dark;
|
|
|
|
// Height of the submenu item of desktop header
|
|
$submenu-height: $header-height * 0.5 !default;
|
|
|
|
// Color of the search background
|
|
$search-background-color: v.$search-background-color;
|
|
$search-background-color-dark: v.$search-background-color-dark;
|
|
// ========== Header ========== //
|
|
|
|
// ========== Tag Cloud ========== //
|
|
// Color range of tag cloud
|
|
$tag-cloud-start: v.$tag-cloud-start;
|
|
$tag-cloud-end: v.$tag-cloud-end;
|
|
$tag-cloud-start-dark: v.$tag-cloud-start-dark;
|
|
$tag-cloud-end-dark: v.$tag-cloud-end-dark;
|
|
// ========== Tag Cloud ========== //
|
|
|
|
// ========== Single Content ========== //
|
|
// Font size of the TOC
|
|
$toc-title-font-size: v.$toc-title-font-size;
|
|
$toc-content-font-size: v.$toc-content-font-size;
|
|
|
|
// Font size of the Collection List
|
|
$collection-title-font-size: v.$collection-title-font-size;
|
|
$collection-list-font-size: v.$collection-list-font-size;
|
|
|
|
// Font size of the Related Content List
|
|
$related-title-font-size: v.$related-title-font-size;
|
|
$related-list-font-size: v.$related-list-font-size;
|
|
|
|
// Color of the single link
|
|
$single-link-color: v.$single-link-color;
|
|
$single-link-color-dark: v.$single-link-color-dark;
|
|
|
|
// Color of the hover single link
|
|
$single-link-hover-color: v.$single-link-hover-color;
|
|
$single-link-hover-color-dark: v.$single-link-hover-color-dark;
|
|
|
|
// Color of the table background
|
|
$table-background-color: v.$table-background-color;
|
|
$table-background-color-dark: v.$table-background-color-dark;
|
|
|
|
// Color of the table thead
|
|
$table-thead-color: v.$table-thead-color;
|
|
$table-thead-color-dark: v.$table-thead-color-dark;
|
|
|
|
// Color of the table border
|
|
$table-border-color: v.$table-border-color;
|
|
$table-border-color-dark: v.$table-border-color-dark;
|
|
|
|
// Color of the blockquote
|
|
$blockquote-color: v.$blockquote-color;
|
|
$blockquote-color-dark: v.$blockquote-color-dark;
|
|
|
|
// Color of reward
|
|
$reward-color: v.$reward-color;
|
|
$reward-color-dark: color.adjust($reward-color, $lightness: -5%) !default;
|
|
|
|
// Width of reward image
|
|
$reward-img-width: v.$reward-img-width;
|
|
// ========== Single Content ========== //
|
|
|
|
// ========== Pagination ========== //
|
|
// Color of the link in pagination
|
|
$pagination-link-color: v.$pagination-link-color;
|
|
$pagination-link-color-dark: v.$pagination-link-color-dark;
|
|
|
|
// Color of the hover link in pagination
|
|
$pagination-link-hover-color: v.$pagination-link-hover-color;
|
|
$pagination-link-hover-color-dark: v.$pagination-link-hover-color-dark;
|
|
// ========== Pagination ========== //
|
|
|
|
// ========== Code ========== //
|
|
// Color of the code
|
|
$code-color: v.$code-color;
|
|
$code-color-dark: v.$code-color-dark;
|
|
|
|
// Color of the code header text
|
|
$code-header-color: v.$code-header-color;
|
|
$code-header-color-dark: v.$code-header-color-dark;
|
|
|
|
// Color of the code header background
|
|
$code-header-background-color: v.$code-header-background-color;
|
|
$code-header-background-color-dark: v.$code-header-background-color-dark;
|
|
|
|
// Color of the code background
|
|
$code-background-color: v.$code-background-color;
|
|
$code-background-color-dark: v.$code-background-color-dark;
|
|
|
|
// Color of the code error
|
|
$code-error-color: v.$code-error-color;
|
|
|
|
// Color of the highlight code
|
|
$code-highlight-color: v.$code-highlight-color;
|
|
$code-highlight-color-dark: v.$code-highlight-color-dark;
|
|
|
|
// Font size of the code
|
|
$code-font-size: v.$code-font-size;
|
|
$code-block-font-size: v.$code-block-font-size;
|
|
|
|
// Font family of the code
|
|
$code-font-family: Source Code Pro, Menlo, Consolas, Monaco, monospace, $global-font-family !default;
|
|
// ========== Code ========== //
|
|
|
|
// ========== GitHub Corners ========== //
|
|
// Color of the GitHub Corners
|
|
$github-corner-color: v.$github-corner-color;
|
|
$github-corner-color-dark: v.$github-corner-color-dark;
|
|
|
|
// Color of the GitHub Corners background
|
|
$github-corner-fill: $header-background-color-dark !default;
|
|
$github-corner-fill-dark: $header-background-color !default;
|
|
// ========== GitHub Corners ========== //
|