${title}
+
+ ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
+
+ ${title}
+
+ ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
+
+ ';
+ // bg
+ ret += '
';
+ return ret;
+});
\ No newline at end of file
diff --git a/scripts/tags/note.js b/scripts/tags/note.js
index a9ef42af..2a929784 100644
--- a/scripts/tags/note.js
+++ b/scripts/tags/note.js
@@ -1,40 +1,74 @@
-'use strict'
+/**
+ * note.js | https://github.com/volantis-x/hexo-theme-volantis
+ */
-function note (args, content) {
- var theme = hexo.theme.config
- var icon = theme.icon && theme.icon.notetag_default
- var iconType = 'default'
- var isIcon = true
+ 'use strict';
- if (args.includes('no-icon')) {
- isIcon = false
+// {% note style, content %}
+function postNote(args) {
+ if(/::/g.test(args)){
+ args = args.join(' ').split('::');
}
- if (isIcon && theme.icon) {
- var tagTypes = ['default', 'success', 'info', 'warning', 'danger']
- tagTypes.forEach(type => {
- if (args.includes(type)) {
- icon = theme.icon[`notetag_${type}`]
- iconType = type
- }
- })
+ else{
+ args = args.join(' ').split(',');
+ }
+ if (args.length > 1) {
+ const cls = args[0].trim();
+ const text = args[1].trim();
+ return ` 0) {
+ ret += ' style="background:' + bg + '"';
+ }
+ ret += '>';
+ ret += img(url, alt, style);
+ ret += '
';
+
+ if (alt.length > 0) {
+ ret += '' + alt + '';
+ }
+
+ ret += '${hexo.render.renderSync({text: text, engine: 'markdown'}).split('\n').join('')}
`;
+ } else if (args.length > 0) {
+ const text = args[0].trim();
+ return `${hexo.render.renderSync({text: text, engine: 'markdown'}).split('\n').join('')}
`;
}
-
- var className = args.join(' ')
- return `
-
- ${
- isIcon
- ? `
-
- `
- : ''
- }
- ${hexo.render
- .renderSync({ text: content, engine: 'markdown' })
- .split('\n')
- .join('')}
-
- `
+}
+
+// {% noteblock style, title %}
+// content
+// {% endnoteblock %}
+function postNoteBlock(args, content) {
+ if(/::/g.test(args)){
+ args = args.join(' ').split('::');
+ }
+ else{
+ args = args.join(' ').split(',');
+ }
+ if (args.length < 1) {
+ return;
+ }
+ const cls = args[0].trim();
+ let ret = '';
+ ret += '';
+ if (args.length > 1) {
+ const title = args[1].trim();
+ ret += '
';
+ return ret;
}
-hexo.extend.tag.register('note', note, { ends: true })
+hexo.extend.tag.register('note', postNote);
+
+// https://github.com/volantis-x/hexo-theme-volantis/issues/712
+// {% blocknote style, title %}
+// content
+// {% endblocknote %}
+hexo.extend.tag.register('blocknote', postNoteBlock, {ends: true});
+// 兼容 noteblock
+hexo.extend.filter.register('before_post_render', function(data) {
+ data.content = data.content.replace(/{%\s+noteblock(.*)%}/g, (p,q)=>{
+ return `{% blocknote ${q} %}`
+ });
+ data.content = data.content.replace(/{%\s+endnoteblock\s+%}/g, '{% endblocknote %}');
+ return data;
+});
+// 兼容 noteblock 失败
+hexo.extend.tag.register('noteblock', postNoteBlockDeprecated, {ends: true});
+function postNoteBlockDeprecated(args, content) {
+ throw new Error(`
+==================================================================================
+ {% noteblock %} is deprecated. Use {% blocknote %} instead.
+ see: https://github.com/volantis-x/hexo-theme-volantis/issues/712
+==================================================================================
+ `);
+}
diff --git a/scripts/tags/table.js b/scripts/tags/table.js
index 17f5a29c..094d4770 100644
--- a/scripts/tags/table.js
+++ b/scripts/tags/table.js
@@ -3,6 +3,7 @@
var pathFn = require('path')
var fs = require('hexo-fs')
+// {% table [path] [thead1,thead2,...] %}
function table (args) {
var path = pathFn.join(hexo.source_dir, args[0])
var headers = args[1].split(',')
@@ -42,4 +43,29 @@ function table (args) {
})
}
+// {% blocktable title %}
+// content
+// {% endblocktable %}
+function postTableBlock(args, content) {
+ if(/::/g.test(args)){
+ args = args.join(' ').split('::');
+ }
+ else{
+ args = args.join(' ').split(',');
+ }
+ let ret = '';
+ // wrap
+ ret += '' + title + '
'; + } + ret += hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join(''); + ret += '';
+ // caption
+ if (args.length > 0) {
+ const caption = args[0].trim();
+ ret += '' + caption + '';
+ }
+ // content
+ ret += hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('');
+ ret += '
';
+ return ret;
+}
+
hexo.extend.tag.register('table', table, { ends: false, async: true })
+hexo.extend.tag.register('blocktable', postTableBlock, { ends: true })
diff --git a/source/css/_common/components/header/index.styl b/source/css/_common/components/header/index.styl
index 6a1265f1..700699eb 100644
--- a/source/css/_common/components/header/index.styl
+++ b/source/css/_common/components/header/index.styl
@@ -102,12 +102,12 @@ if (hexo-config('header.nav.height') && match('%', hexo-config('header.nav.heigh
&-menu-item__link {
padding: 0 .5rem;
- menuItemHover(#f4f5f5, #999);
+ menuItemHover(#2d2e30, #a09d9b);
}
&-submenu-item__link {
padding: .75rem .5rem;
- menuItemHover(#f4f5f5, #999);
+ menuItemHover(#2d2e30, #a09d9b);
}
&-menu {
@@ -118,7 +118,7 @@ if (hexo-config('header.nav.height') && match('%', hexo-config('header.nav.heigh
&-item {
float: left;
position: relative;
- margin: 0 1rem 0 0;
+ margin: 0 0.25rem 0 0;
height: header-nav-height;
text-align: center;
cursor: pointer;
diff --git a/source/css/_common/components/highlight/highlight.styl b/source/css/_common/components/highlight/highlight.styl
index 53c574b0..bb52508d 100644
--- a/source/css/_common/components/highlight/highlight.styl
+++ b/source/css/_common/components/highlight/highlight.styl
@@ -15,6 +15,10 @@ languages = 'markdown' 'md' 'diff' 'javascript' 'js' 'typescript' 'ts' 'java' 'j
}
}
}
+ table {
+ color: $highlight-color;
+ background-color: $highlight-background;
+ }
}
for lang in languages {
diff --git a/source/css/_common/components/plugins/folding.styl b/source/css/_common/components/plugins/folding.styl
new file mode 100644
index 00000000..9348021b
--- /dev/null
+++ b/source/css/_common/components/plugins/folding.styl
@@ -0,0 +1,102 @@
+details
+ display: block
+ padding: $gap
+ margin: $gap-p 0
+ border-radius: $border-codeblock
+ background: $color-card
+ font-size: $fontsize-list
+ trans()
+ summary
+ cursor: pointer
+ padding: $gap
+ margin: 0 - $gap
+ border-radius: $border-codeblock
+ color: alpha($color-p, .7)
+ font-size: $fontsize-meta
+ font-weight: bold
+ position: relative
+ line-height: normal
+ >
+ p,h1,h2,h3,h4,h5,h6
+ display: inline
+ border-bottom: none !important
+ &:hover
+ color: $color-p
+ &:after
+ position: absolute
+ content: '+'
+ text-align: center
+ top: 50%
+ transform: translateY(-50%)
+ right: $gap
+
+ border: 1px solid $color-block
+ >summary
+ background: $color-block
+ &::marker
+ content: ' '
+ &[blue]
+ border-color: bgcolor($color-md-blue)
+ >summary
+ background: bgcolor($color-md-blue)
+ &[cyan]
+ border-color: bgcolor($color-mac-cyan)
+ >summary
+ background: bgcolor($color-mac-cyan)
+ &[green]
+ border-color: bgcolor($color-mac-green)
+ >summary
+ background: bgcolor($color-mac-green)
+ &[yellow]
+ border-color: bgcolor($color-mac-yellow)
+ >summary
+ background: bgcolor($color-mac-yellow)
+ &[red]
+ border-color: bgcolor($color-mac-red)
+ >summary
+ background: bgcolor($color-mac-red)
+
+details[open]
+ border-color: alpha($color-p, .2)
+ >summary
+ border-bottom: 1px solid alpha($color-p, .2)
+ border-bottom-left-radius: 0
+ border-bottom-right-radius: 0
+ &[blue]
+ border-color: alpha($color-md-blue, .3)
+ >summary
+ border-bottom-color: alpha($color-md-blue, .3)
+ &[cyan]
+ border-color: alpha($color-mac-cyan, .3)
+ >summary
+ border-bottom-color: alpha($color-mac-cyan, .3)
+ &[green]
+ border-color: alpha($color-mac-green, .3)
+ >summary
+ border-bottom-color: alpha($color-mac-green, .3)
+ &[yellow]
+ border-color: alpha($color-mac-yellow, .3)
+ >summary
+ border-bottom-color: alpha($color-mac-yellow, .3)
+ &[red]
+ border-color: alpha($color-mac-red, .3)
+ >summary
+ border-bottom-color: alpha($color-mac-red, .3)
+ >summary
+ color: $color-p
+ margin-bottom: 0
+ &:hover
+ &:after
+ content: '-'
+ >div.content
+ padding: $gap
+ margin: 0 - $gap
+ margin-top: 0
+ p>a:hover
+ text-decoration: underline
+ >
+ p,.tabs,ul,ol,.highlight,.note,details
+ &:first-child
+ margin-top: 0
+ &:last-child
+ margin-bottom: 0
\ No newline at end of file
diff --git a/source/css/_common/components/plugins/friends.styl b/source/css/_common/components/plugins/friends.styl
index 4698515e..bea66aae 100644
--- a/source/css/_common/components/plugins/friends.styl
+++ b/source/css/_common/components/plugins/friends.styl
@@ -6,7 +6,7 @@
display: flex;
float: left;
padding: .5rem 1rem;
- width: 50%;
+ width: 33%;
height: 100px;
transition: background-color .3s;
align-items: center;
@@ -50,4 +50,4 @@
}
}
}
-}
+}
\ No newline at end of file
diff --git a/source/css/_common/components/plugins/image.styl b/source/css/_common/components/plugins/image.styl
new file mode 100644
index 00000000..717396a6
--- /dev/null
+++ b/source/css/_common/components/plugins/image.styl
@@ -0,0 +1,15 @@
+// image
+.img-wrap
+ margin: 0 auto
+ text-align: center
+ border-radius: 2px
+ overflow: hidden
+ .img-bg
+ width: 100%
+ .image-caption
+ display: block
+ margin: .5rem auto
+ font-size: 13px
+ color: $meta-color
+ &:empty
+ display: none
\ No newline at end of file
diff --git a/source/css/_common/components/plugins/index.styl b/source/css/_common/components/plugins/index.styl
index f3851ec2..d42c46cf 100644
--- a/source/css/_common/components/plugins/index.styl
+++ b/source/css/_common/components/plugins/index.styl
@@ -1,4 +1,6 @@
@import './button.styl';
@import './table.styl';
+@import './image.styl';
@import './note.styl';
@import './friends.styl';
+@import './folding.styl';
diff --git a/source/css/_common/components/plugins/note.styl b/source/css/_common/components/plugins/note.styl
index df9e5a67..9392ad6a 100644
--- a/source/css/_common/components/plugins/note.styl
+++ b/source/css/_common/components/plugins/note.styl
@@ -1,100 +1,155 @@
-$note-padding = 12px;
-$note-icon-size = $font-size-base + 4px;
-
-.note-plugin {
- position: relative;
- margin-bottom: 20px;
- border: 1px solid var(--color-gray-250);
- border-left-width: 6px;
- padding: 0 $note-padding + 5px;
-
- &:not(.no-icon) {
- padding-left: 40px;
- }
-
- h1,
+div.note
+ $border-codeblock = 4px
+ bg($c)
+ return mix($c, $color-card, 10)
+ border($c)
+ return mix($c, $color-card, 100)
+ position: relative
+ margin-top: $gap-p
+ margin-bottom: $gap-p
+ padding: $gap
+ padding-left: "calc(16px + %s)" % $gap
+ border-radius: $border-codeblock
+ font-size: $fontsize-list
h2,
h3,
h4,
h5,
- h6 {
- margin: 0;
- }
-
- p {
- margin: $note-padding 0;
- }
-
- strong {
- font-size: $note-icon-size;
- line-height: 1.75;
- }
-
- &__icon {
- position: absolute;
- top: 1em;
- left: 12px;
- font-size: $note-icon-size;
- line-height: 1;
-
- &--default {
- color: $note-default-color;
- }
-
- &--success {
- color: $note-success-color;
- }
-
- &--info {
- color: $note-info-color;
- }
-
- &--warning {
- color: $note-warning-color;
- }
-
- &--danger {
- color: $note-danger-color;
- }
- }
-
- &.default {
- border-left-color: $note-default-color;
-
- strong {
- color: $note-default-color;
- }
- }
-
- &.success {
- border-left-color: $note-success-color;
-
- strong {
- color: $note-success-color;
- }
- }
-
- &.info {
- border-left-color: $note-info-color;
-
- strong {
- color: $note-info-color;
- }
- }
-
- &.warning {
- border-left-color: $note-warning-color;
-
- strong {
- color: $note-warning-color;
- }
- }
-
- &.danger {
- border-left-color: $note-danger-color;
-
- strong {
- color: $note-danger-color;
- }
- }
-}
+ h6
+ if $note-icons
+ margin-top: 3px
+ else
+ margin-top: 0
+
+ margin-bottom: 0
+ padding-top: 0 !important
+ border-bottom: initial
+
+ p,
+ ul,
+ ol,
+ blockquote,
+ img
+ margin-top: $gap-p * 0.5
+ margin-bottom: $gap-p * 0.5
+ .link-card
+ background: var(--color-card)
+ &::before
+ position: absolute
+ top: "calc(50% - %s * 0.5)" % (24px)
+ left 4px
+ width: 24px
+ height: 24px
+ text-align: center
+ font-weight: 600
+ line-height: 24px
+ vertical-align: middle
+ font-family: 'Font Awesome 5 Free'
+
+ background: var(--color-block)
+ border-left: $border-codeblock solid $color-theme
+ &::before
+ color: $color-theme
+ content: '\f054'
+ &::before
+ content: '\f054'
+
+ &.quote
+ background: bg($color-md-blue)
+ border-color: border($color-md-blue)
+ &::before
+ color: border($color-md-blue)
+ content: '\f10d'
+ &.info
+ background: bg($color-theme)
+ border-color: border($color-theme)
+ &::before
+ color: border($color-theme)
+ content: '\f129'
+ &.success,&.done
+ background: bg($color-mac-green)
+ border-color: border($color-mac-green)
+ &::before
+ color: border($color-mac-green)
+ content: '\f00c'
+ &.warning
+ background: bg($color-mac-yellow)
+ border-color: border($color-mac-yellow)
+ &::before
+ color: border($color-mac-yellow)
+ content: '\f12a'
+ &.danger,&.error
+ background: bg($color-mac-red)
+ border-color: border($color-mac-red)
+ &::before
+ color: border($color-mac-red)
+ content: '\f00d'
+ &.radiation::before
+ content: '\f7b9'
+ &.bug::before
+ content: '\f188'
+ &.idea::before
+ content: '\f0eb'
+ &.link::before
+ content: '\f0c1'
+ &.paperclip::before
+ content: '\f0c6'
+ &.todo::before
+ content: '\f0ae'
+ &.message::before
+ content: '\f4ad'
+ &.guide::before
+ content: '\f277'
+ &.download::before
+ content: '\f019'
+ &.up::before
+ content: '\f102'
+ &.undo::before
+ content: '\f2ea'
+ &.play::before
+ content: '\f144'
+
+
+ &.clear
+ background: none
+ border-color: none
+ &.light
+ background: mix($color-text, $color-card, 5)
+ border-color: mix($color-text, $color-card, 50)
+ &::before
+ color: mix($color-text, $color-card, 50)
+ &.gray
+ background: mix($color-text, $color-card, 5)
+ border-color: mix($color-text, $color-card, 80)
+ &::before
+ color: mix($color-text, $color-card, 80)
+ &.theme
+ background: bg($color-theme)
+ border-color: border($color-theme)
+ &::before
+ color: border($color-theme)
+ &.red
+ background: bg($color-mac-red)
+ border-color: border($color-mac-red)
+ &::before
+ color: border($color-mac-red)
+ &.yellow
+ background: bg($color-mac-yellow)
+ border-color: border($color-mac-yellow)
+ &::before
+ color: border($color-mac-yellow)
+ &.green
+ background: bg($color-mac-green)
+ border-color: border($color-mac-green)
+ &::before
+ color: border($color-mac-green)
+ &.cyan
+ background: bg($color-mac-cyan)
+ border-color: border($color-mac-cyan)
+ &::before
+ color: border($color-mac-cyan)
+ &.blue
+ background: bg($color-md-blue)
+ border-color: border($color-md-blue)
+ &::before
+ color: border($color-md-blue)
\ No newline at end of file
diff --git a/source/css/_common/components/plugins/table.styl b/source/css/_common/components/plugins/table.styl
index 99f40c7f..457b9495 100644
--- a/source/css/_common/components/plugins/table.styl
+++ b/source/css/_common/components/plugins/table.styl
@@ -1,3 +1,4 @@
+// table
.table-plugin {
tr {
transition: background-color .2s ease;
@@ -16,3 +17,17 @@
min-width: 5rem;
}
}
+
+// blocktable
+.table-wrap
+ margin: 0 auto
+ text-align: center
+ border-radius: 2px
+ overflow: hidden
+ .table-caption
+ display: block
+ margin: .5rem auto
+ font-size: 13px
+ color: $meta-color
+ &:empty
+ display: none
\ No newline at end of file
diff --git a/source/css/_common/components/post/post.styl b/source/css/_common/components/post/post.styl
index a9a98819..6aa04537 100644
--- a/source/css/_common/components/post/post.styl
+++ b/source/css/_common/components/post/post.styl
@@ -6,6 +6,23 @@
text-align: center;
}
+ &-indent {
+ li p {
+ text-indent: 0em
+ }
+ p {
+ text-indent: 2em
+ i, img {
+ text-indent: 0em
+ }
+ }
+ .note {
+ p {
+ text-indent: initial
+ }
+ }
+ }
+
&-title {
margin: 0;
color: var(--color-gray-950);
diff --git a/source/css/_common/components/sidebar/index.styl b/source/css/_common/components/sidebar/index.styl
index 54997651..5afe6e2f 100644
--- a/source/css/_common/components/sidebar/index.styl
+++ b/source/css/_common/components/sidebar/index.styl
@@ -316,4 +316,4 @@ if (hexo-config('sidebar.enable')) {
}
}
}
-}
+}
\ No newline at end of file
diff --git a/source/css/_common/components/widgets/comments.styl b/source/css/_common/components/widgets/comments.styl
index 27912025..735eabdc 100644
--- a/source/css/_common/components/widgets/comments.styl
+++ b/source/css/_common/components/widgets/comments.styl
@@ -37,7 +37,7 @@ if (hexo-config('night_mode.enable')) {
}
}
- if (hexo-config('valine.enable')) {
+ if (hexo-config('valine.enable') || hexo-config('waline.enable')) {
:root {
--color-gradient-begin: rgba(255, 255, 255, 0);
--color-gradient-end: rgba(255, 255, 255, 1);
diff --git a/source/css/_common/components/widgets/index.styl b/source/css/_common/components/widgets/index.styl
index d60d8860..a02a8370 100644
--- a/source/css/_common/components/widgets/index.styl
+++ b/source/css/_common/components/widgets/index.styl
@@ -1,11 +1,11 @@
@import './ending.styl' if (hexo-config('post_widget.end_text.enable'));
-@import './back2top.styl' if (hexo-config('back2top.enable'));
@import './fancybox.styl' if (hexo-config('fancybox'));
@import './zoom-image.styl' if (hexo-config('zoom_image.enable'));
@import './lazyload.styl' if (hexo-config('lazyload.enable'));
@import './loading-bar.styl' if (hexo-config('pjax.enable'));
@import './night-mode.styl' if (hexo-config('night_mode.enable'));
@import './share.styl' if (hexo-config('post_widget.share.enable'));
+@import './rightside.styl';
@import './reward.styl';
@import './copyright.styl';
@import './gallery-image.styl';
diff --git a/source/css/_common/components/widgets/back2top.styl b/source/css/_common/components/widgets/rightside.styl
similarity index 65%
rename from source/css/_common/components/widgets/back2top.styl
rename to source/css/_common/components/widgets/rightside.styl
index e5263cb3..1eb7d509 100644
--- a/source/css/_common/components/widgets/back2top.styl
+++ b/source/css/_common/components/widgets/rightside.styl
@@ -1,7 +1,7 @@
-.back2top {
+.rightside {
position: fixed;
- right: 0;
- bottom: 5vh;
+ right: 5px;
+ bottom: 2vh;
transition: transform .2s ease;
transform: translateX(100%);
cursor: pointer;
@@ -16,14 +16,14 @@
&__icon {
display: block;
- font-size: 1.2rem;
+ font-size: 1.5rem;
line-height: 1;
- color: convert(hexo-config('back2top.icon.color') || '#666');
+ color: convert(hexo-config('rightside.color') || '#666');
transition: color .2s ease;
transform: rotate(convert(hexo-config('back2top.icon.rotate') || '0'));
&:hover {
- color: convert(hexo-config('back2top.icon.hover_color') || '#999');
+ color: convert(hexo-config('rightside.hover_color') || '#999');
}
}
-}
+}
\ No newline at end of file
diff --git a/source/css/_custom/_common.styl b/source/css/_custom/_common.styl
new file mode 100644
index 00000000..a9b4e0d9
--- /dev/null
+++ b/source/css/_custom/_common.styl
@@ -0,0 +1,82 @@
+// 图片设置
+.content img {
+ border: none;
+ margin: 5px auto;
+ max-height: 300px;
+}
+
+img.inline {
+ vertical-align: -4px;
+ display: inline-block;
+ height: 20px
+}
+
+// 脚注
+.footnotes-list {
+ padding-inline-start: 20px;
+}
+.footnote-item {
+ line-height: 125% !important;
+ font-size: 12px;
+}
+
+// 评论表情
+.wl-content img {
+ display: inline;
+}
+
+.wl-content img[src^="https://img.t.sinajs.cn"]
+{
+ width: 1.25em;
+ margin: 0.25em;
+ vertical-align: middle;
+}
+
+// 顶部栏
+@media (max-width: $md-width) {
+ .header-nav-menu-item__link {
+ color: #2d2e30;
+ }
+}
+
+/*哔哩哔哩视频适配*/
+.bilibili {
+ position: relative;
+ width: 100%;
+}
+@media only screen and (max-width: 767px) {
+ .bilibili {height: 15em;max-width: 25em;}
+}
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+ .bilibili {height: 20em;max-width: 30em;}
+}
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+ .bilibili {height: 30em;max-width: 40em;}
+}
+@media only screen and (min-width: 1200px) {
+ .bilibili {height: 40em;max-width: 50em;}
+}
+
+// Module color
+// -------------------------------------------
+// Header
+$header-bg-color = #ffebd7
+$header-text-color = #2d2e30
+$header-nav-bg-color = #ffebd7
+$header-menu-hover-color = $blue-light
+
+// Footer
+$footer-bg-color = #2d2e30
+$footer-text-color = #f5f6f7
+$footer-link-color = #c20808
+$footer-link-hover-color = #ed0b0b
+
+// 其他
+h1 {
+ margin: .67em 0;
+ font-size: 1.8em !important;
+}
+
+.fa,.fa-brands,.fa-duotone,.fa-light,.fa-regular,.fa-solid {
+ line-height: inherit !important;
+}
\ No newline at end of file
diff --git a/source/css/_custom/index.styl b/source/css/_custom/index.styl
index f76270c5..ace77002 100644
--- a/source/css/_custom/index.styl
+++ b/source/css/_custom/index.styl
@@ -1,3 +1,6 @@
// Custom styles by yourself.
// You should always modify the style here, not in the source code.
// Otherwise, when the theme is updated, the code you modified will be overwritten.
+
+// common
+@import './_common.styl';
diff --git a/source/css/_variables/color.styl b/source/css/_variables/color.styl
new file mode 100644
index 00000000..7ccfdbf7
--- /dev/null
+++ b/source/css/_variables/color.styl
@@ -0,0 +1,148 @@
+// Element color
+// -------------------------------------------
+// Global color
+$blue-light = #49b1f5
+$blue-lighter = #a4d8fa
+$red-dark = #ff0000
+$orange-dark = #fc6423
+$orange-light = #ff8d5c
+$yellow-dark = #f2df17
+$yellow-light = #fff494
+
+// Selection ( ::selection )
+$selection-bg = #8be0e1
+$selection-color = #fff
+
+// Body ( )
+$body-bg-color = darken(#f4f5f5, 5%)
+
+// Link ( )
+$link-color = #058ed2
+$link-hover-color = #11a3eb
+$link-bottom-color = transparent
+$link-bottom-hover-color = #7ebef1
+
+// Heading ( ) +$hr-color = #b8dcfd + +// Module color +// ------------------------------------------- +// Header +$header-bg-color = #ffebd7 +$header-text-color = #2d2e30 +$header-nav-bg-color = #ffebd7 +$header-menu-hover-color = $blue-light + +// Footer +$footer-bg-color = #2d2e30 +$footer-text-color = #f5f6f7 +$footer-link-color = #c20808 +$footer-link-hover-color = #ed0b0b + +// Home page +$home-readmore-bg-color = #73c8ff +$home-readmore-bg-hover-color = $blue-light + +// Category page +$category-list-dot-color = $blue-light +$category-list-dot-hover-color = $orange-dark +$category-link-color = $blue-light +$category-link-hover-color = $orange-dark + +// Tag page +$tag-hover-color = $orange-dark + +// Sidebar +$sidebar-nav-text-hover-color = $orange-dark +$sidebar-social-color = #a0daff +$sidebar-social-hover-color = darken(#a0daff, 20%) +$sidebar-feed-email-color = #54bcff +$sidebar-feed-rss-color = #ff8956 +$sidebar-state-post-color = #54bcff +$sidebar-state-tag-color = #ff8956 + +// Post +$post-update-color = $blue-light +$post-reading-time-color = $blue-light +$post-reading-count-color = $orange-dark +$post-tags-icon-color = $blue-light + +// Post timeline (In the archive/tag/category page.) +$post-timeline-line-color = #c8edff +$post-timeline-dot-color = #6ec5ff +$post-timeline-dot-hover-color = $orange-dark + +// Pagination +$pagination-item-active-color = #f4f5f5 +$pagination-item-active-bg-color = $blue-light +$pagination-arrow-color = $blue-light +$pagination-arrow-hover-color = $orange-dark + +// Reward +$reward-btn-color = #ff6868 +$reward-btn-hover-color = #e45c5c +$reward-alipay-color = #1caceb +$reward-wechat-color = #3cb034 + +$loading-bar-bg-color = #77b6ff +$loading-bar-shadow-color = alpha(#77b6ff, .7) + +// Notification +$alert-success-color = #52c41a +$alert-info-color = #1890ff +$alert-warning-color = #faad14 +$alert-error-color = #f5222d + +// Button plugin +$button-height = 32px +$button-default-color = #fff +$button-default-hover-color = #fff +$button-default-bg = $home-readmore-bg-color +$button-default-hover-bg = $home-readmore-bg-hover-color + +// volantis plugin +$color-md-red = #f44336 +$color-md-pink = #E91E63 +$color-md-purple = #9c27b0 +$color-md-deep-purple = #673ab7 +$color-md-indigo = #3f51b5 +$color-md-light-blue = #4BA7EE +$color-md-blue = #2196f3 +$color-md-deep-blue = #3367d6 +$color-md-teal = #009688 +$color-md-green = #4caf50 +$color-md-light-green = #8bc34a +$color-md-orange = #ff9800 +$color-md-deep-orange = #ff5722 +$color-md-brown = #795548 +$color-md-blue-grey = #607d8b +$color-md-grey = #9e9e9e +$color-md-light-grey = #e0e0e0 +$color-md-yellow = #FCEC60 +$color-md-amber = #F6C344 + +$color-mac-cyan = #1BCDFC +$color-mac-green = #3DC550 +$color-mac-yellow = #FFBD2B +$color-mac-red = #FE5F58 + +$color-google-blue = #4688F1 +$color-google-green = #3AA757 +$color-google-yellow = #FABB2D +$color-google-red = #E8453C + +$color-read-bkg = #e0d8c8 +$color-read-post = #f8f1e2 + +$color-theme = #44D7B6 +$color-card = #fff +$color-text = #444 +$color-block = #f6f6f6 +$color-meta = #888 +$color-p = #444 + +bgcolor($c, $mix = 10) + return mix($c, $color-card, $mix) \ No newline at end of file diff --git a/source/css/_variables/index.styl b/source/css/_variables/index.styl index 2927bf93..a36cc46a 100644 --- a/source/css/_variables/index.styl +++ b/source/css/_variables/index.styl @@ -1,14 +1,5 @@ // Global variables // ========================================== -// Global color -$blue-light = #49b1f5 -$blue-lighter = #a4d8fa -$red-dark = #ff0000 -$orange-dark = #fc6423 -$orange-light = #ff8d5c -$yellow-dark = #f2df17 -$yellow-light = #fff494 - // ------------------------------------------- // z-index list // ------------------------------------------- @@ -18,52 +9,11 @@ $z-index0 = 0 $z-index1 = 1 $z-index2 = 2 -// ------------------------------------------- -// Layout -// ------------------------------------------- -// Subtract 0.02px to prevent bugs when certain device sizes -// are exactly equal to critical dimensions -$xs-width = 576px - 0.02px -$sm-width = 768px - 0.02px -$md-width = 992px - 0.02px -$lg-width = 1200px - 0.02px - -get-main-padding() { - $main-padding = convert(hexo-config('layout.main_padding.default')); - $gap-left = 0; - $gap-right = 0; - - if ($main-padding[1]) { - $gap-right = $main-padding[1]; - - if ($main-padding[3]) { - $gap-left = $main-padding[3]; - } else { - $gap-left = $main-padding[1]; - } - } else { - $gap-left = $gap-right = $main-padding[0]; - } - - return $gap-left $gap-right; -} - -// Width -$main-padding-width = get-main-padding()[0] + get-main-padding()[1] -$content-width = convert(hexo-config('layout.content') || '$sm-width') -$sidebar-width = convert(hexo-config('layout.sidebar') || '300px') -$content-sidebar-gap = convert(hexo-config('layout.content_sidebar_gap') || '30px') -if (hexo-config('sidebar.enable')) { - $main-width = $content-width + $sidebar-width + $content-sidebar-gap + $main-padding-width -} else { - $main-width = $content-width + $main-padding-width -} - // ------------------------------------------- // Font, line-height // ------------------------------------------- // Line height -$line-height-base = 2 // global line height +$line-height-base = 1.5 // global line height $line-height-heading = 1.5 //
) -$hr-color = #b8dcfd - -// Module color -// ------------------------------------------- -// Header -$header-bg-color = #2d2e30 -$header-text-color = #f5f6f7 -$header-nav-bg-color = #2d2e30 -$header-menu-hover-color = $blue-light - -// Footer -$footer-bg-color = #2d2e30 -$footer-text-color = #f5f6f7 -$footer-link-color = #c20808 -$footer-link-hover-color = #ed0b0b - -// Home page -$home-readmore-bg-color = #73c8ff -$home-readmore-bg-hover-color = $blue-light - -// Category page -$category-list-dot-color = $blue-light -$category-list-dot-hover-color = $orange-dark -$category-link-color = $blue-light -$category-link-hover-color = $orange-dark - -// Tag page -$tag-hover-color = $orange-dark - -// Sidebar -$sidebar-nav-text-hover-color = $orange-dark -$sidebar-social-color = #a0daff -$sidebar-social-hover-color = darken(#a0daff, 20%) -$sidebar-feed-email-color = #54bcff -$sidebar-feed-rss-color = #ff8956 -$sidebar-state-post-color = #54bcff -$sidebar-state-tag-color = #ff8956 - -// Post -$post-update-color = $blue-light -$post-reading-time-color = $blue-light -$post-reading-count-color = $orange-dark -$post-tags-icon-color = $blue-light - -// Post timeline (In the archive/tag/category page.) -$post-timeline-line-color = #c8edff -$post-timeline-dot-color = #6ec5ff -$post-timeline-dot-hover-color = $orange-dark - -// Pagination -$pagination-item-active-color = #f4f5f5 -$pagination-item-active-bg-color = $blue-light -$pagination-arrow-color = $blue-light -$pagination-arrow-hover-color = $orange-dark - -// Reward -$reward-btn-color = #ff6868 -$reward-btn-hover-color = #e45c5c -$reward-alipay-color = #1caceb -$reward-wechat-color = #3cb034 - -$loading-bar-bg-color = #77b6ff -$loading-bar-shadow-color = alpha(#77b6ff, .7) - -// Notification -$alert-success-color = #52c41a -$alert-info-color = #1890ff -$alert-warning-color = #faad14 -$alert-error-color = #f5222d - -// Button plugin -$button-height = 32px -$button-default-color = #fff -$button-default-hover-color = #fff -$button-default-bg = $home-readmore-bg-color -$button-default-hover-bg = $home-readmore-bg-hover-color - -// Note plugin -$note-default-color = var(--color-gray-600) -$note-success-color = #42b983 -$note-info-color = #4898dd -$note-warning-color = #e7c000 -$note-danger-color = #dc3b3b +@import './color.styl'; +@import './layout.styl'; \ No newline at end of file diff --git a/source/css/_variables/layout.styl b/source/css/_variables/layout.styl new file mode 100644 index 00000000..1e400288 --- /dev/null +++ b/source/css/_variables/layout.styl @@ -0,0 +1,49 @@ +// ------------------------------------------- +// Layout +// ------------------------------------------- +// Subtract 0.02px to prevent bugs when certain device sizes +// are exactly equal to critical dimensions +$xs-width = 576px - 0.02px +$sm-width = 768px - 0.02px +$md-width = 992px - 0.02px +$lg-width = 1200px - 0.02px + +get-main-padding() { + $main-padding = convert(hexo-config('layout.main_padding.default')); + $gap-left = 0; + $gap-right = 0; + + if ($main-padding[1]) { + $gap-right = $main-padding[1]; + + if ($main-padding[3]) { + $gap-left = $main-padding[3]; + } else { + $gap-left = $main-padding[1]; + } + } else { + $gap-left = $gap-right = $main-padding[0]; + } + + return $gap-left $gap-right; +} + +// Width +$main-padding-width = get-main-padding()[0] + get-main-padding()[1] +$content-width = convert(hexo-config('layout.content') || '$sm-width') +$sidebar-width = convert(hexo-config('layout.sidebar') || '300px') +$content-sidebar-gap = convert(hexo-config('layout.content_sidebar_gap') || '30px') +if (hexo-config('sidebar.enable')) { + $main-width = $content-width + $sidebar-width + $content-sidebar-gap + $main-padding-width +} else { + $main-width = $content-width + $main-padding-width +} + +// volantis plugin +$border-card = 12px +$border-codeblock = 4px +$border-searchbar = 8px +$border-button = 2px + +$gap = 16px +$gap-p = 1em \ No newline at end of file diff --git a/source/js/scroll.js b/source/js/scroll.js index 94ba2d68..24009e03 100644 --- a/source/js/scroll.js +++ b/source/js/scroll.js @@ -67,13 +67,13 @@ $(document).ready(function () { if (scrollTop !== 0) { if (!isBack2topShow) { - $back2top.addClass('back2top--show') - $back2top.removeClass('back2top--hide') + $back2top.addClass('rightside--show') + $back2top.removeClass('rightside--hide') isBack2topShow = true } } else { - $back2top.addClass('back2top--hide') - $back2top.removeClass('back2top--show') + $back2top.addClass('rightside--hide') + $back2top.removeClass('rightside--show') isBack2topShow = false } } diff --git a/source/js/sidebar.js b/source/js/sidebar.js index 1bd7cc74..9665d522 100644 --- a/source/js/sidebar.js +++ b/source/js/sidebar.js @@ -226,4 +226,4 @@ $(document).ready(function () { // Initialization Stun.utils.pjaxReloadSidebar() -}) +}) \ No newline at end of file