diff options
Diffstat (limited to 'src/components/Header.astro')
| -rw-r--r-- | src/components/Header.astro | 48 |
1 files changed, 28 insertions, 20 deletions
diff --git a/src/components/Header.astro b/src/components/Header.astro index 0f91af3..2fdf620 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,14 +1,18 @@ --- +import { Icon } from "astro-icon/components"; +const { pathname } = Astro.url; --- <style lang="scss"> @import "../scss/_variables.scss"; + [data-icon] { + vertical-align: middle; + } + header { background-color: $colorBg; - border-bottom: 1px solid $colorHeader; - box-shadow: 0 5px 5px $colorBg; left: 0; line-height: 3.5em; opacity: 0.975; @@ -19,38 +23,42 @@ nav { margin: auto; - max-width: 60em; + max-width: 52em; padding: 0 4em; - text-align: right; + } - a { - color: $colorText; - padding: 0 1em; + a { + color: $colorText; - &:visited { - color: $colorText; - } + &:visited { + color: $colorText; } } @media (width <=684px) { header { - box-shadow: none; position: fixed; - } - - nav { - padding: 0 2em; - - span { - display: none; - } + text-align: center; } } </style> <header> <nav> - <a href="/">Home</a> + <a href="/"> + { + pathname !== "/" ? ( + <> + <Icon name="hugeicons:arrow-left-01" /> + <span>{import.meta.env.DEFAULT_TITLE}</span> + </> + ) : ( + <> + <Icon name="hugeicons:source-code" /> + <span>{import.meta.env.DEFAULT_TITLE}</span> + </> + ) + } + </a> </nav> </header> |