Skip to content

Audit: austin-things-to-do-v2

1. Current Sections Present

The page is a single-file static HTML document (index.html, 374 lines). Structure top to bottom:

Skip link — WCAG 2.4.1 conformant, hidden until focused.

Hero (<header class="hero">) — Full-width burnt-sienna (#C45C2E) background with an SVG grain texture pseudo-element (no image). Contains H1 "Things to Do in Austin" (Fraunces 600 italic) and a subtitle paragraph. Bottom edge uses an inline SVG wave divider that transitions into the page background color.

Category nav (<nav class="cat-nav">) — Sticky top bar with 5 pill links: Outdoor, Food & Drink, Music, Family-Friendly, Free Things. Active state tracked by IntersectionObserver. Horizontally scrollable on mobile.

Outdoor section (#outdoor) — 7 cards: Barton Springs Pool, Barton Creek Greenbelt, Mount Bonnell, Lady Bird Lake Trail, Mayfield Park, McKinney Falls State Park, Zilker Metropolitan Park. 3 of 7 have outbound URLs.

Food and Drink section (#food-and-drink) — 8 cards: Franklin Barbecue, Veracruz All Natural, Torchy's Tacos, Jo's Coffee, Home Slice Pizza, Uchi, Odd Duck, Rainey Street. 5 of 8 have outbound URLs.

Music section (#music) — 7 cards: Continental Club, Stubb's Amphitheater, White Horse, Antone's, 6th Street, ACL Live, Hole in the Wall. 3 of 7 have outbound URLs.

Family-Friendly section (#family-friendly) — 7 cards: Thinkery, Bullock Museum, Mueller Lake Park, Austin Zoo, Blanton Museum, Wildflower Center, Peter Pan Mini Golf. 5 of 7 have outbound URLs.

Free Things section (#free) — 7 cards: Congress Ave Bat Colony, State Capitol Grounds, South Congress Stroll, Pennybacker Bridge Overlook, Pfluger Pedestrian Bridge, Texas State Cemetery, First Thursdays. 0 of 7 have outbound URLs.

Footer — Single-line "Austin, TX • 2026", centered, minimal.

Inline script — IntersectionObserver updates .active class on nav links as sections scroll into view.

2. Existing Assets / Images

No image files exist in the workdir. The data/ directory is empty (contains no files).

All visual "texture" in the current design is generated in-browser: - Hero background: solid CSS color #C45C2E - Grain texture: inline base64 SVG filter (feTurbulence) baked into a CSS background-image data URI on .hero::before - Wave divider: inline SVG element in the HTML

There are no <img> tags anywhere in the HTML. No external image CDN URLs. No transparent PNGs. No section background images. The current design is entirely CSS-and-color-driven with zero photographic assets.

3. Data Sources / JSON Files

content.json (14,491 bytes) — Structured mirror of the HTML content. Contains one top-level key categories (array of 5 objects). Each category object has slug, title, and items (array). Each item has name, description, neighborhood, and url (string or null). This file is not loaded or referenced by the HTML at runtime; it is a static data seed/reference only.

content.md (11,200 bytes) — Markdown version of the same content. Identical data to content.json, formatted as a flat outline with section headers and bullet-list fields. Not loaded by the HTML.

data/ directory — Exists but is completely empty. No JSON files are loaded at runtime.

No live data feeds, API calls, or dynamic event sources are present anywhere in the codebase.

4. Design System

Colors (CSS custom properties on :root): - --bg: #F7F4EF — warm paper background - --surface: #FFFFFF — card and nav bar background - --ink: #1A1714 — primary text - --ink-muted: #6B6560 — secondary text / descriptions - --accent: #C45C2E — burnt sienna, links and hero background - --accent-hover: #A44A22 — darker burnt sienna for hover states - --highlight: #F2C94C — warm yellow, neighborhood pills and active nav - --border: #E2DDD7 — muted warm border - --focus: #C45C2E — focus ring, same as accent

Typography: - Display: Fraunces (Google Fonts), weight 600, optional italic. Used for hero H1, section H2s, card titles. - Body: Inter (Google Fonts), weights 400/500. Used for descriptions, nav labels, pills, links. - Hero H1: clamp(40px, 8vw, 80px), italic - Section H2: 32px, weight 600 - Card title: 20px, weight 600 - Card description: 14px, line-height 1.65 - Nav/pill labels: 12px, uppercase, letter-spacing 0.08em

Spacing: 9-step custom scale from --space-1 (4px) to --space-24 (96px). Used consistently throughout.

Layout: - Container: max-width 1200px, padding-inline: clamp(16px, 5vw, 48px), centered - Card grid: CSS Grid, 1-col mobile / 2-col at 640px / 3-col at 960px - Category sections: 64px vertical padding, 1px warm border top between sections

Card anatomy: White surface, 1px border, 12px border-radius, 24px padding, subtle drop shadow. Flex column. Hover lifts card 3px with elevated shadow. Focus-visible ring on keyboard navigation.

Accessibility: WCAG AA contrast on all text pairs (verified in design-spec.md), semantic HTML (<section aria-labelledby>, <article>, <nav>), reduced-motion query, skip link.

5. Gap Analysis vs New Requirements

Live event calendar (do512, eventbrite, austinchronicle, timeout, next 30 days)

MISSING. No calendar section exists in the HTML. No event data structures exist in the JSON. No API integration code exists anywhere in the codebase. The data/ directory is empty. There is no JavaScript event-fetching logic. Building this requires: a new #events section in the HTML, a data pipeline (server-side scrape/API calls or a build-time fetcher writing to data/), and rendering logic. Note that client-side scraping of do512/austinchronicle is likely CORS-blocked; a proxy or build-step fetch is required.

Maps section with event locations (Leaflet or similar)

MISSING. No map element, no Leaflet CDN link, no coordinate data anywhere. No <div id="map"> placeholder. No latitude/longitude fields in content.json. Building this requires: adding Leaflet (or similar) to <head>, a map container div, coordinate data for each venue/event, and initialization JS.

Happy Hour section with curated spots

MISSING. No happy hour section exists. No happy hour data exists in content.json or content.md. There is no nav entry for it. The existing Food and Drink section mentions Rainey Street bars but has no happy-hour-specific data (hours, deals, day ranges). A new section needs to be authored from scratch with curated content.

Sushi section with curated spots

MISSING as a standalone section. Uchi appears as one card inside the Food and Drink section and is described as "sushi and Japanese-influenced small plates." There is no dedicated sushi section, no sushi-specific nav entry, and no additional sushi spots beyond Uchi. A new dedicated section needs to be created with additional curated spots.

Asset-heavy visual upgrade: real web images, transparent PNGs, overlays, section backgrounds, no placeholder look

MISSING. The entire current design uses zero images. There are no <img> tags, no background-image URLs pointing to photos, no transparent PNG assets, no hero image, no card thumbnail images, no section background photos. The design is cleanly typographic but has no visual photography whatsoever. Every section would need: a hero image or video background, per-card thumbnail images (either <img> or CSS background-image), section-level background treatments, and overlay styles. The CSS has no .card__image, no .section__bg, and no overlay utility classes.

6. Recommendations

KEEP (solid, reuse as-is)

  • Design token system (styles.css :root block) — the color palette, spacing scale, and typography variables are clean and well-considered. Keep all CSS custom properties.
  • Card component (.card, .card__neighborhood, .card__title, .card__description, .card__link) — the structure is semantically correct, accessible, and extensible. Add an image slot (card__image) rather than replacing the card.
  • Category nav (.cat-nav + IntersectionObserver script) — sticky scrolling nav with active state works well. Extend the <ul> with new items for Events, Map, Happy Hour, Sushi.
  • Responsive grid (.card-grid) — 1/2/3-col breakpoints are correct. Reuse for new sections.
  • Accessibility floor — skip link, aria-labelledby, semantic elements, focus rings, reduced-motion query. Keep all of it; extend to new sections.
  • content.json schema — the {slug, title, items[{name, description, neighborhood, url}]} shape is a clean base. Extend the item schema with lat, lng, image_url, happy_hour_days, happy_hour_times fields as needed.
  • Footer — minimal and correct. Keep.

REPLACE (weak or insufficient)

  • Hero — the solid-color + grain-texture approach is competent but flat. Replace with a full-bleed hero image (or video loop) with a dark overlay preserving text contrast. The existing H1/subtitle markup and the SVG wave divider can stay; only the background treatment changes.
  • content.md — it is a redundant duplicate of content.json with no additional information. Replace with a richer content.json that adds image URLs, coordinates, and new section data. The .md copy serves no build purpose.

ADD (entirely missing)

  • Card image slot — add a <figure class="card__image"> or <img class="card__image"> to the card component. Add corresponding CSS with aspect-ratio: 16/9, object-fit: cover, and a dark gradient overlay for text legibility.
  • Section background treatments — each major section could use a subtle full-bleed background image with a semi-transparent warm overlay to differentiate sections visually without breaking the color palette.
  • Events section (#events) — new section with calendar-style layout showing the next 30 days of Austin events. Requires a data fetch layer (build-time or serverless function) calling do512, Eventbrite, or similar. Card structure: event name, venue, date/time, neighborhood pill, ticket link.
  • Map section (#map) — Leaflet.js tile map centered on Austin (30.2672, -97.7431) with pin markers for venues in the existing sections plus event locations. Requires adding lat/lng to content.json items and a Leaflet initialization script.
  • Happy Hour section (#happy-hour) — curated list of Austin bars/restaurants with specific happy hour windows (days + hours), drink deals, neighborhood. Data needs to be authored.
  • Sushi section (#sushi) — dedicated section for Austin sushi spots beyond Uchi. Uchi can move here or be duplicated. Needs 5-8 additional curated spots authored.
  • Image assets pipeline — a mechanism to source, optimize, and serve real photography. Options: fetch from Wikimedia Commons or Unsplash at build time, use venue website OG images, or use a CDN URL list baked into content.json. No local image files currently exist.
  • Nav entries for the 4 new sections (Events, Map, Happy Hour, Sushi).

URL: https://mkdocs.justinsforge.com/autoagent-missions/austin-things-to-do-v2/AUDIT/