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,50 @@
|
||||
#about-page
|
||||
display flex
|
||||
padding-top 1rem
|
||||
flex-direction column
|
||||
align-items center
|
||||
gap .5rem
|
||||
|
||||
.author-title
|
||||
font-size 2rem
|
||||
font-weight 700
|
||||
margin .5rem 0
|
||||
line-height 1
|
||||
|
||||
if "tenyear" in $about
|
||||
@import "tenyear"
|
||||
|
||||
if "authorinfo" in $about
|
||||
@import "author"
|
||||
|
||||
if "contentinfo" in $about
|
||||
@import "contentinfo"
|
||||
|
||||
if "skills" in $about
|
||||
@import "skills"
|
||||
|
||||
if "oneself" in $about
|
||||
@import "oneself"
|
||||
|
||||
if "motto" in $about
|
||||
@import "buff"
|
||||
@import "maxim"
|
||||
|
||||
if "game1" in $about
|
||||
@import "game"
|
||||
|
||||
if "personalities" in $about
|
||||
@import "personalities"
|
||||
@import "myphoto"
|
||||
|
||||
if "careers" in $about
|
||||
@import "careers"
|
||||
|
||||
if "likes" in $about
|
||||
@import "like"
|
||||
|
||||
if "tj" in $about
|
||||
@import "statistic"
|
||||
|
||||
if "award" in $about
|
||||
@import "reward"
|
||||
@@ -0,0 +1,92 @@
|
||||
#about-page
|
||||
.author-info
|
||||
display flex
|
||||
align-items center
|
||||
margin 0 0 16px 0
|
||||
|
||||
.author-tag-left
|
||||
display flex
|
||||
flex-direction column
|
||||
align-items flex-end
|
||||
|
||||
.author-tag
|
||||
&:first-child,
|
||||
&:last-child
|
||||
margin-right -16px
|
||||
|
||||
.author-tag-right
|
||||
display flex
|
||||
flex-direction column
|
||||
align-items flex-start
|
||||
|
||||
.author-tag
|
||||
&:first-child,
|
||||
&:last-child
|
||||
margin-left -16px
|
||||
|
||||
+maxWidth768()
|
||||
.author-tag-left, .author-tag-right
|
||||
display none
|
||||
|
||||
.author-tag
|
||||
transform translate(0, -4px)
|
||||
padding 1px 8px
|
||||
background var(--efu-card-bg)
|
||||
border var(--style-border-always)
|
||||
border-radius 40px
|
||||
margin-top 6px
|
||||
font-size 14px
|
||||
font-weight 700
|
||||
box-shadow var(--efu-shadow-lightblack)
|
||||
animation 6s ease-in-out 0s infinite normal none running floating
|
||||
|
||||
&:nth-child(1)
|
||||
animation-delay 0s
|
||||
|
||||
&:nth-child(2)
|
||||
animation-delay .6s
|
||||
|
||||
&:nth-child(3)
|
||||
animation-delay 1.2s
|
||||
|
||||
&:nth-child(4)
|
||||
animation-delay 1.8s
|
||||
|
||||
.author-img
|
||||
margin 0 30px
|
||||
border-radius 50%
|
||||
width 180px
|
||||
height 180px
|
||||
position relative
|
||||
background var(--efu-secondbg)
|
||||
user-select none
|
||||
transition .3s
|
||||
|
||||
&:hover
|
||||
transform scale(1.1)
|
||||
|
||||
&::before
|
||||
content ''
|
||||
transition 1s
|
||||
width 30px
|
||||
height 30px
|
||||
background var(--efu-green)
|
||||
position absolute
|
||||
border-radius 50%
|
||||
border 5px solid var(--efu-background)
|
||||
bottom 5px
|
||||
right 10px
|
||||
z-index 2
|
||||
|
||||
+maxWidth768()
|
||||
width 120px
|
||||
height 120px
|
||||
|
||||
&::before
|
||||
bottom -2px
|
||||
right -2px
|
||||
width 20px
|
||||
height 20px
|
||||
|
||||
img
|
||||
border-radius 200px
|
||||
@@ -0,0 +1,34 @@
|
||||
#about-page
|
||||
.author-content-item.buff
|
||||
font-size 36px
|
||||
font-weight 700
|
||||
line-height 1.1
|
||||
display flex
|
||||
align-items flex-start
|
||||
flex-direction column
|
||||
justify-content center
|
||||
background linear-gradient(120deg, #ff27e8 0, #ff8000 100%)
|
||||
color var(--efu-white)
|
||||
background-size 200%
|
||||
animation gradient 15s ease infinite
|
||||
min-height 200px
|
||||
height fit-content
|
||||
width 59.5%
|
||||
|
||||
.card-content
|
||||
display flex
|
||||
flex-direction column
|
||||
justify-content center
|
||||
|
||||
.buff-title
|
||||
display flex
|
||||
flex-direction column
|
||||
|
||||
span:first-child
|
||||
opacity 0.6
|
||||
margin-bottom 8px
|
||||
|
||||
.title1
|
||||
opacity .8
|
||||
font-size .6rem
|
||||
margin-bottom .5rem
|
||||
@@ -0,0 +1,27 @@
|
||||
#about-page
|
||||
.author-content-item.careers
|
||||
min-height 400px
|
||||
|
||||
img
|
||||
position absolute
|
||||
left 0
|
||||
bottom 20px
|
||||
width 100%
|
||||
transition .6s
|
||||
user-select none
|
||||
|
||||
.careers-group
|
||||
margin-top 12px
|
||||
|
||||
.careers-item
|
||||
display flex
|
||||
align-items center
|
||||
|
||||
.circle
|
||||
width 16px
|
||||
height 16px
|
||||
margin-right 8px
|
||||
border-radius 16px
|
||||
|
||||
.name
|
||||
color var(--efu-secondtext)
|
||||
@@ -0,0 +1,78 @@
|
||||
#about-page
|
||||
.myInfoAndSayHello
|
||||
display flex
|
||||
flex-direction column
|
||||
justify-content center
|
||||
color var(--efu-white)
|
||||
background linear-gradient(120deg, #5b27ff 0, #00d4ff 100%)
|
||||
background-size 200%
|
||||
animation gradient 15s ease infinite
|
||||
width 59.5%
|
||||
|
||||
.title1
|
||||
opacity .8
|
||||
line-height 1.3
|
||||
|
||||
.title2
|
||||
font-size 36px
|
||||
font-weight 700
|
||||
line-height 1.1
|
||||
margin .5rem 0
|
||||
|
||||
.inline-word
|
||||
word-break keep-all
|
||||
white-space nowrap
|
||||
|
||||
.aboutsiteTips
|
||||
display flex
|
||||
justify-content center
|
||||
align-items flex-start
|
||||
flex-direction column
|
||||
width 39.5%
|
||||
|
||||
h2
|
||||
margin-right auto
|
||||
font-size 36px
|
||||
font-family Helvetica
|
||||
line-height 1.06
|
||||
letter-spacing -.02em
|
||||
color var(--efu-fontcolor)
|
||||
margin-top 0
|
||||
|
||||
.mask
|
||||
height 36px
|
||||
position relative
|
||||
overflow hidden
|
||||
margin-top 4px
|
||||
|
||||
span
|
||||
display block
|
||||
box-sizing border-box
|
||||
position absolute
|
||||
top 36px
|
||||
padding-bottom var(--offset)
|
||||
background-size 100% 100%
|
||||
-webkit-background-clip text
|
||||
background-clip text
|
||||
-webkit-text-fill-color transparent
|
||||
background-repeat no-repeat
|
||||
|
||||
&[data-show]
|
||||
transform translateY(-100%)
|
||||
transition .5s transform ease-in-out
|
||||
|
||||
&[data-up]
|
||||
transform translateY(-200%)
|
||||
transition .5s transform ease-in-out
|
||||
|
||||
span:nth-child(1)
|
||||
background-image linear-gradient(45deg, #0ecffe 50%, #07a6f1)
|
||||
|
||||
span:nth-child(2)
|
||||
background-image linear-gradient(45deg, #18e198 50%, #0ec15d)
|
||||
|
||||
span:nth-child(3)
|
||||
background-image linear-gradient(45deg, #8a7cfb 50%, #633e9c)
|
||||
|
||||
span:nth-child(4)
|
||||
background-image linear-gradient(45deg, #fa7671 50%, #f45f7f)
|
||||
@@ -0,0 +1,41 @@
|
||||
#about-page
|
||||
.author-content-item.game-apex
|
||||
min-height 300px
|
||||
overflow hidden
|
||||
color var(--efu-white)
|
||||
width 59%
|
||||
|
||||
&::after
|
||||
box-shadow 0 -69px 203px 11px #04120f inset
|
||||
position absolute
|
||||
content ''
|
||||
width 100%
|
||||
height 100%
|
||||
top 0
|
||||
left 0
|
||||
|
||||
.card-content
|
||||
position absolute
|
||||
width 100%
|
||||
height 100%
|
||||
top 0
|
||||
left 0
|
||||
z-index 2
|
||||
display flex
|
||||
flex-direction column
|
||||
padding 1rem 2rem
|
||||
|
||||
.author-content-item.game-jl
|
||||
width 39%
|
||||
min-height 300px
|
||||
overflow hidden
|
||||
color var(--efu-white)
|
||||
|
||||
&::after
|
||||
box-shadow 0 -69px 203px 11px #415dc9 inset
|
||||
position absolute
|
||||
content ''
|
||||
width 100%
|
||||
height 100%
|
||||
top 0
|
||||
left 0
|
||||
@@ -0,0 +1,29 @@
|
||||
#about-page
|
||||
.author-content-item.like-technology
|
||||
background-size cover
|
||||
min-height 230px
|
||||
color var(--efu-white)
|
||||
|
||||
&::after
|
||||
box-shadow 0 -69px 203px 11px #050b20 inset
|
||||
position absolute
|
||||
content ''
|
||||
width 100%
|
||||
height 100%
|
||||
top 0
|
||||
left 0
|
||||
|
||||
.author-content-item.like-music
|
||||
background-size cover
|
||||
min-height 400px
|
||||
color var(--efu-white)
|
||||
overflow hidden
|
||||
|
||||
&::after
|
||||
box-shadow 0 -69px 203px 11px #0e0e0e inset
|
||||
position absolute
|
||||
content ''
|
||||
width 100%
|
||||
height 100%
|
||||
top 0
|
||||
left 0
|
||||
@@ -0,0 +1,23 @@
|
||||
#about-page
|
||||
.author-content-item.maxim
|
||||
font-size 36px
|
||||
font-weight 700
|
||||
line-height 1.1
|
||||
display flex
|
||||
align-items flex-start
|
||||
flex-direction column
|
||||
justify-content center
|
||||
width 39.5%
|
||||
|
||||
.maxim-title
|
||||
display flex
|
||||
flex-direction column
|
||||
|
||||
span:first-child
|
||||
opacity 0.6
|
||||
margin-bottom 8px
|
||||
|
||||
.title1
|
||||
opacity .8
|
||||
font-size .6rem
|
||||
margin-bottom .5rem
|
||||
@@ -0,0 +1,34 @@
|
||||
#about-page
|
||||
.author-content-item.myphoto
|
||||
height 60%
|
||||
min-height 240px
|
||||
position relative
|
||||
overflow hidden
|
||||
width 39.5%
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
|
||||
img
|
||||
position absolute
|
||||
height 100%
|
||||
min-width 100%
|
||||
object-fit cover
|
||||
transition .6s
|
||||
user-select none
|
||||
|
||||
&:hover
|
||||
img
|
||||
min-width 105%
|
||||
transition 2s
|
||||
|
||||
.myphoto-title
|
||||
position absolute
|
||||
bottom 0
|
||||
left 0
|
||||
width 100%
|
||||
background var(--efu-maskbgdeep)
|
||||
padding .5rem 2rem
|
||||
backdrop-filter saturate(180%) blur(20px)
|
||||
-webkit-backdrop-filter blur(20px)
|
||||
transform translateZ(0)
|
||||
@@ -0,0 +1,91 @@
|
||||
#about-page
|
||||
.author-content-item-group
|
||||
&.column
|
||||
display flex
|
||||
flex-direction column
|
||||
width 49%
|
||||
justify-content space-between
|
||||
|
||||
+maxWidth768()
|
||||
width 100% !important
|
||||
|
||||
&.mapAndInfo
|
||||
width 59.5%
|
||||
gap .5rem
|
||||
|
||||
.author-content-item
|
||||
+minWidth1300()
|
||||
animation slide-in .6s 0s backwards
|
||||
|
||||
&.map
|
||||
background var(--site-about-oneself-map--light) no-repeat center
|
||||
min-height 160px
|
||||
max-height 400px
|
||||
position relative
|
||||
overflow hidden
|
||||
height 60%
|
||||
background-size 100%
|
||||
transition 1s ease-in-out
|
||||
|
||||
.map-title
|
||||
position absolute
|
||||
bottom 0
|
||||
left 0
|
||||
width 100%
|
||||
background var(--efu-maskbg)
|
||||
padding 0.5rem 2rem
|
||||
backdrop-filter saturate(180%) blur(20px)
|
||||
transition 1s ease-in-out
|
||||
font-size 20px
|
||||
transform translateZ(0)
|
||||
|
||||
+maxWidth768()
|
||||
padding 1rem
|
||||
|
||||
b
|
||||
color var(--efu-fontcolor)
|
||||
|
||||
+maxWidth768()
|
||||
margin-bottom 0
|
||||
|
||||
[data-theme=dark] &
|
||||
background var(--site-about-oneself-map--dark) no-repeat center
|
||||
background-size 100%
|
||||
|
||||
&:hover
|
||||
background-size 120%
|
||||
transition 4s ease-in-out
|
||||
background-position-x 0
|
||||
background-position-y 36%
|
||||
|
||||
.map-title
|
||||
bottom -100%
|
||||
|
||||
.author-content-item.selfInfo
|
||||
display flex
|
||||
min-height 100px
|
||||
max-height 400px
|
||||
justify-content space-between
|
||||
align-items center
|
||||
flex-wrap wrap
|
||||
height -webkit-fill-available
|
||||
height 40%
|
||||
|
||||
+maxWidth1300()
|
||||
height 70%
|
||||
|
||||
div
|
||||
display flex
|
||||
flex-direction column
|
||||
margin .5rem 2rem .5rem 0
|
||||
|
||||
.selfInfo-title
|
||||
opacity .8
|
||||
font-size .6rem
|
||||
line-height 1
|
||||
margin-bottom 8px
|
||||
|
||||
.selfInfo-content
|
||||
font-weight 700
|
||||
font-size 34px
|
||||
line-height 1
|
||||
@@ -0,0 +1,25 @@
|
||||
.author-content-item.personalities
|
||||
overflow hidden
|
||||
position relative
|
||||
width 59.5%
|
||||
+maxWidth768()
|
||||
min-height 360px
|
||||
|
||||
.title2
|
||||
font-size 36px
|
||||
font-weight 700
|
||||
line-height 1.1
|
||||
|
||||
.image
|
||||
position absolute
|
||||
right -40px
|
||||
bottom -10rem
|
||||
transition transform 2s cubic-bezier(.13, .45, .21, 1.02)
|
||||
user-select none
|
||||
|
||||
+maxWidth768()
|
||||
right -70px
|
||||
|
||||
&:hover
|
||||
.image
|
||||
transform rotate(-10deg)
|
||||
@@ -0,0 +1,114 @@
|
||||
#about-page
|
||||
.author-content-item
|
||||
&.single.reward
|
||||
overflow unset
|
||||
.author-content-item
|
||||
.author-content-item-title
|
||||
color var(--efu-red)
|
||||
|
||||
.reward-list-updateDate
|
||||
color var(--efu-gray)
|
||||
font-size 14px
|
||||
|
||||
.author-content-item-description
|
||||
font-size 16px
|
||||
margin-top .5rem
|
||||
|
||||
.reward-list-all
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
flex-direction row
|
||||
margin 1rem -.25rem .5rem
|
||||
|
||||
.post-reward
|
||||
position absolute
|
||||
right 2rem
|
||||
top 2rem
|
||||
|
||||
.reward-main
|
||||
top 60px
|
||||
right 0
|
||||
left auto
|
||||
bottom auto
|
||||
width fit-content
|
||||
|
||||
.reward-all::before
|
||||
bottom auto
|
||||
top -16px
|
||||
|
||||
.reward-button
|
||||
padding 8px 12px
|
||||
background var(--efu-red)
|
||||
border-radius 12px
|
||||
z-index 1
|
||||
box-shadow initial
|
||||
width fit-content
|
||||
height fit-content
|
||||
line-height 2
|
||||
|
||||
+maxWidth768()
|
||||
display none
|
||||
|
||||
&:hover
|
||||
.reward-button
|
||||
filter brightness(1.1)
|
||||
|
||||
.reward-list-item
|
||||
padding 1rem
|
||||
border-radius 12px
|
||||
border var(--style-border-always)
|
||||
width calc((100% / 6) - .5rem)
|
||||
margin 0 .25rem .5rem .25rem
|
||||
box-shadow var(--efu-shadow-border)
|
||||
flex-direction column
|
||||
justify-content space-between
|
||||
|
||||
+maxWidth1200()
|
||||
width calc((100% / 4) - .5rem)
|
||||
|
||||
+maxWidth900()
|
||||
width calc((100% / 2) - .5rem)
|
||||
|
||||
+maxWidth768()
|
||||
width 100%
|
||||
|
||||
.reward-list-item-name
|
||||
font-size 1rem
|
||||
font-weight 700
|
||||
line-height 1
|
||||
margin-bottom .5rem
|
||||
white-space nowrap
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
|
||||
.reward-list-bottom-group
|
||||
display flex
|
||||
align-items center
|
||||
justify-content space-between
|
||||
|
||||
.reward-list-item-money
|
||||
padding 4px
|
||||
background var(--efu-fontcolor)
|
||||
color var(--efu-card-bg)
|
||||
font-size 12px
|
||||
line-height 1
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
border-radius 4px
|
||||
margin-right 4px
|
||||
white-space nowrap
|
||||
|
||||
.solitude
|
||||
font-size 14px
|
||||
margin-right 4px
|
||||
|
||||
.reward-list-item-time
|
||||
font-size 12px
|
||||
color var(--efu-secondtext)
|
||||
white-space nowrap
|
||||
|
||||
.reward-list-tips
|
||||
p
|
||||
font-size 12px
|
||||
color var(--efu-secondtext)
|
||||
@@ -0,0 +1,75 @@
|
||||
#about-page
|
||||
.author-content-item.skills
|
||||
display flex
|
||||
justify-content center
|
||||
align-items flex-start
|
||||
flex-direction column
|
||||
width 49.5%
|
||||
min-height 450px
|
||||
|
||||
.tags-group-all
|
||||
display flex
|
||||
transform rotate(0)
|
||||
transition .3s
|
||||
|
||||
.tags-group-wrapper
|
||||
margin-top 40px
|
||||
display flex
|
||||
flex-wrap nowrap
|
||||
animation rowleft 60s linear infinite
|
||||
|
||||
.skills-style-group
|
||||
position relative
|
||||
|
||||
.skills-list
|
||||
display flex
|
||||
opacity 0
|
||||
transition .3s
|
||||
position absolute
|
||||
width 100%
|
||||
top 0
|
||||
left 0
|
||||
flex-wrap wrap
|
||||
flex-direction row
|
||||
margin-top 10px
|
||||
|
||||
&:hover
|
||||
.skills-style-group
|
||||
.tags-group-all
|
||||
opacity 0
|
||||
|
||||
.skills-list
|
||||
opacity 1
|
||||
|
||||
.skill-info
|
||||
display flex
|
||||
align-items center
|
||||
margin-right 10px
|
||||
margin-top 10px
|
||||
background var(--efu-background)
|
||||
border-radius 40px
|
||||
padding 4px 12px 4px 8px
|
||||
border var(--style-border)
|
||||
box-shadow var(--efu-shadow-border)
|
||||
|
||||
.etc
|
||||
margin-right 10px
|
||||
margin-top 10px
|
||||
|
||||
.skill-icon
|
||||
width 32px
|
||||
height 32px
|
||||
border-radius 32px
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
margin-right 8px
|
||||
user-select none
|
||||
|
||||
img
|
||||
width 18px
|
||||
height 18px
|
||||
|
||||
.skill-name
|
||||
font-weight 700
|
||||
line-height 1
|
||||
@@ -0,0 +1,55 @@
|
||||
#about-page
|
||||
.author-content-item
|
||||
.card-content
|
||||
z-index 2
|
||||
|
||||
.about-statistic
|
||||
min-height 380px
|
||||
width 39.5%
|
||||
background-size cover
|
||||
color var(--efu-white)
|
||||
overflow hidden
|
||||
|
||||
&::after
|
||||
box-shadow 0 -159px 173px 71px #0f1114 inset
|
||||
position absolute
|
||||
content ''
|
||||
width 100%
|
||||
height 100%
|
||||
top 0
|
||||
left 0
|
||||
|
||||
#statistic
|
||||
font-size 16px
|
||||
border-radius 15px
|
||||
width 100%
|
||||
color var(--efu-white)
|
||||
display flex
|
||||
justify-content space-between
|
||||
flex-direction row
|
||||
flex-wrap wrap
|
||||
margin-top 4px
|
||||
margin-bottom 2rem
|
||||
|
||||
div
|
||||
display flex
|
||||
justify-content space-between
|
||||
flex-direction column
|
||||
width 50%
|
||||
margin-bottom .5rem
|
||||
|
||||
span:first-child
|
||||
opacity .8
|
||||
font-size .6rem
|
||||
|
||||
span:last-child
|
||||
font-weight 700
|
||||
font-size 34px
|
||||
line-height 1
|
||||
white-space nowrap
|
||||
|
||||
.banner-button
|
||||
background var(--efu-white-op)
|
||||
|
||||
.banner-button:hover
|
||||
background var(--efu-theme)
|
||||
@@ -0,0 +1,56 @@
|
||||
.percentage-label
|
||||
position absolute
|
||||
left 0
|
||||
font-size 14px
|
||||
color var(--efu-card-bg)
|
||||
font-weight bold
|
||||
top 10px
|
||||
white-space nowrap
|
||||
transition left 0.5s linear
|
||||
visibility hidden
|
||||
|
||||
.time-labels
|
||||
display flex
|
||||
justify-content space-between
|
||||
width 100%
|
||||
|
||||
> div
|
||||
font-size 14px
|
||||
color var(--efu-fontcolor)
|
||||
|
||||
.tenyear-timeline
|
||||
width 100%
|
||||
background-color var(--efu-background)
|
||||
position relative
|
||||
overflow hidden
|
||||
margin-bottom 20px
|
||||
border-radius 0.5rem
|
||||
height 2.5rem
|
||||
|
||||
.progress
|
||||
width 0
|
||||
height 100%
|
||||
background-color var(--efu-main)
|
||||
position absolute
|
||||
animation-delay -0.1s
|
||||
border-radius 0.5rem
|
||||
animation renamedProgressAnimation 2s linear forwards
|
||||
|
||||
.past-time
|
||||
animation renamedPastTimeAnimation 3s linear forwards
|
||||
width 2px
|
||||
height 20px
|
||||
position absolute
|
||||
transform-origin left
|
||||
|
||||
@keyframes renamedProgressAnimation
|
||||
0%
|
||||
width 0
|
||||
100%
|
||||
width var(--progress-percentage, 0)
|
||||
|
||||
@keyframes renamedPastTimeAnimation
|
||||
0%
|
||||
transform scaleX(0)
|
||||
100%
|
||||
transform scaleX(var(--past-time-percentage, 0))
|
||||
Reference in New Issue
Block a user