Hexo个人博客
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

406 lines
7.3 KiB

#page-header
position: relative
width: 100%
background-color: $light-blue
background-position: center center
background-size: cover
background-repeat: no-repeat
transition: all .5s
if hexo-config('mask.header')
&:not(.not-top-img):before
position: absolute
width: 100%
height: 100%
background-color: var(--mark-bg)
content: ''
// index
&.full_page
height: $index_top_img_height
background-attachment: fixed
#site-info
position: absolute
top: $index_site_info_top
padding: 0 10px
width: 100%
#site-title,
#site-subtitle,
#scroll-down .scroll-down-effects
text-align: center
text-shadow: 2px 2px 4px rgba(0, 0, 0, .15)
line-height: 1.5
#site-title
margin: 0
color: var(--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
text-align: center
+maxWidth768()
display: block
.social-icon
margin: 0 10px
color: var(--light-grey)
text-shadow: 2px 2px 4px rgba(0, 0, 0, .15)
font-size: 1.43em
#scroll-down
position: absolute
bottom: 10px
width: 100%
cursor: pointer
.scroll-down-effects
position: relative
width: 100%
color: var(--light-grey)
font-size: 20px
// page
&.not-home-page
height: 400px
+maxWidth768()
height: 280px
#page-site-info
position: absolute
top: 200px
padding: 0 10px
width: 100%
+maxWidth768()
top: 140px
// post
&.post-bg
height: 400px
+maxWidth768()
height: 360px
#post-info
position: absolute
bottom: 100px
padding: 0 8%
width: 100%
text-align: center
+maxWidth900()
bottom: 30px
text-align: left
+maxWidth768()
bottom: 22px
padding: 0 22px
&.not-top-img
margin-bottom: 10px
height: 60px
background: 0
#nav
background: rgba(255, 255, 255, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)
a,
.site-name
color: var(--font-color)
text-shadow: none
&.nav-fixed
#nav
position: fixed
top: -60px
z-index: 91
background: rgba(255, 255, 255, .8)
box-shadow: 0 5px 6px -5px alpha($grey, .6)
transition: transform .2s ease-in-out, opacity .2s ease-in-out
#blog-info
color: var(--font-color)
&:hover
color: $light-blue
.site-name
text-shadow: none
a,
#toggle-menu
color: var(--font-color)
text-shadow: none
&:hover
color: $light-blue
&.fixed
#nav
top: 0
transition: all .5s
&.nav-visible:not(.fixed)
#nav
transition: all .5s
transform: translate3d(0, 100%, 0)
& + .layout
& > .aside-content > .sticky_layout
top: 70px
transition: top .5s
&.fixed
#nav
position: fixed
& + .layout
& > .aside-content > .sticky_layout
top: 70px
transition: top .5s
#card-toc
.toc-content
max-height: calc(100vh - 170px)
#page
h1.page-title
margin: 8px 0 20px
// for not top_img
#post
& > #post-info
margin-bottom: 30px
.post-title
padding-bottom: 4px
border-bottom: 1px solid var(--light-grey)
color: var(--text-highlight-color)
.post-edit-link
float: right
#post-meta,
#post-meta a
color: #78818a
#post-info
.post-title
@extend .limit-more-line
margin-bottom: 8px
color: var(--white)
font-weight: normal
font-size: 2.5em
line-height: 1.5
-webkit-line-clamp: 3
+maxWidth768()
font-size: 2.1em
.post-edit-link
padding-left: 10px
#post-meta
color: var(--light-grey)
font-size: 95%
+minWidth768()
> .meta-secondline
> span:first-child
display: none
+maxWidth768()
font-size: 90%
> .meta-firstline,
> .meta-secondline
display: inline
.post-meta
&-separator
margin: 0 5px
&-icon
margin-right: 4px
&-label
if hexo-config('post_meta.post.label')
margin-right: 4px
else
display: none
a
color: var(--light-grey)
transition: all .3s ease-out
&:hover
color: $text-hover
text-decoration: underline
if hexo-config('post_meta.post.date_format') == 'relative'
time
display: none
#nav
position: absolute
top: 0
z-index: 90
display: flex
align-items: center
padding: 0 36px
width: 100%
height: 60px
font-size: 1.3em
opacity: 0
transition: all .5s
+maxWidth768()
padding: 0 16px
&.show
opacity: 1
#blog-info
flex: 1
color: var(--light-grey)
@extend .limit-one-line
.site-icon
margin-right: 6px
height: 36px
vertical-align: middle
#toggle-menu
display: none
padding: 2px 0 0 6px
vertical-align: top
&:hover
color: var(--white)
a
color: var(--light-grey)
&:hover
color: var(--white)
.site-name
text-shadow: 2px 2px 4px rgba($dark-black, .15)
font-weight: bold
.menus_items
display: inline
.menus_item
position: relative
display: inline-block
padding: 0 0 0 14px
&:hover
.menus_item_child
display: block
& > a > i:last-child
transform: rotate(180deg)
& > a > i:last-child
padding: 4px
transition: transform .3s
.menus_item_child
position: absolute
right: 0
display: none
margin-top: 8px
padding: 0
width: max-content
border-radius: 5px
background-color: var(--sidebar-bg)
box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
animation: sub_menus .3s .1s ease both
&:before
position: absolute
top: -8px
left: 0
width: 100%
height: 20px
content: ''
li
list-style: none
&:hover
background: var(--text-bg-hover)
&:first-child
border-top-left-radius: 5px
border-top-right-radius: 5px
&:last-child
border-bottom-right-radius: 5px
border-bottom-left-radius: 5px
a
display: inline-block
padding: 8px 16px
width: 100%
color: var(--font-color) !important
text-shadow: none !important
&.hide-menu
#toggle-menu
display: inline-block !important
.site-page
font-size: inherit
.menus_items
display: none
#search-button span
display: none
#search-button
display: inline
padding: 0 0 0 14px
.site-page
position: relative
padding-bottom: 6px
text-shadow: 1px 1px 2px rgba($dark-black, .3)
font-size: .78em
cursor: pointer
&:not(.child)
&:after
position: absolute
bottom: 0
left: 0
z-index: -1
width: 0
height: 3px
background-color: lighten($theme-color, 30%)
content: ''
transition: all .3s ease-in-out
&:hover
&:after
width: 100%