diff options
Diffstat (limited to 'examples/portfolio/src/components/Footer.astro')
| -rw-r--r-- | examples/portfolio/src/components/Footer.astro | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/examples/portfolio/src/components/Footer.astro b/examples/portfolio/src/components/Footer.astro new file mode 100644 index 000000000..9d1878dad --- /dev/null +++ b/examples/portfolio/src/components/Footer.astro @@ -0,0 +1,74 @@ +--- +import Icon from './Icon.astro'; +const currentYear = new Date().getFullYear(); +--- + +<footer> + <div class="group"> + <p> + Designed & Developed in Portland with <a href="https://astro.build/">Astro</a> + <Icon icon="rocket-launch" size="1.2em" /> + </p> + <p>© {currentYear} Jeanine White</p> + </div> + <p class="socials"> + <a href="https://twitter.com/me"> Twitter</a> + <a href="https://github.com/me"> GitHub</a> + <a href="https://codepen.io/me"> CodePen</a> + </p> +</footer> +<style> + footer { + display: flex; + flex-direction: column; + gap: 3rem; + margin-top: auto; + padding: 3rem 2rem 3rem; + text-align: center; + color: var(--gray-400); + font-size: var(--text-sm); + } + + footer a { + color: var(--gray-400); + text-decoration: 1px solid underline transparent; + text-underline-offset: 0.25em; + transition: text-decoration-color var(--theme-transition); + } + + footer a:hover, + footer a:focus { + text-decoration-color: currentColor; + } + + .group { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + + .socials { + display: flex; + justify-content: center; + gap: 1rem; + flex-wrap: wrap; + } + + @media (min-width: 50em) { + footer { + flex-direction: row; + justify-content: space-between; + padding: 2.5rem 5rem; + } + + .group { + flex-direction: row; + gap: 1rem; + flex-wrap: wrap; + } + + .socials { + justify-content: flex-end; + } + } +</style> |