blob: 9d1878dada91ba61d226b801d4063d331c1a11aa (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
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>
|
