diff options
| author | Valentin Popov <valentin@popov.link> | 2024-09-18 02:24:24 +0300 |
|---|---|---|
| committer | Valentin Popov <valentin@popov.link> | 2024-09-18 02:24:24 +0300 |
| commit | 9ff6f2cd0eb93f294e0a03226daaf5000f1b5f44 (patch) | |
| tree | f763b8f1a0e8f362a69ee3a60d3956e243ba8134 /src/components | |
| parent | cf85f107245fd40f7b453d30790a8649eb972083 (diff) | |
| download | popov.link-9ff6f2cd0eb93f294e0a03226daaf5000f1b5f44.tar.xz popov.link-9ff6f2cd0eb93f294e0a03226daaf5000f1b5f44.zip | |
Added footer component
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Footer.astro | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/src/components/Footer.astro b/src/components/Footer.astro new file mode 100644 index 0000000..ea53b25 --- /dev/null +++ b/src/components/Footer.astro @@ -0,0 +1,61 @@ +--- +import { Icon } from "astro-icon/components"; +import dayjs from "dayjs"; +--- + +<style lang="scss"> + @import "../scss/_variables.scss"; + + footer { + bottom: 0; + height: 4em; + left: 0; + padding: 1em 4em; + position: absolute; + right: 0; + } + + .left-nav, + .right-nav { + display: inline-block; + vertical-align: top; + width: 49%; + } + + .left-nav { + float: left; + font-size: $fontSizeBase * 0.75; + text-align: left; + } + + .right-nav { + float: right; + text-align: right; + } + + @media (width <=684px) { + footer { + padding: 4em 1em 2em; + } + } + + a { + color: $colorText; + + &:visited { + color: $colorText; + } + } +</style> + +<footer> + <div class="left-nav"> + <span>© {dayjs().year()} <a href="mailto:valentin@popov.link">Valentin Popov</a></span> + </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> +</footer> |