mirror of
https://github.com/KivotosRailway/website.git
synced 2026-11-03 19:07:56 +09:00
Add solitude
This commit is contained in:
IF-chan
@@ -0,0 +1,377 @@
|
||||
.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)
|
||||
Reference in New Issue
Block a user