refactor: migrate partial SCSS variables to CSS variables

This commit is contained in:
Cell
2025-12-18 15:17:33 +08:00
parent e600d047da
commit a96a76abf4
12 changed files with 32 additions and 107 deletions
+1 -5
View File
@@ -47,11 +47,7 @@
content: attr(data-separator);
display: inline-block;
padding-inline: 0.5rem;
color: $global-font-secondary-color;
[data-theme='dark'] & {
color: $global-font-secondary-color-dark;
}
color: var(#{$rootPrefix}global-font-secondary-color);
}
&.active {
+5 -20
View File
@@ -177,11 +177,7 @@ header {
@include placeholder($global-font-secondary-color);
.search-button {
color: $global-font-secondary-color;
[data-theme='dark'] & {
color: $global-font-secondary-color-dark;
}
color: var(#{$rootPrefix}global-font-secondary-color);
}
.search-clear:hover {
@@ -580,25 +576,18 @@ header {
font-size: 0.875rem;
float: right;
text-align: right;
color: $global-font-secondary-color;
[data-theme='dark'] & {
color: $global-font-secondary-color-dark;
}
color: var(#{$rootPrefix}global-font-secondary-color);
}
.suggestion-context {
line-height: 1.25rem;
@include box(vertical);
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
@include overflow-wrap(break-word);
color: $global-font-secondary-color;
[data-theme='dark'] & {
color: $global-font-secondary-color-dark;
}
color: var(#{$rootPrefix}global-font-secondary-color);
}
em {
@@ -641,11 +630,7 @@ header {
padding: 0.5rem 1rem;
float: right;
font-size: 0.8rem;
color: $global-font-secondary-color;
[data-theme='dark'] {
color: $global-font-secondary-color-dark;
}
color: var(#{$rootPrefix}global-font-secondary-color);
@include link(false, false);
+9 -9
View File
@@ -8,11 +8,6 @@
#{$rootPrefix}global-font-secondary-color: #{$global-font-secondary-color};
#{$rootPrefix}global-border-color: #{$global-border-color};
// Theme colors variables
@each $color, $value in $theme-colors {
#{$rootPrefix}#{$color}: #{$value};
}
// Scroll margin top and Stack sticky top related
#{$rootPrefix}scroll-mt: calc(#{$header-height} + #{$global-scroll-margin-top});
@@ -37,6 +32,11 @@
#{$rootPrefix}code-header-color: #{$code-header-color};
#{$rootPrefix}code-header-bg: #{darken($code-background-color, 5%)};
#{$rootPrefix}gist-meta-background-color: #{darken($code-background-color, 5%)};
// Theme colors variables
@each $color, $value in $theme-colors {
#{$rootPrefix}#{$color}: #{$value};
}
}
// Dark theme
@@ -45,10 +45,6 @@
#{$rootPrefix}global-font-secondary-color: #{$global-font-secondary-color-dark};
#{$rootPrefix}global-border-color: #{$global-border-color-dark};
@each $color, $value in $theme-colors {
#{$rootPrefix}#{$color}: #{darken($value, 5%)};
}
#{$rootPrefix}hr-background-color: #{lighten($global-border-color-dark, 5%)};
#{$rootPrefix}hr-before-color: #{darken($global-link-hover-color-dark, 4%)};
@@ -57,4 +53,8 @@
#{$rootPrefix}code-header-color: #{$code-header-color-dark};
#{$rootPrefix}code-header-bg: #{darken($code-background-color-dark, 5%)};
#{$rootPrefix}gist-meta-background-color: #{darken($code-background-color-dark, 5%)};
@each $color, $value in $theme-colors {
#{$rootPrefix}#{$color}: #{darken($value, 5%)};
}
}
+3 -16
View File
@@ -62,11 +62,7 @@
font-weight: normal;
margin: 0;
padding: 0.5rem;
color: $global-font-secondary-color;
[data-theme='dark'] & {
color: $global-font-secondary-color-dark;
}
color: var(#{$rootPrefix}global-font-secondary-color);
}
}
}
@@ -133,21 +129,12 @@
.content {
margin-top: 0.3rem;
color: $global-font-secondary-color;
[data-theme='dark'] & {
color: $global-font-secondary-color-dark;
}
color: var(#{$rootPrefix}global-font-secondary-color);
@include link(false, true);
b,
strong {
color: $global-font-secondary-color;
[data-theme='dark'] & {
color: $global-font-secondary-color-dark;
}
color: var(#{$rootPrefix}global-font-secondary-color);
}
}
+4 -16
View File
@@ -37,7 +37,7 @@
.post-meta {
font-size: 0.875rem;
color: $global-font-secondary-color;
color: var(#{$rootPrefix}global-font-secondary-color);
.comment-visitors,
.comment-count {
@@ -48,10 +48,6 @@
display: inline-block;
}
[data-theme='dark'] & {
color: $global-font-secondary-color-dark;
}
@include link(false, true);
.author {
@@ -91,9 +87,9 @@
content: attr(data-end-flag);
display: block;
text-align: center;
color: $global-font-secondary-color;
font-size: 15px;
padding: 5px;
color: var(#{$rootPrefix}global-font-secondary-color);
}
hr {
@@ -273,18 +269,10 @@
}
ruby {
background: $code-background-color;
background-color: var(#{$rootPrefix}code-block-background-color);
rt {
color: $global-font-secondary-color;
}
[data-theme='dark'] & {
background: $code-background-color-dark;
rt {
color: $global-font-secondary-color-dark;
}
color: var(#{$rootPrefix}global-font-secondary-color);
}
}
+1 -5
View File
@@ -26,11 +26,7 @@
}
sup {
color: $global-font-secondary-color;
[data-theme='dark'] & {
color: $global-font-secondary-color-dark;
}
color: var(#{$rootPrefix}global-font-secondary-color);
}
}
}
+1 -5
View File
@@ -71,13 +71,9 @@
.archive-item-date {
text-align: right;
color: $global-font-secondary-color;
color: var(#{$rootPrefix}global-font-secondary-color);
white-space: nowrap;
font-variant-numeric: tabular-nums lining-nums;
[data-theme='dark'] & {
color: $global-font-secondary-color-dark;
}
}
.more-post {
+1 -5
View File
@@ -7,12 +7,8 @@
}
i.details-icon {
color: $global-font-secondary-color;
color: var(#{$rootPrefix}global-font-secondary-color);
@include transition(transform 0.2s ease);
[data-theme='dark'] & {
color: $global-font-secondary-color-dark;
}
}
}
+2 -10
View File
@@ -19,22 +19,14 @@
.post-info-mod {
font-size: 0.8em;
color: $global-font-secondary-color;
[data-theme='dark'] & {
color: $global-font-secondary-color-dark;
}
color: var(#{$rootPrefix}global-font-secondary-color);
@include link(false, false);
}
.post-info-license {
font-size: 0.8em;
color: $global-font-secondary-color;
[data-theme='dark'] & {
color: $global-font-secondary-color-dark;
}
color: var(#{$rootPrefix}global-font-secondary-color);
@include link(false, false);
}
+2 -10
View File
@@ -56,18 +56,10 @@
}
ruby {
background: $code-background-color;
background-color: var(#{$rootPrefix}code-block-background-color);
rt {
color: $global-font-secondary-color;
}
[data-theme='dark'] & {
background: $code-background-color-dark;
rt {
color: $global-font-secondary-color-dark;
}
color: var(#{$rootPrefix}global-font-secondary-color);
}
}
}
+2 -5
View File
@@ -47,6 +47,7 @@
&title {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
max-height: calc(1rem * 1.25 * 2);
font-size: 1rem;
@@ -60,7 +61,7 @@
align-items: center;
margin-top: 0.25rem;
font-size: 0.825rem;
color: $global-font-secondary-color;
color: var(#{$rootPrefix}global-font-secondary-color);
}
&icon-link {
@@ -108,9 +109,5 @@
&title {
color: $global-font-color-dark;
}
&meta {
color: $global-font-secondary-color-dark;
}
}
}
+1 -1
View File
@@ -1,4 +1,4 @@
{{- hugo.Store.Set "version" "v0.4.0-alpha.3-20251218063009-54235ac6" -}}
{{- hugo.Store.Set "version" "v0.4.0-alpha.3-20251218071733-e600d047" -}}
{{- .Store.Set "this" dict -}}
{{- partial "init/detection-env.html" . -}}