alyenc/hugo-theme-next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🔧 🚩 🚧 Finished the base variable replace content.

Browse Source
This commit is contained in:
凡梦星尘 2022-05-21 18:43:01 +08:00
parent 9eb7a32d23
commit b105452feb
7 changed files with 99 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/_colors.scss
View File

@ -29,7 +29,7 @@
color-scheme: light; color-scheme: light;
} }
@if hexo-config('darkmode') { @if $darkmode {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--body-bg-color: #{$body-bg-color-dark}; --body-bg-color: #{$body-bg-color-dark};

6
assets/css/_mixins.scss
View File

@ -117,7 +117,7 @@
} }
@function sidebar-toggle-alignment($reverse) { @function sidebar-toggle-alignment($reverse) {
$condition : hexo-config('sidebar.position') == 'right'; $condition : $sidebar_position == 'right';
@if ($scheme == 'Muse') or ($scheme == 'Mist') { @if ($scheme == 'Muse') or ($scheme == 'Mist') {
$condition : $condition == $reverse; $condition : $condition == $reverse;
} }
@ -125,7 +125,9 @@
} }
@mixin sidebar-toggle-position($reverse) { @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; #{$alignment}: $b2t-position-right;
@include tablet-mobile() { @include tablet-mobile() {
#{$alignment}: $b2t-position-right-mobile; #{$alignment}: $b2t-position-right-mobile;

29
assets/css/_sitevars.scss Normal file
View 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 }};

90
assets/css/_variables/base.scss
View File

@ -1,4 +1,4 @@
@use 'sass:map'; //@use 'sass:map';
// //
// Variables // Variables
@ -68,14 +68,16 @@ $card-bg-color-dark : $black-light;
$menu-item-bg-color : $whitesmoke; $menu-item-bg-color : $whitesmoke;
$menu-item-bg-color-dark : $black-light; $menu-item-bg-color-dark : $black-light;
$theme-color = convert(hexo-config('theme_color.light')); $theme-color : convert($theme_color_light);
$theme-color-dark = convert(hexo-config('theme_color.dark')); $theme-color-dark : convert($theme_color_dark);
// Typography // Typography
// Font, line-height, and elements colors. // Font, line-height, and elements colors.
// -------------------------------------------------- // --------------------------------------------------
@function get-font-family($config) { @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); @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
$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-smallest : .75em;
$font-size-smaller : .8125em; $font-size-smaller : .8125em;
$font-size-small : .875em; $font-size-small : .875em;
@ -121,7 +123,7 @@ $font-size-largest : 1.5em;
// Headings font size // Headings font size
$font-size-headings-step : .125em; $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 // Global line height
@ -155,13 +157,13 @@ $table-row-hover-bg-color-dark : #363636;
// -------------------------------------------------- // --------------------------------------------------
$code-font-family : $font-family-monospace; $code-font-family : $font-family-monospace;
$highlight-background : hexo-config('highlight.light.background'); $highlight-background : $highlight_light_background;
$highlight-foreground : hexo-config('highlight.light.foreground'); $highlight-foreground : $highlight_light_foreground;
$highlight-gutter-background : mix($highlight-background, $highlight-foreground, 90%); $highlight-gutter-background : mix($highlight-background, $highlight-foreground, 90%);
$highlight-gutter-foreground : mix($highlight-background, $highlight-foreground, 10%); $highlight-gutter-foreground : mix($highlight-background, $highlight-foreground, 10%);
$highlight-background-dark : hexo-config('highlight.dark.background'); $highlight-background-dark : $highlight_dark_background;
$highlight-foreground-dark : hexo-config('highlight.dark.foreground'); $highlight-foreground-dark : $highlight_dark_foreground;
$highlight-gutter-background-dark : mix($highlight-background-dark, $highlight-foreground-dark, 90%); $highlight-gutter-background-dark : mix($highlight-background-dark, $highlight-foreground-dark, 90%);
$highlight-gutter-foreground-dark : mix($highlight-background-dark, $highlight-foreground-dark, 10%); $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-color-dark : $grey-lighter;
$brand-hover-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; $font-size-subtitle : $font-size-smaller;
$subtitle-color : $grey-dark; $subtitle-color : $grey-dark;
$site-subtitle-color : $grey-dark; $site-subtitle-color : $grey-dark;
@ -252,8 +254,8 @@ $tag-cloud-end-dark : #eee;
// Variables for sidebar section elements. // Variables for sidebar section elements.
// -------------------------------------------------- // --------------------------------------------------
$sidebar-padding : if(type-of(hexo-config('sidebar.padding')) == number, hexo-config('sidebar.padding') * 1px, 18px); $sidebar-padding : if(type-of($sidebar_padding) == number, $sidebar_padding * 1px, 18px);
$sidebar-offset : if(type-of(hexo-config('sidebar.offset')) == number, hexo-config('sidebar.offset') * 1px, 12px); $sidebar-offset : if(type-of($sidebar_offset) == number, $sidebar_offset * 1px, 12px);
$sidebar-nav-color : $grey-dim; $sidebar-nav-color : $grey-dim;
$sidebar-nav-hover-color : $whitesmoke; $sidebar-nav-hover-color : $whitesmoke;
$sidebar-highlight : $blue-bright; $sidebar-highlight : $blue-bright;
@ -299,7 +301,7 @@ $post-card-margin : 1em 0 0;
// Note colors // Note colors
// -------------------------------------------------- // --------------------------------------------------
// Read note light_bg_offset from NexT config and set in '$lbg%' to use it as string variable. // 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-types : 'default' 'primary' 'info' 'success' 'warning' 'danger';
$note-border-radius : 3px; $note-border-radius : 3px;
@ -314,21 +316,21 @@ $note-border : (
); );
$note-bg : ( $note-bg : (
'default' : lighten(adjust-hue(map.get($note-border, 'default'), 0), 94% + $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), 'primary' : lighten(adjust-hue(map-get($note-border, 'primary'), 10), 92% + $lbg),
'info' : lighten(adjust-hue(map.get($note-border, 'info'), -10), 91% + $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), 'success' : lighten(adjust-hue(map-get($note-border, 'success'), 10), 90% + $lbg),
'warning' : lighten(adjust-hue(map.get($note-border, 'warning'), 10), 88% + $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) 'danger' : lighten(adjust-hue(map-get($note-border, 'danger'), -10), 92% + $lbg)
); );
$note-text : ( $note-text : (
'default' : map.get($note-border, 'default'), 'default' : map-get($note-border, 'default'),
'primary' : map.get($note-border, 'primary'), 'primary' : map-get($note-border, 'primary'),
'info' : map.get($note-border, 'info'), 'info' : map-get($note-border, 'info'),
'success' : map.get($note-border, 'success'), 'success' : map-get($note-border, 'success'),
'warning' : map.get($note-border, 'warning'), 'warning' : map-get($note-border, 'warning'),
'danger' : map.get($note-border, 'danger') 'danger' : map-get($note-border, 'danger')
); );
$note-icon : ( $note-icon : (
@ -350,12 +352,12 @@ $note-modern-border : (
); );
$note-modern-bg : ( $note-modern-bg : (
'default' : lighten(adjust-hue(map.get($note-modern-border, 'default'), 10), 60% + ($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)), '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)), '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)), '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)), '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)) 'danger' : lighten(adjust-hue(map-get($note-modern-border, 'danger'), 10), 35% + ($lbg * 4))
); );
$note-modern-text : ( $note-modern-text : (
@ -368,12 +370,12 @@ $note-modern-text : (
); );
$note-modern-hover : ( $note-modern-hover : (
'default' : darken(adjust-hue(map.get($note-modern-text, 'default'), -10), 32%), 'default' : darken(adjust-hue(map-get($note-modern-text, 'default'), -10), 32%),
'primary' : darken(adjust-hue(map.get($note-modern-text, 'primary'), -10), 22%), 'primary' : darken(adjust-hue(map-get($note-modern-text, 'primary'), -10), 22%),
'info' : darken(adjust-hue(map.get($note-modern-text, 'info'), -10), 32%), 'info' : darken(adjust-hue(map-get($note-modern-text, 'info'), -10), 32%),
'success' : darken(adjust-hue(map.get($note-modern-text, 'success'), -10), 27%), 'success' : darken(adjust-hue(map-get($note-modern-text, 'success'), -10), 27%),
'warning' : darken(adjust-hue(map.get($note-modern-text, 'warning'), -10), 18%), 'warning' : darken(adjust-hue(map-get($note-modern-text, 'warning'), -10), 18%),
'danger' : darken(adjust-hue(map.get($note-modern-text, 'danger'), -10), 22%) 'danger' : darken(adjust-hue(map-get($note-modern-text, 'danger'), -10), 22%)
); );
@ -385,10 +387,10 @@ $tbr : 0;
// Label colors // Label colors
// -------------------------------------------------- // --------------------------------------------------
$label : ( $label : (
'default' : lighten(adjust-hue(map.get($note-border, 'default'), 0), 89% + $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), 'primary' : lighten(adjust-hue(map-get($note-border, 'primary'), 10), 87% + $lbg),
'info' : lighten(adjust-hue(map.get($note-border, 'info'), -10), 86% + $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), 'success' : lighten(adjust-hue(map-get($note-border, 'success'), 10), 85% + $lbg),
'warning' : lighten(adjust-hue(map.get($note-border, 'warning'), 10), 83% + $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) 'danger' : lighten(adjust-hue(map-get($note-border, 'danger'), -10), 87% + $lbg)
); );

16
assets/css/main.scss
View File

@ -7,13 +7,13 @@
// Variables Layer // Variables Layer
// -------------------------------------------------- // --------------------------------------------------
@import '_variables/base'; @import '_variables/base';
@import '"_variables/" + theme.scheme'; //@import '"_variables/" + theme.scheme';
@import 'theme.injects.variable'; //@import 'theme.injects.variable';
// Mixins Layer // Mixins Layer
// -------------------------------------------------- // --------------------------------------------------
@import '_mixins'; @import '_mixins';
@import 'theme.injects.mixin'; //@import 'theme.injects.mixin';
// Dark mode colors // Dark mode colors
// -------------------------------------------------- // --------------------------------------------------
@ -23,20 +23,20 @@
// -------------------------------------------------- // --------------------------------------------------
// Scaffolding // Scaffolding
@import '_common/scaffolding'; // @import '_common/scaffolding';
// Layout // Layout
@import '_common/outline'; // @import '_common/outline';
// Components // Components
@import '_common/components'; // @import '_common/components';
// Schemes Layer // Schemes Layer
// -------------------------------------------------- // --------------------------------------------------
@import '"_schemes/" + theme.scheme'; // @import '"_schemes/" + theme.scheme';
// Custom Layer // Custom Layer
// -------------------------------------------------- // --------------------------------------------------
@import 'theme.injects.style'; // @import 'theme.injects.style';

10
exampleSite/config.yaml
View File

@ -41,10 +41,10 @@ params:
# --------------------------------------------------------------- # ---------------------------------------------------------------
# Schemes # Schemes
scheme: Muse #scheme: Muse
#scheme: Mist #scheme: Mist
#scheme: Pisces #scheme: Pisces
#scheme: Gemini scheme: Gemini
# Dark Mode # Dark Mode
darkmode: false darkmode: false
@ -355,7 +355,7 @@ params:
mobile_layout_economy: false mobile_layout_economy: false
# Browser header panel color. # Browser header panel color.
theme_color: themeColor:
light: "#222" light: "#222"
dark: "#222" dark: "#222"
@ -376,7 +376,7 @@ params:
light: prism light: prism
dark: prism-dark dark: prism-dark
# Add copy button on codeblock # Add copy button on codeblock
copy_button: copyBtn:
enable: false enable: false
# Available values: default | flat | mac # Available values: default | flat | mac
style: style:
@ -810,7 +810,7 @@ params:
icons: false icons: false
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6). # 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. # Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0 lightBgOffset: 0
# Tabs tag # Tabs tag
tabs: tabs:

6
layouts/partials/head.html
View File

@ -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 }}">