mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2026-04-16 20:30:53 +08:00
06f543ed96
1. 新增 macstyle 設定，取消 mac / mac light 主題設定 2. 整合搜索相關設定 3. 修改程式碼區塊設定 4. 主頁文章新增多種版面配置 5. 新增說說頁面 6. 適配 hexo-blog-encrypt 加密插件 7. 改善手機端目錄的開啟效果 8. 新增平滑滾動功能 9. 支持以程式碼區塊方式撰寫 mermaid 圖表 10. 可自訂文章標題位置 11. 新增程式碼全螢幕按鈕 12. 友情連結頭像改為圓角設計 13. 優化程式碼，使用 hexo-util 的參數和 hexo 內建參數 14. 可自訂搜索框提示文字 15. 未設定選單時，不顯示側邊欄目錄和按鈕 16. 螢幕寬度超過 2000px 時，增加卡片高度 17. 根據語言設定調整字體：簡體中文使用雅黑，其他使用正黑體 18. 更新 plugins.yml 19. 全新的側邊欄界面設計 20. 新增 giscus 的 js 設定 21. 調整 utterances js 的設定位置 22. 新增 utterances option 設定 23. 修改 giscus 的主題設定 24. 多個界面元素改為圓角設計 25. 可選擇圓角或直角界面風格 26. 圖庫加載按鈕新增圖標 27. 改善標籤頁面的滑鼠懸停效果 28. 調整側邊欄的滑鼠懸停效果 29. 微調部分界面元素 1. 修復 Hexo 新版本下 Prism.js 無法正確高亮的問題 2. 修復文章標籤為空時可能出現的錯誤 3. 修正 mermaid 圖表可能出現的錯誤 4. 解決未設定選單時控制台報錯的問題 5. 修復 Algolia 搜索的每頁顯示數量設定無效的問題 6. 解決 Algolia 搜索結果出現滾動條的問題 7. 修正滾動條出現上下按鈕的問題 8. 修復圖庫遠程連結未加前綴的問題 9. 修正 label 標籤外掛右側多餘空格的問題 10. 解決 APlayer 報告內存洩漏的問題 1. 優化 PJAX 下的函數調用 2. 整體代碼優化 3. 提升兼容性 4. 改善 Lighthouse 評分 5. 在 PJAX 關閉時減少不必要的全局變量 6. 優化 Waline 的 import 兼容性 7. 改善頁面進入效果 8. 優化程式碼區塊工具列顯示邏輯 9. 改善不同螢幕寬度下文章標題位置的顯示 10. 優化標籤顏色生成算法，避免過暗或過亮 11. 調整 Artalk 和 Waline 在夜間模式下的字體顏色，與主題保持一致 12. 調整 Algolia 搜索加載動畫位置，避免換行 13. 優化 Algolia 搜索結果為空時的處理 14. 改善系列文章的滑鼠懸停效果 15. 優化 404 頁面代碼 16. 解決搜索和側邊欄開啟時窗口抖動的問題 17. 優化 tabs 標籤外掛的代碼和效能 18. 改善 tabs 中使用 gallery 標籤外掛時的圖片加載邏輯 19. 優化目錄滾動效果，使當前標題保持在中間 20. 調整螢幕寬度超過 1024px 時 gallerygroup 的顯示數量
422 lines
7.7 KiB
Stylus
422 lines
7.7 KiB
Stylus
#page-header
|
|
position: relative
|
|
width: 100%
|
|
background-color: $light-blue
|
|
background-position: center center
|
|
background-size: cover
|
|
background-repeat: no-repeat
|
|
transition: all .5s
|
|
|
|
if hexo-config('mask.header')
|
|
&:not(.not-top-img):before
|
|
position: absolute
|
|
width: 100%
|
|
height: 100%
|
|
background-color: var(--mark-bg)
|
|
content: ''
|
|
|
|
// index
|
|
&.full_page
|
|
height: $index_top_img_height
|
|
background-attachment: fixed
|
|
|
|
#site-info
|
|
position: absolute
|
|
top: $index_site_info_top
|
|
padding: 0 10px
|
|
width: 100%
|
|
|
|
#site-title,
|
|
#site-subtitle,
|
|
#scroll-down .scroll-down-effects
|
|
text-align: center
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, .15)
|
|
line-height: 1.5
|
|
|
|
#site-title
|
|
margin: 0
|
|
color: var(--white)
|
|
font-size: 1.85em
|
|
|
|
+minWidth768()
|
|
font-size: 2.85em
|
|
|
|
#site-subtitle
|
|
color: var(--light-grey)
|
|
font-size: 1.15em
|
|
|
|
+minWidth768()
|
|
font-size: 1.72em
|
|
|
|
#site_social_icons
|
|
display: none
|
|
margin: 0 auto
|
|
text-align: center
|
|
|
|
+maxWidth768()
|
|
display: block
|
|
|
|
.social-icon
|
|
margin: 0 10px
|
|
color: var(--light-grey)
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, .15)
|
|
font-size: 1.43em
|
|
|
|
#scroll-down
|
|
position: absolute
|
|
bottom: 10px
|
|
width: 100%
|
|
cursor: pointer
|
|
|
|
.scroll-down-effects
|
|
position: relative
|
|
width: 100%
|
|
color: var(--light-grey)
|
|
font-size: 20px
|
|
|
|
// page
|
|
&.not-home-page
|
|
height: 400px
|
|
|
|
+maxWidth768()
|
|
height: 280px
|
|
|
|
#page-site-info
|
|
position: absolute
|
|
top: 200px
|
|
padding: 0 10px
|
|
width: 100%
|
|
|
|
+maxWidth768()
|
|
top: 140px
|
|
|
|
// post
|
|
&.post-bg
|
|
height: 400px
|
|
|
|
+maxWidth768()
|
|
height: 360px
|
|
|
|
#post-info
|
|
position: absolute
|
|
width: 100%
|
|
|
|
if hexo-config('post_meta.post.position') == 'center'
|
|
top: calc(50% + 30px)
|
|
padding: 0 8%
|
|
text-align: center
|
|
transform: translateY(-50%)
|
|
|
|
+maxWidth768()
|
|
padding: 0 15px
|
|
else
|
|
bottom: 30px
|
|
|
|
& > *
|
|
margin: 0 auto
|
|
padding: 0 15px
|
|
max-width: 1200px
|
|
|
|
@media screen and (min-width: 768px) and (max-width: 1300px)
|
|
padding: 0 30px
|
|
|
|
+minWidth2000()
|
|
max-width: 70%
|
|
|
|
&.not-top-img
|
|
margin-bottom: 10px
|
|
height: 60px
|
|
background: 0
|
|
|
|
#nav
|
|
background: rgba(255, 255, 255, .8)
|
|
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)
|
|
|
|
a,
|
|
span.site-page,
|
|
.site-name
|
|
color: var(--font-color)
|
|
text-shadow: none
|
|
|
|
&.nav-fixed
|
|
#nav
|
|
position: fixed
|
|
top: -60px
|
|
z-index: 91
|
|
background: rgba(255, 255, 255, .8)
|
|
box-shadow: 0 5px 6px -5px alpha($grey, .6)
|
|
transition: transform .2s ease-in-out, opacity .2s ease-in-out
|
|
will-change: transform
|
|
|
|
#blog-info
|
|
color: var(--font-color)
|
|
|
|
&:hover
|
|
color: $light-blue
|
|
|
|
.site-name
|
|
text-shadow: none
|
|
|
|
a,
|
|
span.site-page,
|
|
#toggle-menu
|
|
color: var(--font-color)
|
|
text-shadow: none
|
|
|
|
&:hover
|
|
color: $light-blue
|
|
|
|
&.fixed
|
|
#nav
|
|
top: 0
|
|
transition: all .5s
|
|
|
|
&.nav-visible:not(.fixed)
|
|
#nav
|
|
transition: all .5s
|
|
transform: translate3d(0, 100%, 0)
|
|
|
|
& + .layout
|
|
& > .aside-content > .sticky_layout
|
|
top: 70px
|
|
transition: top .5s
|
|
|
|
&.fixed
|
|
#nav
|
|
position: fixed
|
|
|
|
& + .layout
|
|
& > .aside-content > .sticky_layout
|
|
top: 70px
|
|
transition: top .5s
|
|
|
|
#card-toc
|
|
.toc-content
|
|
max-height: calc(100vh - 170px)
|
|
|
|
#page
|
|
h1.page-title
|
|
margin: 8px 0 20px
|
|
|
|
// for not top_img
|
|
#post
|
|
& > #post-info
|
|
margin-bottom: 30px
|
|
|
|
.post-title
|
|
padding-bottom: 4px
|
|
border-bottom: 1px solid var(--light-grey)
|
|
color: var(--text-highlight-color)
|
|
|
|
.post-edit-link
|
|
float: right
|
|
|
|
#post-meta,
|
|
#post-meta a
|
|
color: #78818a
|
|
|
|
#post-info
|
|
.post-title
|
|
@extend .limit-more-line
|
|
margin-bottom: 8px
|
|
color: var(--white)
|
|
font-weight: normal
|
|
font-size: 2.5em
|
|
line-height: 1.5
|
|
-webkit-line-clamp: 3
|
|
|
|
+maxWidth768()
|
|
font-size: 2.1em
|
|
|
|
.post-edit-link
|
|
padding-left: 10px
|
|
|
|
#post-meta
|
|
color: var(--light-grey)
|
|
font-size: 95%
|
|
|
|
+minWidth768()
|
|
> .meta-secondline
|
|
> span:first-child
|
|
display: none
|
|
|
|
+maxWidth768()
|
|
font-size: 90%
|
|
|
|
> .meta-firstline,
|
|
> .meta-secondline
|
|
display: inline
|
|
|
|
.post-meta
|
|
&-separator
|
|
margin: 0 5px
|
|
|
|
&-icon
|
|
margin-right: 4px
|
|
|
|
&-label
|
|
if hexo-config('post_meta.post.label')
|
|
margin-right: 4px
|
|
else
|
|
display: none
|
|
|
|
a
|
|
color: var(--light-grey)
|
|
transition: all .3s ease-out
|
|
|
|
&:hover
|
|
color: $text-hover
|
|
text-decoration: underline
|
|
|
|
if hexo-config('post_meta.post.date_format') == 'relative'
|
|
time
|
|
display: none
|
|
|
|
#nav
|
|
position: absolute
|
|
top: 0
|
|
z-index: 90
|
|
display: flex
|
|
align-items: center
|
|
padding: 0 36px
|
|
width: 100%
|
|
height: 60px
|
|
font-size: 1.3em
|
|
opacity: 0
|
|
transition: all .5s
|
|
|
|
+maxWidth768()
|
|
padding: 0 16px
|
|
|
|
&.show
|
|
opacity: 1
|
|
|
|
#blog-info
|
|
flex: 1
|
|
color: var(--light-grey)
|
|
@extend .limit-one-line
|
|
|
|
.site-icon
|
|
margin-right: 6px
|
|
height: 36px
|
|
vertical-align: middle
|
|
|
|
#toggle-menu
|
|
display: none
|
|
padding: 2px 0 0 6px
|
|
vertical-align: top
|
|
|
|
&:hover
|
|
color: var(--white)
|
|
|
|
a,
|
|
span.site-page
|
|
color: var(--light-grey)
|
|
|
|
&:hover
|
|
color: var(--white)
|
|
|
|
.site-name
|
|
text-shadow: 2px 2px 4px rgba($dark-black, .15)
|
|
font-weight: bold
|
|
|
|
.menus_items
|
|
display: inline
|
|
|
|
.menus_item
|
|
position: relative
|
|
display: inline-block
|
|
padding: 0 0 0 14px
|
|
|
|
&:hover
|
|
.menus_item_child
|
|
display: block
|
|
|
|
& > span > i:last-child
|
|
transform: rotate(180deg)
|
|
|
|
& > span > i:last-child
|
|
padding: 4px
|
|
transition: transform .3s
|
|
|
|
.menus_item_child
|
|
position: absolute
|
|
right: 0
|
|
display: none
|
|
margin-top: 8px
|
|
padding: 0
|
|
width: max-content
|
|
background-color: var(--sidebar-bg)
|
|
box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
|
|
animation: sub_menus .3s .1s ease both
|
|
addBorderRadius(5)
|
|
|
|
&:before
|
|
position: absolute
|
|
top: -8px
|
|
left: 0
|
|
width: 100%
|
|
height: 20px
|
|
content: ''
|
|
|
|
li
|
|
list-style: none
|
|
|
|
&:hover
|
|
background: var(--text-bg-hover)
|
|
|
|
if hexo-config('rounded_corners_ui')
|
|
&:first-child
|
|
border-top-left-radius: 5px
|
|
border-top-right-radius: 5px
|
|
|
|
&:last-child
|
|
border-bottom-right-radius: 5px
|
|
border-bottom-left-radius: 5px
|
|
|
|
a
|
|
display: inline-block
|
|
padding: 8px 16px
|
|
width: 100%
|
|
color: var(--font-color) !important
|
|
text-shadow: none !important
|
|
|
|
&.hide-menu
|
|
#toggle-menu
|
|
display: inline-block !important
|
|
|
|
.site-page
|
|
font-size: inherit
|
|
|
|
.menus_items
|
|
display: none
|
|
|
|
#search-button span:not(.site-page)
|
|
display: none
|
|
|
|
#search-button
|
|
display: inline
|
|
padding: 0 0 0 14px
|
|
|
|
.site-page
|
|
position: relative
|
|
padding-bottom: 6px
|
|
text-shadow: 1px 1px 2px rgba($dark-black, .3)
|
|
font-size: .78em
|
|
cursor: pointer
|
|
|
|
&:not(.child)
|
|
&:after
|
|
position: absolute
|
|
bottom: 0
|
|
left: 0
|
|
z-index: -1
|
|
width: 0
|
|
height: 3px
|
|
background-color: lighten($theme-color, 30%)
|
|
content: ''
|
|
transition: all .3s ease-in-out
|
|
|
|
&:hover
|
|
&:after
|
|
width: 100% |