💄 Change use SCSS framework rebuild site style design.
This commit is contained in:
凡梦星尘
parent
096602367c
commit
65436588f2
76
assets/css/_colors.scss
Normal file
76
assets/css/_colors.scss
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
:root {
|
||||||
|
// https://sass-lang.com/documentation/breaking-changes/css-vars
|
||||||
|
--body-bg-color: #{$body-bg-color};
|
||||||
|
--content-bg-color: #{$content-bg-color};
|
||||||
|
--card-bg-color: #{$card-bg-color};
|
||||||
|
--text-color: #{$text-color};
|
||||||
|
--blockquote-color: #{$blockquote-color};
|
||||||
|
--link-color: #{$link-color};
|
||||||
|
--link-hover-color: #{$link-hover-color};
|
||||||
|
--brand-color: #{$brand-color};
|
||||||
|
--brand-hover-color: #{$brand-hover-color};
|
||||||
|
--table-row-odd-bg-color: #{$table-row-odd-bg-color};
|
||||||
|
--table-row-hover-bg-color: #{$table-row-hover-bg-color};
|
||||||
|
--menu-item-bg-color: #{$menu-item-bg-color};
|
||||||
|
--theme-color: #{$theme-color};
|
||||||
|
|
||||||
|
--btn-default-bg: #{$btn-default-bg};
|
||||||
|
--btn-default-color: #{$btn-default-color};
|
||||||
|
--btn-default-border-color: #{$btn-default-border-color};
|
||||||
|
--btn-default-hover-bg: #{$btn-default-hover-bg};
|
||||||
|
--btn-default-hover-color: #{$btn-default-hover-color};
|
||||||
|
--btn-default-hover-border-color: #{$btn-default-hover-border-color};
|
||||||
|
|
||||||
|
--highlight-background: #{$highlight-background};
|
||||||
|
--highlight-foreground: #{$highlight-foreground};
|
||||||
|
--highlight-gutter-background: #{$highlight-gutter-background};
|
||||||
|
--highlight-gutter-foreground: #{$highlight-gutter-foreground};
|
||||||
|
|
||||||
|
color-scheme: light;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $cfg_darkmode {
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--body-bg-color: #{$body-bg-color-dark};
|
||||||
|
--content-bg-color: #{$content-bg-color-dark};
|
||||||
|
--card-bg-color: #{$card-bg-color-dark};
|
||||||
|
--text-color: #{$text-color-dark};
|
||||||
|
--blockquote-color: #{$blockquote-color-dark};
|
||||||
|
--link-color: #{$link-color-dark};
|
||||||
|
--link-hover-color: #{$link-hover-color-dark};
|
||||||
|
--brand-color: #{$brand-color-dark};
|
||||||
|
--brand-hover-color: #{$brand-hover-color-dark};
|
||||||
|
--table-row-odd-bg-color: #{$table-row-odd-bg-color-dark};
|
||||||
|
--table-row-hover-bg-color: #{$table-row-hover-bg-color-dark};
|
||||||
|
--menu-item-bg-color: #{$menu-item-bg-color-dark};
|
||||||
|
--theme-color: #{$theme-color-dark};
|
||||||
|
|
||||||
|
--btn-default-bg: #{$btn-default-bg-dark};
|
||||||
|
--btn-default-color: #{$btn-default-color-dark};
|
||||||
|
--btn-default-border-color: #{$btn-default-border-color-dark};
|
||||||
|
--btn-default-hover-bg: #{$btn-default-hover-bg-dark};
|
||||||
|
--btn-default-hover-color: #{$btn-default-hover-color-dark};
|
||||||
|
--btn-default-hover-border-color: #{$btn-default-hover-border-color-dark};
|
||||||
|
|
||||||
|
--highlight-background: #{$highlight-background-dark};
|
||||||
|
--highlight-foreground: #{$highlight-foreground-dark};
|
||||||
|
--highlight-gutter-background: #{$highlight-gutter-background-dark};
|
||||||
|
--highlight-gutter-foreground: #{$highlight-gutter-foreground-dark};
|
||||||
|
|
||||||
|
color-scheme: dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
opacity: .75;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: .9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
color-scheme: light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
28
assets/css/_sitevars.scss
Normal file
28
assets/css/_sitevars.scss
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
// All variables from site's config content.
|
||||||
|
// In order not to conflict with the existing variables of SCSS and better identify,
|
||||||
|
// add a cfg_ prefix before the variable name
|
||||||
|
|
||||||
|
{{- $P := .Site.Params -}}
|
||||||
|
|
||||||
|
$cfg_scheme: {{ default $P.scheme "Gemini" }};
|
||||||
|
$cfg_darkmode: {{ $P.darkmode }};
|
||||||
|
|
||||||
|
$cfg_thm_cor_light: {{ $P.themeColor.light }};
|
||||||
|
$cfg_thm_cor_dark: {{ $P.themeColor.dark }};
|
||||||
|
|
||||||
|
$cfg_font_enable: {{ default $P.font.enable false }};
|
||||||
|
$cfg_font_global_size: {{ default $P.font.global.size 1 }};
|
||||||
|
$cfg_font_headings_size: {{ default $P.font.headings.size 1 }};
|
||||||
|
$cfg_font_title_size: {{ default $P.font.title.size 1 }};
|
||||||
|
$cfg_font_codes_size: {{ default $P.font.codes.size 1 }};
|
||||||
|
$cfg_font_posts_size: {{ default $P.font.posts.size 1 }};
|
||||||
|
|
||||||
|
$cfg_hl_light_bg: #222;
|
||||||
|
$cfg_hl_light_fg: #000;
|
||||||
|
$cfg_hl_dark_bg: #000;
|
||||||
|
$cfg_hl_dark_fg: #222;
|
||||||
|
|
||||||
|
$cfg_sidebar_padding: {{ default $P.sidebar.padding 18 }};
|
||||||
|
$cfg_sidebar_offset: {{ default $P.sidebar.offset 12 }};
|
||||||
|
|
||||||
|
$cfg_note_light_bg_offset: 0;
|
||||||
395
assets/css/_variables/base.scss
Normal file
395
assets/css/_variables/base.scss
Normal file
@ -0,0 +1,395 @@
|
|||||||
|
//@use 'sass:map';
|
||||||
|
|
||||||
|
//
|
||||||
|
// Variables
|
||||||
|
// ==================================================
|
||||||
|
|
||||||
|
|
||||||
|
// Color system
|
||||||
|
// --------------------------------------------------
|
||||||
|
$whitesmoke : #f5f5f5;
|
||||||
|
$gainsboro : #eee;
|
||||||
|
$grey-lighter : #ddd;
|
||||||
|
$grey-light : #ccc;
|
||||||
|
$grey : #bbb;
|
||||||
|
$grey-dark : #999;
|
||||||
|
$grey-dim : #666;
|
||||||
|
$black-light : #555;
|
||||||
|
$black-dim : #333;
|
||||||
|
$black-deep : #222;
|
||||||
|
$red : #ff2a2a;
|
||||||
|
$blue-bright : #87daff;
|
||||||
|
$blue : #0684bd;
|
||||||
|
$blue-deep : #262a30;
|
||||||
|
$orange : #fc6423;
|
||||||
|
|
||||||
|
|
||||||
|
// Transition
|
||||||
|
// --------------------------------------------------
|
||||||
|
$transition-ease : .2s ease-in-out;
|
||||||
|
$transition-ease-in : .2s ease-in;
|
||||||
|
$transition-ease-out : .2s ease-out;
|
||||||
|
|
||||||
|
|
||||||
|
// Scaffolding
|
||||||
|
// Settings for some of the most global styles.
|
||||||
|
// --------------------------------------------------
|
||||||
|
// Global text color on <body>
|
||||||
|
$text-color : $black-light;
|
||||||
|
$text-color-dark : $grey-light;
|
||||||
|
|
||||||
|
// Global link color.
|
||||||
|
$link-color : $black-light;
|
||||||
|
$link-color-dark : $grey-light;
|
||||||
|
$link-hover-color : $black-deep;
|
||||||
|
$link-hover-color-dark : $gainsboro;
|
||||||
|
$link-decoration-color : $grey-dark;
|
||||||
|
|
||||||
|
$blockquote-color : $grey-dim;
|
||||||
|
$blockquote-color-dark : $grey;
|
||||||
|
|
||||||
|
// Global border color.
|
||||||
|
$border-color : $grey-light;
|
||||||
|
|
||||||
|
// Background color for <body>
|
||||||
|
$body-bg-color : white;
|
||||||
|
$body-bg-color-dark : #282828;
|
||||||
|
$content-bg-color : white;
|
||||||
|
$content-bg-color-dark : $black-dim;
|
||||||
|
|
||||||
|
// Selection
|
||||||
|
$selection-bg : $blue-deep;
|
||||||
|
$selection-color : $gainsboro;
|
||||||
|
|
||||||
|
// Dark mode color
|
||||||
|
$card-bg-color : $whitesmoke;
|
||||||
|
$card-bg-color-dark : $black-light;
|
||||||
|
|
||||||
|
$menu-item-bg-color : $whitesmoke;
|
||||||
|
$menu-item-bg-color-dark : $black-light;
|
||||||
|
|
||||||
|
$theme-color : convert($cfg_thm_cor_light);
|
||||||
|
$theme-color-dark : convert($cfg_thm_cor_dark);
|
||||||
|
|
||||||
|
// Typography
|
||||||
|
// Font, line-height, and elements colors.
|
||||||
|
// --------------------------------------------------
|
||||||
|
@function get-font-family($config) {
|
||||||
|
/* $custom-family : hexo-config('font.' + $config + '.family'); */
|
||||||
|
$custom-family: 'Microsoft YaHei';
|
||||||
|
@return if(type-of($custom-family) == string, unquote($custom-family), null);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Font families.
|
||||||
|
$font-family-chinese : 'PingFang SC', 'Microsoft YaHei';
|
||||||
|
|
||||||
|
$font-family-base : $font-family-chinese, sans-serif;
|
||||||
|
@if get-font-family('global') {
|
||||||
|
$font-family-base : join(get-font-family('global'), $font-family-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
$font-family-logo : $font-family-base;
|
||||||
|
@if get-font-family('title') {
|
||||||
|
$font-family-logo : join(get-font-family('title'), $font-family-logo);
|
||||||
|
}
|
||||||
|
|
||||||
|
$font-family-headings : $font-family-base;
|
||||||
|
@if get-font-family('headings') {
|
||||||
|
$font-family-headings : join(get-font-family('headings'), $font-family-headings);
|
||||||
|
}
|
||||||
|
|
||||||
|
$font-family-posts : $font-family-base;
|
||||||
|
@if get-font-family('posts') {
|
||||||
|
$font-family-posts : join(get-font-family('posts'), $font-family-posts);
|
||||||
|
}
|
||||||
|
|
||||||
|
$font-family-monospace : consolas, Menlo, monospace, $font-family-chinese;
|
||||||
|
@if get-font-family('codes') {
|
||||||
|
$font-family-monospace : join(get-font-family('codes'), $font-family-monospace);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Font size
|
||||||
|
$font-size-base : if(($cfg_font_enable and type-of($cfg_font_global_size) == number), $cfg_font_global_size * 1em, 1em);
|
||||||
|
$font-size-smallest : .75em;
|
||||||
|
$font-size-smaller : .8125em;
|
||||||
|
$font-size-small : .875em;
|
||||||
|
$font-size-medium : 1em;
|
||||||
|
$font-size-large : 1.125em;
|
||||||
|
$font-size-larger : 1.25em;
|
||||||
|
$font-size-largest : 1.5em;
|
||||||
|
|
||||||
|
|
||||||
|
// Headings font size
|
||||||
|
$font-size-headings-step : .125em;
|
||||||
|
$font-size-headings-base : if(($cfg_font_enable and type-of($cfg_font_headings_size) == number), $cfg_font_headings_size * 1em, 1.625em);
|
||||||
|
|
||||||
|
|
||||||
|
// Global line height
|
||||||
|
$line-height-base : 2;
|
||||||
|
$line-height-code-block : 1.6; // Can't be less than 1.3;
|
||||||
|
|
||||||
|
|
||||||
|
// Z-index master list
|
||||||
|
// --------------------------------------------------
|
||||||
|
// Fix issue https://github.com/next-theme/theme-next-docs/issues/54
|
||||||
|
$zindex-0 : 5;
|
||||||
|
$zindex-1 : 10;
|
||||||
|
$zindex-2 : 20;
|
||||||
|
$zindex-3 : 30;
|
||||||
|
$zindex-4 : 40;
|
||||||
|
$zindex-5 : 50;
|
||||||
|
|
||||||
|
|
||||||
|
// Table
|
||||||
|
// --------------------------------------------------
|
||||||
|
$table-border-color : $grey-lighter;
|
||||||
|
$table-font-size : $font-size-small;
|
||||||
|
$table-cell-border-bottom-color : $grey-lighter;
|
||||||
|
$table-row-odd-bg-color : #f9f9f9;
|
||||||
|
$table-row-odd-bg-color-dark : #282828;
|
||||||
|
$table-row-hover-bg-color : $whitesmoke;
|
||||||
|
$table-row-hover-bg-color-dark : #363636;
|
||||||
|
|
||||||
|
|
||||||
|
// Code & Code Blocks
|
||||||
|
// --------------------------------------------------
|
||||||
|
$code-font-family : $font-family-monospace;
|
||||||
|
|
||||||
|
$highlight-background : $cfg_hl_light_bg;
|
||||||
|
$highlight-foreground : $cfg_hl_light_fg;
|
||||||
|
$highlight-gutter-background : mix($highlight-background, $highlight-foreground, 90%);
|
||||||
|
$highlight-gutter-foreground : mix($highlight-background, $highlight-foreground, 10%);
|
||||||
|
|
||||||
|
$highlight-background-dark : $cfg_hl_dark_bg;
|
||||||
|
$highlight-foreground-dark : $cfg_hl_dark_bg;
|
||||||
|
$highlight-gutter-background-dark : mix($highlight-background-dark, $highlight-foreground-dark, 90%);
|
||||||
|
$highlight-gutter-foreground-dark : mix($highlight-background-dark, $highlight-foreground-dark, 10%);
|
||||||
|
|
||||||
|
|
||||||
|
// Buttons
|
||||||
|
// --------------------------------------------------
|
||||||
|
$btn-default-radius : 0;
|
||||||
|
$btn-default-bg : $black-deep;
|
||||||
|
$btn-default-bg-dark : $black-deep;
|
||||||
|
$btn-default-color : white;
|
||||||
|
$btn-default-color-dark : $text-color-dark;
|
||||||
|
$btn-default-border-color : $black-deep;
|
||||||
|
$btn-default-border-color-dark : $black-light;
|
||||||
|
$btn-default-hover-bg : white;
|
||||||
|
$btn-default-hover-bg-dark : $grey-dim;
|
||||||
|
$btn-default-hover-color : $black-deep;
|
||||||
|
$btn-default-hover-color-dark : $text-color-dark;
|
||||||
|
$btn-default-hover-border-color : $black-deep;
|
||||||
|
$btn-default-hover-border-color-dark : $grey-dim;
|
||||||
|
|
||||||
|
|
||||||
|
// Pagination
|
||||||
|
// --------------------------------------------------
|
||||||
|
$pagination-border : $gainsboro;
|
||||||
|
|
||||||
|
$pagination-link-bg : transparent;
|
||||||
|
$pagination-link-color : $link-color;
|
||||||
|
$pagination-link-border : $gainsboro;
|
||||||
|
|
||||||
|
$pagination-link-hover-bg : transparent;
|
||||||
|
$pagination-link-hover-color : $link-color;
|
||||||
|
$pagination-link-hover-border : var(--link-hover-color);
|
||||||
|
|
||||||
|
$pagination-active-bg : $grey-light;
|
||||||
|
$pagination-active-color : var(--content-bg-color);
|
||||||
|
$pagination-active-border : $grey-light;
|
||||||
|
|
||||||
|
|
||||||
|
// Layout sizes
|
||||||
|
// --------------------------------------------------
|
||||||
|
$content-desktop : 700px;
|
||||||
|
$content-desktop-large : 800px;
|
||||||
|
$content-desktop-largest : 900px;
|
||||||
|
|
||||||
|
$content-desktop-padding : 40px;
|
||||||
|
$content-tablet-padding : 10px;
|
||||||
|
$content-mobile-padding : 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// Headband
|
||||||
|
// --------------------------------------------------
|
||||||
|
$headband-height : 3px;
|
||||||
|
$headband-bg : var(--theme-color);
|
||||||
|
|
||||||
|
|
||||||
|
// Section Header
|
||||||
|
// Variables for header section elements.
|
||||||
|
// --------------------------------------------------
|
||||||
|
$head-bg : transparent;
|
||||||
|
|
||||||
|
// Site Meta
|
||||||
|
$brand-color : white;
|
||||||
|
$brand-hover-color : white;
|
||||||
|
$brand-color-dark : $grey-lighter;
|
||||||
|
$brand-hover-color-dark : $grey-lighter;
|
||||||
|
|
||||||
|
$font-size-title : if(($cfg_font_enable and type-of($cfg_font_title_size) == number), $cfg_font_title_size * 1em, 1.375em);
|
||||||
|
$font-size-subtitle : $font-size-smaller;
|
||||||
|
$subtitle-color : $grey-dark;
|
||||||
|
$site-subtitle-color : $grey-dark;
|
||||||
|
|
||||||
|
|
||||||
|
// Posts Collpase
|
||||||
|
// --------------------------------------------------
|
||||||
|
$posts-collapse-margin : 35px;
|
||||||
|
$posts-collapse-margin-mobile : 0;
|
||||||
|
|
||||||
|
|
||||||
|
// Tag Cloud
|
||||||
|
// --------------------------------------------------
|
||||||
|
$tag-cloud-start : #aaa;
|
||||||
|
$tag-cloud-end : #111;
|
||||||
|
$tag-cloud-start-dark : #555;
|
||||||
|
$tag-cloud-end-dark : #eee;
|
||||||
|
|
||||||
|
|
||||||
|
// Sidebar
|
||||||
|
// Variables for sidebar section elements.
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
$sidebar-padding : if(type-of($cfg_sidebar_padding) == number, $cfg_sidebar_padding * 1px, 18px);
|
||||||
|
$sidebar-offset : if(type-of($cfg_sidebar_offset) == number, $cfg_sidebar_offset * 1px, 12px);
|
||||||
|
$sidebar-nav-color : $grey-dim;
|
||||||
|
$sidebar-nav-hover-color : $whitesmoke;
|
||||||
|
$sidebar-highlight : $blue-bright;
|
||||||
|
|
||||||
|
$site-author-image-width : 96px;
|
||||||
|
$site-author-image-border-width : 2px;
|
||||||
|
$site-author-image-border-color : $black-dim;
|
||||||
|
|
||||||
|
$site-author-name-margin : 5px 0 0;
|
||||||
|
$site-author-name-color : $whitesmoke;
|
||||||
|
$site-author-name-weight : normal;
|
||||||
|
|
||||||
|
$site-description-font-size : $font-size-medium;
|
||||||
|
$site-description-color : $grey-dark;
|
||||||
|
$site-description-margin-top : 5px;
|
||||||
|
|
||||||
|
$site-state-item-count-font-size : $font-size-larger;
|
||||||
|
$site-state-item-name-font-size : $font-size-small;
|
||||||
|
$site-state-item-name-color : inherit;
|
||||||
|
|
||||||
|
|
||||||
|
// Components
|
||||||
|
// --------------------------------------------------
|
||||||
|
// Back to top
|
||||||
|
$b2t-opacity : .8;
|
||||||
|
$b2t-opacity-hover : 1;
|
||||||
|
$b2t-position-bottom : -100px;
|
||||||
|
$b2t-position-bottom-on : 19px;
|
||||||
|
$b2t-position-right : 30px;
|
||||||
|
$b2t-position-right-mobile : 20px;
|
||||||
|
$b2t-font-size : 12px;
|
||||||
|
$b2t-color : white;
|
||||||
|
$b2t-bg-color : $black-deep;
|
||||||
|
|
||||||
|
// .post-expand .post-eof
|
||||||
|
// In Muse scheme, margin above and below the post separator
|
||||||
|
$post-eof-margin-top : 80px; // or 160px for more white space;
|
||||||
|
$post-eof-margin-bottom : 60px; // or 120px for less white space;
|
||||||
|
|
||||||
|
$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($cfg_note_light_bg_offset) == number, $cfg_note_light_bg_offset * 1%, 0);
|
||||||
|
$note-types : 'default' 'primary' 'info' 'success' 'warning' 'danger';
|
||||||
|
|
||||||
|
$note-border-radius : 3px;
|
||||||
|
|
||||||
|
$note-border : (
|
||||||
|
'default' : #777,
|
||||||
|
'primary' : #6f42c1,
|
||||||
|
'info' : #428bca,
|
||||||
|
'success' : #5cb85c,
|
||||||
|
'warning' : #f0ad4e,
|
||||||
|
'danger' : #d9534f
|
||||||
|
);
|
||||||
|
|
||||||
|
$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)
|
||||||
|
);
|
||||||
|
|
||||||
|
$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')
|
||||||
|
);
|
||||||
|
|
||||||
|
$note-icon : (
|
||||||
|
'default' : '\f0a9',
|
||||||
|
'primary' : '\f055',
|
||||||
|
'info' : '\f05a',
|
||||||
|
'success' : '\f058',
|
||||||
|
'warning' : '\f06a',
|
||||||
|
'danger' : '\f056'
|
||||||
|
);
|
||||||
|
|
||||||
|
$note-modern-border : (
|
||||||
|
'default' : #e1e1e1,
|
||||||
|
'primary' : #e1c2ff,
|
||||||
|
'info' : #b3e5ef,
|
||||||
|
'success' : #d0e6be,
|
||||||
|
'warning' : #fae4cd,
|
||||||
|
'danger' : #ebcdd2
|
||||||
|
);
|
||||||
|
|
||||||
|
$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))
|
||||||
|
);
|
||||||
|
|
||||||
|
$note-modern-text : (
|
||||||
|
'default' : $grey-dim,
|
||||||
|
'primary' : #6f42c1,
|
||||||
|
'info' : #31708f,
|
||||||
|
'success' : #3c763d,
|
||||||
|
'warning' : #8a6d3b,
|
||||||
|
'danger' : #a94442
|
||||||
|
);
|
||||||
|
|
||||||
|
$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%)
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
// Tabs border radius
|
||||||
|
// --------------------------------------------------
|
||||||
|
$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)
|
||||||
|
);
|
||||||
@ -1,212 +0,0 @@
|
|||||||
/*!
|
|
||||||
Theme: Default
|
|
||||||
Description: Original highlight.js style
|
|
||||||
Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
|
|
||||||
Maintainer: @highlightjs/core-team
|
|
||||||
Website: https://highlightjs.org/
|
|
||||||
License: see project LICENSE
|
|
||||||
Touched: 2021
|
|
||||||
*/
|
|
||||||
|
|
||||||
pre code.hljs {
|
|
||||||
display: block;
|
|
||||||
overflow-x: auto;
|
|
||||||
padding: 1em
|
|
||||||
}
|
|
||||||
|
|
||||||
code.hljs {
|
|
||||||
padding: 3px 5px
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs {
|
|
||||||
background: #f3f3f3;
|
|
||||||
color: #444
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-comment {
|
|
||||||
color: #697070
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-punctuation,
|
|
||||||
.hljs-tag {
|
|
||||||
color: #444a
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-tag .hljs-attr,
|
|
||||||
.hljs-tag .hljs-name {
|
|
||||||
color: #444
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-attribute,
|
|
||||||
.hljs-doctag,
|
|
||||||
.hljs-keyword,
|
|
||||||
.hljs-meta .hljs-keyword,
|
|
||||||
.hljs-name,
|
|
||||||
.hljs-selector-tag {
|
|
||||||
font-weight: 700
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-deletion,
|
|
||||||
.hljs-number,
|
|
||||||
.hljs-quote,
|
|
||||||
.hljs-selector-class,
|
|
||||||
.hljs-selector-id,
|
|
||||||
.hljs-string,
|
|
||||||
.hljs-template-tag,
|
|
||||||
.hljs-type {
|
|
||||||
color: #800
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-section,
|
|
||||||
.hljs-title {
|
|
||||||
color: #800;
|
|
||||||
font-weight: 700
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-link,
|
|
||||||
.hljs-operator,
|
|
||||||
.hljs-regexp,
|
|
||||||
.hljs-selector-attr,
|
|
||||||
.hljs-selector-pseudo,
|
|
||||||
.hljs-symbol,
|
|
||||||
.hljs-template-variable,
|
|
||||||
.hljs-variable {
|
|
||||||
color: #ab5656
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-literal {
|
|
||||||
color: #695
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-addition,
|
|
||||||
.hljs-built_in,
|
|
||||||
.hljs-bullet,
|
|
||||||
.hljs-code {
|
|
||||||
color: #397300
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-meta {
|
|
||||||
color: #1f7199
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-meta .hljs-string {
|
|
||||||
color: #38a
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-emphasis {
|
|
||||||
font-style: italic
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-strong {
|
|
||||||
font-weight: 700
|
|
||||||
}
|
|
||||||
|
|
||||||
/*!
|
|
||||||
Theme: StackOverflow Dark
|
|
||||||
Description: Dark theme as used on stackoverflow.com
|
|
||||||
Author: stackoverflow.com
|
|
||||||
Maintainer: @Hirse
|
|
||||||
Website: https://github.com/StackExchange/Stacks
|
|
||||||
License: MIT
|
|
||||||
Updated: 2021-05-15
|
|
||||||
|
|
||||||
Updated for @stackoverflow/stacks v0.64.0
|
|
||||||
Code Blocks: /blob/v0.64.0/lib/css/components/_stacks-code-blocks.less
|
|
||||||
Colors: /blob/v0.64.0/lib/css/exports/_stacks-constants-colors.less
|
|
||||||
*/
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
pre code.hljs {
|
|
||||||
display: block;
|
|
||||||
overflow-x: auto;
|
|
||||||
padding: 1em
|
|
||||||
}
|
|
||||||
|
|
||||||
code.hljs {
|
|
||||||
padding: 3px 5px
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs {
|
|
||||||
color: #fff;
|
|
||||||
background: #1c1b1b
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-subst {
|
|
||||||
color: #fff
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-comment {
|
|
||||||
color: #999
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-attr,
|
|
||||||
.hljs-doctag,
|
|
||||||
.hljs-keyword,
|
|
||||||
.hljs-meta .hljs-keyword,
|
|
||||||
.hljs-section,
|
|
||||||
.hljs-selector-tag {
|
|
||||||
color: #88aece
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-attribute {
|
|
||||||
color: #c59bc1
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-name,
|
|
||||||
.hljs-number,
|
|
||||||
.hljs-quote,
|
|
||||||
.hljs-selector-id,
|
|
||||||
.hljs-template-tag,
|
|
||||||
.hljs-type {
|
|
||||||
color: #f08d49
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-selector-class {
|
|
||||||
color: #88aece
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-link,
|
|
||||||
.hljs-regexp,
|
|
||||||
.hljs-selector-attr,
|
|
||||||
.hljs-string,
|
|
||||||
.hljs-symbol,
|
|
||||||
.hljs-template-variable,
|
|
||||||
.hljs-variable {
|
|
||||||
color: #b5bd68
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-meta,
|
|
||||||
.hljs-selector-pseudo {
|
|
||||||
color: #88aece
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-built_in,
|
|
||||||
.hljs-literal,
|
|
||||||
.hljs-title {
|
|
||||||
color: #f08d49
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-bullet,
|
|
||||||
.hljs-code {
|
|
||||||
color: #ccc
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-meta .hljs-string {
|
|
||||||
color: #b5bd68
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-deletion {
|
|
||||||
color: #de7176
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-addition {
|
|
||||||
color: #76c490
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-emphasis {
|
|
||||||
font-style: italic
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-strong {
|
|
||||||
font-weight: 700
|
|
||||||
}
|
|
||||||
}
|
|
||||||
42
assets/css/main.scss
Normal file
42
assets/css/main.scss
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
// CSS Style Guide: https://codeguide.co/#css
|
||||||
|
|
||||||
|
|
||||||
|
//$scheme : if(hexo-config('scheme'), hexo-config('scheme'), 'Muse');
|
||||||
|
|
||||||
|
|
||||||
|
// Variables Layer
|
||||||
|
// --------------------------------------------------
|
||||||
|
@import '_variables/base';
|
||||||
|
// @import '"_variables/" + theme.scheme';
|
||||||
|
// @import 'theme.injects.variable';
|
||||||
|
|
||||||
|
// Mixins Layer
|
||||||
|
// --------------------------------------------------
|
||||||
|
// @import '_mixins';
|
||||||
|
// @import 'theme.injects.mixin';
|
||||||
|
|
||||||
|
// Dark mode colors
|
||||||
|
// --------------------------------------------------
|
||||||
|
@import '_colors';
|
||||||
|
|
||||||
|
// Common Layer
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
// Scaffolding
|
||||||
|
// @import '_common/scaffolding';
|
||||||
|
|
||||||
|
// Layout
|
||||||
|
// @import '_common/outline';
|
||||||
|
|
||||||
|
// Components
|
||||||
|
// @import '_common/components';
|
||||||
|
|
||||||
|
|
||||||
|
// Schemes Layer
|
||||||
|
// --------------------------------------------------
|
||||||
|
// @import '"_schemes/" + theme.scheme';
|
||||||
|
|
||||||
|
|
||||||
|
// Custom Layer
|
||||||
|
// --------------------------------------------------
|
||||||
|
// @import 'theme.injects.style';
|
||||||
@ -1,9 +1,19 @@
|
|||||||
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/all.css" crossorigin="anonymous">
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.css" crossorigin="anonymous">
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css">
|
||||||
<!-- NexT theme css style -->
|
<!-- NexT theme css style -->
|
||||||
|
{{- $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_new.css" "outputStyle" "expanded") }}
|
||||||
|
<link rel="stylesheet" href="{{ $css.RelPermalink }}">
|
||||||
{{- $scheme := lower .Site.Params.scheme }}
|
{{- $scheme := lower .Site.Params.scheme }}
|
||||||
{{- $styleScheme := (printf "css/%s/style.css" $scheme) }}
|
{{- $styleScheme := (printf "css/%s/style.css" $scheme) }}
|
||||||
<link rel="stylesheet" href="/css/{{ $scheme }}/main.css">
|
<link rel="stylesheet" href="/css/{{ $scheme }}/main.css">
|
||||||
{{- $style := resources.Get $styleScheme | resources.ExecuteAsTemplate $styleScheme . }}
|
{{- $style := resources.Get $styleScheme | resources.ExecuteAsTemplate $styleScheme . }}
|
||||||
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
|
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
|
||||||
<link rel="stylesheet" href="/css/hover.css">
|
<link rel="stylesheet" href="/css/hover.css">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user