🔧 🚩 🚧 Finished the base variable replace content.
This commit is contained in:
凡梦星尘
parent
9eb7a32d23
commit
b105452feb
@ -29,7 +29,7 @@
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
@if hexo-config('darkmode') {
|
||||
@if $darkmode {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--body-bg-color: #{$body-bg-color-dark};
|
||||
|
||||
@ -117,7 +117,7 @@
|
||||
}
|
||||
|
||||
@function sidebar-toggle-alignment($reverse) {
|
||||
$condition : hexo-config('sidebar.position') == 'right';
|
||||
$condition : $sidebar_position == 'right';
|
||||
@if ($scheme == 'Muse') or ($scheme == 'Mist') {
|
||||
$condition : $condition == $reverse;
|
||||
}
|
||||
@ -125,7 +125,9 @@
|
||||
}
|
||||
|
||||
@mixin sidebar-toggle-position($reverse) {
|
||||
$alignment : list.nth(sidebar-toggle-alignment($reverse), 0);
|
||||
// TODO how use nth function.
|
||||
//$alignment : list.nth(sidebar-toggle-alignment($reverse), 0);
|
||||
$alignment : 0;
|
||||
#{$alignment}: $b2t-position-right;
|
||||
@include tablet-mobile() {
|
||||
#{$alignment}: $b2t-position-right-mobile;
|
||||
|
||||
29
assets/css/_sitevars.scss
Normal file
29
assets/css/_sitevars.scss
Normal file
@ -0,0 +1,29 @@
|
||||
// All variables from site's config content.
|
||||
{{- $P := .Site.Params -}}
|
||||
|
||||
// Base
|
||||
$scheme: {{ $P.scheme }};
|
||||
$darkmode: {{ $P.darkmode }};
|
||||
$theme_color_light: {{ $P.themeColor.light }};
|
||||
$theme_color_dark: {{ $P.themeColor.dark }};
|
||||
|
||||
// Font
|
||||
$font_enable: {{ $P.font.enable }};
|
||||
$font_global_size: {{ default $P.font.global.size 1 }};
|
||||
$font_headings_size: {{ default $P.font.headings.size 1.625 }};
|
||||
$font_title_size: {{ default $P.font.title.size 1.375 }};
|
||||
|
||||
// Code & Code blocks
|
||||
// TODO find the configure variable
|
||||
$highlight_light_background: #000;
|
||||
$highlight_light_foreground: #222;
|
||||
$highlight_dark_background: #000;
|
||||
$highlight_dark_foreground: #222;
|
||||
|
||||
// Sidebar
|
||||
$sidebar_position: {{ $P.sidebar.position }};
|
||||
$sidebar_padding: {{ $P.sidebar.padding }};
|
||||
$sidebar_offset: {{ $P.sidebar.offset }};
|
||||
|
||||
// Note
|
||||
$note_light_bg_offset: {{ $P.note.lightBgOffset }};
|
||||
@ -1,4 +1,4 @@
|
||||
@use 'sass:map';
|
||||
//@use 'sass:map';
|
||||
|
||||
//
|
||||
// Variables
|
||||
@ -68,14 +68,16 @@ $card-bg-color-dark : $black-light;
|
||||
$menu-item-bg-color : $whitesmoke;
|
||||
$menu-item-bg-color-dark : $black-light;
|
||||
|
||||
$theme-color = convert(hexo-config('theme_color.light'));
|
||||
$theme-color-dark = convert(hexo-config('theme_color.dark'));
|
||||
$theme-color : convert($theme_color_light);
|
||||
$theme-color-dark : convert($theme_color_dark);
|
||||
|
||||
// Typography
|
||||
// Font, line-height, and elements colors.
|
||||
// --------------------------------------------------
|
||||
@function get-font-family($config) {
|
||||
$custom-family : hexo-config('font.' + $config + '.family');
|
||||
//TODO find the way daymatic variable
|
||||
$custom-family: $config;
|
||||
//$custom-family : hexo-config('font.' + $config + '.family');
|
||||
@return if(type-of($custom-family) == string, unquote($custom-family), null);
|
||||
}
|
||||
|
||||
@ -109,7 +111,7 @@ $font-family-monospace : consolas, Menlo, monospace, $font-family-chinese;
|
||||
|
||||
|
||||
// Font size
|
||||
$font-size-base : if((hexo-config('font.enable') and type-of(hexo-config('font.global.size')) == number), hexo-config('font.global.size') * 1em, 1em);
|
||||
$font-size-base : if($font_enable and (type-of($font_global_size) == number), $font_global_size * 1em, 1em);
|
||||
$font-size-smallest : .75em;
|
||||
$font-size-smaller : .8125em;
|
||||
$font-size-small : .875em;
|
||||
@ -121,7 +123,7 @@ $font-size-largest : 1.5em;
|
||||
|
||||
// Headings font size
|
||||
$font-size-headings-step : .125em;
|
||||
$font-size-headings-base : if((hexo-config('font.enable') and type-of(hexo-config('font.headings.size')) == number), hexo-config('font.headings.size') * 1em, 1.625em);
|
||||
$font-size-headings-base : if($font_enable and (type-of($font_headings_size) == number), $font_headings_size * 1em, 1.625em);
|
||||
|
||||
|
||||
// Global line height
|
||||
@ -155,13 +157,13 @@ $table-row-hover-bg-color-dark : #363636;
|
||||
// --------------------------------------------------
|
||||
$code-font-family : $font-family-monospace;
|
||||
|
||||
$highlight-background : hexo-config('highlight.light.background');
|
||||
$highlight-foreground : hexo-config('highlight.light.foreground');
|
||||
$highlight-background : $highlight_light_background;
|
||||
$highlight-foreground : $highlight_light_foreground;
|
||||
$highlight-gutter-background : mix($highlight-background, $highlight-foreground, 90%);
|
||||
$highlight-gutter-foreground : mix($highlight-background, $highlight-foreground, 10%);
|
||||
|
||||
$highlight-background-dark : hexo-config('highlight.dark.background');
|
||||
$highlight-foreground-dark : hexo-config('highlight.dark.foreground');
|
||||
$highlight-background-dark : $highlight_dark_background;
|
||||
$highlight-foreground-dark : $highlight_dark_foreground;
|
||||
$highlight-gutter-background-dark : mix($highlight-background-dark, $highlight-foreground-dark, 90%);
|
||||
$highlight-gutter-foreground-dark : mix($highlight-background-dark, $highlight-foreground-dark, 10%);
|
||||
|
||||
@ -228,7 +230,7 @@ $brand-hover-color : white;
|
||||
$brand-color-dark : $grey-lighter;
|
||||
$brand-hover-color-dark : $grey-lighter;
|
||||
|
||||
$font-size-title : if((hexo-config('font.enable') and type-of(hexo-config('font.title.size')) == number), hexo-config('font.title.size') * 1em, 1.375em);
|
||||
$font-size-title : if($font_enable and (type-of($font_title_size) == number), $font_title_size * 1em, 1.375em);
|
||||
$font-size-subtitle : $font-size-smaller;
|
||||
$subtitle-color : $grey-dark;
|
||||
$site-subtitle-color : $grey-dark;
|
||||
@ -252,8 +254,8 @@ $tag-cloud-end-dark : #eee;
|
||||
// Variables for sidebar section elements.
|
||||
// --------------------------------------------------
|
||||
|
||||
$sidebar-padding : if(type-of(hexo-config('sidebar.padding')) == number, hexo-config('sidebar.padding') * 1px, 18px);
|
||||
$sidebar-offset : if(type-of(hexo-config('sidebar.offset')) == number, hexo-config('sidebar.offset') * 1px, 12px);
|
||||
$sidebar-padding : if(type-of($sidebar_padding) == number, $sidebar_padding * 1px, 18px);
|
||||
$sidebar-offset : if(type-of($sidebar_offset) == number, $sidebar_offset * 1px, 12px);
|
||||
$sidebar-nav-color : $grey-dim;
|
||||
$sidebar-nav-hover-color : $whitesmoke;
|
||||
$sidebar-highlight : $blue-bright;
|
||||
@ -299,7 +301,7 @@ $post-card-margin : 1em 0 0;
|
||||
// Note colors
|
||||
// --------------------------------------------------
|
||||
// Read note light_bg_offset from NexT config and set in '$lbg%' to use it as string variable.
|
||||
$lbg : if(type-of(hexo-config('note.light_bg_offset')) == number, hexo-config('note.light_bg_offset') * 1%, 0);
|
||||
$lbg : if(type-of($note_light_bg_offset) == number, $note_light_bg_offset * 1%, 0);
|
||||
$note-types : 'default' 'primary' 'info' 'success' 'warning' 'danger';
|
||||
|
||||
$note-border-radius : 3px;
|
||||
@ -314,21 +316,21 @@ $note-border : (
|
||||
);
|
||||
|
||||
$note-bg : (
|
||||
'default' : lighten(adjust-hue(map.get($note-border, 'default'), 0), 94% + $lbg),
|
||||
'primary' : lighten(adjust-hue(map.get($note-border, 'primary'), 10), 92% + $lbg),
|
||||
'info' : lighten(adjust-hue(map.get($note-border, 'info'), -10), 91% + $lbg),
|
||||
'success' : lighten(adjust-hue(map.get($note-border, 'success'), 10), 90% + $lbg),
|
||||
'warning' : lighten(adjust-hue(map.get($note-border, 'warning'), 10), 88% + $lbg),
|
||||
'danger' : lighten(adjust-hue(map.get($note-border, 'danger'), -10), 92% + $lbg)
|
||||
'default' : lighten(adjust-hue(map-get($note-border, 'default'), 0), 94% + $lbg),
|
||||
'primary' : lighten(adjust-hue(map-get($note-border, 'primary'), 10), 92% + $lbg),
|
||||
'info' : lighten(adjust-hue(map-get($note-border, 'info'), -10), 91% + $lbg),
|
||||
'success' : lighten(adjust-hue(map-get($note-border, 'success'), 10), 90% + $lbg),
|
||||
'warning' : lighten(adjust-hue(map-get($note-border, 'warning'), 10), 88% + $lbg),
|
||||
'danger' : lighten(adjust-hue(map-get($note-border, 'danger'), -10), 92% + $lbg)
|
||||
);
|
||||
|
||||
$note-text : (
|
||||
'default' : map.get($note-border, 'default'),
|
||||
'primary' : map.get($note-border, 'primary'),
|
||||
'info' : map.get($note-border, 'info'),
|
||||
'success' : map.get($note-border, 'success'),
|
||||
'warning' : map.get($note-border, 'warning'),
|
||||
'danger' : map.get($note-border, 'danger')
|
||||
'default' : map-get($note-border, 'default'),
|
||||
'primary' : map-get($note-border, 'primary'),
|
||||
'info' : map-get($note-border, 'info'),
|
||||
'success' : map-get($note-border, 'success'),
|
||||
'warning' : map-get($note-border, 'warning'),
|
||||
'danger' : map-get($note-border, 'danger')
|
||||
);
|
||||
|
||||
$note-icon : (
|
||||
@ -350,12 +352,12 @@ $note-modern-border : (
|
||||
);
|
||||
|
||||
$note-modern-bg : (
|
||||
'default' : lighten(adjust-hue(map.get($note-modern-border, 'default'), 10), 60% + ($lbg * 4)),
|
||||
'primary' : lighten(adjust-hue(map.get($note-modern-border, 'primary'), 10), 40% + ($lbg * 4)),
|
||||
'info' : lighten(adjust-hue(map.get($note-modern-border, 'info'), 10), 50% + ($lbg * 4)),
|
||||
'success' : lighten(adjust-hue(map.get($note-modern-border, 'success'), 10), 40% + ($lbg * 4)),
|
||||
'warning' : lighten(adjust-hue(map.get($note-modern-border, 'warning'), 10), 43% + ($lbg * 4)),
|
||||
'danger' : lighten(adjust-hue(map.get($note-modern-border, 'danger'), 10), 35% + ($lbg * 4))
|
||||
'default' : lighten(adjust-hue(map-get($note-modern-border, 'default'), 10), 60% + ($lbg * 4)),
|
||||
'primary' : lighten(adjust-hue(map-get($note-modern-border, 'primary'), 10), 40% + ($lbg * 4)),
|
||||
'info' : lighten(adjust-hue(map-get($note-modern-border, 'info'), 10), 50% + ($lbg * 4)),
|
||||
'success' : lighten(adjust-hue(map-get($note-modern-border, 'success'), 10), 40% + ($lbg * 4)),
|
||||
'warning' : lighten(adjust-hue(map-get($note-modern-border, 'warning'), 10), 43% + ($lbg * 4)),
|
||||
'danger' : lighten(adjust-hue(map-get($note-modern-border, 'danger'), 10), 35% + ($lbg * 4))
|
||||
);
|
||||
|
||||
$note-modern-text : (
|
||||
@ -368,12 +370,12 @@ $note-modern-text : (
|
||||
);
|
||||
|
||||
$note-modern-hover : (
|
||||
'default' : darken(adjust-hue(map.get($note-modern-text, 'default'), -10), 32%),
|
||||
'primary' : darken(adjust-hue(map.get($note-modern-text, 'primary'), -10), 22%),
|
||||
'info' : darken(adjust-hue(map.get($note-modern-text, 'info'), -10), 32%),
|
||||
'success' : darken(adjust-hue(map.get($note-modern-text, 'success'), -10), 27%),
|
||||
'warning' : darken(adjust-hue(map.get($note-modern-text, 'warning'), -10), 18%),
|
||||
'danger' : darken(adjust-hue(map.get($note-modern-text, 'danger'), -10), 22%)
|
||||
'default' : darken(adjust-hue(map-get($note-modern-text, 'default'), -10), 32%),
|
||||
'primary' : darken(adjust-hue(map-get($note-modern-text, 'primary'), -10), 22%),
|
||||
'info' : darken(adjust-hue(map-get($note-modern-text, 'info'), -10), 32%),
|
||||
'success' : darken(adjust-hue(map-get($note-modern-text, 'success'), -10), 27%),
|
||||
'warning' : darken(adjust-hue(map-get($note-modern-text, 'warning'), -10), 18%),
|
||||
'danger' : darken(adjust-hue(map-get($note-modern-text, 'danger'), -10), 22%)
|
||||
);
|
||||
|
||||
|
||||
@ -385,10 +387,10 @@ $tbr : 0;
|
||||
// Label colors
|
||||
// --------------------------------------------------
|
||||
$label : (
|
||||
'default' : lighten(adjust-hue(map.get($note-border, 'default'), 0), 89% + $lbg),
|
||||
'primary' : lighten(adjust-hue(map.get($note-border, 'primary'), 10), 87% + $lbg),
|
||||
'info' : lighten(adjust-hue(map.get($note-border, 'info'), -10), 86% + $lbg),
|
||||
'success' : lighten(adjust-hue(map.get($note-border, 'success'), 10), 85% + $lbg),
|
||||
'warning' : lighten(adjust-hue(map.get($note-border, 'warning'), 10), 83% + $lbg),
|
||||
'danger' : lighten(adjust-hue(map.get($note-border, 'danger'), -10), 87% + $lbg)
|
||||
'default' : lighten(adjust-hue(map-get($note-border, 'default'), 0), 89% + $lbg),
|
||||
'primary' : lighten(adjust-hue(map-get($note-border, 'primary'), 10), 87% + $lbg),
|
||||
'info' : lighten(adjust-hue(map-get($note-border, 'info'), -10), 86% + $lbg),
|
||||
'success' : lighten(adjust-hue(map-get($note-border, 'success'), 10), 85% + $lbg),
|
||||
'warning' : lighten(adjust-hue(map-get($note-border, 'warning'), 10), 83% + $lbg),
|
||||
'danger' : lighten(adjust-hue(map-get($note-border, 'danger'), -10), 87% + $lbg)
|
||||
);
|
||||
|
||||
@ -7,13 +7,13 @@
|
||||
// Variables Layer
|
||||
// --------------------------------------------------
|
||||
@import '_variables/base';
|
||||
@import '"_variables/" + theme.scheme';
|
||||
@import 'theme.injects.variable';
|
||||
//@import '"_variables/" + theme.scheme';
|
||||
//@import 'theme.injects.variable';
|
||||
|
||||
// Mixins Layer
|
||||
// --------------------------------------------------
|
||||
@import '_mixins';
|
||||
@import 'theme.injects.mixin';
|
||||
//@import 'theme.injects.mixin';
|
||||
|
||||
// Dark mode colors
|
||||
// --------------------------------------------------
|
||||
@ -23,20 +23,20 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
// Scaffolding
|
||||
@import '_common/scaffolding';
|
||||
// @import '_common/scaffolding';
|
||||
|
||||
// Layout
|
||||
@import '_common/outline';
|
||||
// @import '_common/outline';
|
||||
|
||||
// Components
|
||||
@import '_common/components';
|
||||
// @import '_common/components';
|
||||
|
||||
|
||||
// Schemes Layer
|
||||
// --------------------------------------------------
|
||||
@import '"_schemes/" + theme.scheme';
|
||||
// @import '"_schemes/" + theme.scheme';
|
||||
|
||||
|
||||
// Custom Layer
|
||||
// --------------------------------------------------
|
||||
@import 'theme.injects.style';
|
||||
// @import 'theme.injects.style';
|
||||
|
||||
@ -41,10 +41,10 @@ params:
|
||||
# ---------------------------------------------------------------
|
||||
|
||||
# Schemes
|
||||
scheme: Muse
|
||||
#scheme: Muse
|
||||
#scheme: Mist
|
||||
#scheme: Pisces
|
||||
#scheme: Gemini
|
||||
scheme: Gemini
|
||||
|
||||
# Dark Mode
|
||||
darkmode: false
|
||||
@ -355,7 +355,7 @@ params:
|
||||
mobile_layout_economy: false
|
||||
|
||||
# Browser header panel color.
|
||||
theme_color:
|
||||
themeColor:
|
||||
light: "#222"
|
||||
dark: "#222"
|
||||
|
||||
@ -376,7 +376,7 @@ params:
|
||||
light: prism
|
||||
dark: prism-dark
|
||||
# Add copy button on codeblock
|
||||
copy_button:
|
||||
copyBtn:
|
||||
enable: false
|
||||
# Available values: default | flat | mac
|
||||
style:
|
||||
@ -810,7 +810,7 @@ params:
|
||||
icons: false
|
||||
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
|
||||
# Offset also applied to label tag variables. This option can work with disabled note tag.
|
||||
light_bg_offset: 0
|
||||
lightBgOffset: 0
|
||||
|
||||
# Tabs tag
|
||||
tabs:
|
||||
|
||||
@ -0,0 +1,6 @@
|
||||
{{- $scssVars := resources.Get "css/_sitevars.scss"}}
|
||||
{{- $scssVars = $scssVars | resources.ExecuteAsTemplate "sitevars.scss" . }}
|
||||
{{- $scssMain := resources.Get "css/main.scss" }}
|
||||
{{- $scss := slice $scssVars $scssMain | resources.Concat "css/main.scss" }}
|
||||
{{- $css := $scss | toCSS (dict "targetPath" "/css/main.css" "outputStyle" "expanded") }}
|
||||
<link rel="stylesheet" href="{{ $css.RelPermalink }}">
|
||||
Loading…
Reference in New Issue
Block a user