mirror of
https://github.com/KivotosRailway/website.git
synced 2026-11-04 03:08:00 +09:00
Add solitude
This commit is contained in:
IF-chan
@@ -0,0 +1,108 @@
|
||||
div#swiper_container
|
||||
width 100%
|
||||
height 12rem
|
||||
position relative
|
||||
transition all .3s
|
||||
overflow hidden
|
||||
display flex
|
||||
flex-direction row
|
||||
justify-content center
|
||||
align-items center
|
||||
|
||||
.blog-slider__pagination .swiper-pagination-bullet
|
||||
margin 0 8px
|
||||
width 11px
|
||||
height 11px
|
||||
display inline-block
|
||||
border-radius 99px
|
||||
background var(--efu-gray)
|
||||
opacity .2
|
||||
transition all .3s
|
||||
|
||||
.blog-slider__pagination .swiper-pagination-bullet-active
|
||||
opacity 1
|
||||
background var(--efu-main)
|
||||
height 30px
|
||||
|
||||
.blog-slider__pagination
|
||||
position absolute
|
||||
z-index 21
|
||||
text-align center
|
||||
display flex
|
||||
justify-content space-between
|
||||
flex-direction column
|
||||
height 60%
|
||||
|
||||
#swiperBox.recent-post-item
|
||||
width 100%
|
||||
margin-top 0
|
||||
flex 1 1 100%
|
||||
max-width none
|
||||
+maxWidth798()
|
||||
display none
|
||||
|
||||
#swiperBox
|
||||
.blog-slider__item.swiper-slide
|
||||
padding 1rem
|
||||
display flex
|
||||
justify-content space-between
|
||||
flex-direction row
|
||||
height 100%
|
||||
|
||||
&:hover
|
||||
.blog-slider__img
|
||||
img
|
||||
transform scale(1.1)
|
||||
transition all .3s
|
||||
|
||||
.blog-slider__title
|
||||
color var(--efu-main)
|
||||
transition all .3s
|
||||
|
||||
.blog-slider__img
|
||||
border-radius 12px
|
||||
overflow hidden
|
||||
width 35%
|
||||
height 100%
|
||||
transition all .3s
|
||||
cursor pointer
|
||||
|
||||
img
|
||||
width 100%
|
||||
height 100%
|
||||
object-fit cover
|
||||
|
||||
.blog-slider__content
|
||||
margin 0 2rem 0 1rem
|
||||
position relative
|
||||
width 65%
|
||||
display flex
|
||||
align-items left
|
||||
flex-direction column
|
||||
height 100%
|
||||
|
||||
.article-meta-wrap
|
||||
padding 0
|
||||
bottom 0
|
||||
|
||||
.tags-punctuation
|
||||
&:hover
|
||||
color var(--efu-main)
|
||||
transition all .3s
|
||||
|
||||
.blog-slider__title
|
||||
font-size 1.5rem
|
||||
font-weight 600
|
||||
color var(--efu-fontcolor)
|
||||
margin 0
|
||||
transition all .3s
|
||||
cursor pointer
|
||||
|
||||
.blog-slider__desc
|
||||
-webkit-line-clamp: 4;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
opacity: 0.8;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
@@ -0,0 +1,95 @@
|
||||
#category-bar
|
||||
padding .4rem .7rem
|
||||
background var(--efu-card-bg)
|
||||
border-radius 12px
|
||||
display flex
|
||||
white-space nowrap
|
||||
overflow hidden
|
||||
border var(--style-border)
|
||||
transition 0.3s
|
||||
height 50px
|
||||
width 100%
|
||||
justify-content space-between
|
||||
user-select none
|
||||
align-items center
|
||||
margin-bottom .5rem
|
||||
|
||||
+minWidth1300()
|
||||
&:hover
|
||||
border var(--style-border-hover)
|
||||
box-shadow var(--efu-shadow-main)
|
||||
|
||||
+minWidth1200()
|
||||
animation: slide-in .6s .3s backwards;
|
||||
|
||||
+maxWidth768()
|
||||
margin-bottom 0
|
||||
margin-top 0
|
||||
border-radius 0
|
||||
background var(--efu-background)
|
||||
padding 0 1rem
|
||||
border none
|
||||
|
||||
.category-bar-right
|
||||
display flex
|
||||
align-items center
|
||||
|
||||
.category-bar-next
|
||||
margin-left 8px
|
||||
cursor pointer
|
||||
height 30px
|
||||
width 30px
|
||||
display flex
|
||||
border-radius 8px
|
||||
align-items center
|
||||
justify-content center
|
||||
transition .3s
|
||||
|
||||
.category-bar-more
|
||||
margin-left 4px
|
||||
font-weight 700
|
||||
border-radius 8px
|
||||
padding 0 8px
|
||||
|
||||
div:hover,a:hover
|
||||
background var(--efu-secondbg-bg)
|
||||
color var(--efu-lighttext)
|
||||
|
||||
.category-bar-items
|
||||
white-space nowrap
|
||||
overflow-x scroll
|
||||
overflow-y hidden
|
||||
display flex
|
||||
border-radius 8px
|
||||
align-items center
|
||||
height 30px
|
||||
|
||||
&::-webkit-scrollbar
|
||||
display: none
|
||||
|
||||
.category-bar-item
|
||||
&:hover
|
||||
a
|
||||
background var(--efu-secondbg-bg)
|
||||
color var(--efu-lighttext)
|
||||
|
||||
a
|
||||
padding .1rem .5rem
|
||||
margin-right 6px
|
||||
font-weight 700
|
||||
border-radius 8px
|
||||
display flex
|
||||
align-items center
|
||||
height 30px
|
||||
border var(--style-border-always)
|
||||
|
||||
&.select
|
||||
order -1
|
||||
|
||||
a
|
||||
background var(--efu-theme)
|
||||
color var(--efu-white)
|
||||
|
||||
&.home
|
||||
a
|
||||
border initial
|
||||
@@ -0,0 +1,275 @@
|
||||
#home_top
|
||||
.recent-top-post-group
|
||||
border-radius 12px
|
||||
overflow hidden
|
||||
width 100%
|
||||
margin-bottom 0
|
||||
user-select none
|
||||
|
||||
+maxWidth768()
|
||||
border-radius 0
|
||||
|
||||
.recent-post-top
|
||||
display flex
|
||||
flex-direction row
|
||||
flex-wrap nowrap
|
||||
width 100%
|
||||
gap .5rem
|
||||
|
||||
+maxWidth1200()
|
||||
flex-direction column
|
||||
|
||||
&::-webkit-scrollbar
|
||||
display none
|
||||
|
||||
.recent-post-group
|
||||
display flex
|
||||
flex-direction row
|
||||
flex-wrap wrap
|
||||
align-content space-between
|
||||
gap .5rem
|
||||
|
||||
+maxWidth1200()
|
||||
flex-wrap nowrap
|
||||
|
||||
/ #bannerGroup
|
||||
display flex
|
||||
+minWidth1201()
|
||||
width calc(50% - .25rem)
|
||||
height calc(328px + .5rem)
|
||||
display flex
|
||||
flex-direction column
|
||||
justify-content space-between
|
||||
|
||||
.tags-group-wrapper
|
||||
margin-top 0
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
animation rowup 60s linear infinite
|
||||
width 300px
|
||||
margin-left auto
|
||||
|
||||
.tags-group-icon-pair
|
||||
display flex
|
||||
|
||||
.tags-group-icon:nth-child(even)
|
||||
margin-left 4rem
|
||||
|
||||
/.topGroup
|
||||
display flex
|
||||
gap .5rem
|
||||
+maxWidth1200()
|
||||
overflow-x auto
|
||||
|
||||
&::-webkit-scrollbar
|
||||
display none
|
||||
|
||||
+minWidth1201()
|
||||
display flex
|
||||
flex-direction row
|
||||
flex-wrap wrap
|
||||
justify-content flex-start
|
||||
height calc(328px + 0.5rem)
|
||||
align-content space-between
|
||||
width calc(50% - 0.25rem)
|
||||
position relative
|
||||
animation slide-in .6s .1s backwards
|
||||
|
||||
.recent-post-item
|
||||
display flex
|
||||
flex-direction column
|
||||
width calc(100% / 3 - 0.5rem)
|
||||
align-items flex-start
|
||||
background var(--efu-card-bg)
|
||||
border-radius 12px
|
||||
overflow hidden
|
||||
height 164px
|
||||
max-height 164px
|
||||
border var(--style-border-always)
|
||||
transition .3s
|
||||
position relative
|
||||
box-shadow var(--efu-shadow-border)
|
||||
|
||||
+maxWidth1200()
|
||||
width 200px
|
||||
min-width 200px
|
||||
|
||||
&:hover .post_cover a .recent-post-top-text
|
||||
left 0
|
||||
|
||||
.post_cover
|
||||
width 100%
|
||||
|
||||
a
|
||||
height 100px
|
||||
overflow hidden
|
||||
display flex
|
||||
|
||||
img
|
||||
object-fit cover
|
||||
width 100%
|
||||
background var(--efu-secondbg)
|
||||
|
||||
.recent-post-top-text
|
||||
position absolute
|
||||
top 0
|
||||
left -50px
|
||||
display flex
|
||||
z-index 1
|
||||
background var(--efu-theme)
|
||||
color var(--efu-white)
|
||||
padding 2px 8px
|
||||
font-size .6rem
|
||||
border-radius 0 0 12px 0
|
||||
transition .3s
|
||||
cursor pointer
|
||||
|
||||
/.recent-post-info
|
||||
padding .3rem .5rem .3rem .5rem
|
||||
transition .3s
|
||||
|
||||
.article-title
|
||||
-webkit-line-clamp 2
|
||||
overflow hidden
|
||||
display -webkit-box
|
||||
-webkit-box-orient vertical
|
||||
line-height 1.5
|
||||
justify-content center
|
||||
align-items flex-end
|
||||
align-content center
|
||||
font-weight 700
|
||||
font-size .8rem
|
||||
padding 0
|
||||
|
||||
&:hover
|
||||
color var(--efu-fontcolor)
|
||||
|
||||
.todayCard
|
||||
display none
|
||||
|
||||
+minWidth1201()
|
||||
position absolute
|
||||
width 100%
|
||||
z-index 3
|
||||
height 100%
|
||||
top 0
|
||||
right 0
|
||||
background var(--efu-card-bg)
|
||||
border-radius 12px
|
||||
overflow hidden
|
||||
transition .3s
|
||||
display flex
|
||||
cursor pointer
|
||||
pointer-events all
|
||||
|
||||
&::after
|
||||
position: absolute
|
||||
content: ''
|
||||
width: 100%
|
||||
height: 100%
|
||||
top: 0
|
||||
left: 0
|
||||
box-shadow 0 -109px 133px -9px $todayCardColor inset
|
||||
|
||||
&.hide
|
||||
opacity: 0
|
||||
pointer-events: none
|
||||
|
||||
.todayCard-info
|
||||
position: absolute
|
||||
bottom: 2rem
|
||||
left: 2rem
|
||||
z-index: 2
|
||||
color: var(--efu-white)
|
||||
max-width: 60%
|
||||
transition: .3s
|
||||
|
||||
.todayCard-tips
|
||||
opacity: .8
|
||||
font-size: .6rem
|
||||
|
||||
.todayCard-title
|
||||
font-size: 28px
|
||||
font-weight: 700
|
||||
line-height: 36px
|
||||
|
||||
.todayCard-cover
|
||||
position: absolute
|
||||
min-width: 100%
|
||||
min-height: 100%
|
||||
top: 0
|
||||
left: 0
|
||||
background-size: cover
|
||||
z-index: -1
|
||||
transition: .3s
|
||||
|
||||
.banner-button-group
|
||||
position: absolute
|
||||
right: 2rem
|
||||
bottom: 2rem
|
||||
display: flex
|
||||
transition: .3s
|
||||
|
||||
.banner-button
|
||||
background: var(--efu-white-op)
|
||||
border-radius: 20px
|
||||
color: var(--efu-white)
|
||||
display: flex
|
||||
align-items: center
|
||||
z-index: 1
|
||||
transition: .3s
|
||||
cursor: pointer
|
||||
backdrop-filter: saturate(180%) blur(20px)
|
||||
transform: translateZ(0)
|
||||
height: 40px
|
||||
width: 118px
|
||||
justify-content: center
|
||||
|
||||
i
|
||||
margin-right: 8px
|
||||
font-size: 22px
|
||||
|
||||
&:hover
|
||||
background: var(--efu-theme)
|
||||
color: var(--efu-white)
|
||||
|
||||
&.hide
|
||||
.todayCard-info
|
||||
bottom: 1rem
|
||||
opacity: 0
|
||||
|
||||
.todayCard-cover
|
||||
transform: scale(1.2)
|
||||
|
||||
.banner-button-group
|
||||
bottom: 1rem
|
||||
.banners-links
|
||||
display flex
|
||||
position absolute
|
||||
bottom 20px
|
||||
left 40px
|
||||
flex-direction column
|
||||
justify-content space-between
|
||||
flex-wrap wrap
|
||||
height 120px
|
||||
|
||||
.banners-link-btn
|
||||
display flex
|
||||
flex-direction row
|
||||
align-items center
|
||||
padding 8px 18px 8px 14px
|
||||
border-radius 60px
|
||||
margin-bottom 12px
|
||||
color var(--efu-white)
|
||||
width 100px
|
||||
position relative
|
||||
background-size 200%
|
||||
|
||||
&:not(:last-child)
|
||||
margin-right 10px
|
||||
|
||||
&:hover
|
||||
background-position 100% 0
|
||||
|
||||
.banners-link-title
|
||||
margin-left auto
|
||||
@@ -0,0 +1,24 @@
|
||||
if hexo-config('hometop.enable') || hexo-config('says.enable')
|
||||
#home_top
|
||||
max-width 1400px
|
||||
margin 0 auto
|
||||
padding .5rem 1.5rem
|
||||
|
||||
+maxWidth768()
|
||||
padding 0 1rem
|
||||
margin-top 0
|
||||
|
||||
if hexo-config('hometop.enable')
|
||||
@import "home-top.styl"
|
||||
|
||||
if hexo-config('carousel')
|
||||
@import "carousel.styl"
|
||||
|
||||
@import "category-bar.styl"
|
||||
|
||||
if hexo-config('aside.position') == 0
|
||||
#home
|
||||
order 2
|
||||
else
|
||||
#home
|
||||
order 1
|
||||
Reference in New Issue
Block a user