mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2026-04-16 18:30:53 +08:00
2eb15123f9
1. 更改手機頁面的menu和toc的顯示方式和顯示特效（ipad也能看TOC) 3. 可設置複製時，内容自動加上版權信息 4. 可修改tag的top_img 5. 可修改category的top_img 6. 可修改valine的背景 7. archives頁UI優化 8. ICP增加icon #37 9. 可設置主頁top_img的高度 10. 可設置主頁site-info的位置 11. category頁和tag頁的UI可以設置與主頁UI一樣 #31 12. 主頁subtitle可設置多個句子（不再限制2個） #37 13. 設置menu時，頭尾添加空格不受影響 14. 調整post頁的佈局 15. 书签添加icon 16. 公告icon效果 17. 首頁歸檔模塊，可設置數量限制，會顯示'查看更多'按鈕 18. 右下角按鈕調整。 19. 修复文章cover隨機图片生成，同一篇文章，不同地方的cover顯示不一样的bug 20. 修復gitalk語言設置無效的bug #35 21. 修復post頁面，當沒有設置word count時，閲讀量前有'|" 22. 修复sub-menu在safari的显示问题 23. 修复tags页评论居中问题 24. 修复header a hover 白色问题 25. 修復夜間模式下footer的顔色bug 26. 修復英文語言下，書簽英文顯示不完整的問題
164 lines
3.1 KiB
Stylus
164 lines
3.1 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: all .3s
|
||
display: none
|
||
|
||
#mobile-sidebar-menus
|
||
.mobile_author_icon
|
||
padding: 1.3rem 1.5rem 0
|
||
text-align: center
|
||
|
||
img
|
||
height: 120px
|
||
width: 120px
|
||
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: 15px 10px
|
||
|
||
ol,li
|
||
list-style: none
|
||
padding: 0 0 0 5px
|
||
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
|
||
#mobile-sidebar
|
||
#mobile-sidebar-menus
|
||
transform: translateX(-254px)
|
||
|
||
.open-mobile-toc
|
||
#mobile-sidebar
|
||
#mobile-sidebar-toc
|
||
transform: translateX(-254px)
|
||
|
||
@media screen and (max-width: $sm)
|
||
#mobile-sidebar-menus
|
||
display: block !important
|
||
|
||
@media screen and (max-width: $bg)
|
||
#mobile-sidebar-toc
|
||
display: block !important
|
||
|
||
|