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,897 @@
|
||||
#page-header
|
||||
position relative
|
||||
width 100%
|
||||
transition all .5s ease 0s
|
||||
display flex
|
||||
justify-content center
|
||||
|
||||
&.not-top-img
|
||||
height 60px
|
||||
background 0 center
|
||||
|
||||
#nav
|
||||
transition .3s
|
||||
background var(--efu-card-bg)
|
||||
|
||||
a
|
||||
color var(--efu-fontcolor)
|
||||
|
||||
&:hover
|
||||
color var(--efu-card-bg)
|
||||
|
||||
&:not(.nav-fixed)
|
||||
#nav
|
||||
background var(--efu-none)
|
||||
transition .3s
|
||||
|
||||
+maxWidth768()
|
||||
transition 0s
|
||||
|
||||
#page-header
|
||||
#site-title
|
||||
margin 0
|
||||
color var(--efu-white)
|
||||
font-size 1.85em
|
||||
|
||||
+minWidth768()
|
||||
font-size 2.85em
|
||||
|
||||
#site-subtitle
|
||||
color var(--light-grey)
|
||||
font-size 1.15em
|
||||
|
||||
+minWidth768()
|
||||
font-size 1.72em
|
||||
|
||||
#site_social_icons
|
||||
display none
|
||||
margin 0 auto
|
||||
width 15rem
|
||||
text-align center
|
||||
|
||||
+maxWidth768()
|
||||
display block
|
||||
|
||||
.social-icon
|
||||
margin 0 .5rem
|
||||
color var(--light-grey)
|
||||
font-size 1.43em
|
||||
cursor pointer
|
||||
|
||||
#scroll-down
|
||||
position absolute
|
||||
bottom 0
|
||||
width 100%
|
||||
cursor pointer
|
||||
display none
|
||||
|
||||
.scroll-down-effects
|
||||
animation: 1.5s ease 0s infinite normal none running scroll-down-effect
|
||||
position relative
|
||||
width 100%
|
||||
color var(--light-grey)
|
||||
font-size 30px
|
||||
|
||||
&.not-home-page
|
||||
height 20rem
|
||||
|
||||
+maxWidth768()
|
||||
height 14rem
|
||||
|
||||
#page-site-info
|
||||
position absolute
|
||||
top 10rem
|
||||
padding 0 .5rem
|
||||
width 100%
|
||||
|
||||
+maxWidth768()
|
||||
top 7rem
|
||||
|
||||
#nav
|
||||
box-shadow none
|
||||
transition 0.3s
|
||||
display flex
|
||||
justify-content center
|
||||
user-select none
|
||||
|
||||
+maxWidth768()
|
||||
transition 0s
|
||||
|
||||
+maxWidth1400()
|
||||
padding 0
|
||||
|
||||
a
|
||||
&:hover
|
||||
span
|
||||
&.solitude
|
||||
opacity 0
|
||||
|
||||
+maxWidth768()
|
||||
opacity 1
|
||||
|
||||
#nav-group
|
||||
max-width 1400px
|
||||
width 100%
|
||||
display flex
|
||||
position relative
|
||||
padding 0 1.5rem
|
||||
align-items center
|
||||
|
||||
+maxWidth768()
|
||||
width 100%
|
||||
display flex
|
||||
position relative
|
||||
padding 0 12px
|
||||
|
||||
#nav-right
|
||||
position absolute
|
||||
right 0
|
||||
z-index 102
|
||||
display flex
|
||||
flex-direction row
|
||||
height 100%
|
||||
align-items center
|
||||
margin-right 1.5rem
|
||||
overflow hidden
|
||||
gap .5rem
|
||||
|
||||
+maxWidth768()
|
||||
margin-right 12px
|
||||
|
||||
div
|
||||
padding 0
|
||||
|
||||
.nav-button
|
||||
a
|
||||
height 35px
|
||||
width 35px
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
border-radius 40px
|
||||
|
||||
&.totopbtn
|
||||
width 25px
|
||||
height 25px
|
||||
border-radius 40px
|
||||
background var(--efu-fontcolor)
|
||||
color var(--efu-card-bg)
|
||||
position absolute
|
||||
top 5px
|
||||
right 5px
|
||||
transition .3s
|
||||
|
||||
&.console_switchbutton
|
||||
padding 4px 8px
|
||||
|
||||
&.long
|
||||
a
|
||||
&.totopbtn
|
||||
width 70px
|
||||
|
||||
&:hover
|
||||
a
|
||||
&.totopbtn
|
||||
background var(--efu-lighttext)
|
||||
|
||||
&:not(.long):hover
|
||||
a
|
||||
&.totopbtn
|
||||
width 35px
|
||||
height 35px
|
||||
top 0
|
||||
right 0
|
||||
|
||||
&.nav-fixed
|
||||
#nav
|
||||
position fixed
|
||||
top 0
|
||||
transition .3s
|
||||
box-shadow none
|
||||
background var(--efu-card-bg)
|
||||
outline 1px solid var(--efu-card-border)
|
||||
|
||||
#menus
|
||||
+minWidth900()
|
||||
z-index 100
|
||||
|
||||
& > div
|
||||
&.menus_items
|
||||
transition .3s
|
||||
height 40px
|
||||
margin auto 0
|
||||
|
||||
#menus[style*="padding-right: 300px;"]
|
||||
.menus_items
|
||||
transform translateX(-150px)
|
||||
|
||||
#page-name
|
||||
+minWidth900()
|
||||
z-index 101
|
||||
transition .3s
|
||||
top 10px
|
||||
|
||||
&-text
|
||||
+minWidth900()
|
||||
display inline
|
||||
opacity 1
|
||||
transition .3s
|
||||
line-height 1
|
||||
|
||||
&:hover
|
||||
&:after
|
||||
+minWidth900()
|
||||
opacity 1
|
||||
line-height 36px
|
||||
|
||||
div.menus_items
|
||||
+minWidth900()
|
||||
transition .15s
|
||||
position relative
|
||||
top -60px
|
||||
|
||||
&.nav-visible
|
||||
#nav
|
||||
#page-name
|
||||
+minWidth900()
|
||||
z-index 100
|
||||
top 60px
|
||||
transition .3s
|
||||
|
||||
&-text
|
||||
+minWidth900()
|
||||
display inline
|
||||
transition .15s
|
||||
|
||||
div.menus_items
|
||||
+minWidth900()
|
||||
opacity 1
|
||||
transition .15s
|
||||
position relative
|
||||
top: 0
|
||||
|
||||
#menus
|
||||
+minWidth900()
|
||||
z-index 101
|
||||
|
||||
#travellings_button
|
||||
+maxWidth768()
|
||||
opacity 0
|
||||
|
||||
&.no-top-img
|
||||
margin-bottom 0
|
||||
|
||||
&:not(.nav-fixed)
|
||||
#percent
|
||||
transition .3s
|
||||
|
||||
#nav-right #nav-totop
|
||||
width 0
|
||||
transform scale(0)
|
||||
margin-left 0
|
||||
overflow hidden
|
||||
transition .3s ease-in
|
||||
|
||||
#page-header #scroll-down .scroll-down-effects,
|
||||
#page-header #site-subtitle, #page-header #site-title
|
||||
text-align center
|
||||
line-height 1.5
|
||||
|
||||
#page-header.nav-fixed > #nav,
|
||||
#page-header.not-top-img > #nav
|
||||
box-shadow none
|
||||
|
||||
#nav
|
||||
padding 0
|
||||
position absolute
|
||||
top 0
|
||||
z-index 10
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
-webkit-box-align center
|
||||
align-items center
|
||||
width 100%
|
||||
height 60px
|
||||
font-size 1.3em
|
||||
opacity 0
|
||||
transition all .5s ease 0s
|
||||
outline 1px solid var(--efu-none)
|
||||
justify-content space-between
|
||||
|
||||
+maxWidth768()
|
||||
padding 0
|
||||
|
||||
&.show
|
||||
top 0
|
||||
transition .2s
|
||||
position fixed
|
||||
opacity 1
|
||||
filter none
|
||||
|
||||
#toggle-menu
|
||||
display none
|
||||
padding .1rem 0 0 .3rem
|
||||
vertical-align top
|
||||
|
||||
+maxWidth768()
|
||||
display inline-block
|
||||
|
||||
&:hover
|
||||
color var(--efu-white)
|
||||
|
||||
#site-name
|
||||
padding 0
|
||||
transition .3s
|
||||
display flex
|
||||
height 35px
|
||||
min-width 50px
|
||||
justify-content center
|
||||
align-items center
|
||||
border-radius 40px
|
||||
cursor pointer
|
||||
|
||||
&:hover
|
||||
@media (hover: hover)
|
||||
i, span, img
|
||||
color var(--efu-card-bg)
|
||||
transition .3s
|
||||
|
||||
+minWidth900()
|
||||
i, span, img
|
||||
opacity 0
|
||||
|
||||
&:after
|
||||
+minWidth900()
|
||||
opacity: 1
|
||||
|
||||
&:after
|
||||
+minWidth900()
|
||||
opacity 0
|
||||
position absolute
|
||||
display flex
|
||||
z-index 1
|
||||
content "\e008"
|
||||
font-family solitude, serif
|
||||
align-items center
|
||||
justify-content center
|
||||
font-size 22px
|
||||
line-height 1
|
||||
color var(--efu-card-bg)
|
||||
|
||||
if hexo-config('site.name.class') == i_class
|
||||
i
|
||||
font-size 16px
|
||||
line-height 35px
|
||||
padding 0 12px
|
||||
|
||||
+maxWidth768()
|
||||
transition .1s
|
||||
|
||||
+minWidth900()
|
||||
opacity 1
|
||||
transition all .3s, color 0s, opacity .3s
|
||||
|
||||
if hexo-config('site.name.class') == text
|
||||
span.title
|
||||
letter-spacing normal
|
||||
font-size 1rem
|
||||
font-weight 700
|
||||
padding 0 5px
|
||||
line-height 2rem
|
||||
+maxWidth768()
|
||||
padding-left 8px
|
||||
|
||||
if hexo-config('site.name.class') == img
|
||||
img
|
||||
max-width 120px
|
||||
max-height 35px
|
||||
padding 4px 8px
|
||||
|
||||
#blog_name
|
||||
flex-wrap nowrap
|
||||
height 60px
|
||||
display flex
|
||||
align-items center
|
||||
z-index 102
|
||||
transition .3s
|
||||
|
||||
a
|
||||
transition .3s
|
||||
color var(--efu-white)
|
||||
padding .3rem .4rem 0
|
||||
border-radius 8px
|
||||
|
||||
&:hover
|
||||
background var(--efu-white-op)
|
||||
transition .3s
|
||||
color var(--efu-white)
|
||||
|
||||
+maxWidth768()
|
||||
background var(--efu-none)
|
||||
box-shadow none
|
||||
transition .3s
|
||||
color var(--efu-fontcolor)
|
||||
|
||||
#menus
|
||||
display flex
|
||||
justify-content center
|
||||
width 100%
|
||||
position absolute
|
||||
height 60px
|
||||
left 0
|
||||
margin 0
|
||||
transform translateZ(0)
|
||||
|
||||
+maxWidth768()
|
||||
display none
|
||||
|
||||
.menus_items
|
||||
position relative
|
||||
width fit-content
|
||||
text-align center
|
||||
left 0
|
||||
right 0
|
||||
top 0
|
||||
display flex
|
||||
flex-direction row
|
||||
justify-content center
|
||||
|
||||
.menus_item
|
||||
padding 0 .4rem
|
||||
display flex
|
||||
flex-direction column
|
||||
align-items center
|
||||
margin auto
|
||||
position relative
|
||||
|
||||
.menus_item_child
|
||||
padding 6px 4px 8px 4px
|
||||
border-radius 100px
|
||||
background-color var(--efu-maskbgdeep)
|
||||
box-shadow var(--efu-shadow-black)
|
||||
border var(--style-border)
|
||||
transition .3s
|
||||
backdrop-filter blur(20px)
|
||||
top 35px
|
||||
position absolute
|
||||
margin-top 8px
|
||||
white-space nowrap
|
||||
opacity 0
|
||||
pointer-events none
|
||||
transform translateY(-10px) scale(.8)
|
||||
|
||||
li
|
||||
display inline-flex
|
||||
list-style none
|
||||
border-radius 5px
|
||||
margin 0 4px
|
||||
|
||||
#page-header & a
|
||||
letter-spacing 0
|
||||
display flex
|
||||
align-items center
|
||||
border-radius 100px
|
||||
padding .3rem .8rem
|
||||
width 100%
|
||||
color var(--efu-fontcolor)
|
||||
|
||||
&:hover
|
||||
background var(--efu-lighttext)
|
||||
color var(--efu-card-bg)
|
||||
box-shadow var(--efu-shadow-main)
|
||||
margin 0 auto
|
||||
transform scale(1)
|
||||
padding .3rem 1rem
|
||||
|
||||
i
|
||||
&:not(.fa-brands)
|
||||
font-size 22px
|
||||
margin-right 8px
|
||||
line-height 1
|
||||
|
||||
&::before
|
||||
position absolute
|
||||
top -8px
|
||||
left 0
|
||||
width 100%
|
||||
height 20px
|
||||
content ""
|
||||
|
||||
&:before
|
||||
top -10px
|
||||
|
||||
&:hover
|
||||
.menus_item_child
|
||||
display block
|
||||
border var(--style-border-hover)
|
||||
box-shadow var(--efu-shadow-main)
|
||||
opacity 1
|
||||
pointer-events all
|
||||
transform translateY(0) scale(1)
|
||||
|
||||
i
|
||||
&.expand
|
||||
transform rotate(180deg)
|
||||
|
||||
i
|
||||
&.expand
|
||||
padding 4px
|
||||
transition transform .3s ease 0s
|
||||
|
||||
#search-button
|
||||
display inline
|
||||
padding 0 .4rem
|
||||
|
||||
.site-page
|
||||
position relative
|
||||
padding-bottom .3rem
|
||||
font-size .78em
|
||||
cursor pointer
|
||||
|
||||
if hexo-config('nav.group')
|
||||
.back-home-button
|
||||
&:hover
|
||||
+minWidth900()
|
||||
box-shadow var(--efu-shadow-main)
|
||||
cursor pointer
|
||||
|
||||
#page-name
|
||||
&-text
|
||||
+minWidth900()
|
||||
display inline
|
||||
font-weight 700
|
||||
padding 4px 8px
|
||||
opacity 0
|
||||
transition .1s
|
||||
text-overflow ellipsis
|
||||
overflow hidden
|
||||
white-space nowrap
|
||||
position relative
|
||||
text-align center
|
||||
cursor pointer
|
||||
top 0
|
||||
font-size .9rem
|
||||
animation-timing-function ease-in
|
||||
-webkit-animation-timing-function ease-in
|
||||
|
||||
&:hover
|
||||
+minWidth900()
|
||||
color var(--efu-lighttext) !important
|
||||
background var(--efu-none)
|
||||
box-shadow none
|
||||
|
||||
&-mask
|
||||
+maxWidth899()
|
||||
display none !important
|
||||
|
||||
.nav-button
|
||||
cursor pointer
|
||||
|
||||
#site-name
|
||||
.iconfont
|
||||
font-size 20px
|
||||
font-weight 400
|
||||
line-height 48px
|
||||
|
||||
#site-logo
|
||||
width 121px
|
||||
|
||||
#nav-totop
|
||||
position relative
|
||||
width 35px
|
||||
height 35px
|
||||
display flex
|
||||
border-radius 40px
|
||||
transition all .3s ease-in-out
|
||||
align-items center
|
||||
|
||||
&.long
|
||||
width 80px
|
||||
|
||||
.totopbtn
|
||||
padding-top 0
|
||||
|
||||
i
|
||||
position absolute
|
||||
display flex
|
||||
font-size 22px
|
||||
opacity 0
|
||||
line-height 1
|
||||
|
||||
&:hover
|
||||
.totopbtn
|
||||
i
|
||||
opacity 1
|
||||
color var(--efu-card-bg)
|
||||
transition .3s
|
||||
|
||||
#percent
|
||||
opacity 0
|
||||
font-weight 700
|
||||
|
||||
#percent
|
||||
font-size 12px
|
||||
border-radius 35px
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
transition .3s
|
||||
white-space nowrap
|
||||
|
||||
.nav-fixed #nav-totop #percent,
|
||||
.page #nav-totop #percent
|
||||
font-size 12px
|
||||
border-radius 35px
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
transition .3s
|
||||
white-space nowrap
|
||||
|
||||
if hexo-config('nav.group')
|
||||
.back-home-button
|
||||
display flex
|
||||
width 35px
|
||||
height 35px
|
||||
padding 0 !important
|
||||
align-items center
|
||||
justify-content center
|
||||
margin-right 4px
|
||||
transition .3s
|
||||
border-radius 40px
|
||||
|
||||
+maxWidth768()
|
||||
display: none
|
||||
|
||||
i
|
||||
font-size 20px
|
||||
|
||||
&:hover
|
||||
background var(--efu-main)
|
||||
color var(--efu-card-bg)
|
||||
|
||||
.back-menu-list-groups
|
||||
display flex
|
||||
opacity 1
|
||||
top 55px
|
||||
pointer-events auto
|
||||
left 1.5rem
|
||||
transform scale(1)
|
||||
|
||||
+maxWidth768()
|
||||
padding-bottom 8px
|
||||
box-shadow var(--efu-shadow-border)
|
||||
left: 0
|
||||
|
||||
.back-menu-list-group
|
||||
display flex
|
||||
flex-direction column
|
||||
|
||||
.back-menu-list-title
|
||||
margin 8px 0 0 16px
|
||||
transition .3s
|
||||
|
||||
&:hover
|
||||
.back-menu-list-title
|
||||
color var(--efu-lighttext)
|
||||
|
||||
.back-menu-list-groups
|
||||
position absolute
|
||||
top 45px
|
||||
transform scale(.8)
|
||||
transform-origin top left
|
||||
left 1.5rem
|
||||
background-color var(--efu-maskbgdeep)
|
||||
border-radius 12px
|
||||
border var(--style-border)
|
||||
flex-direction column
|
||||
font-size 12px
|
||||
color var(--efu-secondtext)
|
||||
box-shadow var(--efu-shadow-border)
|
||||
transition .3s
|
||||
opacity 0
|
||||
pointer-events none
|
||||
backdrop-filter blur(20px)
|
||||
|
||||
+maxWidth768()
|
||||
left 0
|
||||
|
||||
&:hover
|
||||
border var(--style-border-hover)
|
||||
|
||||
.back-menu-list
|
||||
.back-menu-item
|
||||
width 150px
|
||||
|
||||
.nav-fixed
|
||||
#nav
|
||||
a
|
||||
color var(--efu-fontcolor)
|
||||
transition .3s
|
||||
|
||||
&:hover
|
||||
background var(--efu-lighttext)
|
||||
color var(--efu-card-bg)
|
||||
transition .3s
|
||||
|
||||
#site-name
|
||||
&:hover
|
||||
+minWidth900()
|
||||
background var(--efu-lighttext)
|
||||
|
||||
if hexo-config('nav.group')
|
||||
.back-home-button
|
||||
color var(--efu-fontcolor)
|
||||
|
||||
&:hover
|
||||
background var(--efu-lighttext)
|
||||
color var(--efu-card-bg)
|
||||
|
||||
.menus_item
|
||||
&:hover
|
||||
& >
|
||||
a.site-page
|
||||
background-color var(--efu-lighttext)
|
||||
|
||||
+minWidth768()
|
||||
background-color var(--efu-main)
|
||||
|
||||
.post
|
||||
if hexo-config('nav.group')
|
||||
.back-home-button
|
||||
color var(--efu-white)
|
||||
|
||||
&:hover
|
||||
background var(--efu-white-op)
|
||||
color var(--efu-white)
|
||||
cursor pointer
|
||||
|
||||
#nav
|
||||
#site-name
|
||||
&:hover
|
||||
+minWidth900()
|
||||
align-items center
|
||||
|
||||
&:after
|
||||
color var(--efu-white)
|
||||
|
||||
.nav-fixed
|
||||
#nav
|
||||
#site-name
|
||||
&:after
|
||||
color var(--efu-card-bg)
|
||||
|
||||
.back-menu-list
|
||||
display flex
|
||||
flex-direction row
|
||||
flex-wrap wrap
|
||||
width 340px
|
||||
justify-content space-between
|
||||
|
||||
&::before
|
||||
position absolute
|
||||
top -15px
|
||||
left 0
|
||||
width 100%
|
||||
height 20px
|
||||
content ''
|
||||
|
||||
.back-menu-item
|
||||
display flex
|
||||
align-items center
|
||||
margin 4px 8px
|
||||
padding 4px 8px
|
||||
|
||||
#nav &
|
||||
padding 4px 8px
|
||||
|
||||
#nav &
|
||||
&:hover
|
||||
background var(--efu-lighttext)
|
||||
|
||||
&:hover
|
||||
background var(--efu-lighttext)
|
||||
|
||||
.back-menu-item-text
|
||||
color var(--efu-card-bg)
|
||||
|
||||
.back-menu-item-icon
|
||||
width 24px
|
||||
height 24px
|
||||
border-radius 8px
|
||||
background var(--efu-none)
|
||||
|
||||
.back-menu-item-text
|
||||
font-size 16px
|
||||
transition .3s
|
||||
margin-left .5rem
|
||||
color var(--efu-fontcolor)
|
||||
|
||||
+maxWidth768()
|
||||
font-size 14px
|
||||
|
||||
.page
|
||||
#nav
|
||||
a
|
||||
&:hover
|
||||
color var(--efu-card-bg)
|
||||
background var(--efu-main)
|
||||
transition .3s
|
||||
box-shadow var(--efu-shadow-main)
|
||||
|
||||
#site-name
|
||||
&:hover
|
||||
i
|
||||
color var(--efu-card-bg)
|
||||
|
||||
.menus_item
|
||||
&:hover
|
||||
& > a.site-page
|
||||
+minWidth768()
|
||||
color var(--efu-card-bg) !important
|
||||
background var(--efu-main)
|
||||
box-shadow var(--efu-shadow-main)
|
||||
|
||||
.error
|
||||
#nav
|
||||
a
|
||||
&:hover
|
||||
background var(--efu-main)
|
||||
|
||||
#site-name
|
||||
i
|
||||
+maxWidth768()
|
||||
color var(--efu-fontcolor)
|
||||
|
||||
#weblogo
|
||||
align-self center
|
||||
|
||||
#menus
|
||||
& > div
|
||||
&.menus_items
|
||||
& > div
|
||||
& > a
|
||||
letter-spacing .3rem
|
||||
padding-left .7rem
|
||||
font-weight 700
|
||||
padding-top 0
|
||||
padding-bottom 0
|
||||
height 35px
|
||||
line-height 35px
|
||||
border-radius 40px
|
||||
|
||||
#travellings_button
|
||||
display inline
|
||||
padding 0 .4rem
|
||||
transition .3s
|
||||
|
||||
+maxWidth1200()
|
||||
display none
|
||||
|
||||
#page-name
|
||||
+minWidth900()
|
||||
align-items center
|
||||
display flex
|
||||
border-radius 12px
|
||||
height 40px
|
||||
position absolute
|
||||
top 62px
|
||||
left 0
|
||||
right 0
|
||||
margin auto
|
||||
justify-content center
|
||||
animation-timing-function ease-out
|
||||
-webkit-animation-timing-function ease-out
|
||||
|
||||
#page-name-mask
|
||||
+minWidth900()
|
||||
width 100%
|
||||
height 100%
|
||||
position absolute
|
||||
overflow hidden
|
||||
left 0
|
||||
|
||||
if hexo-config('nav.right.console')
|
||||
#nav-console
|
||||
+maxWidth768()
|
||||
display none
|
||||
Reference in New Issue
Block a user