mirror of
https://github.com/KivotosRailway/website.git
synced 2026-11-03 19:07:56 +09:00
897 lines
16 KiB
Stylus
897 lines
16 KiB
Stylus
#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 |