mirror of
https://github.com/KivotosRailway/website.git
synced 2026-11-03 19:07:56 +09:00
377 lines
8.2 KiB
Stylus
377 lines
8.2 KiB
Stylus
.post
|
|
#page-header.post-bg
|
|
height 20rem
|
|
background-color var(--efu-background)
|
|
transition .6s
|
|
overflow hidden
|
|
|
|
+minWidth1300()
|
|
height: 25rem
|
|
|
|
+maxWidth768()
|
|
height 30rem
|
|
background-color var(--efu-main) !important
|
|
transition 0s
|
|
margin-bottom -12px
|
|
|
|
&::before
|
|
transition .3s
|
|
height 20rem
|
|
background-color var(--efu-main)
|
|
opacity 1
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
display block
|
|
width 100%
|
|
content ""
|
|
|
|
+minWidth1300()
|
|
height 25rem
|
|
opacity 0
|
|
background-color var(--efu-main)
|
|
animation slide-in-op .6s 0s forwards
|
|
|
|
+maxWidth768()
|
|
height 15rem
|
|
|
|
.post-bg
|
|
.main-hero-waves-area
|
|
width 100%
|
|
position absolute
|
|
left 0
|
|
bottom -11px
|
|
|
|
.waves-area .waves-svg
|
|
width 100%
|
|
height 60px
|
|
|
|
.parallax > use
|
|
animation move-forever 30s cubic-bezier(.55, .5, .45, .5) infinite
|
|
|
|
.parallax > use:nth-child(1)
|
|
animation-delay -2s
|
|
animation-duration 7s
|
|
fill var(--efu-background)
|
|
opacity .5
|
|
|
|
.parallax > use:nth-child(2)
|
|
animation-delay -3s
|
|
animation-duration 10s
|
|
fill var(--efu-background)
|
|
opacity .6
|
|
|
|
.parallax > use:nth-child(3)
|
|
animation-delay -4s
|
|
animation-duration 13s
|
|
fill var(--efu-background)
|
|
opacity .7
|
|
|
|
.parallax > use:nth-child(4)
|
|
animation-delay -5s
|
|
animation-duration 20s
|
|
fill var(--efu-background)
|
|
|
|
+maxWidth768()
|
|
.main-hero-waves-area
|
|
display none
|
|
|
|
#post-cover
|
|
width 100%
|
|
height 100%
|
|
object-fit cover
|
|
min-width 50vw
|
|
min-height 20rem
|
|
opacity .8
|
|
|
|
+minWidth768()
|
|
min-height 15rem !important
|
|
height 70% !important
|
|
opacity 1 !important
|
|
|
|
.coverdiv
|
|
width 70%
|
|
height 100%
|
|
position relative
|
|
overflow hidden
|
|
margin 0 -20% 0 auto
|
|
transform rotate(10deg) translateY(-10%) scale(2)
|
|
filter blur(10px)
|
|
|
|
&:after
|
|
position absolute
|
|
content ''
|
|
width 100%
|
|
height 100%
|
|
top 0
|
|
left 0
|
|
box-shadow 110px -130px 300px 60px var(--efu-main) inset
|
|
|
|
+minWidth768()
|
|
width 70%
|
|
height 100%
|
|
position relative
|
|
overflow hidden
|
|
margin 0 -20% 0 auto
|
|
transform rotate(10deg) translateY(-8%) scale(1.8)
|
|
filter blur(10px)
|
|
opacity 0
|
|
|
|
&.loaded
|
|
display block
|
|
opacity .5
|
|
animation showCover 1s .3s backwards
|
|
transform rotate(10deg) translateY(-10%) scale(2)
|
|
|
|
+maxWidth768()
|
|
margin 0 0 0 auto
|
|
transform rotate(0) translateY(0) scale(1)
|
|
filter blur(0)
|
|
width 100%
|
|
height 30rem
|
|
|
|
&:after
|
|
box-shadow 0 0 205px 59px var(--efu-main) inset
|
|
|
|
&.loaded
|
|
display block
|
|
|
|
#post-info
|
|
top 0
|
|
position absolute
|
|
padding 0 3rem
|
|
margin 0 auto
|
|
color var(--efu-white)
|
|
max-width 1400px
|
|
display flex
|
|
flex-direction column
|
|
align-items flex-start
|
|
height calc(100% + 0px)
|
|
justify-content center
|
|
animation slide-in .6s 0s backwards
|
|
width 100%
|
|
text-align center
|
|
|
|
+minWidth1300()
|
|
height calc(100% + 0px)
|
|
top 0
|
|
display flex
|
|
justify-content center
|
|
|
|
+maxWidth900()
|
|
bottom 1.5rem
|
|
text-align left
|
|
|
|
+maxWidth768()
|
|
padding 0 6%
|
|
justify-content normal
|
|
padding-top 18rem
|
|
|
|
.post-title
|
|
color var(--efu-white)
|
|
font-weight 700
|
|
font-size 2.3rem
|
|
line-height 1.2
|
|
text-align left
|
|
margin 1rem 0 1rem 0
|
|
-webkit-line-clamp 2
|
|
padding 0
|
|
overflow hidden
|
|
|
|
+maxWidth768()
|
|
font-size 1.2rem
|
|
-webkit-line-clamp 3
|
|
margin .2rem auto
|
|
text-align center
|
|
z-index 1
|
|
|
|
+minWidth1300()
|
|
width 1100px
|
|
font-size 2.6rem !important
|
|
|
|
#post-meta
|
|
margin-top .4rem
|
|
transition .3s
|
|
display flex
|
|
user-select none
|
|
color var(--light-grey)
|
|
font-size 95%
|
|
|
|
+maxWidth768()
|
|
font-size 90%
|
|
padding 0 2rem
|
|
|
|
a
|
|
color var(--light-grey)
|
|
transition all .3s ease-out 0s
|
|
|
|
i
|
|
font-size 16px
|
|
margin-right 4px
|
|
|
|
> div
|
|
text-align left
|
|
|
|
.meta-secondline
|
|
display flex
|
|
flex-direction row
|
|
flex-wrap wrap
|
|
justify-content flex-start
|
|
align-items center
|
|
|
|
+maxWidth768()
|
|
justify-content center
|
|
|
|
> span
|
|
display: flex
|
|
align-items center
|
|
line-height 1
|
|
margin 0 .5rem
|
|
|
|
+maxWidth768()
|
|
line-height 1.5
|
|
|
|
> span:first-child
|
|
margin-left 0
|
|
|
|
.post-meta-date, .post-meta-wordcount, .post-meta-position, .post-meta-pv
|
|
opacity .6
|
|
|
|
.post-meta-separator
|
|
margin 0 1rem 0 0
|
|
|
|
.post-meta-pv
|
|
margin-right 8px
|
|
padding 0 8px
|
|
display flex
|
|
align-items center
|
|
border-radius 12px
|
|
|
|
&:hover
|
|
opacity 1
|
|
background var(--efu-white-op)
|
|
text-decoration none
|
|
color var(--efu-white)
|
|
|
|
.post-meta-pv-cv
|
|
margin-left .8rem
|
|
|
|
#busuanzi_value_page_pv
|
|
font-weight 800
|
|
|
|
.post-meta-commentcount
|
|
opacity .6
|
|
cursor pointer
|
|
transition .3s
|
|
border-radius 12px
|
|
padding 8px
|
|
|
|
&:hover
|
|
opacity 1
|
|
background var(--efu-white-op)
|
|
|
|
.post-meta-wechat
|
|
margin-right .8rem
|
|
opacity .6
|
|
transition .3s
|
|
cursor pointer
|
|
|
|
&:hover
|
|
opacity 1
|
|
background var(--efu-white-op)
|
|
|
|
#post-firstinfo
|
|
text-align left
|
|
display flex
|
|
white-space nowrap
|
|
user-select none
|
|
|
|
+maxWidth768()
|
|
white-space nowrap
|
|
margin 0 auto
|
|
z-index 1
|
|
|
|
.tag_share
|
|
display none
|
|
|
|
.meta-firstline
|
|
display flex
|
|
align-items center
|
|
height 32px
|
|
|
|
+maxWidth768()
|
|
margin-bottom .4rem
|
|
|
|
.post-meta-original
|
|
background var(--efu-white-op)
|
|
color var(--efu-white)
|
|
padding 0 .5rem
|
|
font-size .7rem
|
|
margin auto
|
|
border-radius 8px
|
|
font-weight 700
|
|
line-height 32px
|
|
width 100%
|
|
height 100%
|
|
display flex
|
|
|
|
&:hover
|
|
color var(--efu-main)
|
|
background var(--efu-white)
|
|
border-radius 8px
|
|
|
|
.tag_share
|
|
margin-left .5rem
|
|
|
|
.post-meta__tag-list
|
|
display flex
|
|
flex-direction row
|
|
align-items center
|
|
|
|
+maxWidth768()
|
|
display none
|
|
|
|
&::-webkit-scrollbar
|
|
display none
|
|
|
|
.post-meta__tags
|
|
color var(--efu-white)
|
|
opacity .8
|
|
margin-right 8px
|
|
padding 0 8px
|
|
border-radius 12px
|
|
display flex
|
|
align-items center
|
|
flex-direction row
|
|
|
|
&:hover
|
|
color var(--efu-white)
|
|
opacity 1
|
|
background var(--efu-white-op)
|
|
|
|
+maxWidth768()
|
|
margin 0 .5rem 0 0
|
|
|
|
span.post-meta-categories
|
|
background-color var(--efu-white-op)
|
|
border-radius 8px
|
|
line-height 32px
|
|
height 32px
|
|
transition .3s
|
|
|
|
&:not(:first-child)
|
|
margin-left 8px
|
|
|
|
&:hover
|
|
background-color var(--efu-white)
|
|
|
|
a.post-meta-categories
|
|
color var(--efu-white)
|
|
font-size .7rem
|
|
width 100%
|
|
height 100%
|
|
display flex
|
|
padding 0 .5rem
|
|
|
|
&:hover
|
|
color var(--efu-main) |