lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style(header): optimize header style in the first screen mode

This commit is contained in:
XPoet 2022-11-05 23:48:59 +08:00
parent 31ad044c73
commit d929aa4f7e
3 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
source/css/common/variables.styl
View File

@ -105,7 +105,7 @@ $toc-scrollbar-color = alpha($text-color-3, 0.1)
$copyright-info-color = #cc0033 $copyright-info-color = #cc0033
$avatar-background-color = $primary-color-dark-1 $avatar-background-color = $primary-color-dark-1
$header-transparent-background-1 = alpha($background-color-1, 0.28) $header-transparent-background-1 = alpha($background-color-1, 0.28)
$header-transparent-background-2 = alpha($background-color-1, 0.58) $header-transparent-background-2 = alpha($background-color-1, 0.4)
$pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3) $pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3)
@ -144,7 +144,7 @@ $dark-copyright-info-color = darken($copyright-info-color, 20%)
$dark-avatar-background-color = darken($avatar-background-color, 20%) $dark-avatar-background-color = darken($avatar-background-color, 20%)
$dark-header-transparent-background-1 = alpha($dark-background-color-1, 0.28) $dark-header-transparent-background-1 = alpha($dark-background-color-1, 0.28)
$dark-header-transparent-background-2 = alpha($dark-background-color-1, 0.58) $dark-header-transparent-background-2 = alpha($dark-background-color-1, 0.4)
$dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee) $dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee)

2
source/css/layout/_partial/first-screen.styl
View File

@ -17,7 +17,6 @@ $first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--
if (!(hexo-config('style.first_screen.header_transparent') == true)) { if (!(hexo-config('style.first_screen.header_transparent') == true)) {
background-position-y $header-height background-position-y $header-height
}
+keep-tablet() { +keep-tablet() {
background-position-y $header-height * 0.9 background-position-y $header-height * 0.9
@ -26,6 +25,7 @@ $first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--
+keep-mobile() { +keep-mobile() {
background-position-y $header-height * 0.8 background-position-y $header-height * 0.8
} }
}
.content { .content {
position relative position relative

11
source/css/layout/page.styl
View File

@ -5,11 +5,6 @@
height auto height auto
background var(--background-color-1) background var(--background-color-1)
+keep-tablet() {
padding-left 0 !important
}
.page-main-content { .page-main-content {
position relative position relative
box-sizing border-box box-sizing border-box
@ -18,13 +13,18 @@
&.is-home { &.is-home {
.transparent-1 { .transparent-1 {
background var(--header-transparent-background-1) background var(--header-transparent-background-1)
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
} }
.transparent-2 { .transparent-2 {
background var(--header-transparent-background-2) background var(--header-transparent-background-2)
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
} }
} }
.header-shrink & { .header-shrink & {
padding-top $header-shrink-height padding-top $header-shrink-height
@ -78,7 +78,6 @@
+keep-tablet() { +keep-tablet() {
height $header-height * 0.9 height $header-height * 0.9
padding-left 0 !important
} }