Footer.astro
1---
2interface Props {
3 // compact: the console-scale footer used on single-task pages, matching
4 // brandFooter in internal/appview/ui/layout.templ: minimum height equal
5 // to the compact masthead (4.5rem, 4rem below 800px), 16px tagline.
6 compact?: boolean;
7}
8const { compact = false } = Astro.props;
9---
10
11<footer class:list={['footer', 'on-dark', { compact }]}>
12 <p class="footer-line">
13 <span class="footer-mark">sovrn</span>
14 <span>Independent tools for small business.</span>
15 <span>Part of the Atmosphere.</span>
16 </p>
17 <div class="corner" aria-hidden="true"></div>
18 </footer>
19
20<style>
21 .footer {
22 display: grid;
23 grid-template-columns: 1fr 11.8%;
24 min-height: clamp(5rem, min(12.1svh, 8.1vw), 8.5rem);
25 background: var(--ptt);
26 color: var(--paper);
27 }
28
29 /* ——— Footer ——— */
30 .footer-line {
31 display: flex;
32 flex-wrap: wrap;
33 align-items: center;
34 align-content: center;
35 gap: 0.25rem 1.5rem;
36 padding: 1.25rem var(--gutter);
37 color: var(--ptt-soft);
38 }
39
40 .footer-mark {
41 color: var(--paper);
42 font-size: 1.75rem;
43 font-weight: 900;
44 letter-spacing: -0.06em;
45 }
46
47 .corner {
48 background: var(--signal);
49 }
50
51 @media (max-width: 800px) {
52 .footer {
53 grid-template-columns: 1fr 3rem;
54 }
55 }
56
57 .footer.compact {
58 min-height: 4.5rem;
59 }
60
61 .compact .footer-line {
62 gap: 0.25rem 1.5rem;
63 padding-block: 1rem;
64 font-size: 1rem;
65 line-height: 1.5;
66 }
67
68 .compact .footer-mark {
69 line-height: 1;
70 }
71
72 /* console breakpoint (Tailwind sm): 11.8% corner above, 3rem below */
73 @media (max-width: 800px) {
74 .footer.compact {
75 grid-template-columns: 1fr 11.8%;
76 }
77 }
78
79 @media (max-width: 639.98px) {
80 .footer.compact {
81 grid-template-columns: 1fr 3rem;
82 min-height: 4rem;
83 }
84 }
85</style>
