From 57de568f40e99e954687e66baa682bfe394bc04f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EB=AF=BC=EC=84=9D?= <mingr8@bagminseog-ui-MacBookAir.local> Date: Fri, 7 Jun 2024 14:55:32 +0900 Subject: [PATCH] update header --- src/css/header.css | 33 +++++++++++++++++++++++++-------- src/css/vars.css | 2 +- src/img/ico_download.svg | 7 +++++++ src/partials/header-content.hbs | 10 ++++++---- 4 files changed, 39 insertions(+), 13 deletions(-) create mode 100644 src/img/ico_download.svg diff --git a/src/css/header.css b/src/css/header.css index 64de825..b6ccac1 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -212,15 +212,30 @@ body { .navbar .button { display: inline-flex; align-items: center; - background: var(--navbar-button-background); - border: 1px solid var(--navbar-button-border-color); - border-radius: 0.15rem; + background: var(--color-bwg-main); + border-radius: 28px; height: 1.75rem; - color: var(--navbar-button-font-color); - padding: 0 0.75em; + color: var(--color-white); + padding: 1.25rem 1.75rem 1.25rem 1.5rem; white-space: nowrap; } +.download_icon { + display: inline-block; + width: 18px; + height: 18px; + background-image: url('../img/ico_download.svg'); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + margin-right: 7px; +} + +.navbar .button:hover { + transition: 300ms ease; + background-color: rgba(0, 114, 206, 0.8); +} + @media screen and (max-width: 768.5px) { .navbar-brand .navbar-item.search { padding-left: 0; @@ -350,8 +365,7 @@ body { .navbar-dropdown { background: var(--navbar-menu-background); - border: 1px solid var(--navbar-menu-border-color); - border-top: none; + box-shadow: 0 6px 9px 0 rgba(0, 0, 0, .16); border-radius: 0 0 0.25rem 0.25rem; display: none; top: 100%; @@ -363,6 +377,7 @@ body { .navbar-dropdown .navbar-item { padding: 0.5rem 3rem 0.5rem 1rem; white-space: nowrap; + margin: 0; } .navbar-dropdown .navbar-item small { @@ -380,6 +395,8 @@ body { } .navbar-dropdown a.navbar-item:hover { - background: var(--navbar-menu_hover-background); + background: var(--color-bwg-main); + color: var(--color-white); + font-weight: 600; } } diff --git a/src/css/vars.css b/src/css/vars.css index 325302c..15fdbc2 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -137,7 +137,7 @@ --footer-font-color: var(--color-white); --footer-link-font-color: var(--color-jet-80); /* dimensions and positioning */ - --navbar-height: calc(63 / var(--rem-base) * 1rem); + --navbar-height: calc(63 / var(--rem-base) * 1.25rem); --toolbar-height: calc(45 / var(--rem-base) * 1rem); --drawer-height: var(--toolbar-height); --body-top: var(--navbar-height); diff --git a/src/img/ico_download.svg b/src/img/ico_download.svg new file mode 100644 index 0000000..bc90cd4 --- /dev/null +++ b/src/img/ico_download.svg @@ -0,0 +1,7 @@ +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> + <!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools --> +<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" stroke="#ffffff"> + <g id="SVGRepo_bgCarrier" stroke-width="0"/> + <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/> + <g id="SVGRepo_iconCarrier"> <title/> <g id="Complete"> <g id="download"> <g> <path d="M3,12.3v7a2,2,0,0,0,2,2H19a2,2,0,0,0,2-2v-7" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/> <g> <polyline data-name="Right" fill="none" id="Right-2" points="7.9 12.3 12 16.3 16.1 12.3" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/> <line fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="2.7" y2="14.2"/> </g> </g> </g> </g> </g> + </svg> \ No newline at end of file diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs index db52090..ea1b90c 100644 --- a/src/partials/header-content.hbs +++ b/src/partials/header-content.hbs @@ -1,9 +1,8 @@ <header class="header"> <nav class="navbar"> <div class="navbar-brand"> - <a class="navbar-item" href="{{{or site.url siteRootPath}}}"> + <a class="navbar-item" href="https://swlab.bwg.co.kr/"> <i class="navbar-logo"></i> - {{!-- {{site.title}} --}} <div class="navbar-title-contents"> <span class="navbar-title">SWLab</span> <span class="navbar-title sub">Bankware Global</span> @@ -24,7 +23,7 @@ </div> <div id="topbar-nav" class="navbar-menu"> <div class="navbar-end"> - <a class="navbar-item" href="https://swlab.bwg.co.kr/">Home</a> + {{!-- <a class="navbar-item" href="https://swlab.bwg.co.kr/">Home</a> --}} <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link" href="#">Products</a> <div class="navbar-dropdown"> @@ -36,7 +35,10 @@ </div> <div class="navbar-item"> <span class="control"> - <a class="button is-primary" href="#">Download</a> + <a class="button download" href="#"> + <i class="download_icon"></i> + Download + </a> </span> </div> </div> -- 2.18.1