From 7e2f3fca091c08771486df0b870ce187f869d363 Mon Sep 17 00:00:00 2001 From: muqiuhan Date: Tue, 28 Feb 2023 09:58:51 +0000 Subject: deploy: b780169745c17f9fc971299e923e5ca5669b5a22 --- css/partials/header.css | 72 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 css/partials/header.css (limited to 'css/partials/header.css') diff --git a/css/partials/header.css b/css/partials/header.css new file mode 100644 index 00000000..f9b7ba40 --- /dev/null +++ b/css/partials/header.css @@ -0,0 +1,72 @@ +.header { + border: $line-secondary solid $color-text-primary; +} +.header-inner { + display: flex; + flex-wrap: nowrap; + align-items: center; + margin-top: $margin-l-0; + margin-bottom: $margin-m-0; +} +.header-inner #menu-btn { + display: none; +} +.header-inner .site-nav { + flex-grow: 1; + overflow-x: auto; +} +.menu-list { + text-align: right; + display: flex; +} +.menu-list .menu-item { + position: relative; + margin-left: $margin-l-0; +} +.menu-list:before { + content: ""; + flex-grow: 1; +} +.menu-item-active:after { + border-bottom: solid $line-secondary; + width: 100%; +} +.logo-img { + max-height: $line-height-heading-h1; + width: auto; + max-width: 100%; + display: flex; +} +@media (max-width: 688px) { + .header-inner { + flex-wrap: wrap; + } + .header-inner #menu-btn { + display: block !important; + text-align: right; + width: 50%; + } + .header-inner #menu-btn .icon { + float: right; + } + .header-inner .site-brand-container { + width: 50%; + } + .header-inner .site-nav { + width: 100%; + } + .header-inner .site-nav .menu-list { + height: 0; + overflow: hidden; + } + .header-inner .site-nav .menu-list .menu-item { + margin-right: 0; + margin-left: auto; + margin-top: $margin-m-0; + } + .header-inner .site-nav .active { + margin-top: $margin-m-1; + height: auto; + flex-direction: column; + } +} -- cgit v1.2.3