Files
hexo-theme-butterfly/source/css/_layout/z-other.styl
Jerry da8ffda39b 1. Feature: 手機menu界面重新設計
2. Feature: 文章頁增加美化(原 melody主題功能),並增加更改標題前綴圖標和顔色
3. Feature: PC端增加直達評論按鈕
4. Feature: 可以對單獨文章設置是否顯示版權信息
5. Fix: 修復閲讀模式下,調整字體大小對代碼無效的bug
6. Fix: 調整Valine字體顯示問題
7. Fix: 修正夜間模式下Valine的適配問題
8. Fix: 修復Valine設置notify和verify無效的bug (thx @VincentTV )
9. Remove: 去掉主題"閲讀更多"按鈕
2019-08-29 01:09:28 +08:00

290 lines
4.8 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)
#page_site-info
padding: 10rem 1rem 7rem
#site-title
font-family: PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
@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)
.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
#page_site-info
padding: 7rem 1rem 5rem
#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
.search-dialog
transition: all .2s
.scroll-down-effects
-webkit-animation: pulse 1.5s infinite
animation: pulse 1.5s infinite
// font-size: 28px
position: absolute
color: #fff
.is_hidden
overflow: hidden
@keyframes pulse{
0%,to{
opacity:.4
top:0}
50%{
opacity:1
top:-16px}
}
@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)
}
}
.article-container .code_full_page
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 100%;
z-index: 9999;
margin: 0;
animation: code_full_page 1s;
.code_body
overflow: hidden
@keyframes code_full_page{
0%{transform:scale(0)}
50%{transform:scale(1)}
80%{transform:scale(.98)}
100%{transform:scale(1)}}