blogs/FixIt
1
0
Fork 0
mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-08-24 15:28:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Refactor: update CSS variable prefixes to use rootPrefix for consistency

Browse Source
This commit is contained in:
Cell
2025-08-13 12:48:22 +08:00
parent fe034a2a40
commit 59bea1e518
12 changed files with 55 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/_core/_media.scss
+1 -1
View File
@@ -131,7 +131,7 @@
// 确保打印时没有 scrollbar
:root {
--fi-scrollbar-width: none !important;
#{$rootPrefix}scrollbar-width: none !important;
}
*::-webkit-scrollbar {
assets/css/_core/_root.scss
+18 -18
View File
@@ -2,42 +2,42 @@
// Note: Custom variable values only support SassScript inside `#{}`.
// TODO migrate SCSS variables to CSS variables
--#{$prefix}global-font-color: #{$global-font-color};
--#{$prefix}global-border-color: #{$global-border-color};
#{$rootPrefix}global-font-color: #{$global-font-color};
#{$rootPrefix}global-border-color: #{$global-border-color};
// Theme colors variables
@each $color, $value in $theme-colors {
--#{$prefix}#{$color}: #{$value};
#{$rootPrefix}#{$color}: #{$value};
}
// Scroll margin top and Stack sticky top related
--#{$prefix}scroll-mt: calc(#{$header-height} + #{$global-scroll-margin-top});
#{$rootPrefix}scroll-mt: calc(#{$header-height} + #{$global-scroll-margin-top});
// Set breadcrumb height to 0px if breadcrumb is disabled
--#{$prefix}breadcrumb-height: 0px;
#{$rootPrefix}breadcrumb-height: 0px;
// hr / divider style
--#{$prefix}hr-background-color: #{darken($global-border-color, 5%)};
--#{$prefix}hr-before-color: #{lighten($single-link-hover-color, 4%)};
--#{$prefix}divider-edge-weak: linear-gradient(to right, transparent, var(--#{$prefix}divider-bg, #d0d0d5), transparent);
#{$rootPrefix}hr-background-color: #{darken($global-border-color, 5%)};
#{$rootPrefix}hr-before-color: #{lighten($single-link-hover-color, 4%)};
#{$rootPrefix}divider-edge-weak: linear-gradient(to right, transparent, var(#{$rootPrefix}divider-bg, #d0d0d5), transparent);
// Scrollbar related variables
--#{$prefix}scrollbar-thumb-color: #{$scrollbar-color};
--#{$prefix}scrollbar-thumb-hover-color: #{$scrollbar-hover-color};
--#{$prefix}scrollbar-track-color: transparent;
--#{$prefix}scrollbar-width: thin;
--#{$prefix}scrollbar-width-legacy: 12px;
#{$rootPrefix}scrollbar-thumb-color: #{$scrollbar-color};
#{$rootPrefix}scrollbar-thumb-hover-color: #{$scrollbar-hover-color};
#{$rootPrefix}scrollbar-track-color: transparent;
#{$rootPrefix}scrollbar-width: thin;
#{$rootPrefix}scrollbar-width-legacy: 12px;
}
// Dark theme
[data-theme=dark] {
--#{$prefix}global-font-color: #{$global-font-color-dark};
--#{$prefix}global-border-color: #{$global-border-color-dark};
#{$rootPrefix}global-font-color: #{$global-font-color-dark};
#{$rootPrefix}global-border-color: #{$global-border-color-dark};
@each $color, $value in $theme-colors {
--#{$prefix}#{$color}: #{darken($value, 5%)};
#{$rootPrefix}#{$color}: #{darken($value, 5%)};
}
--#{$prefix}hr-background-color: #{lighten($global-border-color-dark, 5%)};
--#{$prefix}hr-before-color: #{darken($global-link-hover-color-dark, 4%)};
#{$rootPrefix}hr-background-color: #{lighten($global-border-color-dark, 5%)};
#{$rootPrefix}hr-before-color: #{darken($global-link-hover-color-dark, 4%)};
}
assets/css/_partials/_single/_fixit-decryptor.scss
+3 -3
View File
@@ -1,7 +1,7 @@
.fixit-decryptor-container {
font-family: $global-font-family;
text-align: center;
margin-block: var(--fixit-decryptor-margin-block);
margin-block: var(#{$rootPrefix}decryptor-margin-block);
.fixit-decryptor-loading {
vertical-align: middle;
@@ -90,7 +90,7 @@ fixit-encryptor {
// fixit-encryptor for for the encrypted pages
article fixit-encryptor {
.fixit-decryptor-container {
--fixit-decryptor-margin-block: 2rem;
#{$rootPrefix}decryptor-margin-block: 2rem;
}
&.decrypted > .fixit-decryptor-container {
.fixit-decryptor-loading,
@@ -108,7 +108,7 @@ article fixit-encryptor {
// fixit-encryptor shortcodes
#content fixit-encryptor {
.fixit-decryptor-container {
--fixit-decryptor-margin-block: 1rem;
#{$rootPrefix}decryptor-margin-block: 1rem;
}
&.decrypted > .fixit-decryptor-container {
display: none;
assets/css/_variables.scss
+1 -1
View File
@@ -3,8 +3,8 @@
// ==============================
// ========== Global ========== //
// Prefix for :root CSS variables.
$prefix: fi- !default;
$rootPrefix: --fi- !default;
// Font and Line Height
$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 !default;
assets/css/config.template.scss
+11
View File
@@ -0,0 +1,11 @@
{{- $loading := resources.Get "images/loading.svg" | minify -}}
@charset "utf-8";
@import "_variables";
$base: "{{ relURL "" }}" !default;
:root {
#{$rootPrefix}base: "#{$base}";
#{$rootPrefix}loading-img: url("{{ $loading.RelPermalink }}");
}
layouts/_partials/footer.html
+1 -1
View File
@@ -42,7 +42,7 @@
{{- /* Author */ -}}
{{- if ne $footerConfig.author false -}}
<span class="author" itemprop="copyrightHolder">
{{ partial "plugin/link.html" (dict "Destination" ($.Site.Params.author.link | default (.Site.Store.Get "homeRelPermalink")) "Content" .Site.Params.author.name) -}}
{{ partial "plugin/link.html" (dict "Destination" ($.Site.Params.author.link | default (relURL "")) "Content" .Site.Params.author.name) -}}
</span>
{{- end -}}
layouts/_partials/head/link.html
+6
View File
@@ -37,6 +37,12 @@
<link rel="alternate" type="application/feed+json" href="{{ .Permalink }}" title="{{ $title }}" />
{{- end -}}
{{- /* config.min.css */ -}}
{{- $options := dict "Source" "css/config.template.scss" "Template" "css/config.scss" "Fingerprint" $fingerprint -}}
{{- $toCSS := dict "targetPath" "css/config.min.css" "enableSourceMap" true -}}
{{- $options = dict "Context" . "ToCSS" $toCSS | merge $options -}}
{{- partial "plugin/style.html" $options -}}
{{- /* style.min.css */ -}}
{{- $options := dict "Source" "css/style.scss" "Fingerprint" $fingerprint -}}
{{- $toCSS := dict "targetPath" "css/style.min.css" "enableSourceMap" true -}}
layouts/_partials/header.html
+3 -3
View File
@@ -1,11 +1,11 @@
{{- $buildDrafts := .Site.BuildDrafts -}}
{{- $homeRelPermalink := .Site.Store.Get "homeRelPermalink" -}}
{{- $relURL := relURL "" -}}
{{- /* Desktop header */ -}}
<header class="desktop animate__faster" id="header-desktop">
<div class="header-wrapper"{{ if .Site.Params.githubCorner.enable }} data-github-corner="{{ .Site.Params.githubCorner.position }}"{{ end }}>
<div class="header-title">
<a href="{{ $homeRelPermalink }}" title="{{ .Site.Title }}">
<a href="{{ $relURL }}" title="{{ .Site.Title }}">
{{- with .Site.Params.header.title -}}
{{- with .logo -}}
{{- dict "Src" . "Class" "logo" "Alt" $.Site.Title "Width" 32 "Height" 32 | partial "plugin/image.html" -}}
@@ -157,7 +157,7 @@
<div class="header-container">
<div class="header-wrapper">
<div class="header-title">
<a href="{{ $homeRelPermalink }}" title="{{ .Site.Title }}">
<a href="{{ $relURL }}" title="{{ .Site.Title }}">
{{- with .Site.Params.header.title -}}
{{- with .logo -}}
{{- dict "Src" . "Class" "logo" "Alt" $.Site.Title "Width" 26 "Height" 26 | partial "plugin/image.html" -}}
layouts/_partials/init/global.html
-6
View File
@@ -1,9 +1,3 @@
{{- /* Set site home relative permalink */ -}}
{{- $homeRelPermalink := .Site.Home.RelPermalink -}}
{{- $homeRelPermalink = strings.TrimSuffix "archives/" $homeRelPermalink -}}
{{- $homeRelPermalink = strings.TrimSuffix "offline/" $homeRelPermalink -}}
{{- .Site.Store.Set "homeRelPermalink" $homeRelPermalink -}}
{{- /* Set pages of main sections */ -}}
{{- $pages := where .Site.RegularPages "Section" "in" .Site.MainSections -}}
{{- $pages = $pages | union (where .Site.RegularPages "Type" "in" .Site.MainSections) -}}
layouts/_partials/init/index.html
+1 -1
View File
@@ -1,4 +1,4 @@
{{- hugo.Store.Set "version" "v0.4.0-alpha-20250813022026-bf3fe683" -}}
{{- hugo.Store.Set "version" "v0.4.0-alpha-20250813045859-deae5256" -}}
{{- .Store.Set "this" dict -}}
{{- partial "init/detection-env.html" . -}}
layouts/_partials/single/footer.html
+7 -3
View File
@@ -19,7 +19,8 @@
<div class="post-info">
<div class="post-info-line">
<div class="post-info-mod">
<span title="{{ dict "Date" ("2006-01-02 15:04:05" | .Lastmod.Format) | T "single.updatedOnDate" }}">
{{- $updateTitle := dict "Date" ("2006-01-02 15:04:05" | .Lastmod.Format) | T "single.updatedOnDate" -}}
<span title="{{ $updateTitle }}">
{{- with .Lastmod | dateFormat (.Site.Params.dateformat | default "2006-01-02") -}}
{{- dict "Date" . | T "single.updatedOnDate" -}}&nbsp;
{{- if $gitRepo -}}
@@ -98,12 +99,15 @@
{{- if $tagTerms -}}
{{- dict "Class" "fa-solid fa-tags fa-fw me-1" | partial "plugin/icon.html" -}}
{{- range $tagTerms -}}
<a href="{{ partial "function/escapeurl.html" .RelPermalink }}" class="post-tag" title="{{ printf "%v - %v" (T "tags") .LinkTitle }}">{{ .LinkTitle }}</a>
{{- $href := partial "function/escapeurl.html" .RelPermalink -}}
{{- $title := printf "%v - %v" (T "tags") .LinkTitle -}}
<a href="{{ $href }}" class="post-tag" title="{{ $title }}">{{ .LinkTitle }}</a>
{{- end -}}
{{- end -}}
</section>
<section>
<span><a href="javascript:void(0);" onclick="window.history.back();">{{ T "single.back" }}</a></span>&nbsp;|&nbsp;<span><a href="{{ .Site.Store.Get "homeRelPermalink" }}">{{ T "single.home" }}</a></span>
{{- $relURL := relURL "" -}}
<span><a href="javascript:void(0);" onclick="window.history.back();">{{ T "single.back" }}</a></span>&nbsp;|&nbsp;<span><a href="{{ $relURL }}">{{ T "single.home" }}</a></span>
</section>
</div>
layouts/baseof.html
+3 -3
View File
@@ -3,9 +3,9 @@
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/WebPage" lang="{{ .Site.LanguageCode }}">
<head>
{{ if .IsHome | and (ne .Site.Params.disableThemeInject true) }}
<meta name="theme" content='FixIt {{ hugo.Store.Get "version" }}'>
{{ end }}
{{- if .IsHome | and (ne .Site.Params.disableThemeInject true) }}
<meta name="theme" content='FixIt {{ hugo.Store.Get "version" }}'>
{{- end }}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="robots" content="noodp" />