mirror of
https://github.com/KivotosRailway/website.git
synced 2026-11-03 19:07:56 +09:00
270 lines
4.9 KiB
Stylus
270 lines
4.9 KiB
Stylus
div#banners
|
|
display flex
|
|
width 100%
|
|
background var(--efu-card-bg)
|
|
border var(--style-border-always)
|
|
border-radius 12px
|
|
overflow hidden
|
|
position relative
|
|
box-shadow var(--efu-shadow-border)
|
|
flex-direction column
|
|
transition .3s
|
|
will-change transform
|
|
animation slide-in .6s .1s backwards
|
|
|
|
#home_top &
|
|
+maxWidth1200()
|
|
height calc(328px + .5rem)
|
|
|
|
:not(.flink)&:hover
|
|
box-shadow var(--efu-shadow-main)
|
|
|
|
.banner-button-group
|
|
position absolute
|
|
right 2rem
|
|
top 2rem
|
|
display flex
|
|
|
|
+maxWidth768()
|
|
display none
|
|
|
|
.banner-button
|
|
padding 8px 12px
|
|
background var(--efu-fontcolor)
|
|
border-radius 12px
|
|
color var(--efu-card-bg)
|
|
display flex
|
|
align-items center
|
|
z-index 1
|
|
transition .3s
|
|
cursor pointer
|
|
box-shadow var(--efu-shadow-black)
|
|
|
|
&.secondary
|
|
background var(--efu-secondbg)
|
|
border var(--style-border-always)
|
|
color var(--efu-lighttext)
|
|
margin-right 1rem
|
|
box-shadow var(--efu-shadow-border)
|
|
|
|
&:hover
|
|
background var(--efu-theme)
|
|
color var(--efu-white)
|
|
|
|
i
|
|
margin-right 8px
|
|
font-size 1rem
|
|
|
|
/.banners-title
|
|
top 2.6rem
|
|
left 2rem
|
|
position absolute
|
|
display flex
|
|
flex-direction column
|
|
|
|
&-big
|
|
font-size 36px
|
|
line-height 1
|
|
font-weight 700
|
|
margin-bottom 8px
|
|
|
|
&-small
|
|
font-size 12px
|
|
line-height 1
|
|
color var(--efu-secondtext)
|
|
margin-top 8px
|
|
margin-bottom 0.5rem
|
|
margin-left 2px
|
|
|
|
/.flink
|
|
.banners-title
|
|
top 1.5rem
|
|
|
|
.bannerText
|
|
font-size 4rem
|
|
line-height 4rem
|
|
font-weight 700
|
|
|
|
/.tags-group-all
|
|
display flex
|
|
|
|
#home_top &
|
|
+maxWidth600()
|
|
opacity 0.06
|
|
filter blur(8px)
|
|
z-index -1
|
|
|
|
&.nowrapMove
|
|
padding-bottom 2rem
|
|
|
|
.tags-group-wrapper
|
|
margin-top: 7rem
|
|
animation: rowleft 120s linear infinite
|
|
display flex
|
|
|
|
+maxWidth768()
|
|
margin-top 7.5rem
|
|
|
|
.tags-group-icon
|
|
border-radius 50%
|
|
|
|
img
|
|
min-width 100%
|
|
min-height 100%
|
|
border-radius 50%
|
|
object-fit cover
|
|
|
|
.tags-group-icon-pair
|
|
margin-left 1rem
|
|
user-select none
|
|
|
|
a img
|
|
border-radius 50%
|
|
|
|
/.tags-group-icon
|
|
width 120px
|
|
height 120px
|
|
border-radius 30px
|
|
display flex
|
|
align-items center
|
|
justify-content center
|
|
color #fff
|
|
font-size 66px
|
|
font-weight 700
|
|
box-shadow var(--efu-shadow-blackdeep)
|
|
|
|
&:nth-child(even)
|
|
margin-top 1rem
|
|
transform translate(-60px)
|
|
|
|
img
|
|
width 60%
|
|
|
|
.author-content
|
|
display flex
|
|
flex-wrap wrap
|
|
justify-content space-between
|
|
width 100%
|
|
gap .5rem
|
|
|
|
+maxWidth768()
|
|
margin-top 0
|
|
|
|
.author-content-item
|
|
+maxWidth1300()
|
|
animation slide-in .6s 0s backwards
|
|
+maxWidth768()
|
|
width 100% !important
|
|
padding 1rem
|
|
|
|
.author-content.author-content-item.sharePage
|
|
height 19rem
|
|
background-size cover
|
|
color var(--efu-white)
|
|
overflow hidden
|
|
margin-top 0
|
|
|
|
.author-content-item
|
|
width 49.5%
|
|
border-radius 12px
|
|
background var(--efu-card-bg)
|
|
border var(--style-border-always)
|
|
box-shadow var(--efu-shadow-border)
|
|
position relative
|
|
overflow hidden
|
|
padding 1rem 2rem
|
|
|
|
&.single
|
|
width 100%
|
|
|
|
.author-content-item-title
|
|
font-size 36px
|
|
font-weight 700
|
|
line-height 1
|
|
|
|
.author-content-item-tips
|
|
opacity .8
|
|
font-size .6rem
|
|
margin-bottom .5rem
|
|
|
|
.content-bottom
|
|
margin-top auto
|
|
display flex
|
|
align-items center
|
|
justify-content space-between
|
|
|
|
.icon-group
|
|
display flex
|
|
|
|
i
|
|
display inline-block
|
|
width 22px
|
|
height 18px
|
|
margin-right .5rem
|
|
|
|
.card-content
|
|
position absolute
|
|
width 100%
|
|
height 100%
|
|
top 0
|
|
left 0
|
|
display flex
|
|
flex-direction column
|
|
padding 1rem 2rem
|
|
|
|
+maxWidth768()
|
|
padding 1rem
|
|
|
|
.author-content-item-title
|
|
margin-bottom .5rem
|
|
|
|
.banner-button-group
|
|
position absolute
|
|
bottom 1rem
|
|
right 2rem
|
|
|
|
.banner-button
|
|
height 40px
|
|
width 118px
|
|
border-radius 20px
|
|
justify-content center
|
|
background var(--efu-black-op)
|
|
color var(--efu-white)
|
|
display flex
|
|
align-items center
|
|
z-index 1
|
|
transition .3s
|
|
cursor pointer
|
|
backdrop-filter saturate(180%) blur(20px)
|
|
-webkit-backdrop-filter blur(20px)
|
|
transform translateZ(0)
|
|
|
|
&:hover
|
|
background var(--efu-main)
|
|
color var(--efu-card-bg)
|
|
|
|
i
|
|
margin-right 8px
|
|
font-size 22px
|
|
|
|
+maxWidth900()
|
|
.author-content-item
|
|
.card-content
|
|
.banner-button-group
|
|
right 1rem
|
|
bottom 1rem
|
|
|
|
.banner-button-group
|
|
.banner-button
|
|
background 0 0
|
|
color var(--efu-white)
|
|
padding 0
|
|
width 30px
|
|
height 30px
|
|
|
|
i
|
|
margin-right 0
|
|
font-size 1.5rem
|
|
|
|
.banner-button-text
|
|
display none |