Case Study

VenturaNomadica.com

The Ventura Nomadica company website. Built end-to-end using Trail.

← Back to VenturaNomadica.com

trail/runs/intent-003/run-2026-03-08-17-33-38/tasks.md

tasks.md

What's this? →
# Run: run-2026-03-08-17-33-38
# Purpose: Define atomic, verifiable tasks to correct homepage card layout and update contact icons

## Product Context (from `trail/meta/trail.md`)
Ventura Nomadica is a venture studio focused on human-centered systems, privacy-first products, and practical innovation. The website is intentionally simple, clear, and durable, serving as a studio presence and venture hub rather than a marketing-heavy sales funnel.

## Tasks

### T01 — Review Current Homepage Card Structure and Styles
**Description:** Inspect homepage card markup and associated CSS to identify current sizing and image placement.
**Inputs:**
- `site/index.html`
- `site/styles.css`
**Outputs:**
- Confirmed list of card classes/markup to update for size and orientation rules.
**Acceptance Criteria:**
- Card HTML structure and relevant CSS selectors are identified for modification.

### T02 — Implement Consistent Card Size and Reduced Height
**Description:** Update card CSS to enforce consistent sizing with height approximately 50% of the current height while preserving width.
**Inputs:**
- `site/styles.css`
- Findings from T01
**Outputs:**
- Updated card CSS in `site/styles.css`.
**Acceptance Criteria:**
- All homepage cards render identical in size.
- Card width unchanged from current layout.
- Card height reduced to approximately half the previous height.

### T03 — Add Orientation-Based Card Layout Rules
**Description:** Implement layout rules for vertical vs. horizontal images so layout switches automatically based on orientation classes in markup.
**Inputs:**
- `site/index.html`
- `site/styles.css`
**Outputs:**
- Updated `site/index.html` card markup with orientation classes.
- Updated `site/styles.css` with layout rules:
  - Vertical: left/right split with image 1/3 width.
  - Horizontal: top/bottom split with image 1/3 height.
**Acceptance Criteria:**
- Each card with a vertical image uses left/right split layout.
- Each card with a horizontal image uses top/bottom split layout.
- Card size remains consistent regardless of orientation.
- Images are reduced to fit within the new layout and do not dominate the card.

### T04 — Remove Venture Logos From Contact Page
**Description:** Remove any venture logos displayed next to venture site links in the Contact page.
**Inputs:**
- `site/contact.html`
**Outputs:**
- Updated `site/contact.html` without venture logos.
**Acceptance Criteria:**
- No venture logos remain on the Contact page.

### T05 — Add Contact Icons Next to Links
**Description:** Add icons next to contact links using the specified icon set, aligned with text and no taller than text height.
**Inputs:**
- `site/contact.html`
- `site/styles.css`
- `trail/meta/files/icons/email.svg`
- `trail/meta/files/icons/linkedin.svg`
- `trail/meta/files/icons/youtube.svg`
- `trail/meta/files/icons/link.svg`
**Outputs:**
- Updated `site/contact.html` with icon elements next to each link.
- Updated `site/styles.css` with icon sizing/alignment styles.
- Icons copied into `site/assets/icons/` for use by the site.
**Acceptance Criteria:**
- Email links use `email.svg`.
- LinkedIn links use `linkedin.svg`.
- YouTube links use `youtube.svg`.
- Any other links use `link.svg`.
- Icons appear directly next to link text, aligned with baseline or center, and do not exceed text height.

### T06 — Validate Rendering and Functionality
**Description:** Verify that homepage cards and contact icons render correctly and the site remains functional.
**Inputs:**
- `site/index.html`
- `site/contact.html`
- `site/styles.css`
**Outputs:**
- Finalized files ready for review.
**Acceptance Criteria:**
- Homepage cards are consistent size, reduced height, and layout changes by orientation.
- Contact page displays icons correctly with no logos.
- All links function correctly.
- Visual style remains warm, minimal, and aligned with Ventura Nomadica branding.