Files
hexo-theme-butterfly/source/css/_layout/z-other.styl
Jerry 2eb15123f9 1. 更改手機頁面的menu和toc的顯示方式和顯示特效(ipad也能看TOC)
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. 修復英文語言下,書簽英文顯示不完整的問題
2019-09-24 02:09:51 +08:00

303 lines
5.2 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
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,#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-posts
.recent-post-info
padding: 20px 10px !important
width: 100%
#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,
#page-header
animation: header 1s
#site-title
animation: titlescale 1s
canvas,
#web_bg
animation: to_show 4s
.card-announcement-animation
animation: announ_animation .8s linear infinite
color: #FF0000
.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
.rightside-in
animation: rightside_in_animate .3s
display: block !important
@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)
@keyframes announ_animation
0%,to
transform: scale(1)
50%
transform: scale(1.2)
@keyframes rightside_in_animate
0%
transform: translateX(28px)
100%
transform: translateX(0)