From b105452feb23ae6c6313e4df7ea0a46c3e42d17b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= Date: Sat, 21 May 2022 18:43:01 +0800 Subject: [PATCH] :wrench: :triangular_flag_on_post: :construction: Finished the base variable replace content. --- assets/css/_colors.scss | 2 +- assets/css/_mixins.scss | 6 ++- assets/css/_sitevars.scss | 29 +++++++++++ assets/css/_variables/base.scss | 90 +++++++++++++++++---------------- assets/css/main.scss | 16 +++--- exampleSite/config.yaml | 10 ++-- layouts/partials/head.html | 6 +++ 7 files changed, 99 insertions(+), 60 deletions(-) create mode 100644 assets/css/_sitevars.scss diff --git a/assets/css/_colors.scss b/assets/css/_colors.scss index 0f3ed70..391f348 100644 --- a/assets/css/_colors.scss +++ b/assets/css/_colors.scss @@ -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}; diff --git a/assets/css/_mixins.scss b/assets/css/_mixins.scss index 59cdf9c..7685639 100644 --- a/assets/css/_mixins.scss +++ b/assets/css/_mixins.scss @@ -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; diff --git a/assets/css/_sitevars.scss b/assets/css/_sitevars.scss new file mode 100644 index 0000000..2395dee --- /dev/null +++ b/assets/css/_sitevars.scss @@ -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 }}; diff --git a/assets/css/_variables/base.scss b/assets/css/_variables/base.scss index 635854a..0fcd2b7 100644 --- a/assets/css/_variables/base.scss +++ b/assets/css/_variables/base.scss @@ -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) ); diff --git a/assets/css/main.scss b/assets/css/main.scss index 0d8e4df..d2e8b94 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -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'; diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 6c64a95..7e5b4aa 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -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: diff --git a/layouts/partials/head.html b/layouts/partials/head.html index e69de29..808ea3d 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -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") }} + \ No newline at end of file