|
|
@ -1,11 +1,10 @@ |
|
|
|
|
|
|
|
|
|
|
|
#loading-bar-wrapper |
|
|
|
#loading-bar-wrapper |
|
|
|
position: fixed |
|
|
|
position: fixed |
|
|
|
top: 0 |
|
|
|
top: 0 |
|
|
|
left: 0 |
|
|
|
left: 0 |
|
|
|
height: 2px |
|
|
|
height: 2px |
|
|
|
width: 100% |
|
|
|
width: 100% |
|
|
|
z-index: 99999 |
|
|
|
z-index: 9999 |
|
|
|
|
|
|
|
|
|
|
|
#loading-bar |
|
|
|
#loading-bar |
|
|
|
position: fixed |
|
|
|
position: fixed |
|
|
@ -19,7 +18,7 @@ |
|
|
|
$iconW = 32px |
|
|
|
$iconW = 32px |
|
|
|
$iconMargin = 4px |
|
|
|
$iconMargin = 4px |
|
|
|
position: fixed |
|
|
|
position: fixed |
|
|
|
z-index: 9999 |
|
|
|
z-index: 99 |
|
|
|
top: 0 |
|
|
|
top: 0 |
|
|
|
width: 100% |
|
|
|
width: 100% |
|
|
|
line-height: $navbar-height |
|
|
|
line-height: $navbar-height |
|
|
@ -40,7 +39,7 @@ |
|
|
|
a |
|
|
|
a |
|
|
|
&:not([href]) |
|
|
|
&:not([href]) |
|
|
|
cursor: default |
|
|
|
cursor: default |
|
|
|
a.logo |
|
|
|
.title |
|
|
|
color: $color-text |
|
|
|
color: $color-text |
|
|
|
&.no_sidebar |
|
|
|
&.no_sidebar |
|
|
|
.wrapper |
|
|
|
.wrapper |
|
|
@ -52,7 +51,7 @@ |
|
|
|
max-width: 112px |
|
|
|
max-width: 112px |
|
|
|
|
|
|
|
|
|
|
|
.wrapper.sub |
|
|
|
.wrapper.sub |
|
|
|
.logo |
|
|
|
.title |
|
|
|
@media screen and (max-width: $device-mobile) |
|
|
|
@media screen and (max-width: $device-mobile) |
|
|
|
trans() |
|
|
|
trans() |
|
|
|
padding-left: $gap |
|
|
|
padding-left: $gap |
|
|
@ -80,127 +79,37 @@ |
|
|
|
height: $navbar-height |
|
|
|
height: $navbar-height |
|
|
|
line-height: $navbar-height |
|
|
|
line-height: $navbar-height |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nav-main |
|
|
|
.logo |
|
|
|
.title |
|
|
|
txt-ellipsis() |
|
|
|
txt-ellipsis() |
|
|
|
|
|
|
|
flex-shrink: 0 |
|
|
|
padding: 0 $gap*1.5 |
|
|
|
padding: 0 $gap*1.5 |
|
|
|
font-size: $fontsize-h3 |
|
|
|
font-size: $fontsize-h3 |
|
|
|
font-family: $fontfamily-logo |
|
|
|
font-family: $fontfamily-logo |
|
|
|
flex-shrink: 0 |
|
|
|
|
|
|
|
@media screen and (max-width: $device-mobile) |
|
|
|
@media screen and (max-width: $device-mobile) |
|
|
|
padding: 0 $gap |
|
|
|
padding: 0 $gap |
|
|
|
|
|
|
|
|
|
|
|
&.img |
|
|
|
|
|
|
|
padding: 0 $gap 0 0 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
img |
|
|
|
img |
|
|
|
height: 100% |
|
|
|
height: 100% |
|
|
|
|
|
|
|
|
|
|
|
letter-spacing: 0 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
img.logo |
|
|
|
|
|
|
|
padding: 4px 0 |
|
|
|
padding: 4px 0 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nav-sub |
|
|
|
.nav-sub |
|
|
|
max-width: $layout-width |
|
|
|
max-width: $layout-width |
|
|
|
margin: auto |
|
|
|
margin: auto |
|
|
|
@media screen and (min-width: 2000px) |
|
|
|
@media screen and (min-width: 2000px) |
|
|
|
max-width: 55vw |
|
|
|
max-width: 55vw |
|
|
|
.logo |
|
|
|
.title |
|
|
|
font-size: $fontsize-body |
|
|
|
font-size: $fontsize-body |
|
|
|
font-family: $fontfamily |
|
|
|
font-family: $fontfamily |
|
|
|
|
|
|
|
line-height: 1.2 |
|
|
|
|
|
|
|
max-height: $navbar-height |
|
|
|
|
|
|
|
white-space: normal |
|
|
|
flex-shrink: 1 |
|
|
|
flex-shrink: 1 |
|
|
|
@media screen and (max-width: $device-mobile) |
|
|
|
@media screen and (max-width: $device-mobile) |
|
|
|
padding: 0 $gap |
|
|
|
overflow-y: scroll |
|
|
|
letter-spacing: -0.5px |
|
|
|
margin-top: 2px |
|
|
|
padding-top: 1px |
|
|
|
padding: 8px $gap |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.menu |
|
|
|
|
|
|
|
position: relative |
|
|
|
|
|
|
|
height: $navbar-height |
|
|
|
|
|
|
|
trans() |
|
|
|
|
|
|
|
li |
|
|
|
|
|
|
|
position: relative |
|
|
|
|
|
|
|
ul.submenu |
|
|
|
|
|
|
|
z-index: 1 |
|
|
|
|
|
|
|
display: none |
|
|
|
|
|
|
|
position: absolute |
|
|
|
|
|
|
|
background: $color-card |
|
|
|
|
|
|
|
box-shadow: $boxshadow-float |
|
|
|
|
|
|
|
margin-top: -2px - $border-card * 0.5 |
|
|
|
|
|
|
|
border-radius: $border-card * 0.5 |
|
|
|
|
|
|
|
border: 1px solid darken($color-codeblock, 6) |
|
|
|
|
|
|
|
padding: $gap * 0.5 0 |
|
|
|
|
|
|
|
>hr |
|
|
|
|
|
|
|
margin-top: $gap * 0.5 |
|
|
|
|
|
|
|
margin-bottom: $gap * 0.5 |
|
|
|
|
|
|
|
>li |
|
|
|
|
|
|
|
// margin: -1px |
|
|
|
|
|
|
|
white-space: nowrap |
|
|
|
|
|
|
|
word-break: keep-all |
|
|
|
|
|
|
|
&.header |
|
|
|
|
|
|
|
font-size: $fontsize-footnote |
|
|
|
|
|
|
|
font-weight: bold |
|
|
|
|
|
|
|
line-height: 2em |
|
|
|
|
|
|
|
color: $color-meta |
|
|
|
|
|
|
|
margin: $gap * 0.5 $gap $gap * 0.25 |
|
|
|
|
|
|
|
ul |
|
|
|
|
|
|
|
margin-left: 0 |
|
|
|
|
|
|
|
display: none |
|
|
|
|
|
|
|
margin-top: 0 - 32px - $gap * 0.5 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
>li>a |
|
|
|
|
|
|
|
font-size: $fontsize-meta |
|
|
|
|
|
|
|
font-weight: bold |
|
|
|
|
|
|
|
line-height: 33px |
|
|
|
|
|
|
|
padding: 0 $gap |
|
|
|
|
|
|
|
height: 32px |
|
|
|
|
|
|
|
border-left: $border-line solid transparent |
|
|
|
|
|
|
|
&:hover,&.active,&:active |
|
|
|
|
|
|
|
color: $color-theme |
|
|
|
|
|
|
|
border-left: $border-line solid $color-theme |
|
|
|
|
|
|
|
border-bottom: none |
|
|
|
|
|
|
|
>i |
|
|
|
|
|
|
|
margin-right: 4px |
|
|
|
|
|
|
|
&:hover |
|
|
|
|
|
|
|
>ul.submenu |
|
|
|
|
|
|
|
display: block |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ul>li>a |
|
|
|
|
|
|
|
trans() |
|
|
|
|
|
|
|
display: block |
|
|
|
|
|
|
|
padding: 0 8px |
|
|
|
|
|
|
|
color: alpha($color-text, 85%) |
|
|
|
|
|
|
|
i.music |
|
|
|
|
|
|
|
animation: rotate-effect 1.5s linear infinite |
|
|
|
|
|
|
|
@keyframes rotate-effect |
|
|
|
|
|
|
|
0% |
|
|
|
|
|
|
|
transform: rotate(0) |
|
|
|
|
|
|
|
25% |
|
|
|
|
|
|
|
transform: rotate(90deg) |
|
|
|
|
|
|
|
50% |
|
|
|
|
|
|
|
transform: rotate(180deg) |
|
|
|
|
|
|
|
75% |
|
|
|
|
|
|
|
transform: rotate(27 0deg) |
|
|
|
|
|
|
|
100% |
|
|
|
|
|
|
|
transform: rotate(360deg) |
|
|
|
|
|
|
|
&.current |
|
|
|
|
|
|
|
border-bottom: $border-line solid alpha($color-theme, 80%) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&:hover |
|
|
|
|
|
|
|
color: $color-theme |
|
|
|
|
|
|
|
border-bottom: $border-line solid $color-theme |
|
|
|
|
|
|
|
background: bgcolor($color-theme) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&:active,&.active |
|
|
|
|
|
|
|
color: $color-theme |
|
|
|
|
|
|
|
border-bottom: $border-line solid $color-theme |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: $device-mobile) |
|
|
|
|
|
|
|
display:none |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.switcher |
|
|
|
.switcher |
|
|
@ -212,7 +121,7 @@ |
|
|
|
@media screen and (max-width: $device-tablet) |
|
|
|
@media screen and (max-width: $device-tablet) |
|
|
|
.s-toc |
|
|
|
.s-toc |
|
|
|
display: flex |
|
|
|
display: flex |
|
|
|
&>li |
|
|
|
>li |
|
|
|
height: $navbar-height - $gap |
|
|
|
height: $navbar-height - $gap |
|
|
|
trans() |
|
|
|
trans() |
|
|
|
margin: 2px |
|
|
|
margin: 2px |
|
|
@ -220,8 +129,7 @@ |
|
|
|
@media screen and (max-width: $device-mobile) |
|
|
|
@media screen and (max-width: $device-mobile) |
|
|
|
margin: 0 1px |
|
|
|
margin: 0 1px |
|
|
|
height: $height |
|
|
|
height: $height |
|
|
|
|
|
|
|
>a |
|
|
|
a |
|
|
|
|
|
|
|
display: flex |
|
|
|
display: flex |
|
|
|
justify-content: center |
|
|
|
justify-content: center |
|
|
|
align-items: center |
|
|
|
align-items: center |
|
|
@ -229,9 +137,13 @@ |
|
|
|
height: $height |
|
|
|
height: $height |
|
|
|
padding: .85em 1.1em |
|
|
|
padding: .85em 1.1em |
|
|
|
border-radius: 100px |
|
|
|
border-radius: 100px |
|
|
|
|
|
|
|
border: none |
|
|
|
trans() |
|
|
|
trans() |
|
|
|
color: $color-theme |
|
|
|
color: $color-theme |
|
|
|
|
|
|
|
&:hover |
|
|
|
|
|
|
|
border: none |
|
|
|
&.active,&:active |
|
|
|
&.active,&:active |
|
|
|
|
|
|
|
border: none |
|
|
|
background: bgcolor($color-theme) |
|
|
|
background: bgcolor($color-theme) |
|
|
|
@media screen and (max-width: $device-mobile) |
|
|
|
@media screen and (max-width: $device-mobile) |
|
|
|
width: $iconW |
|
|
|
width: $iconW |
|
|
@ -309,6 +221,112 @@ |
|
|
|
$offset = 3 * $gap + 2 * $iconW |
|
|
|
$offset = 3 * $gap + 2 * $iconW |
|
|
|
width: "calc(100% - %s)" % $offset |
|
|
|
width: "calc(100% - %s)" % $offset |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ul.list-h,ul.list-v |
|
|
|
|
|
|
|
li:hover |
|
|
|
|
|
|
|
>ul.list-v |
|
|
|
|
|
|
|
display: block |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ul.list-h |
|
|
|
|
|
|
|
display: flex |
|
|
|
|
|
|
|
align-items: center |
|
|
|
|
|
|
|
height: 100% |
|
|
|
|
|
|
|
&>li |
|
|
|
|
|
|
|
height: 100% |
|
|
|
|
|
|
|
position: relative |
|
|
|
|
|
|
|
justify-content: center |
|
|
|
|
|
|
|
>a |
|
|
|
|
|
|
|
// border-top: $border-line solid transparent |
|
|
|
|
|
|
|
border-bottom: $border-line solid transparent |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ul.list-v |
|
|
|
|
|
|
|
z-index: 1 |
|
|
|
|
|
|
|
display: none |
|
|
|
|
|
|
|
position: absolute |
|
|
|
|
|
|
|
background: $color-card |
|
|
|
|
|
|
|
box-shadow: $boxshadow-float |
|
|
|
|
|
|
|
margin-top: -2px - $border-card * 0.5 |
|
|
|
|
|
|
|
border-radius: $border-card * 0.5 |
|
|
|
|
|
|
|
border: 1px solid darken($color-codeblock, 6) |
|
|
|
|
|
|
|
padding: $gap * 0.5 0 |
|
|
|
|
|
|
|
>hr |
|
|
|
|
|
|
|
margin-top: $gap * 0.5 |
|
|
|
|
|
|
|
margin-bottom: $gap * 0.5 |
|
|
|
|
|
|
|
>li |
|
|
|
|
|
|
|
white-space: nowrap |
|
|
|
|
|
|
|
word-break: keep-all |
|
|
|
|
|
|
|
&.header |
|
|
|
|
|
|
|
font-size: $fontsize-footnote |
|
|
|
|
|
|
|
font-weight: bold |
|
|
|
|
|
|
|
line-height: 2em |
|
|
|
|
|
|
|
color: $color-meta |
|
|
|
|
|
|
|
margin: $gap * 0.5 $gap $gap * 0.25 |
|
|
|
|
|
|
|
ul |
|
|
|
|
|
|
|
margin-left: 0 |
|
|
|
|
|
|
|
display: none |
|
|
|
|
|
|
|
margin-top: 0 - 32px - $gap * 0.5 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
>li>a |
|
|
|
|
|
|
|
font-size: $fontsize-meta |
|
|
|
|
|
|
|
font-weight: bold |
|
|
|
|
|
|
|
line-height: 33px |
|
|
|
|
|
|
|
padding: 0 $gap |
|
|
|
|
|
|
|
height: 32px |
|
|
|
|
|
|
|
border-left: $border-line solid transparent |
|
|
|
|
|
|
|
border-right: $border-line solid transparent |
|
|
|
|
|
|
|
&:hover,&.active,&:active |
|
|
|
|
|
|
|
color: $color-theme |
|
|
|
|
|
|
|
border-left: $border-line solid $color-theme |
|
|
|
|
|
|
|
border-bottom: none |
|
|
|
|
|
|
|
>i |
|
|
|
|
|
|
|
margin-right: 4px |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.menu,.menu-phone |
|
|
|
|
|
|
|
position: relative |
|
|
|
|
|
|
|
trans() |
|
|
|
|
|
|
|
li |
|
|
|
|
|
|
|
position: relative |
|
|
|
|
|
|
|
@media screen and (max-width: $device-mobile) |
|
|
|
|
|
|
|
display:none |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ul>li>a |
|
|
|
|
|
|
|
trans() |
|
|
|
|
|
|
|
display: block |
|
|
|
|
|
|
|
padding: 0 8px |
|
|
|
|
|
|
|
color: alpha($color-text, 85%) |
|
|
|
|
|
|
|
i.music |
|
|
|
|
|
|
|
animation: rotate-effect 1.5s linear infinite |
|
|
|
|
|
|
|
@keyframes rotate-effect |
|
|
|
|
|
|
|
0% |
|
|
|
|
|
|
|
transform: rotate(0) |
|
|
|
|
|
|
|
25% |
|
|
|
|
|
|
|
transform: rotate(90deg) |
|
|
|
|
|
|
|
50% |
|
|
|
|
|
|
|
transform: rotate(180deg) |
|
|
|
|
|
|
|
75% |
|
|
|
|
|
|
|
transform: rotate(27 0deg) |
|
|
|
|
|
|
|
100% |
|
|
|
|
|
|
|
transform: rotate(360deg) |
|
|
|
|
|
|
|
&.current |
|
|
|
|
|
|
|
border-left-color: alpha($color-theme, 80%) |
|
|
|
|
|
|
|
border-bottom-color: alpha($color-theme, 80%) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&:hover |
|
|
|
|
|
|
|
color: $color-theme |
|
|
|
|
|
|
|
border-left-color: $color-theme |
|
|
|
|
|
|
|
border-bottom-color: $color-theme |
|
|
|
|
|
|
|
background: bgcolor($color-theme) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&:active,&.active |
|
|
|
|
|
|
|
color: $color-theme |
|
|
|
|
|
|
|
border-left-color: $color-theme |
|
|
|
|
|
|
|
border-bottom-color: $color-theme |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.menu-phone li ul.list-v |
|
|
|
|
|
|
|
right: "calc(100% - 0.5 * %s)" % $gap |
|
|
|
|
|
|
|
ul |
|
|
|
|
|
|
|
right: "calc(100% - 0.5 * %s)" % $gap |
|
|
|
|
|
|
|
|
|
|
|
.l_header .wrapper |
|
|
|
.l_header .wrapper |
|
|
|
if hexo-config('style.navbar.width') == 'auto' |
|
|
|
if hexo-config('style.navbar.width') == 'auto' |
|
|
|
max-width: $layout-width |
|
|
|
max-width: $layout-width |
|
|
@ -318,50 +336,32 @@ |
|
|
|
.menu |
|
|
|
.menu |
|
|
|
flex: 1 1 auto |
|
|
|
flex: 1 1 auto |
|
|
|
margin: 0 $gap 0 0 |
|
|
|
margin: 0 $gap 0 0 |
|
|
|
.submenu ul |
|
|
|
.list-v ul |
|
|
|
left: "calc(100% - 0.5 * %s)" % $gap |
|
|
|
left: "calc(100% - 0.5 * %s)" % $gap |
|
|
|
else |
|
|
|
else |
|
|
|
a.logo |
|
|
|
.title |
|
|
|
margin-right: auto |
|
|
|
margin-right: auto |
|
|
|
.m_search |
|
|
|
.m_search |
|
|
|
margin-right: $gap |
|
|
|
margin-right: $gap |
|
|
|
|
|
|
|
.menu li ul.list-v |
|
|
|
.menu li ul.submenu |
|
|
|
|
|
|
|
right: 0 |
|
|
|
right: 0 |
|
|
|
ul |
|
|
|
ul |
|
|
|
right: "calc(100% - 0.5 * %s)" % $gap |
|
|
|
right: "calc(100% - 0.5 * %s)" % $gap |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ul.menu-phone |
|
|
|
.menu-phone |
|
|
|
display: none |
|
|
|
display: none |
|
|
|
|
|
|
|
margin-top: $gap |
|
|
|
|
|
|
|
right: 0 |
|
|
|
|
|
|
|
ul |
|
|
|
|
|
|
|
right: "calc(100% - 0.5 * %s)" % $gap |
|
|
|
@media screen and (max-width: $device-mobile) |
|
|
|
@media screen and (max-width: $device-mobile) |
|
|
|
display: block |
|
|
|
display: block |
|
|
|
position: fixed |
|
|
|
|
|
|
|
padding: $gap * 0.5 0 |
|
|
|
|
|
|
|
top: $navbar-height + $gap |
|
|
|
|
|
|
|
right: $gap |
|
|
|
|
|
|
|
z-index: 9999 + 1 |
|
|
|
|
|
|
|
box-shadow: $boxshadow-card-float |
|
|
|
|
|
|
|
border-radius: $border-card * 0.5 |
|
|
|
|
|
|
|
trans() |
|
|
|
trans() |
|
|
|
transform: scale(0,0) rotate(12deg) |
|
|
|
// transform: scale(0,0) rotate(12deg) |
|
|
|
transform-origin: right top |
|
|
|
// transform-origin: right top |
|
|
|
&.show |
|
|
|
// &.show |
|
|
|
transform: scale(1,1) rotate(0) |
|
|
|
// transform: scale(1,1) rotate(0) |
|
|
|
|
|
|
|
|
|
|
|
>li>a |
|
|
|
|
|
|
|
display: block |
|
|
|
|
|
|
|
font-size: $fontsize-body |
|
|
|
|
|
|
|
color: $color-text |
|
|
|
|
|
|
|
line-height: 33px |
|
|
|
|
|
|
|
height: 32px |
|
|
|
|
|
|
|
padding: 0 $gap |
|
|
|
|
|
|
|
border-left: $border-line solid transparent |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
margin-right: 4px |
|
|
|
|
|
|
|
&.active |
|
|
|
|
|
|
|
border-left: $border-line solid $color-theme |
|
|
|
|
|
|
|
color: $color-theme |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.cover-wrapper |
|
|
|
.cover-wrapper |
|
|
|