Refactor header & sidebar style

This commit is contained in:
Mimi 2022-11-10 10:35:59 +08:00
parent b78fb3ac90
commit 25eb0bce33
8 changed files with 18 additions and 18 deletions

View File

@ -9,14 +9,6 @@
} }
} }
.column {
background: $head-bg;
}
.header {
main-container();
}
.site-brand-container { .site-brand-container {
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;

View File

@ -1,5 +1,9 @@
// Header // Header
// -------------------------------------------------- // --------------------------------------------------
.column {
background: var(--content-bg-color);
}
.header { .header {
align-items: center; align-items: center;
display: flex; display: flex;

View File

@ -1,3 +1,7 @@
.header {
main-container();
}
.main-inner { .main-inner {
main-container(); main-container();

View File

@ -1,3 +1,11 @@
.column {
width: $sidebar-desktop;
+tablet-mobile() {
width: auto;
}
}
.site-brand-container { .site-brand-container {
background: var(--theme-color); background: var(--theme-color);

View File

@ -2,11 +2,9 @@
background: var(--content-bg-color); background: var(--content-bg-color);
border-radius: $border-radius-inner; border-radius: $border-radius-inner;
box-shadow: $box-shadow-inner; box-shadow: $box-shadow-inner;
width: $sidebar-desktop;
+tablet-mobile() { +tablet-mobile() {
border-radius: initial; border-radius: initial;
width: auto;
} }
} }

View File

@ -1,10 +1,8 @@
.sidebar { .sidebar {
margin-top: $sidebar-offset;
// https://caniuse.com/css-sticky // https://caniuse.com/css-sticky
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: $sidebar-offset; top: $sidebar-offset;
width: $sidebar-desktop;
+tablet-mobile() { +tablet-mobile() {
display: none; display: none;
@ -21,6 +19,7 @@
box-shadow: $box-shadow; box-shadow: $box-shadow;
box-sizing: border-box; box-sizing: border-box;
color: var(--text-color); color: var(--text-color);
margin-top: $sidebar-offset;
} }
.site-state-item { .site-state-item {

View File

@ -11,7 +11,6 @@ $link-decoration-color = $grey-light;
$content-bg-color = $whitesmoke; $content-bg-color = $whitesmoke;
$menu-item-bg-color = $grey-lighter; $menu-item-bg-color = $grey-lighter;
$head-bg = var(--content-bg-color);
$brand-color = $black-deep; $brand-color = $black-deep;
$brand-hover-color = $brand-color; $brand-hover-color = $brand-color;

View File

@ -205,12 +205,8 @@ $headband-height = 3px;
$headband-bg = var(--theme-color); $headband-bg = var(--theme-color);
// Section Header
// Variables for header section elements.
// --------------------------------------------------
$head-bg = transparent;
// Site Meta // Site Meta
// --------------------------------------------------
$brand-color = white; $brand-color = white;
$brand-hover-color = white; $brand-hover-color = white;
$brand-color-dark = $grey-lighter; $brand-color-dark = $grey-lighter;