biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-04-16 17:40:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

1. new look of the mobile menu

Browse Source 
2. fix bugs
This commit is contained in:
hwy0127@gmail.com
2019-06-26 16:23:08 +08:00
Unverified
parent 6b07467dc6
commit 6656cb8c6f
24 changed files with 408 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
source/css/_global/index.styl
View File

@@ -85,11 +85,11 @@ hr
&:before
position: absolute
top: -10px
top: $hr-icon-top
left: 5%
z-index: 1
color: $light-blue
content: "\f0c4"
content: $hr-icon
font: normal normal normal 14px / 1 FontAwesome
font-size: 20px
transition: all 1s ease-in-out
@@ -349,6 +349,6 @@ table
display: block !important
.fireworks
position: fixed;
z-index: -1;
pointer-events: none;
position: fixed
z-index: -1
pointer-events: none

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

@@ -223,6 +223,13 @@
list-style: none
margin-bottom: -3px
margin-block-start: 0.2rem
.aside_category_item.child
margin-bottom: -3px
margin-block-start: 0rem
.aside_category_list
margin-left: -50px
.aside_category_list,.archive-list-item
margin-left: -40px
@@ -234,6 +241,18 @@
a
text-decoration: none
color: #4c4948
.aside_category_list_name,.archive-list-link
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
flex: auto
.aside_category_list_link,.archive-list-item
display: flex
.aside_category_list_length,.archive-list-count
float: right
@@ -267,14 +286,11 @@
@keyframes announ_animation{
0%,to{
color: #4c4948
}
50%{
color: #FF0000
}
}

79
source/css/_layout/head.styl
View File

@@ -31,9 +31,11 @@
color: $white
#site-info
position: absolute
// position: absolute
width: 100%
top: 43%
// top: 43%
padding-top: 43%
padding-bottom: 43%
#site-title,
#site-sub-title
@@ -102,7 +104,36 @@
.menu-icon-third
-webkit-transform: rotate(-45deg) translate(4px, -4px)
transform: rotate(-45deg) translate(4px, -4px)
.menus
.mobile_author_icon
display: none
padding: 3rem 1.5rem 0
text-align: center
img
height: 120px
width: 120px
display: inline-block
vertical-align: top
border-radius: 70px
-webkit-transition: all .3s
-moz-transition: all .3s
-o-transition: all .3s
-ms-transition: all .3s
transition: all .3s
hr
margin: 1rem auto
display: none
&.menu_open
display: block
animation: menu_open .3s
&.menu_close
animation: menu_close .3s
display: block
@@ -122,6 +153,7 @@
text-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.3)
font-size: 0.7rem
cursor: pointer
margin-left: 1rem
&::after
position: absolute
@@ -191,29 +223,46 @@
display: block
.menus
position: absolute
top: 3rem
right: 0.8rem
display: none
width: 8rem
background: alpha($white, 0.9)
position: fixed
top: 0
right: 0
width: 100%
height 101vh
background: $white
cursor: pointer
box-shadow: 0 0 4px rgba(0, 0, 0, 0.27)
z-index: -1
overflow: auto
display: none
a
display: block !important
display: inline-block !important
opacity: 1 !important
margin-left: 0
padding-top: 0.3rem
padding-bottom: 0.3rem
padding-left: 0.6rem
// margin-left: 0
// padding-top: 0.3rem
// padding-bottom: 0.3rem
// padding-left: 0.6rem
margin: 0
padding: .5rem 1rem
color: $font-black
text-shadow: none
font-size: 0.8rem
z-index: 0
&:hover
color: $light-blue
.mobile_author_icon
display: block
.menus_item
padding: 0 .5rem
margin-bottom: 4rem
text-align: center
hr
display: block
.search
right: 0.5rem
@@ -225,7 +274,3 @@
.search
display: inline-block;
opacity: 1;
#page-header .site-page
margin-left: 1rem

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

@@ -199,6 +199,9 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
&::-webkit-scrollbar-thumb
background: lighten(#2d3035,5)
.more
background-color: #616a6b
@media screen and (max-width: 768px)
.night-mode
@@ -206,15 +209,14 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
background-color: rgb(45, 48, 53)
#page-header
.menus
a
color: #99a9bf
background: #2d3035
&.fixed
.menu-icon-first,
.menu-icon-second,
.menu-icon-third
background-color: #99a9bf;
.menus
background: #2d3035
a
color: #99a9bf !important
.menu-icon-first,
.menu-icon-second,
.menu-icon-third
background-color: #99a9bf !important
@media screen and (min-width: 768px)

23
source/css/_layout/z-other.styl
View File

@@ -277,6 +277,8 @@ footer
position: absolute
color: #fff
.is_hidden
overflow: hidden
@keyframes pulse{
0%,to{
@@ -350,3 +352,24 @@ footer
80%{transform:scale(.98)}
100%{transform:scale(1)}}
@keyframes menu_open{
0% {
transform: scale(0)
}
100% {
transform: scale(1)
}
}
@keyframes menu_close{
0% {
transform: scale(1)
display: block
}
100% {
transform: scale(0)
display: none
}
}

11
source/css/var.styl
View File

@@ -9,7 +9,9 @@ $theme-hr-color = #A4D8FA
$theme-read-mode-bg-color = #FAF9DE
$font-family= Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
$code-font = consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number
//hr icon
$hr-icon = '\f0c4'
$hr-icon-top = -10px
if hexo-config("theme_color") && hexo-config("theme_color.enable")
$theme-color = convert(hexo-config("theme_color.main")) || #49B1F5
@@ -25,6 +27,11 @@ if hexo-config("font") && hexo-config("font.enable")
$font-family = convert(hexo-config("font.font-family")) || 'Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif'
$code-font = convert(hexo-config("font.code-font")) || 'consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number'
if hexo-config("hr") && hexo-config("hr.enable")
$hr-icon = hexo-config("hr.icon") || '\f0c4'
$hr-icon-top = convert(hexo-config("hr.icon-top")) || -10px
// Global Variables
$font-size = 14px
$font-color = #1F2D3D
@@ -90,3 +97,5 @@ $img-border-padding = 4px
// sidebar
$sidebar-width = 300px
$sidebar-background = #f6f8fa