exosphere.site / airglow
Webhooks for the AT Protocol airglow.run
atproto atprotocol automation webhook
12
fork

Configure Feed

Select the types of activity you want to include in your feed.

ui: improve footer

Hugo 90972573 32956cc5

+80 -13
+23 -6
app/components/Layout/Footer/index.tsx
··· 10 10 rel="noopener noreferrer" 11 11 aria-label={`${children} (opens in new tab)`} 12 12 > 13 - {children} 14 13 <ExternalLink size={12} class={s.externalIcon} /> 14 + {children} 15 15 </a> 16 16 ); 17 17 } ··· 20 20 return ( 21 21 <footer class={s.footer}> 22 22 <div class={s.inner}> 23 - <div class={s.links}> 23 + <div class={s.brandBlock}> 24 + <a href="/" class={s.brand} aria-label="Airglow home"> 25 + Airglow<span class={s.brandAccent}>.run</span> 26 + </a> 27 + <p class={s.tagline}>Automations for the AT Protocol.</p> 28 + </div> 29 + 30 + <nav class={s.col} aria-label="Site"> 31 + <a href="/automations" class={s.link}> 32 + Gallery 33 + </a> 24 34 <a href="/pricing" class={s.link}> 25 35 Pricing 26 36 </a> 27 - <ExternalFooterLink href="https://tangled.org/exosphere.site/airglow"> 28 - Source 29 - </ExternalFooterLink> 37 + </nav> 38 + 39 + <nav class={s.col} aria-label="External"> 30 40 <ExternalFooterLink href="https://bsky.app/profile/airglow.run"> 31 41 Bluesky 32 42 </ExternalFooterLink> 43 + <ExternalFooterLink href="https://tangled.org/exosphere.site/airglow"> 44 + Source 45 + </ExternalFooterLink> 33 46 <ExternalFooterLink href="https://airglow.offprint.app">Blog</ExternalFooterLink> 47 + </nav> 48 + 49 + <div class={s.meta}> 50 + <span>&copy; {new Date().getFullYear()} Airglow</span> 51 + <span class={s.metaSub}>Made in Europe 🇪🇺</span> 34 52 </div> 35 - <span>&copy; {new Date().getFullYear()} Airglow</span> 36 53 </div> 37 54 </footer> 38 55 );
+56 -7
app/components/Layout/Footer/styles.css.ts
··· 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 - import { fontSize } from "../../../styles/tokens/typography.ts"; 4 + import { fontSize, fontWeight } from "../../../styles/tokens/typography.ts"; 5 5 6 6 export const footer = style({ 7 7 borderBlockStart: `1px solid ${vars.color.border}`, 8 - paddingBlock: space[5], 8 + backgroundColor: vars.color.surface, 9 + paddingBlock: space[7], 9 10 }); 10 11 11 12 export const inner = style({ 12 - display: "flex", 13 - alignItems: "center", 14 - justifyContent: "space-between", 13 + display: "grid", 14 + gridTemplateColumns: "1fr", 15 + alignItems: "flex-start", 16 + gap: space[5], 15 17 maxInlineSize: "72rem", 16 18 marginInline: "auto", 17 19 paddingInline: space[4], 18 20 fontSize: fontSize.sm, 19 21 color: vars.color.textMuted, 22 + "@media": { 23 + "(min-width: 720px)": { 24 + gridTemplateColumns: "auto auto auto 1fr", 25 + columnGap: space[7], 26 + }, 27 + }, 28 + }); 29 + 30 + export const brandBlock = style({ 31 + display: "flex", 32 + flexDirection: "column", 33 + gap: space[1], 34 + }); 35 + 36 + export const brand = style({ 37 + color: vars.color.text, 38 + textDecoration: "none", 39 + fontSize: fontSize.md, 40 + fontWeight: fontWeight.semibold, 41 + letterSpacing: "0.02em", 20 42 }); 21 43 22 - export const links = style({ 44 + export const tagline = style({ 45 + margin: 0, 46 + color: vars.color.textMuted, 47 + fontSize: fontSize.xs, 48 + }); 49 + 50 + export const brandAccent = style({ 51 + color: vars.color.accent, 52 + }); 53 + 54 + export const col = style({ 23 55 display: "flex", 24 - gap: space[4], 56 + flexDirection: "column", 57 + gap: space[2], 25 58 }); 26 59 27 60 export const link = style({ ··· 38 71 export const externalIcon = style({ 39 72 opacity: 0.6, 40 73 }); 74 + 75 + export const meta = style({ 76 + display: "flex", 77 + flexDirection: "column", 78 + gap: space[1], 79 + "@media": { 80 + "(min-width: 720px)": { 81 + alignItems: "flex-end", 82 + textAlign: "end", 83 + }, 84 + }, 85 + }); 86 + 87 + export const metaSub = style({ 88 + color: vars.color.textMuted, 89 + });
+1
app/styles/global.css.ts
··· 5 5 globalStyle("html", { 6 6 fontFamily: fontFamily.sans, 7 7 fontSize: "100%", 8 + backgroundColor: vars.color.surface, 8 9 WebkitFontSmoothing: "antialiased", 9 10 MozOsxFontSmoothing: "grayscale", 10 11 textSizeAdjust: "100%",