diff options
| -rw-r--r-- | src/components/Footer.astro | 17 | ||||
| -rw-r--r-- | src/components/Header.astro | 48 | ||||
| -rw-r--r-- | src/layouts/BaseLayout.astro | 2 | ||||
| -rw-r--r-- | src/pages/[...page].astro | 2 | ||||
| -rw-r--r-- | src/scss/_variables.scss | 1 |
5 files changed, 38 insertions, 32 deletions
diff --git a/src/components/Footer.astro b/src/components/Footer.astro index ea53b25..3dd3745 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -15,6 +15,14 @@ import dayjs from "dayjs"; right: 0; } + a { + color: $colorText; + + &:visited { + color: $colorText; + } + } + .left-nav, .right-nav { display: inline-block; @@ -38,14 +46,6 @@ import dayjs from "dayjs"; padding: 4em 1em 2em; } } - - a { - color: $colorText; - - &:visited { - color: $colorText; - } - } </style> <footer> @@ -54,7 +54,6 @@ import dayjs from "dayjs"; </div> <div class="right-nav"> <a href="https://github.com/valentineus" target="_blank"><Icon name="hugeicons:github-01" /></a> - <a href="https://www.linkedin.com/in/valentineus/" target="_blank"><Icon name="hugeicons:linkedin-01" /></a> <a href="https://analytics.popov.link" target="_blank"><Icon name="hugeicons:analytics-up" /></a> <a href="/feed.xml" target="_blank"><Icon name="hugeicons:rss" /></a> </div> 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> diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 142b398..a76861a 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -24,7 +24,7 @@ const { description, title } = Astro.props; <main> <slot /> </main> - <Analytics title={title ?? import.meta.env.DEFAULT_TITLE} /> <Footer /> + <Analytics title={title ?? import.meta.env.DEFAULT_TITLE} /> </body> </html> diff --git a/src/pages/[...page].astro b/src/pages/[...page].astro index 42f84b3..cd64d66 100644 --- a/src/pages/[...page].astro +++ b/src/pages/[...page].astro @@ -20,7 +20,7 @@ const { page } = Astro.props; --- <Layout> - <section> + <section style={{ "margin-top": "3rem" }}> {page.data.map((post) => <PostSummary post={post} />)} </section> diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 5b65f2a..bc91f7f 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -3,6 +3,5 @@ $colorBgAlt: hwb(0deg 0% 100% / 20%); $colorBgCode: #3b3d42; $colorBlossom: #6da13f; $colorFade: #598332; -$colorHeader: #1b1f22; $colorText: #dee2e6; $fontSizeBase: 1.8rem; |