From 47247e01c5a65d5c979a9e98d8b7418a06b26ade Mon Sep 17 00:00:00 2001 From: Cell <1024@lruihao.cn> Date: Tue, 23 Jun 2026 17:19:51 +0800 Subject: [PATCH] refactor(assets): split SCSS into per-layout CSS bundles (#789) - Restructure pages/ directory: shared/, posts/, specials/ modules - Add per-layout entry points (home, posts, archives, search, friends, link) - Include 404 and offline styles in main bundle - Consolidate scss-vars.html with Internal and Appearance categories - Simplify _variables.scss with @forward "hugo:vars" - Extract CSS loading logic to base/head/css.html - Update [params.appearance] with all configurable values --- assets/scss/_variables.scss | 189 +----------------- assets/scss/archives.scss | 3 + assets/scss/core/_root.scss | 9 +- assets/scss/friends.scss | 3 + assets/scss/home.scss | 3 + assets/scss/link.scss | 3 + assets/scss/main.scss | 1 - .../scss/pages/{specials => }/_friends.scss | 0 assets/scss/pages/_index.scss | 8 +- assets/scss/pages/_offline.scss | 1 + assets/scss/pages/{specials => }/_search.scss | 2 +- assets/scss/pages/archives/_index.scss | 1 + .../pages/{single => posts}/_collections.scss | 0 .../scss/pages/{single => posts}/_footer.scss | 0 assets/scss/pages/posts/_index.scss | 5 + .../pages/{single => posts}/_related.scss | 0 .../scss/pages/{single => posts}/_reward.scss | 0 assets/scss/pages/{single => posts}/_toc.scss | 0 .../scss/pages/{single => shared}/_alert.scss | 0 .../scss/pages/{single => shared}/_code.scss | 0 .../_base.scss => shared/_content.scss} | 14 +- .../{single => shared}/_copy-icon-btn.scss | 0 .../{single => shared}/_fixit-decryptor.scss | 0 assets/scss/pages/shared/_index.scss | 7 + .../pages/{_base.scss => shared/_page.scss} | 0 assets/scss/pages/{ => shared}/_patch.scss | 0 .../{single => shared}/code-syntax/_dark.scss | 0 .../code-syntax/_index.scss | 4 +- .../code-syntax/_light.scss | 0 .../shortcodes/_admonition.scss | 0 .../shortcodes/_bilibili.scss | 0 .../shortcodes/_bluesky.scss | 0 .../shortcodes/_cardlink.scss | 0 .../shortcodes/_center-quote.scss | 0 .../shortcodes/_douyin.scss | 0 .../shortcodes/_echarts.scss | 0 .../shortcodes/_file-tree.scss | 0 .../{single => shared}/shortcodes/_gist.scss | 0 .../{single => shared}/shortcodes/_index.scss | 0 .../shortcodes/_mapbox.scss | 0 .../shortcodes/_mermaid.scss | 0 .../{single => shared}/shortcodes/_tabs.scss | 0 .../shortcodes/_timeline.scss | 0 .../shortcodes/_version.scss | 0 assets/scss/pages/single/_index.scss | 10 - assets/scss/pages/specials/_base.scss | 6 - assets/scss/pages/specials/_index.scss | 3 - assets/scss/posts.scss | 3 + assets/scss/search.scss | 3 + hugo.toml | 103 +++++++++- layouts/_partials/base/head/css.html | 51 +++++ layouts/_partials/base/head/index.html | 25 +-- layouts/_partials/function/scss-vars.html | 54 +++-- 53 files changed, 240 insertions(+), 271 deletions(-) create mode 100644 assets/scss/archives.scss create mode 100644 assets/scss/friends.scss create mode 100644 assets/scss/home.scss create mode 100644 assets/scss/link.scss rename assets/scss/pages/{specials => }/_friends.scss (100%) rename assets/scss/pages/{specials => }/_search.scss (99%) rename assets/scss/pages/{single => posts}/_collections.scss (100%) rename assets/scss/pages/{single => posts}/_footer.scss (100%) create mode 100644 assets/scss/pages/posts/_index.scss rename assets/scss/pages/{single => posts}/_related.scss (100%) rename assets/scss/pages/{single => posts}/_reward.scss (100%) rename assets/scss/pages/{single => posts}/_toc.scss (100%) rename assets/scss/pages/{single => shared}/_alert.scss (100%) rename assets/scss/pages/{single => shared}/_code.scss (100%) rename assets/scss/pages/{single/_base.scss => shared/_content.scss} (98%) rename assets/scss/pages/{single => shared}/_copy-icon-btn.scss (100%) rename assets/scss/pages/{single => shared}/_fixit-decryptor.scss (100%) create mode 100644 assets/scss/pages/shared/_index.scss rename assets/scss/pages/{_base.scss => shared/_page.scss} (100%) rename assets/scss/pages/{ => shared}/_patch.scss (100%) rename assets/scss/pages/{single => shared}/code-syntax/_dark.scss (100%) rename assets/scss/pages/{single => shared}/code-syntax/_index.scss (94%) rename assets/scss/pages/{single => shared}/code-syntax/_light.scss (100%) rename assets/scss/pages/{single => shared}/shortcodes/_admonition.scss (100%) rename assets/scss/pages/{single => shared}/shortcodes/_bilibili.scss (100%) rename assets/scss/pages/{single => shared}/shortcodes/_bluesky.scss (100%) rename assets/scss/pages/{single => shared}/shortcodes/_cardlink.scss (100%) rename assets/scss/pages/{single => shared}/shortcodes/_center-quote.scss (100%) rename assets/scss/pages/{single => shared}/shortcodes/_douyin.scss (100%) rename assets/scss/pages/{single => shared}/shortcodes/_echarts.scss (100%) rename assets/scss/pages/{single => shared}/shortcodes/_file-tree.scss (100%) rename assets/scss/pages/{single => shared}/shortcodes/_gist.scss (100%) rename assets/scss/pages/{single => shared}/shortcodes/_index.scss (100%) rename assets/scss/pages/{single => shared}/shortcodes/_mapbox.scss (100%) rename assets/scss/pages/{single => shared}/shortcodes/_mermaid.scss (100%) rename assets/scss/pages/{single => shared}/shortcodes/_tabs.scss (100%) rename assets/scss/pages/{single => shared}/shortcodes/_timeline.scss (100%) rename assets/scss/pages/{single => shared}/shortcodes/_version.scss (100%) delete mode 100644 assets/scss/pages/single/_index.scss delete mode 100644 assets/scss/pages/specials/_base.scss delete mode 100644 assets/scss/pages/specials/_index.scss create mode 100644 assets/scss/posts.scss create mode 100644 assets/scss/search.scss create mode 100644 layouts/_partials/base/head/css.html diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index e237a3ad..849abb26 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -5,192 +5,9 @@ /// Default values are defined in layouts/_partials/function/scss-vars.html. /// ========================================================================== @forward "core/maps"; -@use "sass:color"; -@use "hugo:vars" as v; +@forward "hugo:vars"; +@forward "hugo:vars/internal"; -// ========== 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: v.$code-font-family, $global-font-family; -// ========== 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 ========== // +$header-height: 3.5rem !default; diff --git a/assets/scss/archives.scss b/assets/scss/archives.scss new file mode 100644 index 00000000..4e54ff2f --- /dev/null +++ b/assets/scss/archives.scss @@ -0,0 +1,3 @@ +@charset "utf-8"; + +@use "pages/archives"; diff --git a/assets/scss/core/_root.scss b/assets/scss/core/_root.scss index e902b850..40073357 100644 --- a/assets/scss/core/_root.scss +++ b/assets/scss/core/_root.scss @@ -18,7 +18,6 @@ @use "functions" as *; @use "mixins" as *; @use "variables" as *; -@use "hugo:vars/internal" as i; :root { interpolate-size: allow-keywords; @@ -37,9 +36,9 @@ // ---------------------------------------- @include set-fi-vars(( // Internal config - base: "#{i.$base}", - logo-img: url("#{i.$logo-img}"), - loading-img: url("#{i.$loading-img}"), + base-url: "#{$base-url}", + logo-img: url("#{$logo-img}"), + loading-img: url("#{$loading-img}"), // Global Typography global-font-family: $global-font-family, @@ -52,7 +51,7 @@ header-height: $header-height, header-title-font-family: $header-title-font-family, header-title-font-size: $header-title-font-size, - submenu-height: $submenu-height, + submenu-height: $header-height * 0.5, // Single Content toc-title-font-size: $toc-title-font-size, diff --git a/assets/scss/friends.scss b/assets/scss/friends.scss new file mode 100644 index 00000000..25e13004 --- /dev/null +++ b/assets/scss/friends.scss @@ -0,0 +1,3 @@ +@charset "utf-8"; + +@use "pages/friends"; diff --git a/assets/scss/home.scss b/assets/scss/home.scss new file mode 100644 index 00000000..084de0df --- /dev/null +++ b/assets/scss/home.scss @@ -0,0 +1,3 @@ +@charset "utf-8"; + +@use "pages/home"; diff --git a/assets/scss/link.scss b/assets/scss/link.scss new file mode 100644 index 00000000..61eaac51 --- /dev/null +++ b/assets/scss/link.scss @@ -0,0 +1,3 @@ +@charset "utf-8"; + +@use "pages/link"; diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 84024074..19a88eda 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -3,4 +3,3 @@ @use "core"; @use "pages"; @use "widgets"; -@use "custom"; diff --git a/assets/scss/pages/specials/_friends.scss b/assets/scss/pages/_friends.scss similarity index 100% rename from assets/scss/pages/specials/_friends.scss rename to assets/scss/pages/_friends.scss diff --git a/assets/scss/pages/_index.scss b/assets/scss/pages/_index.scss index ce5a3f11..9079bc04 100644 --- a/assets/scss/pages/_index.scss +++ b/assets/scss/pages/_index.scss @@ -1,9 +1,3 @@ -@use "base"; -@use "single"; -@use "specials"; -@use "archives"; +@use "shared"; @use "404" as page404; -@use "home"; -@use "link"; @use "offline"; -@use "patch"; diff --git a/assets/scss/pages/_offline.scss b/assets/scss/pages/_offline.scss index b29cd7d4..a4fb0da5 100644 --- a/assets/scss/pages/_offline.scss +++ b/assets/scss/pages/_offline.scss @@ -1,3 +1,4 @@ +// Offline page styles #content-offline { text-align: center; translate: 0 30vh; diff --git a/assets/scss/pages/specials/_search.scss b/assets/scss/pages/_search.scss similarity index 99% rename from assets/scss/pages/specials/_search.scss rename to assets/scss/pages/_search.scss index 779ff10b..7f9cb84e 100644 --- a/assets/scss/pages/specials/_search.scss +++ b/assets/scss/pages/_search.scss @@ -39,6 +39,6 @@ filter: invert(1) hue-rotate(0.5turn) opacity(0.75); } } - + // Bing CSE (Unsupported) } diff --git a/assets/scss/pages/archives/_index.scss b/assets/scss/pages/archives/_index.scss index 2f728e61..7afc782d 100644 --- a/assets/scss/pages/archives/_index.scss +++ b/assets/scss/pages/archives/_index.scss @@ -1,3 +1,4 @@ +// Archives page styles (section, taxonomy, term) @use "sass:meta"; .archive { diff --git a/assets/scss/pages/single/_collections.scss b/assets/scss/pages/posts/_collections.scss similarity index 100% rename from assets/scss/pages/single/_collections.scss rename to assets/scss/pages/posts/_collections.scss diff --git a/assets/scss/pages/single/_footer.scss b/assets/scss/pages/posts/_footer.scss similarity index 100% rename from assets/scss/pages/single/_footer.scss rename to assets/scss/pages/posts/_footer.scss diff --git a/assets/scss/pages/posts/_index.scss b/assets/scss/pages/posts/_index.scss new file mode 100644 index 00000000..df9aeec0 --- /dev/null +++ b/assets/scss/pages/posts/_index.scss @@ -0,0 +1,5 @@ +@use "collections"; +@use "footer"; +@use "related"; +@use "reward"; +@use "toc"; diff --git a/assets/scss/pages/single/_related.scss b/assets/scss/pages/posts/_related.scss similarity index 100% rename from assets/scss/pages/single/_related.scss rename to assets/scss/pages/posts/_related.scss diff --git a/assets/scss/pages/single/_reward.scss b/assets/scss/pages/posts/_reward.scss similarity index 100% rename from assets/scss/pages/single/_reward.scss rename to assets/scss/pages/posts/_reward.scss diff --git a/assets/scss/pages/single/_toc.scss b/assets/scss/pages/posts/_toc.scss similarity index 100% rename from assets/scss/pages/single/_toc.scss rename to assets/scss/pages/posts/_toc.scss diff --git a/assets/scss/pages/single/_alert.scss b/assets/scss/pages/shared/_alert.scss similarity index 100% rename from assets/scss/pages/single/_alert.scss rename to assets/scss/pages/shared/_alert.scss diff --git a/assets/scss/pages/single/_code.scss b/assets/scss/pages/shared/_code.scss similarity index 100% rename from assets/scss/pages/single/_code.scss rename to assets/scss/pages/shared/_code.scss diff --git a/assets/scss/pages/single/_base.scss b/assets/scss/pages/shared/_content.scss similarity index 98% rename from assets/scss/pages/single/_base.scss rename to assets/scss/pages/shared/_content.scss index 25492ea3..23a4900c 100644 --- a/assets/scss/pages/single/_base.scss +++ b/assets/scss/pages/shared/_content.scss @@ -128,7 +128,7 @@ content: '\f0c4'; @include z-index(base); } - + &:hover::before { left: calc(95% - 20px); } @@ -239,7 +239,7 @@ color: fi-var(task-text-color); } } - + &[data-task='x'] { @include task-icon { background-color: fi-rgba(fi-var(secondary), 0.2); @@ -429,7 +429,7 @@ margin-block: 1em; padding-left: 1rem; } - + hr { background-color: fi-var(global-border-color); height: 1px; @@ -521,4 +521,12 @@ } } } + + // Special page styles + &.special { + .single-title, + .single-subtitle { + text-align: right; + } + } } diff --git a/assets/scss/pages/single/_copy-icon-btn.scss b/assets/scss/pages/shared/_copy-icon-btn.scss similarity index 100% rename from assets/scss/pages/single/_copy-icon-btn.scss rename to assets/scss/pages/shared/_copy-icon-btn.scss diff --git a/assets/scss/pages/single/_fixit-decryptor.scss b/assets/scss/pages/shared/_fixit-decryptor.scss similarity index 100% rename from assets/scss/pages/single/_fixit-decryptor.scss rename to assets/scss/pages/shared/_fixit-decryptor.scss diff --git a/assets/scss/pages/shared/_index.scss b/assets/scss/pages/shared/_index.scss new file mode 100644 index 00000000..ec14146e --- /dev/null +++ b/assets/scss/pages/shared/_index.scss @@ -0,0 +1,7 @@ +@forward "shortcodes"; +@forward "alert"; +@forward "code"; +@forward "content"; +@forward "fixit-decryptor"; +@forward "page"; +@forward "patch"; diff --git a/assets/scss/pages/_base.scss b/assets/scss/pages/shared/_page.scss similarity index 100% rename from assets/scss/pages/_base.scss rename to assets/scss/pages/shared/_page.scss diff --git a/assets/scss/pages/_patch.scss b/assets/scss/pages/shared/_patch.scss similarity index 100% rename from assets/scss/pages/_patch.scss rename to assets/scss/pages/shared/_patch.scss diff --git a/assets/scss/pages/single/code-syntax/_dark.scss b/assets/scss/pages/shared/code-syntax/_dark.scss similarity index 100% rename from assets/scss/pages/single/code-syntax/_dark.scss rename to assets/scss/pages/shared/code-syntax/_dark.scss diff --git a/assets/scss/pages/single/code-syntax/_index.scss b/assets/scss/pages/shared/code-syntax/_index.scss similarity index 94% rename from assets/scss/pages/single/code-syntax/_index.scss rename to assets/scss/pages/shared/code-syntax/_index.scss index 04bc52f6..d9d26473 100644 --- a/assets/scss/pages/single/code-syntax/_index.scss +++ b/assets/scss/pages/shared/code-syntax/_index.scss @@ -4,8 +4,8 @@ /// To generate syntax highlighting styles from the command line, /// See https://gohugo.io/quick-reference/syntax-highlighting-styles/#styles /// For example: -/// hugo gen chromastyles --style=github > assets/scss/pages/single/code-syntax/_light.scss -/// hugo gen chromastyles --style=github-dark > assets/scss/pages/single/code-syntax/_dark.scss +/// hugo gen chromastyles --style=github > assets/scss/pages/shared/code-syntax/_light.scss +/// hugo gen chromastyles --style=github-dark > assets/scss/pages/shared/code-syntax/_dark.scss /// ==================================================================================================== @use "sass:meta"; @use "core/functions" as *; diff --git a/assets/scss/pages/single/code-syntax/_light.scss b/assets/scss/pages/shared/code-syntax/_light.scss similarity index 100% rename from assets/scss/pages/single/code-syntax/_light.scss rename to assets/scss/pages/shared/code-syntax/_light.scss diff --git a/assets/scss/pages/single/shortcodes/_admonition.scss b/assets/scss/pages/shared/shortcodes/_admonition.scss similarity index 100% rename from assets/scss/pages/single/shortcodes/_admonition.scss rename to assets/scss/pages/shared/shortcodes/_admonition.scss diff --git a/assets/scss/pages/single/shortcodes/_bilibili.scss b/assets/scss/pages/shared/shortcodes/_bilibili.scss similarity index 100% rename from assets/scss/pages/single/shortcodes/_bilibili.scss rename to assets/scss/pages/shared/shortcodes/_bilibili.scss diff --git a/assets/scss/pages/single/shortcodes/_bluesky.scss b/assets/scss/pages/shared/shortcodes/_bluesky.scss similarity index 100% rename from assets/scss/pages/single/shortcodes/_bluesky.scss rename to assets/scss/pages/shared/shortcodes/_bluesky.scss diff --git a/assets/scss/pages/single/shortcodes/_cardlink.scss b/assets/scss/pages/shared/shortcodes/_cardlink.scss similarity index 100% rename from assets/scss/pages/single/shortcodes/_cardlink.scss rename to assets/scss/pages/shared/shortcodes/_cardlink.scss diff --git a/assets/scss/pages/single/shortcodes/_center-quote.scss b/assets/scss/pages/shared/shortcodes/_center-quote.scss similarity index 100% rename from assets/scss/pages/single/shortcodes/_center-quote.scss rename to assets/scss/pages/shared/shortcodes/_center-quote.scss diff --git a/assets/scss/pages/single/shortcodes/_douyin.scss b/assets/scss/pages/shared/shortcodes/_douyin.scss similarity index 100% rename from assets/scss/pages/single/shortcodes/_douyin.scss rename to assets/scss/pages/shared/shortcodes/_douyin.scss diff --git a/assets/scss/pages/single/shortcodes/_echarts.scss b/assets/scss/pages/shared/shortcodes/_echarts.scss similarity index 100% rename from assets/scss/pages/single/shortcodes/_echarts.scss rename to assets/scss/pages/shared/shortcodes/_echarts.scss diff --git a/assets/scss/pages/single/shortcodes/_file-tree.scss b/assets/scss/pages/shared/shortcodes/_file-tree.scss similarity index 100% rename from assets/scss/pages/single/shortcodes/_file-tree.scss rename to assets/scss/pages/shared/shortcodes/_file-tree.scss diff --git a/assets/scss/pages/single/shortcodes/_gist.scss b/assets/scss/pages/shared/shortcodes/_gist.scss similarity index 100% rename from assets/scss/pages/single/shortcodes/_gist.scss rename to assets/scss/pages/shared/shortcodes/_gist.scss diff --git a/assets/scss/pages/single/shortcodes/_index.scss b/assets/scss/pages/shared/shortcodes/_index.scss similarity index 100% rename from assets/scss/pages/single/shortcodes/_index.scss rename to assets/scss/pages/shared/shortcodes/_index.scss diff --git a/assets/scss/pages/single/shortcodes/_mapbox.scss b/assets/scss/pages/shared/shortcodes/_mapbox.scss similarity index 100% rename from assets/scss/pages/single/shortcodes/_mapbox.scss rename to assets/scss/pages/shared/shortcodes/_mapbox.scss diff --git a/assets/scss/pages/single/shortcodes/_mermaid.scss b/assets/scss/pages/shared/shortcodes/_mermaid.scss similarity index 100% rename from assets/scss/pages/single/shortcodes/_mermaid.scss rename to assets/scss/pages/shared/shortcodes/_mermaid.scss diff --git a/assets/scss/pages/single/shortcodes/_tabs.scss b/assets/scss/pages/shared/shortcodes/_tabs.scss similarity index 100% rename from assets/scss/pages/single/shortcodes/_tabs.scss rename to assets/scss/pages/shared/shortcodes/_tabs.scss diff --git a/assets/scss/pages/single/shortcodes/_timeline.scss b/assets/scss/pages/shared/shortcodes/_timeline.scss similarity index 100% rename from assets/scss/pages/single/shortcodes/_timeline.scss rename to assets/scss/pages/shared/shortcodes/_timeline.scss diff --git a/assets/scss/pages/single/shortcodes/_version.scss b/assets/scss/pages/shared/shortcodes/_version.scss similarity index 100% rename from assets/scss/pages/single/shortcodes/_version.scss rename to assets/scss/pages/shared/shortcodes/_version.scss diff --git a/assets/scss/pages/single/_index.scss b/assets/scss/pages/single/_index.scss deleted file mode 100644 index d3da1424..00000000 --- a/assets/scss/pages/single/_index.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use "base"; -@use "shortcodes"; -@use "alert"; -@use "code"; -@use "collections"; -@use "fixit-decryptor"; -@use "footer"; -@use "related"; -@use "reward"; -@use "toc"; diff --git a/assets/scss/pages/specials/_base.scss b/assets/scss/pages/specials/_base.scss deleted file mode 100644 index 3a8f18d2..00000000 --- a/assets/scss/pages/specials/_base.scss +++ /dev/null @@ -1,6 +0,0 @@ -.special { - .single-title, - .single-subtitle { - text-align: right; - } -} diff --git a/assets/scss/pages/specials/_index.scss b/assets/scss/pages/specials/_index.scss deleted file mode 100644 index ecaa59d8..00000000 --- a/assets/scss/pages/specials/_index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use "base.scss"; -@use "friends.scss"; -@use "search.scss"; diff --git a/assets/scss/posts.scss b/assets/scss/posts.scss new file mode 100644 index 00000000..93206d6b --- /dev/null +++ b/assets/scss/posts.scss @@ -0,0 +1,3 @@ +@charset "utf-8"; + +@use "pages/posts"; diff --git a/assets/scss/search.scss b/assets/scss/search.scss new file mode 100644 index 00000000..d87ff8e5 --- /dev/null +++ b/assets/scss/search.scss @@ -0,0 +1,3 @@ +@charset "utf-8"; + +@use "pages/search"; diff --git a/hugo.toml b/hugo.toml index c5d57029..55462eba 100644 --- a/hugo.toml +++ b/hugo.toml @@ -1270,17 +1270,100 @@ postFooterBefore = [] postFooterAfter = [] # FixIt 1.0.0 | NEW SCSS variables customization via config -# All SCSS variables from _variables.scss can be configured here. -# Use the SCSS variable name (without $ prefix, snake_case) as the key. -# Note: -# - Color values must use hex format (e.g. "#ff0000"), CSS named colors (e.g. "red") are not supported. -# - Values used in compile-time operations (color.adjust, arithmetic) -# will use the SCSS default for derived values. You can override derived values directly. +# Leave empty to use the theme default value (defined in scss-vars.html). +# Note: Color values must use hex format (e.g. "#ff0000"), CSS named colors (e.g. "red") are not supported. [params.appearance] -# global_border_radius = "6px" -# global_font_size = "16px" -# global_font_color = "#1f2328" -# global_font_color_dark = "#b3bdcb" +# Global Typography +global_font_family = "" +global_font_size = "" +global_font_weight = "" +global_line_height = "" +global_border_radius = "" +# Global Colors +global_background_color = "" +global_background_color_dark = "" +global_font_color = "" +global_font_color_dark = "" +global_font_secondary_color = "" +global_font_secondary_color_dark = "" +global_link_color = "" +global_link_color_dark = "" +global_link_hover_color = "" +global_link_hover_color_dark = "" +global_border_color = "" +global_border_color_dark = "" +# Scrollbar +scrollbar_color = "" +scrollbar_hover_color = "" +# Selection +selection_color = "" +selection_color_dark = "" +# Header +header_background_color = "" +header_background_color_dark = "" +header_title_font_size = "" +header_title_font_family = "" +menu_active_color = "" +menu_active_color_dark = "" +menu_border_color = "" +menu_border_color_dark = "" +search_background_color = "" +search_background_color_dark = "" +# Tag Cloud +tag_cloud_start = "" +tag_cloud_start_dark = "" +tag_cloud_end = "" +tag_cloud_end_dark = "" +# Single Content +toc_title_font_size = "" +toc_content_font_size = "" +collection_title_font_size = "" +collection_list_font_size = "" +related_title_font_size = "" +related_list_font_size = "" +single_link_color = "" +single_link_color_dark = "" +single_link_hover_color = "" +single_link_hover_color_dark = "" +# Table +table_background_color = "" +table_background_color_dark = "" +table_thead_color = "" +table_thead_color_dark = "" +table_border_color = "" +table_border_color_dark = "" +# Blockquote +blockquote_color = "" +blockquote_color_dark = "" +# Reward +reward_color = "" +reward_color_dark = "" +reward_img_width = "" +# Pagination +pagination_link_color = "" +pagination_link_color_dark = "" +pagination_link_hover_color = "" +pagination_link_hover_color_dark = "" +# Code +code_color = "" +code_color_dark = "" +code_font_family = "" +code_header_color = "" +code_header_color_dark = "" +code_header_background_color = "" +code_header_background_color_dark = "" +code_background_color = "" +code_background_color_dark = "" +code_error_color = "" +code_highlight_color = "" +code_highlight_color_dark = "" +code_font_size = "" +code_block_font_size = "" +# GitHub Corners +github_corner_color = "" +github_corner_color_dark = "" +github_corner_fill = "" +github_corner_fill_dark = "" # FixIt 0.2.15 | NEW Developer options # select the scope named `public_repo` to generate personal access token, diff --git a/layouts/_partials/base/head/css.html b/layouts/_partials/base/head/css.html new file mode 100644 index 00000000..2c237220 --- /dev/null +++ b/layouts/_partials/base/head/css.html @@ -0,0 +1,51 @@ +{{- /* + CSS Partial - Base and page-specific CSS loading + + Loads the main stylesheet (every page) and conditionally loads + page-specific CSS based on .Kind, .Layout, and .RelPermalink. + + Called from: base/head/index.html +*/ -}} + +{{- $scssVars := partialCached "function/scss-vars.html" . -}} +{{- $fingerprint := .Site.Store.Get "fingerprint" -}} + +{{- /* Base CSS (every page) */ -}} +{{- $mainCSS := dict + "Resource" (resources.Get "scss/main.scss") + "ToCSS" (dict "vars" $scssVars) + "Fingerprint" $fingerprint + | partial "function/to-css.html" +-}} +{{- .Site.Store.Set "mainCSS" $mainCSS -}} +{{- dict "Resource" $mainCSS | partial "plugin/style.html" -}} + +{{- /* Page-specific CSS */ -}} +{{- $pageCSSPath := "" -}} +{{- if eq .Kind "home" -}} + {{- if in .RelPermalink "archives" -}} + {{- $pageCSSPath = "scss/archives.scss" -}} + {{- else if in .RelPermalink "link" -}} + {{- $pageCSSPath = "scss/link.scss" -}} + {{- else -}} + {{- $pageCSSPath = "scss/home.scss" -}} + {{- end -}} +{{- else if eq .Kind "page" -}} + {{- if eq .Layout "search" -}} + {{- $pageCSSPath = "scss/search.scss" -}} + {{- else if eq .Layout "friends" -}} + {{- $pageCSSPath = "scss/friends.scss" -}} + {{- else if eq .Type "posts" -}} + {{- $pageCSSPath = "scss/posts.scss" -}} + {{- end -}} +{{- else if in (slice "section" "taxonomy" "term") .Kind -}} + {{- $pageCSSPath = "scss/archives.scss" -}} +{{- end -}} +{{- with $pageCSSPath -}} + {{- dict "Source" . "ToCSS" (dict "vars" $scssVars) "Fingerprint" $fingerprint | partial "plugin/style.html" -}} +{{- end -}} + +{{- /* Custom CSS (highest priority) */ -}} +{{- with resources.Get "scss/custom.scss" -}} + {{- dict "Source" "scss/custom.scss" "ToCSS" (dict "vars" $scssVars) "Fingerprint" $fingerprint | partial "plugin/style.html" -}} +{{- end -}} diff --git a/layouts/_partials/base/head/index.html b/layouts/_partials/base/head/index.html index 5b94ba7b..11019486 100644 --- a/layouts/_partials/base/head/index.html +++ b/layouts/_partials/base/head/index.html @@ -113,29 +113,8 @@ {{- end -}} -{{- /* SCSS vars: internal (theme config) + appearance (user-configurable) */ -}} -{{- $logo := resources.Get "images/fixit.svg" | minify -}} -{{- $loading := resources.Get "images/loading.svg" | minify -}} -{{- $internal := dict - "base" (relURL "") - "logo_img" $logo.RelPermalink - "loading_img" $loading.RelPermalink --}} -{{- $scssVars := - dict "internal" $internal - | merge (.Site.Params.appearance | default dict) - | merge (partialCached "function/scss-vars.html" .) --}} - -{{- /* Theme main CSS */ -}} -{{- $mainCSS := dict - "Resource" (resources.Get "scss/main.scss") - "ToCSS" (dict "vars" $scssVars) - "Fingerprint" $fingerprint - | partial "function/to-css.html" --}} -{{- .Site.Store.Set "mainCSS" $mainCSS -}} -{{- dict "Resource" $mainCSS | partial "plugin/style.html" -}} +{{- /* CSS: base + page-specific */ -}} +{{- partial "base/head/css.html" . -}} {{- /* Font Awesome Icons */ -}} {{- $source := $cdn.fontawesomeFreeCSS | default "lib/fontawesome-free/all.min.css" -}} diff --git a/layouts/_partials/function/scss-vars.html b/layouts/_partials/function/scss-vars.html index 66ff9592..1be0d900 100644 --- a/layouts/_partials/function/scss-vars.html +++ b/layouts/_partials/function/scss-vars.html @@ -1,12 +1,30 @@ {{- /* - SCSS variables default values. - Merged with user config ([params.appearance]) and passed to toCSS as hugo:vars. - Values from: assets/scss/_variables.scss + Build the complete SCSS variables dict passed to toCSS as hugo:vars. + Two categories: + - Internal: theme config (base URL, logo, loading image) — highest priority + - Appearance: defaults + derived + user config ([params.appearance]) + Reference: assets/scss/_variables.scss Note: Color values must use hex format (e.g. "#ff0000"), CSS named colors (e.g. "red") are not supported because Hugo's isTypedCSSValue only recognizes hex colors, CSS functions, and CSS units. */ -}} -{{- /* Base defaults — independent values */ -}} -{{- $defaults := dict + +{{- /* Internal — theme config (not user-overridable) */ -}} +{{- $logo := resources.Get "images/fixit.svg" | minify -}} +{{- $loading := resources.Get "images/loading.svg" | minify -}} +{{- $internal := dict + "base_url" (relURL "") + "logo_img" $logo.RelPermalink + "loading_img" $loading.RelPermalink +-}} + +{{- /* Appearance — defaults + derived + user overrides */ -}} +{{- $overrides := dict -}} +{{- range $key, $value := .Site.Params.appearance | default dict -}} + {{- if $value -}} + {{- $overrides = $overrides | merge (dict $key $value) -}} + {{- end -}} +{{- end -}} +{{- $appearance := dict "global_font_family" "system-ui, -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei UI, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif" "global_font_size" "16px" "global_font_weight" "400" @@ -28,7 +46,6 @@ "scrollbar_hover_color" "#7d7d7d" "selection_color" "rgba(53, 166, 247, 0.25)" "selection_color_dark" "rgba(50, 112, 194, 0.4)" - "header_height" "3.5rem" "header_background_color" "#f6f8fa" "header_background_color_dark" "#151b23" "header_title_font_size" "1.375rem" @@ -57,6 +74,7 @@ "blockquote_color" "#697681" "blockquote_color_dark" "#9ba3aa" "reward_color" "#ff6347" + "reward_color_dark" "#ff4d2e" "reward_img_width" "180px" "pagination_link_color" "#bfbfbf" "pagination_link_hover_color" "#000" @@ -78,13 +96,21 @@ "github_corner_color" "#ffffff" "github_corner_color_dark" "#000000" -}} -{{- /* Derived defaults — values that follow other keys (see _variables.scss) */ -}} +{{- /* Derived — computed from base defaults */ -}} {{- $derived := dict - "menu_active_color" (index $defaults "global_link_color") - "tag_cloud_start" (index $defaults "global_font_color_dark") - "tag_cloud_end" (index $defaults "global_font_color") - "tag_cloud_end_dark" (index $defaults "global_font_color_dark") - "pagination_link_color_dark" (index $defaults "global_font_color_dark") + "header_title_font_family" (index $appearance "global_font_family") + "menu_active_color" (index $appearance "global_link_color") + "tag_cloud_start" (index $appearance "global_font_color_dark") + "tag_cloud_end" (index $appearance "global_font_color") + "tag_cloud_end_dark" (index $appearance "global_font_color_dark") + "pagination_link_color_dark" (index $appearance "global_font_color_dark") + "github_corner_fill" (index $appearance "header_background_color_dark") + "github_corner_fill_dark" (index $appearance "header_background_color") -}} -{{- $defaults = merge $defaults $derived -}} -{{- return $defaults -}} + +{{- $appearance = $overrides | merge $derived | merge $appearance -}} + +{{- /* Merge: appearance + internal */ -}} +{{- $scssVars := dict "internal" $internal | merge $appearance -}} + +{{- return $scssVars -}}