mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2025-09-15 12:58:48 +08:00
336e221de5
Breaking change 1. 手機端界面卡片化，同時，手機端也可以顯示側邊欄的內容 2. 修復當menu過多時，header界面出現錯亂的bug。當menu過多時，會變為sidebar模式 3. 增加medium-zoom大圖查看模式 4. 增加鼠標點擊特效：文字和愛心 兩個點擊特效 5. 主頁subtitle可以調用第三方api(金山詞霸每日一句、一言網的一句話、一句網、今日詩詞) 6. 添加 snackbar 彈窗 7. 修改nightshift為darkmode，darkmode可隨系統設置而自動切換，可設置隨時間而切換darkmode 8. 修復hexo自帶的標籤外掛(Tag Plugins)顯示bug(Block Quote、Code Block With caption、Gist、Youtube、Vimeo) 9. 主題所需要的css和js可根據需要配置CDN 10. 更改darkmode的加載方式，網站設置dark mode後，現在進入網頁不會在'閃'一下 11. 背景特效和背景圖片在手機界面也會顯示 12. 增加justified-gallery圖片顯示(Tag Plugins) Feature 1. 文章頁面，字數統計、閲讀時長和閲讀量前面添加icon 2. 更改懶加載js 3. 升級typed.js/instantpage.js到最新版 4. 搜索和右下角按鈕添加退出特效 Fixed 1. 修復在 Hexo 4.0.0下，一些按鈕點擊會跳出一個空白頁的bug 2. 修復在 Hexo 4.0.0下，分頁按鈕出現代碼的bug 3. 修復當沒有設置評論時，右下角依舊出現'直達評論'按鈕的bug 4. 優化sidebar的打開速度 5. 修復文章頁標題左右邊距不平等的bug 6. 修復keywords讀取的bug 7. 修復當post/page 內容為空時，footer位置錯亂的bug 8. 修復在手機safari，toc sidebar底部內容被遮擋的bug 9. 完善Dark mode,一些界面的配色 10. 修復 card-archives 查看更多 跳轉bug Remove 1. 移除Gitment 2. 移除Gallery
175 lines
3.3 KiB
Stylus
175 lines
3.3 KiB
Stylus
#mobile-sidebar
|
||
#menu_mask
|
||
position: fixed
|
||
top: 0
|
||
bottom: 0
|
||
width: 100%
|
||
height: 110vh
|
||
left: 0
|
||
right: 0
|
||
background: alpha($black,0.7)
|
||
z-index: 102
|
||
display: none
|
||
|
||
#mobile-sidebar-menus,#mobile-sidebar-toc
|
||
position: fixed
|
||
top: 0
|
||
right: -254px
|
||
width: 250px
|
||
height 101vh
|
||
background: $white
|
||
cursor: pointer
|
||
box-shadow: 0 0 4px alpha($dark-black,0.27)
|
||
z-index: 103
|
||
overflow-y: scroll
|
||
display: block
|
||
transition: transform .3s
|
||
opacity: 0
|
||
will-change: transform
|
||
|
||
#mobile-sidebar-menus
|
||
.mobile_author_icon
|
||
padding: 1.3rem 1.5rem 0
|
||
text-align: center
|
||
|
||
img
|
||
height: 120px
|
||
width: 120px
|
||
padding: 0
|
||
display: inline-block
|
||
vertical-align: top
|
||
border-radius: 70px
|
||
transition: all .3s
|
||
|
||
.mobile_post_data
|
||
display: flex
|
||
justify-content: center
|
||
padding: .6rem .5rem 0
|
||
|
||
.mobile_data_item
|
||
flex: 1
|
||
|
||
.mobile_data_link
|
||
a
|
||
text-decoration: none
|
||
|
||
.length_num
|
||
font-size: .9rem
|
||
color: $dark-black
|
||
|
||
.headline
|
||
display: block
|
||
font-size: 0.7rem
|
||
text-transform: uppercase
|
||
color:$font-black
|
||
|
||
hr
|
||
margin: 1rem auto
|
||
|
||
.menus_items
|
||
padding: 0 .5rem
|
||
margin-bottom: 5rem
|
||
|
||
a
|
||
display: block !important
|
||
opacity: 1 !important
|
||
margin: 0
|
||
padding: .3rem 1.5rem
|
||
color: $font-black
|
||
text-shadow: none
|
||
font-size: 0.8rem
|
||
z-index: 0
|
||
text-overflow: ellipsis
|
||
overflow: hidden
|
||
white-space: nowrap
|
||
|
||
i
|
||
width: 30%
|
||
text-align: left
|
||
|
||
span
|
||
width 70%
|
||
|
||
&:hover
|
||
color: $light-blue
|
||
|
||
.menus-expand
|
||
position: absolute
|
||
width: 30px !important
|
||
height: 30px
|
||
right: 0
|
||
padding: 6px
|
||
transform: rotate(0deg)
|
||
transition: all .3s
|
||
|
||
&.menus-closed
|
||
transform: rotate(180deg) !important
|
||
transition: all .3s
|
||
|
||
.menus_item_child
|
||
list-style: none
|
||
margin: 0
|
||
|
||
#mobile-sidebar-toc
|
||
padding: 1rem 0.5rem 5rem 0.3rem
|
||
|
||
ol,li
|
||
list-style: none
|
||
padding: 0 0 0 8px
|
||
margin: 0
|
||
|
||
|
||
.toc_mobile_headline
|
||
text-align: center
|
||
font-size: 18px
|
||
font-weight: bold
|
||
|
||
a
|
||
text-decoration: none
|
||
color: $light-black
|
||
|
||
&:hover
|
||
color: $light-blue
|
||
|
||
// 手機打開menus，toc特效
|
||
.open-mobile-menus,
|
||
.open-mobile-toc
|
||
overflow: hidden
|
||
#body-wrap
|
||
transform: translateX(-250px)
|
||
#page-header
|
||
transform: translateX(-250px)
|
||
&.fixed.visible
|
||
transform: translate3d(-250px, 100%, 0)
|
||
#rightside
|
||
transform: translate3d(-288px, 0, 0) !important
|
||
|
||
.open-mobile-menus
|
||
padding-left: 0 !important
|
||
|
||
#mobile-sidebar
|
||
#mobile-sidebar-menus
|
||
transform: translateX(-254px)
|
||
opacity: 1
|
||
|
||
// pc界面打開mobile-menus需關閉sidebar
|
||
#sidebar
|
||
left: -300px !important
|
||
|
||
.open-mobile-toc
|
||
#mobile-sidebar
|
||
#mobile-sidebar-toc
|
||
transform: translateX(-254px)
|
||
opacity: 1
|
||
|
||
@media screen and (max-width: $sm)
|
||
#mobile-sidebar-menus
|
||
display: block !important
|
||
|
||
@media screen and (max-width: $bg)
|
||
#mobile-sidebar-toc
|
||
display: block !important
|
||
|
||
|
||
|