diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/config.ts b/PROJECTS/beginner/canary-token-generator/frontend/src/config.ts index c323d473..fa6d5f54 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/config.ts +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/config.ts @@ -5,10 +5,15 @@ export const ROUTES = { HOME: '/', + MANAGE: '/m/:manageId', } as const export type Route = typeof ROUTES +export function manageRoute(manageId: string): string { + return `/m/${encodeURIComponent(manageId)}` +} + export const QUERY_CONFIG = { STALE_TIME: { USER: 1000 * 60 * 5, diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/routers.tsx b/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/routers.tsx index 84ae0096..9cc93618 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/routers.tsx +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/routers.tsx @@ -15,9 +15,13 @@ const routes: RouteObject[] = [ path: ROUTES.HOME, lazy: () => import('@/pages/landing'), }, + { + path: ROUTES.MANAGE, + lazy: () => import('@/pages/manage'), + }, { path: '*', - lazy: () => import('@/pages/landing'), + lazy: () => import('@/pages/notfound'), }, ], }, diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/result.tsx b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/result.tsx index 5d239947..5bb8b0f1 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/result.tsx +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/result.tsx @@ -14,6 +14,7 @@ import { SpecimenCard, SpecimenCardSection, } from '@/components' +import { manageRoute } from '@/config' import { ArtifactDisplay } from './artifact' import { ARTIFACT_LABEL, PAGE_COPY } from './copy' import styles from './landing.module.scss' @@ -30,7 +31,7 @@ export function ResultView({ filenameFallback, }: ResultViewProps): React.ReactElement { const { token, artifact } = data - const managePath = `/m/${token.manage_id}` + const managePath = manageRoute(token.manage_id) return (
diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/manage/copy.ts b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/manage/copy.ts new file mode 100644 index 00000000..26d8b2d6 --- /dev/null +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/manage/copy.ts @@ -0,0 +1,40 @@ +// =================== +// ©AngelaMos | 2026 +// copy.ts +// =================== + +export const MANAGE_COPY = { + HEADLINE_QUIET: 'NO MOVEMENT YET', + HEADLINE_LIVE: 'TRAP TRIPPED', + HEADLINE_DISABLED: 'TRAP MUTED', + PURPOSE_QUIET: + 'The specimen is in place. Nothing has touched it. Keep this page bookmarked — alerts will fire when something does.', + PURPOSE_LIVE: + 'At least one visitor has tripped the trap. Below are the recorded events, newest first.', + PURPOSE_DISABLED: + 'This specimen still records events for forensic continuity, but no alerts are dispatched. Re-enable from the operator console if needed.', + EVENT_LOG_TITLE: 'EVENT LOG', + EVENT_LOG_EMPTY: + 'No events recorded yet. When something touches the trigger URL, it will appear here.', + EVENT_LOAD_MORE: 'Load older events', + EVENT_LOADING: 'Loading next page…', + DELETE_TITLE: 'TERMINATE SPECIMEN', + DELETE_BODY: + 'Cascade-deletes this specimen and every event recorded against it. The trigger URL will no longer fire alerts. This action cannot be undone.', + DELETE_CONFIRM: 'Terminate', + DELETE_CANCEL: 'Keep alive', + DELETE_ARM: 'Mark for termination', + BACK_TO_INTAKE: 'New specimen', + NOT_FOUND_HEADLINE: 'DOSSIER NOT FOUND', + NOT_FOUND_BODY: + 'The manage ID does not correspond to an active specimen. It may have been terminated or the URL may be malformed.', + ERROR_HEADLINE: 'CANNOT REACH ARCHIVE', + ERROR_BODY: 'Something went wrong fetching this dossier.', +} as const + +export const NOTIFY_TONE = { + sent: 'signal', + pending: 'paper', + failed: 'alarm', + deduped: 'paper', +} as const diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/manage/event-row.tsx b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/manage/event-row.tsx new file mode 100644 index 00000000..c80b70a6 --- /dev/null +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/manage/event-row.tsx @@ -0,0 +1,122 @@ +// =================== +// ©AngelaMos | 2026 +// event-row.tsx +// =================== + +import type { EventResponse, GeoView } from '@/api' +import { Pill } from '@/components' +import { NOTIFY_TONE } from './copy' +import styles from './manage.module.scss' + +type EventRowProps = { + event: EventResponse + index: number +} + +export function EventRow({ event, index }: EventRowProps): React.ReactElement { + const tone = NOTIFY_TONE[event.notify_status] ?? 'paper' + return ( +
+
+ + {String(index).padStart(4, '0')} + + + + {event.notify_status} + +
+
+ + {event.source_ip} + + {formatGeo(event.geo)} + {event.geo.asn ? ( + + AS{event.geo.asn} + {event.geo.asn_org ? ` · ${event.geo.asn_org}` : ''} + + ) : null} + + {event.user_agent ?? '—'} + + {event.referer ? ( + + {event.referer} + + ) : null} + {event.notified_at ? ( + + {formatTimestamp(event.notified_at)} + + ) : null} +
+ {hasExtraDetails(event.extra) ? ( +
+ extra fingerprint + 
+            {JSON.stringify(event.extra, null, 2)}
+
+
+ ) : null} +
+ ) +} + +type EventFieldProps = React.PropsWithChildren<{ + label: string + mono?: boolean + wide?: boolean + truncate?: boolean +}> + +function EventField({ + label, + mono = false, + wide = false, + truncate = false, + children, +}: EventFieldProps): React.ReactElement { + return ( +
+ {label} + {children} +
+ ) +} + +function formatTimestamp(iso: string): string { + try { + const dt = new Date(iso) + return dt + .toISOString() + .replace('T', ' ') + .replace(/\.\d+Z$/, 'Z') + } catch (_err) { + return iso + } +} + +function formatGeo(geo: GeoView): string { + const parts: string[] = [] + if (geo.city) parts.push(geo.city) + if (geo.region) parts.push(geo.region) + if (geo.country) parts.push(geo.country) + if (parts.length === 0) { + return '—' + } + return parts.join(' · ') +} + +function hasExtraDetails(extra: unknown): boolean { + if (extra == null) return false + if (typeof extra !== 'object') return false + return Object.keys(extra as Record).length > 0 +} diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/manage/index.tsx b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/manage/index.tsx new file mode 100644 index 00000000..2ab5416a --- /dev/null +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/manage/index.tsx @@ -0,0 +1,425 @@ +// =================== +// ©AngelaMos | 2026 +// index.tsx +// =================== + +import { useState } from 'react' +import { Link, useNavigate, useParams } from 'react-router-dom' +import { toast } from 'sonner' +import { + type ManageResponse, + type ManageTokenView, + useDeleteToken, + useManageToken, +} from '@/api' +import { + Button, + CopyField, + DataRow, + Halftone, + Pill, + SerialBar, + SpecimenCard, + SpecimenCardSection, + Strip, + StripItem, +} from '@/components' +import { ApiError, ApiErrorCode } from '@/core/api' +import { MANAGE_COPY } from './copy' +import { EventRow } from './event-row' +import styles from './manage.module.scss' + +const PAGE_SIZE = 20 + +export function Component(): React.ReactElement { + const params = useParams() + const manageId = params.manageId ?? '' + const [cursor, setCursor] = useState(undefined) + const query = useManageToken(manageId, { cursor, limit: PAGE_SIZE }) + + if (manageId.length === 0) { + return + } + if (query.isLoading) { + return + } + if (query.error) { + if ( + query.error instanceof ApiError && + query.error.code === ApiErrorCode.NOT_FOUND + ) { + return + } + return query.refetch()} /> + } + if (!query.data) { + return + } + + return ( + setCursor(query.data?.page.next_cursor)} + onResetCursor={() => setCursor(undefined)} + /> + ) +} + +Component.displayName = 'Manage' + +type ManageViewProps = { + manageId: string + data: ManageResponse + cursor: string | undefined + isFetchingNextPage: boolean + onLoadOlder: () => void + onResetCursor: () => void +} + +function ManageView({ + manageId, + data, + cursor, + isFetchingNextPage, + onLoadOlder, + onResetCursor, +}: ManageViewProps): React.ReactElement { + const { token, events, events_total, events_silenced_active, page } = data + return ( +
+ + canary + dossier + + {token.type} + + + + + + + + + + + + + + + + + new specimen ↗ + + + ©AngelaMos 2026 + +
+ ) +} + +type DossierHeroProps = { + token: ManageTokenView + eventsTotal: number +} + +function DossierHero({ + token, + eventsTotal, +}: DossierHeroProps): React.ReactElement { + const state = resolveState(token, eventsTotal) + const headline = + state === 'live' + ? MANAGE_COPY.HEADLINE_LIVE + : state === 'disabled' + ? MANAGE_COPY.HEADLINE_DISABLED + : MANAGE_COPY.HEADLINE_QUIET + const purpose = + state === 'live' + ? MANAGE_COPY.PURPOSE_LIVE + : state === 'disabled' + ? MANAGE_COPY.PURPOSE_DISABLED + : MANAGE_COPY.PURPOSE_QUIET + return ( +
+

DOSSIER · {token.type.toUpperCase()}

+

+ {headline} +

+

{purpose}

+

{token.memo || 'no memo recorded'}

+
+ ) +} + +type DossierCardProps = { + token: ManageTokenView + eventsTotal: number + silenced: number +} + +function DossierCard({ + token, + eventsTotal, + silenced, +}: DossierCardProps): React.ReactElement { + return ( + } + > + + + + {token.enabled ? 'live' : 'disabled'} + + + 0}> + {eventsTotal} + + + {silenced} + + + {token.last_triggered ? formatTs(token.last_triggered) : 'never'} + + + {formatTs(token.created_at)} + + + {token.alert_channel} + + {token.filename ? ( + + {token.filename} + + ) : null} + + + + + + + ) +} + +type EventLogSectionProps = { + events: ManageResponse['events'] + cursor: string | undefined + hasMore: boolean + isFetchingNextPage: boolean + onLoadOlder: () => void + onResetCursor: () => void +} + +function EventLogSection({ + events, + cursor, + hasMore, + isFetchingNextPage, + onLoadOlder, + onResetCursor, +}: EventLogSectionProps): React.ReactElement { + return ( +
+
+ 06 / EVENT LOG +
+ {events.length === 0 ? ( +

{MANAGE_COPY.EVENT_LOG_EMPTY}

+ ) : ( +
+ {events.map((event, idx) => ( + + ))} +
+ )} +
+ {cursor !== undefined ? ( + + ) : ( + + )} + {hasMore ? ( + + ) : ( + end of log + )} +
+
+ ) +} + +type DeleteSectionProps = { + manageId: string + memo: string +} + +function DeleteSection({ + manageId, + memo, +}: DeleteSectionProps): React.ReactElement { + const [armed, setArmed] = useState(false) + const del = useDeleteToken() + const navigate = useNavigate() + + function confirm(): void { + del.mutate(manageId, { + onSuccess: () => { + toast.success(`Terminated ${memo || 'unnamed specimen'}`) + navigate('/') + }, + }) + } + + return ( +
+
+ 07 / TERMINATION +
+

{MANAGE_COPY.DELETE_TITLE}

+

{MANAGE_COPY.DELETE_BODY}

+ {armed ? ( +
+ + +
+ ) : ( + + )} +
+ ) +} + +function ManageLoading(): React.ReactElement { + return ( +
+ + canary + loading dossier… + +
fetching specimen record…
+
+ ) +} + +function ManageNotFound(): React.ReactElement { + return ( +
+ + canary + + unfound + + +
+

404 · DOSSIER

+

{MANAGE_COPY.NOT_FOUND_HEADLINE}

+

{MANAGE_COPY.NOT_FOUND_BODY}

+
+ + ← {MANAGE_COPY.BACK_TO_INTAKE} + +
+ ) +} + +type ManageErrorProps = { + onRetry: () => void +} + +function ManageError({ onRetry }: ManageErrorProps): React.ReactElement { + return ( +
+ + canary + + archive offline + + +
+

5xx · ARCHIVE

+

{MANAGE_COPY.ERROR_HEADLINE}

+

{MANAGE_COPY.ERROR_BODY}

+
+
+ + + new specimen + +
+
+ ) +} + +function resolveState( + token: ManageTokenView, + eventsTotal: number +): 'quiet' | 'live' | 'disabled' { + if (!token.enabled) { + return 'disabled' + } + if (eventsTotal > 0) { + return 'live' + } + return 'quiet' +} + +function formatTs(iso: string): string { + try { + const dt = new Date(iso) + return dt + .toISOString() + .replace('T', ' ') + .replace(/\.\d+Z$/, 'Z') + } catch (_err) { + return iso + } +} diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/manage/manage.module.scss b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/manage/manage.module.scss new file mode 100644 index 00000000..c3be5aba --- /dev/null +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/manage/manage.module.scss @@ -0,0 +1,378 @@ +// =================== +// ©AngelaMos | 2026 +// manage.module.scss +// =================== + +@use '../../styles/tokens' as *; +@use '../../styles/fonts' as *; +@use '../../styles/mixins' as *; + +.page { + display: flex; + flex-direction: column; + flex: 1 1 auto; + inline-size: 100%; + max-inline-size: 88rem; + margin-inline: auto; + padding-inline: $space-4; + padding-block-end: $space-8; + gap: $space-6; + + @include breakpoint-up('md') { + padding-inline: $space-8; + gap: $space-8; + } +} + +.hero { + display: flex; + flex-direction: column; + gap: $space-3; + padding-block-start: $space-6; + max-inline-size: 56rem; + + @include breakpoint-up('md') { + padding-block-start: $space-10; + } +} + +.heroIndex { + font-family: $font-mono; + font-size: $font-size-3xs; + letter-spacing: $tracking-wider; + text-transform: uppercase; + color: $ink-mute; + margin: 0; +} + +.heroLink { + font-family: $font-mono; + font-size: $font-size-xs; + letter-spacing: $tracking-wider; + text-transform: uppercase; + color: $ink; + text-decoration: none; + border-block-end: $hairline solid $ink; + padding-block-end: $space-0-5; + align-self: flex-start; + transition: color $duration-fast $ease-out; + + &:hover { + color: $alarm; + border-block-end-color: $alarm; + } +} + +.heroActions { + display: flex; + align-items: center; + gap: $space-4; + flex-wrap: wrap; +} + +.headline { + font-family: $font-sans; + font-weight: 900; + font-size: clamp(2.25rem, 8vw, 6rem); + letter-spacing: -0.05em; + line-height: 0.9; + text-transform: uppercase; + color: $ink; + margin: 0; + + &[data-state='live'] { + color: $alarm; + } + + &[data-state='disabled'] { + color: $ink-mute; + } +} + +.purpose { + font-family: $font-sans; + font-size: clamp(0.95rem, 1.5vw, 1.125rem); + line-height: $line-height-snug; + color: $ink; + max-inline-size: 42rem; + margin: 0; + text-wrap: balance; +} + +.memo { + font-family: $font-mono; + font-size: $font-size-xs; + letter-spacing: $tracking-wide; + color: $ink-soft; + padding-inline-start: $space-3; + border-inline-start: $hairline-bold solid $rule; + margin: 0; + max-inline-size: 42rem; +} + +// ---------------------------------------------------------------------------- +// EVENT LOG +// ---------------------------------------------------------------------------- + +.eventLog { + display: flex; + flex-direction: column; + gap: $space-4; +} + +.eventLogHead { + display: flex; + align-items: center; + gap: $space-3; +} + +.eventLogIndex { + font-family: $font-mono; + font-size: $font-size-3xs; + letter-spacing: $tracking-wider; + text-transform: uppercase; + color: $ink-mute; +} + +.eventLogRule { + flex: 1 1 auto; + block-size: $hairline; + background-color: $rule-hair; +} + +.eventLogCount { + font-family: $font-mono; + font-size: $font-size-3xs; + letter-spacing: $tracking-wider; + text-transform: uppercase; + color: $ink-soft; +} + +.eventList { + display: flex; + flex-direction: column; + gap: $space-3; +} + +.eventEmpty { + padding: $space-5; + border: $hairline dashed $rule-soft; + background-color: $paper; + font-family: $font-mono; + font-size: $font-size-xs; + letter-spacing: $tracking-wide; + color: $ink-soft; + text-align: center; +} + +.eventLogFoot { + display: flex; + align-items: center; + justify-content: space-between; + gap: $space-3; + padding-block-start: $space-3; + border-block-start: $hairline solid $rule-hair; +} + +.eventEnd { + font-family: $font-mono; + font-size: $font-size-3xs; + letter-spacing: $tracking-wider; + text-transform: uppercase; + color: $ink-mute; +} + +// ---------------------------------------------------------------------------- +// EVENT ROW +// ---------------------------------------------------------------------------- + +.eventRow { + display: flex; + flex-direction: column; + gap: $space-3; + padding: $space-4; + border: $hairline solid $rule; + background-color: $paper; +} + +.eventHead { + display: flex; + align-items: center; + gap: $space-3; + flex-wrap: wrap; + padding-block-end: $space-2; + border-block-end: $hairline solid $rule-hair; +} + +.eventIndex { + font-family: $font-mono; + font-size: $font-size-2xs; + letter-spacing: $tracking-wider; + color: $ink-mute; +} + +.eventTime { + font-family: $font-mono; + font-size: $font-size-xs; + letter-spacing: $tracking-wide; + color: $ink; + flex: 1 1 auto; +} + +.eventGrid { + display: grid; + grid-template-columns: 1fr; + gap: $space-2; + + @include breakpoint-up('sm') { + grid-template-columns: repeat(2, 1fr); + } +} + +.eventField { + display: flex; + flex-direction: column; + gap: $space-0-5; + min-inline-size: 0; + + &[data-wide='true'] { + @include breakpoint-up('sm') { + grid-column: 1 / -1; + } + } + + &[data-mono='true'] .eventValue { + font-family: $font-mono; + font-size: $font-size-xs; + letter-spacing: $tracking-wide; + } + + &[data-truncate='true'] .eventValue { + @include truncate; + } +} + +.eventLabel { + font-family: $font-mono; + font-size: $font-size-3xs; + letter-spacing: $tracking-wider; + text-transform: uppercase; + color: $ink-mute; +} + +.eventValue { + font-family: $font-sans; + font-size: $font-size-sm; + color: $ink; + overflow-wrap: anywhere; +} + +.eventExtra { + background-color: $paper-deep; + padding: $space-3; + font-family: $font-mono; + font-size: $font-size-xs; + letter-spacing: $tracking-wide; + + summary { + cursor: pointer; + color: $ink-soft; + font-size: $font-size-3xs; + letter-spacing: $tracking-wider; + text-transform: uppercase; + } +} + +.eventExtraBody { + margin: $space-2 0 0; + white-space: pre-wrap; + color: $ink; + font-size: $font-size-xs; + overflow: auto; + max-block-size: 16rem; +} + +// ---------------------------------------------------------------------------- +// DELETE +// ---------------------------------------------------------------------------- + +.deleteSection { + display: flex; + flex-direction: column; + gap: $space-3; + padding-block-start: $space-6; +} + +.deleteHead { + display: flex; + align-items: center; + gap: $space-3; +} + +.deleteIndex { + font-family: $font-mono; + font-size: $font-size-3xs; + letter-spacing: $tracking-wider; + text-transform: uppercase; + color: $alarm-deep; +} + +.deleteRule { + flex: 1 1 auto; + block-size: $hairline; + background-color: $alarm; +} + +.deleteTitle { + font-family: $font-sans; + font-weight: 800; + font-size: clamp(1.25rem, 3vw, 1.75rem); + letter-spacing: -0.02em; + text-transform: uppercase; + color: $alarm-deep; + margin: 0; +} + +.deleteBody { + font-size: $font-size-sm; + color: $ink-soft; + max-inline-size: 38rem; + margin: 0; +} + +.deleteArmed { + display: flex; + align-items: center; + gap: $space-3; + flex-wrap: wrap; +} + +// ---------------------------------------------------------------------------- +// FOOTER +// ---------------------------------------------------------------------------- + +.footerLink { + color: inherit; + text-decoration: none; + border-block-end: $hairline solid $ink; + padding-block-end: $space-0-5; + + &:hover { + color: $alarm; + border-block-end-color: $alarm; + } +} + +// ---------------------------------------------------------------------------- +// LOADING / STATUS +// ---------------------------------------------------------------------------- + +.statusBlock { + padding: $space-4; + border: $hairline solid $rule-hair; + background-color: $paper-deep; + font-family: $font-mono; + font-size: $font-size-xs; + letter-spacing: $tracking-wide; + color: $ink-soft; +} diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/notfound/index.tsx b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/notfound/index.tsx new file mode 100644 index 00000000..49d63fb4 --- /dev/null +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/notfound/index.tsx @@ -0,0 +1,34 @@ +// =================== +// ©AngelaMos | 2026 +// index.tsx +// =================== + +import { Link } from 'react-router-dom' +import { Strip, StripItem } from '@/components' +import styles from './notfound.module.scss' + +export function Component(): React.ReactElement { + return ( +
+ + canary + + off-route + + +
+

404 · OFF-ROUTE

+

NO SPECIMEN HERE

+

+ This path is not part of the catalog. Maybe a typo, maybe a deleted + dossier. The intake is still open. +

+ + ← back to intake + +
+
+ ) +} + +Component.displayName = 'NotFound' diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/notfound/notfound.module.scss b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/notfound/notfound.module.scss new file mode 100644 index 00000000..efadea02 --- /dev/null +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/notfound/notfound.module.scss @@ -0,0 +1,77 @@ +// =================== +// ©AngelaMos | 2026 +// notfound.module.scss +// =================== + +@use '../../styles/tokens' as *; +@use '../../styles/fonts' as *; +@use '../../styles/mixins' as *; + +.page { + display: flex; + flex-direction: column; + flex: 1 1 auto; + inline-size: 100%; + max-inline-size: 56rem; + margin-inline: auto; + padding-inline: $space-4; + padding-block-end: $space-8; + gap: $space-8; + + @include breakpoint-up('md') { + padding-inline: $space-8; + } +} + +.body { + display: flex; + flex-direction: column; + gap: $space-4; + padding-block-start: $space-10; +} + +.index { + font-family: $font-mono; + font-size: $font-size-3xs; + letter-spacing: $tracking-wider; + text-transform: uppercase; + color: $ink-mute; + margin: 0; +} + +.headline { + font-family: $font-sans; + font-weight: 900; + font-size: clamp(2.25rem, 8vw, 5.5rem); + letter-spacing: -0.05em; + line-height: 0.9; + text-transform: uppercase; + color: $ink; + margin: 0; +} + +.purpose { + font-family: $font-sans; + font-size: clamp(0.95rem, 1.5vw, 1.125rem); + color: $ink-soft; + max-inline-size: 42rem; + margin: 0; + text-wrap: balance; +} + +.link { + font-family: $font-mono; + font-size: $font-size-xs; + letter-spacing: $tracking-wider; + text-transform: uppercase; + color: $ink; + text-decoration: none; + border-block-end: $hairline solid $ink; + padding-block-end: $space-0-5; + align-self: flex-start; + + &:hover { + color: $alarm; + border-block-end-color: $alarm; + } +}