hexo-theme-keep/source/css/layout/_partial/header.styl

282 lines
5.6 KiB
Stylus
Raw Normal View History

2020-12-01 16:51:38 +08:00
$logo-title-font-size = 2.2rem;
2020-12-25 17:50:22 +08:00
$pc-search-icon-font-size = 1.5rem;
$menu-bar-line-height = 2.5px;
.header-wrapper {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
background: var(--background-color);
2021-01-06 18:36:28 +08:00
padding-top: $scroll-progress-bar-height;
2020-11-13 14:43:22 +08:00
hover-style(1.02, 1.02);
.header-content {
2020-11-15 22:06:32 +08:00
position: relative;
2020-09-03 16:47:52 +08:00
height: 100%;
2020-11-15 22:06:32 +08:00
width: $main-content-width;
2020-11-25 23:39:24 +08:00
max-width: $content-max-width;
2020-11-15 22:06:32 +08:00
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
z-index: $z-index-5;
2020-12-25 17:50:22 +08:00
&.has-first-screen {
max-width: $content-max-width * 1.2;
}
2020-09-03 16:47:52 +08:00
2020-11-20 12:02:22 +08:00
+keep-tablet() {
2020-12-01 16:51:38 +08:00
width: $main-content-width-tablet;
2020-09-03 16:47:52 +08:00
}
2020-11-20 12:02:22 +08:00
+keep-mobile() {
2020-12-01 16:51:38 +08:00
width: $main-content-width-mobile;
2020-09-03 16:47:52 +08:00
}
.left {
2020-12-24 21:40:41 +08:00
display: flex;
align-items: center;
transition-t("transform", "0", "0.2", "linear");
2021-01-05 11:48:58 +08:00
.header-shrink & {
transform: scale(0.85);
transform-origin: left;
2021-01-05 11:48:58 +08:00
}
2020-12-01 16:51:38 +08:00
.logo-title {
font-size: $logo-title-font-size;
font-weight: bold;
letter-spacing: 1px;
line-height: 1;
color: var(--first-text-color);
2020-06-04 22:11:27 +08:00
+keep-tablet() {
font-size: $logo-title-font-size * 0.9;
}
2020-06-04 22:11:27 +08:00
+keep-mobile() {
font-size: $logo-title-font-size * 0.8;
}
2020-06-04 22:11:27 +08:00
}
}
2021-01-04 21:16:07 +08:00
.right {
2020-11-15 22:06:32 +08:00
.pc {
2021-01-05 11:48:58 +08:00
.menu-list {
display: flex;
align-items: center;
+keep-tablet() {
display: none;
}
2020-09-03 16:47:52 +08:00
2020-12-01 16:51:38 +08:00
.menu-item {
float: left;
position: relative;
margin-left: 30px;
font-size: 1rem;
cursor: pointer;
color: var(--default-text-color);
&:first-child {
margin-left: 0;
}
2021-01-05 11:48:58 +08:00
a:hover, .active {
&::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
width: 100%;
height: 2px;
transform: translateX(-50%);
2021-01-05 11:48:58 +08:00
background: var(--primary-color);
transition-t("transform, bottom", "0, 0", "0.2, 0.2", "linear, linear");
2021-01-05 11:48:58 +08:00
.header-shrink & {
bottom: -($header-shrink-height / 2 - 12);
}
}
}
&.search {
2020-12-25 17:50:22 +08:00
font-size: $pc-search-icon-font-size;
margin-left: 26px;
i {
color: var(--default-text-color);
}
}
}
}
}
2021-01-05 11:48:58 +08:00
.mobile {
display: flex;
justify-content: space-between;
align-items: center;
.icon-item {
display: none;
position: relative;
cursor: pointer;
font-size: 18px;
margin-left: 12px;
width: 20px;
height: 20px;
color: var(--default-text-color);
i {
color: var(--default-text-color);
}
&:first-child {
margin-left: 0;
}
+keep-tablet() {
display: flex;
justify-content: center;
align-items: center;
}
}
.menu-bar {
2020-09-03 16:47:52 +08:00
.menu-bar-middle {
width: 18px;
2020-12-25 17:50:22 +08:00
height: $menu-bar-line-height;
position: relative;
background: var(--default-text-color);
2020-04-01 22:42:24 +08:00
2021-01-05 11:48:58 +08:00
.header-drawer-show & {
background: transparent;
}
2021-01-05 11:48:58 +08:00
&::before, &::after {
content: '';
position: absolute;
left: 0;
width: 100%;
2020-12-25 17:50:22 +08:00
height: $menu-bar-line-height;
background: var(--default-text-color);
transition-t("transform", "0", "0.38", "ease");
}
2021-01-05 11:48:58 +08:00
&::before {
top: -6px;
.header-drawer-show & {
transform: translateY(6px) rotate(45deg);
}
}
&::after {
bottom: -6px;
2021-01-05 11:48:58 +08:00
.header-drawer-show & {
transform: translateY(-6px) rotate(-45deg);
}
}
}
2020-04-01 22:42:24 +08:00
}
}
}
}
.header-drawer {
width: 100%;
2020-04-01 12:09:06 +08:00
padding: $header-height 0 20px 0;
position: absolute;
top: 0;
left: 0;
transform: scaleY(0);
transform-origin: top;
2020-04-01 22:42:24 +08:00
z-index: $z-index-2;
background: var(--background-color);
transition-t("transform", "0", "0.38", "ease");
2020-12-01 16:51:38 +08:00
2021-01-05 11:48:58 +08:00
.header-drawer-show & {
transform: scaleY(1);
}
.drawer-menu-list {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
.drawer-menu-item {
2020-12-01 16:51:38 +08:00
font-size: 1rem;
margin: 6px 0;
height: 38px;
2020-04-01 22:42:24 +08:00
a {
2020-12-01 16:51:38 +08:00
padding: 6px 20px;
2020-04-01 22:42:24 +08:00
border-radius: 20px;
2020-11-18 11:56:47 +08:00
color: var(--default-text-color);
2020-04-01 22:42:24 +08:00
&:hover {
color: var(--second-text-color);
2020-12-01 16:51:38 +08:00
border: 1px solid var(--default-text-color);
2020-04-01 22:42:24 +08:00
}
2020-12-01 16:51:38 +08:00
&.active {
border: 1px solid var(--default-text-color);
color: var(--second-text-color);
}
2020-04-01 22:42:24 +08:00
}
2020-12-01 16:51:38 +08:00
}
}
}
.window-mask {
position: absolute;
top: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.4);
2020-04-01 22:42:24 +08:00
z-index: $z-index-1;
visibility: hidden;
opacity: 0;
transition-t("transform, opacity", "0, 0", "0.38, 0.38", "ease, ease");
2021-01-05 11:48:58 +08:00
.header-drawer-show & {
visibility: visible;
opacity: 1;
2020-04-01 22:42:24 +08:00
}
}
2021-01-05 11:48:58 +08:00
}
2021-01-05 11:48:58 +08:00
.header-drawer-show {
overflow: hidden;
2020-07-09 18:25:20 +08:00
}