WebServer/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2025-09-15 12:58:48 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

1. 完善gitalk 在 dark mode下的顯示

Browse Source 
2. 完善footer 有背景和無背景下，在dark mode下的顯示
3. 界面微調
4. 增加選項可關閉aside在手機上的顯示
5. 修復關閉夜間模式情況下，console報Uncaught ReferenceError: autoChangeMode is not defined 的bug
This commit is contained in:
Jerry 2019-11-08 22:25:00 +08:00
parent 27adaecf51
commit 082df56112
8 changed files with 68 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_config.yml
View File

@ -428,6 +428,9 @@ subtitle:
#### 側邊欄 ####
#-------------------------------------
# 手機頁面（ 顯示寬度 < 768px ）是否顯示aside内容
aside_mobile: true
# 側邊欄顯示設置
aside:
position: right # left or right

3
layout/includes/layout.pug
View File

@ -70,7 +70,8 @@ html(lang=config.language data-theme=theme.display_mode)
block content
- var footer_bg = theme.footer_bg == false ? '' : bg_img
footer#footer(style=footer_bg)
- var is_bg = theme.footer_bg == false ? 'color' : 'photo'
footer#footer(style=footer_bg data-type=is_bg)
include ./footer.pug
include ./rightside.pug
each item in theme.CDN_USE.js

6
source/css/_layout/aside.styl
View File

@ -273,3 +273,9 @@
margin-left: 15px
else
margin-right: 15px
if hexo-config('aside_mobile') == false
@media screen and (max-width: $sm)
#aside_content
display: none

6
source/css/_layout/footer.styl
View File

@ -15,13 +15,11 @@
content: ''
width: 100%
height: 100%
opacity: 0.5
background-color: #394245
background-image: linear-gradient(234deg, #394245 0%, #000 100%)
background-color: alpha($dark-black,0.5)
#footer-wrap
padding: 1.2rem 1rem 1rem
padding: 2rem 1rem
color: $light-grey
text-align: center
position: relative

4
source/css/_layout/page.styl
View File

@ -319,7 +319,7 @@
#tag,
#category
padding: 1.8rem 1.3rem
margin-top: 10px
margin: 0
.category-lists
padding: 0
@ -344,7 +344,7 @@
display: none
&:first-child
margin-top: 10px
margin: 0
@media screen and (min-width: 900px)
if hexo-config("aside.position") == "left"

20
source/css/_layout/post.styl
View File

@ -41,16 +41,14 @@ if hexo-config("post_beautify.enable")
height: 19rem
&:before
position: absolute;
top: 0;
left: 0;
display: block;
content: '';
width: 100%;
height: 100%;
opacity: 0.5;
background-color: #394245;
background-image: linear-gradient(234deg, #394245 0%, #000 100%);
position: absolute
top: 0
left: 0
display: block
content: ''
width: 100%
height: 100%
background-color: alpha($dark-black,0.5)
a
color: $light-grey
@ -464,4 +462,4 @@ img
@media screen and (max-width:768px)
.layout_post
padding: 1.8rem 1rem
margin: 30px 5px
margin: 0px 5px

39
source/css/_layout/z-darkmode.styl
View File

@ -181,13 +181,11 @@
#category,
#page,
.flink,
.layout_post,
#footer-wrap
background:#2d3035
.layout_post
background: #2d3035
#nav,
#top-container,
#footer
#top-container
&::before
content: ""
position: absolute
@ -195,7 +193,7 @@
bottom: 0
left: 0
right: 0
background-color: rgba(0,0,0,0.7)
background-color: alpha($dark-black,0.7)
#nav span,
#nav i,
@ -234,23 +232,19 @@
border-top: 13px solid lighten(#2d3035,10) !important
#web_bg[data-type=color]
#web_bg[data-type=color],
#footer[data-type=color]
background: #2d3032
#web_bg[data-type=photo]:before
content: ""
position: absolute
top: 0
bottom: 0
left: 0
right: 0
background-color: rgba(0,0,0,0.8)
#web_bg[data-type=photo]:before,
#footer[data-type=photo]:before
background-color: alpha($dark-black,0.7)
#hbe-security
label
#hexo-blog-encrypt
label,input
color: #99a9bf !important
input
background-color: #616a6b
background-color: #2d3035
#mobile-sidebar
@ -283,6 +277,15 @@
.bookmark--animated:before
background: lighten(#2d3035,20) !important
if hexo-config('gitalk') && hexo-config('gitalk.enable')
#gitalk-container
.gt-header-textarea
background-color: #2d3035 !important
color: #99a9bf
border: 1px solid #99a9bf
.gt-comment-content
filter: brightness(0.7)

42
source/js/main.js
View File

@ -746,26 +746,30 @@ $(function () {
* Darkmode
*/
// if (autoChangeMode == '1') {
// window.matchMedia("(prefers-color-scheme: dark)").addListener(function (e) {
// if (e.matches) {
// activateDarkMode()
// change_light_icon()
// Cookies.remove('theme')
// } else {
// activateLightMode()
// change_dark_icon()
// Cookies.remove('theme')
// }
// })
// }
if (typeof autoChangeMode !== "undefined") {
if (autoChangeMode == '1' || autoChangeMode == '2') {
if (Cookies.get("theme") == "dark") {
change_light_icon()
} else {
change_dark_icon()
// if (autoChangeMode == '1') {
// window.matchMedia("(prefers-color-scheme: dark)").addListener(function (e) {
// if (e.matches) {
// activateDarkMode()
// change_light_icon()
// Cookies.remove('theme')
// } else {
// activateLightMode()
// change_dark_icon()
// Cookies.remove('theme')
// }
// })
// }
if (autoChangeMode == '1' || autoChangeMode == '2') {
if (Cookies.get("theme") == "dark") {
change_light_icon()
} else {
change_dark_icon()
}
}
}