Files
hexo-theme-butterfly/source/css/_layout/z-other.styl
Jerry 83dc0559c0 1. Feature: 可設置内联代码块样式 #26
2. Feature: 可設置夜間模式作爲默認樣式
3. Feature: 可設置是否顯示code language名稱
4. Feature: 可設置是否展開或關閉代碼框
5. Feature: 可設置背景圖片/顔色
6. Feature: 可設置是否顯示footer背景
7. Feature: 增加 canvas-nest.js
8. Feature: 頭像可設置效果(轉圈圈)
9. Feature: menu可設置分組
9. Fix: 優化打賞和搜索打開特效
10. Fix: 優化sidebar的打開特效,避免與文章頁特效不同步
11. Fix: 適配**hexo-blog-encrypt**,現在可以顯示toc
12. Fix: 修復設置不顯示評論時,直達評論按鈕沒有消失的bug
13. Fix: 修復post頁底欄,當沒有顯示評論,不顯示TOC,評論和toc都不顯示 這三種狀態下按鈕的bug
14. Fix: 修復代碼框左右滑動時,代碼名字跟著滑動的bug
15. Fix: 其他page頁標題的字體顯示
16. Fix: 修復當設置開啓canvas_ribbons,進入網站會先顯示canvas_ribbons的bug
17. Fix: 完善夜間模式下,字體顯示問題
18. Fix: 修復代碼框 複製 和 代碼名 z-index bug #25
19. Fix: 完善阅读模式
2019-09-08 16:17:07 +08:00

289 lines
4.9 KiB
Stylus

#recent-posts
width: 75%
.recent-post-item
padding: 0
box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
border-radius: 8px
transition: all 0.3s
background: #fff
margin-top: 20px
height: 280px
&:hover
-webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
img.post_bg
transform:scale(1.1)
.is_left
float: left
border-top-left-radius: 8px
border-bottom-left-radius: 8px
.is_right
float: right
border-top-right-radius: 8px
border-bottom-right-radius: 8px
.post_cover
width: 45%
height: 280px
overflow: hidden
img.post_bg
border: 0
transition: all .6s
display: block
width: 100%
height: 100%
padding: 0
margin: 0
object-fit: cover
&:hover
transform:scale(1.1)
#pagination
margin-top: 2rem
.recent-post-info
padding: 50px 40px
display: inline-block
width: 55%
overflow hidden
a.article-meta__categories
text-decoration: none
color: #858585
&:hover
color: #49b1f5 !important
.content
display: -webkit-box
-webkit-line-clamp: 3
-webkit-box-orient: vertical
overflow: hidden
height: 90px
.layout_page
display: flex
margin: 0 auto
max-width: 1200px
align-items: flex-start
padding: 0 15px
#page,.category-content,.flink
padding: 40px 44px 44px
#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
border-radius: 8px
transition: all .3s
background: #fff
margin-top: 20px
width: 75%
.card_widget,#archive,.tag-cloud,#tag,.category-content,#category,#page,.flink
&:hover
-webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
@media screen and (min-width: 900px)
if hexo-config("aside.position") == "left"
#recent-posts
order: 2
#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
order: 2
@media screen and (max-width: 900px)
#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
width: 100% !important
@media screen and (max-width:768px)
#web_bg
display: none
.recent-post-item
height: auto !important
border-radius: 8px
.post_cover
width: 100% !important
height: 230px !important
border-radius: 8px !important
.recent-post-item,#page,.tag-cloud,.flink
margin-top: 1px
.recent-post-item,#page,.category-content,.tag-cloud,.flink
box-shadow: none !important
background: none !important
padding: 0px 20px 0 !important
&:hover
-webkit-box-shadow: none
box-shadow: none
#archive,#category,#tag
box-shadow: none !important
background: none !important
padding: 0px 30px 0 !important
.layout_post
padding: 0 20px 0
border-radius: 0
-webkit-box-shadow: none
box-shadow: none
background: none
margin: 0
&:hover
-webkit-box-shadow: none
box-shadow: none
.layout_page
padding: 0 !important
#aside_content
display: none !important
.category-lists
padding: 0
.recent-post-info
padding: 20px 10px !important
width: 100%
#recent-posts #pagination
margin-bottom: 0
#nav
#site-social-icons
display: block
&.not_index_bg
height: 14rem
#page_site-info
top: 7rem
#top-container
height: 14rem
#post-info
bottom: 1rem
padding-left: 5%
.mobile_hidden
display: none
canvas
display: none !important
.layout_page,
.layout_post,
footer
animation: main 1s
#nav,
#top-container
animation: header 1s
#site-title
animation: titlescale 1s
canvas,#web_bg
animation: to_show 4s
.card-announcement-animation
animation: announ_animation 1.5s infinite
.scroll-down-effects
animation: scroll-down-effect 1.5s infinite
if hexo-config("avatar_effect") == true
.avatar_img
animation: avatar_turn_around 2s linear infinite
.reward-main
animation: donate_effcet .3s .1s ease both;
@keyframes scroll-down-effect
0%
opacity: 0.4
top: 0
50%
opacity: 1
top: -16px
100%
opacity: 0.4
top: 0
@keyframes header
0%
opacity: 0
transform: translateY(-50px)
100%
opacity: 1
transform: translateY(0)
@keyframes main
0%
opacity: 0
transform: translateY(50px)
100%
opacity: 1
transform: translateY(0)
@keyframes titlescale
0%
opacity: 0
transform: scale(0.7)
100%
opacity: 1
transform: scale(1)
@keyframes to_show
0%
opacity: 0
100%
opacity: 1
@keyframes avatar_turn_around
from
transform: rotate(0deg)
to
transform: rotate(360deg)
@keyframes sub_menus
0%
opacity: 0
transform: translateY(10px)
100%
opacity: 1
transform: translateY(0)
@keyframes donate_effcet
0%
opacity: 0
transform: translateY(-20px)
100%
opacity: 1
transform: translateY(0)