+2

app/components/Layout/AppShell/index.tsx

reviewed

··· 1 1 import type { Child } from "hono/jsx"; 2 2 + import { Footer } from "../Footer/index.tsx"; 2 3 import * as s from "./styles.css.ts"; 3 4 4 5 export function AppShell({ header, children }: { header: Child; children: Child }) { ··· 6 7 <div class={s.shell}> 7 8 {header} 8 9 <main class={s.main}>{children}</main> 10 10 + <Footer /> 9 11 </div> 10 12 ); 11 13 }

+1 -1

app/components/Layout/AppShell/styles.css.ts

reviewed

··· 3 3 4 4 export const shell = style({ 5 5 display: "grid", 6 6 - gridTemplateRows: "auto 1fr", 6 6 + gridTemplateRows: "auto 1fr auto", 7 7 minBlockSize: "100dvh", 8 8 }); 9 9

+19

app/components/Layout/Footer/index.tsx

reviewed

··· 1 1 + import * as s from "./styles.css.ts"; 2 2 + 3 3 + export function Footer() { 4 4 + return ( 5 5 + <footer class={s.footer}> 6 6 + <div class={s.inner}> 7 7 + <div class={s.links}> 8 8 + <a href="https://tangled.org/exosphere.site/airglow" class={s.link}> 9 9 + Source 10 10 + </a> 11 11 + <a href="https://bsky.app/profile/airglow.run" class={s.link}> 12 12 + Bluesky 13 13 + </a> 14 14 + </div> 15 15 + <span>&copy; {new Date().getFullYear()} Airglow</span> 16 16 + </div> 17 17 + </footer> 18 18 + ); 19 19 + }

+33

app/components/Layout/Footer/styles.css.ts

reviewed

··· 1 1 + import { style } from "@vanilla-extract/css"; 2 2 + import { vars } from "../../../styles/theme.css.ts"; 3 3 + import { space } from "../../../styles/tokens/spacing.ts"; 4 4 + import { fontSize } from "../../../styles/tokens/typography.ts"; 5 5 + 6 6 + export const footer = style({ 7 7 + borderBlockStart: `1px solid ${vars.color.border}`, 8 8 + paddingBlock: space[5], 9 9 + }); 10 10 + 11 11 + export const inner = style({ 12 12 + display: "flex", 13 13 + alignItems: "center", 14 14 + justifyContent: "space-between", 15 15 + maxInlineSize: "72rem", 16 16 + marginInline: "auto", 17 17 + paddingInline: space[4], 18 18 + fontSize: fontSize.sm, 19 19 + color: vars.color.textMuted, 20 20 + }); 21 21 + 22 22 + export const links = style({ 23 23 + display: "flex", 24 24 + gap: space[4], 25 25 + }); 26 26 + 27 27 + export const link = style({ 28 28 + color: vars.color.textSecondary, 29 29 + textDecoration: "none", 30 30 + ":hover": { 31 31 + color: vars.color.text, 32 32 + }, 33 33 + });

+1

app/styles/components.css.ts

reviewed

··· 3 3 // won't reach the browser unless explicitly imported here. 4 4 5 5 import "../components/Layout/AppShell/styles.css.ts"; 6 6 + import "../components/Layout/Footer/styles.css.ts"; 6 7 import "../components/Layout/Header/styles.css.ts"; 7 8 import "../components/Layout/Container/styles.css.ts"; 8 9 import "../components/Layout/Stack/styles.css.ts";