Files
hexo-theme-butterfly/source/css/_global/function.styl
Jerry 02af3077e7 feat: 增加twikoo 最新評論 close #433
feat: 增加twikoo評論數顯示
feat: 增加toc簡潔模式
feat: 最新評論頭像增加lazyload
feat: fontawesome和google字體增加異步加載
fix: 修復上個版本導致的圖庫報沒有jQuery的bugs
fix: 修復上個版本導致aside 分類展開/收縮按鈕的bugs
improvement: toc點擊時改用document.getElementById獲取參數,避免有些字符導致無法跳轉 close #426
improvement: icp圖片限制大小  close #434
improvement: 最新評論優化,當沒有評論時顯示 '沒有評論'
improvement: 若瀏覽器支持,scroll將採用原生瀏覽器支持的滾動方法
improvement: 當屏幕沒有滾動條時,rightside會直接顯示
2020-12-05 22:28:54 +08:00

211 lines
3.2 KiB
Stylus

.limit-one-line
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
.limit-more-line
display: -webkit-box
overflow: hidden
-webkit-box-orient: vertical
.fontawesomeIcon
display: inline-block
font-weight: 600
font-style: normal
font-variant: normal
font-family: 'Font Awesome 5 Free'
text-rendering: auto
-webkit-font-smoothing: antialiased
maxWidth600()
@media screen and (max-width: 600px)
{block}
maxWidth768()
@media screen and (max-width: 768px)
{block}
minWidth768()
@media screen and (min-width: 768px)
{block}
maxWidth1024()
@media screen and (max-width: 1024px)
{block}
maxWidth900()
@media screen and (max-width: 900px)
{block}
maxWidth901()
@media screen and (max-width: 900px)
{block}
minWidth900()
@media screen and (min-width: 900px)
{block}
minWidth2000()
@media screen and (min-width: 2000px)
{block}
// animation
if hexo-config('enter_transitions')
#content-inner,
#footer
animation: main 1s
#page-header
animation: header-effect 1s
#site-title,
#site-subtitle
animation: titlescale 1s
#nav.show
animation: headerNoOpacity 1s
canvas:not(#ribbon-canvas),
#web_bg
animation: to_show 4s
#ribbon-canvas
animation: ribbon_to_show 4s
#sidebar-menus
&.open
for i in 1 2 3 4
> :nth-child({i})
animation: sidebarItem (i / 5)s
.card-announcement-animation
color: #FF0000
animation: announ_animation .8s linear 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%
top: 0
opacity: .4
50%
top: -16px
opacity: 1
100%
top: 0
opacity: .4
@keyframes header-effect
0%
opacity: 0
transform: translateY(-50px)
100%
opacity: 1
transform: translateY(0)
@keyframes headerNoOpacity
0%
transform: translateY(-50px)
100%
transform: translateY(0)
@keyframes main
0%
opacity: 0
transform: translateY(50px)
100%
opacity: 1
transform: translateY(0)
@keyframes titlescale
0%
opacity: 0
transform: scale(.7)
100%
opacity: 1
transform: scale(1)
@keyframes search_close
0%
opacity: 1
transform: scale(1)
100%
opacity: 0
transform: scale(.7)
@keyframes to_show
0%
opacity: 0
100%
opacity: 1
@keyframes to_hide
0%
opacity: 1
100%
opacity: 0
@keyframes ribbon_to_show
0%
opacity: 0
100%
opacity: hexo-config('canvas_ribbon.alpha')
@keyframes avatar_turn_around
from
transform: rotate(0)
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 sidebarItem
0%
transform: translateX(200px)
100%
transform: translateX(0)