mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-08-24 15:28:57 +00:00
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
This commit is contained in:
Cell
+3
-186
@@ -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;
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
@charset "utf-8";
|
||||
|
||||
@use "pages/archives";
|
||||
@@ -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,
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
@charset "utf-8";
|
||||
|
||||
@use "pages/friends";
|
||||
@@ -0,0 +1,3 @@
|
||||
@charset "utf-8";
|
||||
|
||||
@use "pages/home";
|
||||
@@ -0,0 +1,3 @@
|
||||
@charset "utf-8";
|
||||
|
||||
@use "pages/link";
|
||||
@@ -3,4 +3,3 @@
|
||||
@use "core";
|
||||
@use "pages";
|
||||
@use "widgets";
|
||||
@use "custom";
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
// Offline page styles
|
||||
#content-offline {
|
||||
text-align: center;
|
||||
translate: 0 30vh;
|
||||
|
||||
@@ -39,6 +39,6 @@
|
||||
filter: invert(1) hue-rotate(0.5turn) opacity(0.75);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Bing CSE (Unsupported)
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
// Archives page styles (section, taxonomy, term)
|
||||
@use "sass:meta";
|
||||
|
||||
.archive {
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
@use "collections";
|
||||
@use "footer";
|
||||
@use "related";
|
||||
@use "reward";
|
||||
@use "toc";
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@forward "shortcodes";
|
||||
@forward "alert";
|
||||
@forward "code";
|
||||
@forward "content";
|
||||
@forward "fixit-decryptor";
|
||||
@forward "page";
|
||||
@forward "patch";
|
||||
+2
-2
@@ -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 *;
|
||||
@@ -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";
|
||||
@@ -1,6 +0,0 @@
|
||||
.special {
|
||||
.single-title,
|
||||
.single-subtitle {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
@use "base.scss";
|
||||
@use "friends.scss";
|
||||
@use "search.scss";
|
||||
@@ -0,0 +1,3 @@
|
||||
@charset "utf-8";
|
||||
|
||||
@use "pages/posts";
|
||||
@@ -0,0 +1,3 @@
|
||||
@charset "utf-8";
|
||||
|
||||
@use "pages/search";
|
||||
@@ -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,
|
||||
|
||||
@@ -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 -}}
|
||||
@@ -113,29 +113,8 @@
|
||||
<link rel="alternate" type="application/feed+json" href="{{ .Permalink }}" title="{{ $title }}" />
|
||||
{{- 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" -}}
|
||||
|
||||
@@ -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 -}}
|
||||
|
||||
Reference in New Issue
Block a user