Commit f5faea12 authored by minseok.park's avatar minseok.park

update header style

parent 68a4ad76
Pipeline #19208 failed with stages
in 1 minute and 16 seconds
...@@ -9,20 +9,32 @@ body { ...@@ -9,20 +9,32 @@ body {
} }
.navbar { .navbar {
background: var(--navbar-background); background: var(--color-white);
color: var(--navbar-font-color); color: var(--color-bwg-main);
font-size: calc(16 / var(--rem-base) * 1rem); font-size: calc(16 / var(--rem-base) * 1rem);
height: var(--navbar-height);
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
z-index: var(--z-index-navbar); z-index: var(--z-index-navbar);
padding: .5rem 3rem;
max-height: 5rem;
} }
.navbar a { .navbar a {
text-decoration: none; text-decoration: none;
} }
.navbar-logo {
display: inline-block;
width: 40px;
height: 40px;
background-image: url('../img/logo_color.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 10px;
}
.navbar-brand { .navbar-brand {
display: flex; display: flex;
flex: auto; flex: auto;
...@@ -36,10 +48,10 @@ body { ...@@ -36,10 +48,10 @@ body {
.navbar-brand .navbar-item:first-child { .navbar-brand .navbar-item:first-child {
align-self: center; align-self: center;
padding: 0; padding: 0;
font-size: calc(22 / var(--rem-base) * 1rem); font-size: calc(22 / var(--rem-base) * 1.25rem);
flex-wrap: wrap; flex-wrap: wrap;
line-height: 1; line-height: 1;
font-weight: 600; font-weight: 700;
} }
.navbar-brand .navbar-item:first-child a { .navbar-brand .navbar-item:first-child a {
...@@ -134,6 +146,7 @@ body { ...@@ -134,6 +146,7 @@ body {
display: block; display: block;
line-height: var(--doc-line-height); line-height: var(--doc-line-height);
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
margin: 0 0.5rem;
} }
.navbar-item.has-dropdown { .navbar-item.has-dropdown {
...@@ -229,7 +242,7 @@ body { ...@@ -229,7 +242,7 @@ body {
.navbar-menu a.navbar-item:hover, .navbar-menu a.navbar-item:hover,
.navbar-menu .navbar-link:hover { .navbar-menu .navbar-link:hover {
background: var(--navbar-menu_hover-background); /* background: var(--navbar-menu_hover-background); */
} }
} }
...@@ -260,6 +273,22 @@ body { ...@@ -260,6 +273,22 @@ body {
display: block; display: block;
} }
.navbar-link::before {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--navbar-font-color);
transition: width 0.3s ease-in-out;
}
.navbar-link:hover::before {
width: 100%;
}
.navbar-link::after { .navbar-link::after {
border-width: 0 0 1px 1px; border-width: 0 0 1px 1px;
border-style: solid; border-style: solid;
...@@ -277,14 +306,30 @@ body { ...@@ -277,14 +306,30 @@ body {
.navbar-end > .navbar-item, .navbar-end > .navbar-item,
.navbar-end .navbar-link { .navbar-end .navbar-link {
color: var(--navbar-font-color); color: var(--color-jet-80);
} }
.navbar-end > a.navbar-item:hover, .navbar-end > a.navbar-item:hover,
.navbar-end .navbar-link:hover, .navbar-end .navbar-link:hover,
.navbar-end .navbar-item.has-dropdown:hover .navbar-link { .navbar-end .navbar-item.has-dropdown:hover .navbar-link {
background: var(--navbar_hover-background);
color: var(--navbar-font-color); color: var(--navbar-font-color);
font-weight: 600;
}
.navbar-end > a.navbar-item::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--navbar-font-color);
transition: width 0.3s ease-in-out;
}
.navbar-end > a.navbar-item:hover::after {
width: 100%;
} }
.navbar-end .navbar-link::after { .navbar-end .navbar-link::after {
......
<header class="header"> <header class="header">
<nav class="navbar"> <nav class="navbar">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="{{{or site.url siteRootPath}}}">{{site.title}}</a> <a class="navbar-item" href="{{{or site.url siteRootPath}}}">
<i class="navbar-logo"></i>
{{site.title}}
</a>
{{#if env.SITE_SEARCH_PROVIDER}} {{#if env.SITE_SEARCH_PROVIDER}}
<div class="navbar-item search hide-for-print"> <div class="navbar-item search hide-for-print">
<div id="search-field" class="field"> <div id="search-field" class="field">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment