📋 Volunteer & Staff QA Instructions

12 Specific Verification Items

1️⃣ Step-by-Step Test Cards

Each numbered card below contains exact volunteer actions, expected outcomes, and an embedded live preview.

2️⃣ Interactive Verification Buttons

Click [ PASS ✅ ] or [ FAIL ❌ ] on each card. Your answers save automatically to your browser.

3️⃣ Direct Live Site Links

Click "Test on Live Site ↗" to open specific sections (Homepage, Print Hub, Footer) in a new tab.

🧪 Detailed Test Verification Matrix

12 Test Cases

Click any row to expand/collapse • Auto-collapses on verification

Specification Requirement: Extend Tailwind CSS configuration to define custom brand color variables: brand-orange (#e78b1e) and brand-green (#45b53f).

🔍 Volunteer Action:

Look at the color swatches below. Verify that the Orange swatch is #e78b1e (Warm SYMin Orange) and the Green swatch is #45b53f (Fresh SYMin Green).

✅ Expected PASS Result:

The swatches display rich, vibrant orange (#e78b1e) and green (#45b53f) background colors, not dark gray or default slate.

Live Component Preview SandboxInteractive Verification

🎨

bg-brand-orange

#e78b1e (Warm Orange)

🌿

bg-brand-green

#45b53f (Fresh Green)

Both swatches render the pure custom brand colors defined in Tailwind CSS configuration and theme rules.

Tested in Embedded Sandbox

Specification Requirement: Apply bg-brand-orange, text-brand-orange, hover:bg-brand-green, and border-brand-green utility classes across primary CTA buttons and active focus selector pills.

🔍 Volunteer Action:

1. Hover over the "Interactive Hover Test Button" below. 2. Click on the Focus Selector pills (e.g., "Get Help", "Give Help").

✅ Expected PASS Result:

1. The button starts with vibrant orange (#e78b1e) background and green (#45b53f) border, then smoothly turns green (#45b53f) with white text on hover. 2. The active focus pill displays the orange background (#e78b1e) with green border.

Live Component Preview SandboxInteractive Verification

Hover to test color shift

Live Focus Selector Active Pill:

🌟 Active Persona Pill

Test on Live Page ➔

Specification Requirement: Header displays the wide horizontal logo (green/orange variant, h-8 / ~32-40px) and full horizontal navigation on desktop and tablet-landscape (768px+). Below 768px (tablets, mobile), inline links hide and a top-right hamburger button opens a fixed dark slide-over drawer without pushing main content down. While drawer is open, all floating widgets smoothly fade out and hide.

🔍 Volunteer Action:

Resize screen below 768px. EXPECTED: Desktop menu links remain visible until 768px. Below 768px, a top-right hamburger appears. Opening the menu slides a drawer over from the right without moving main page content, and floating donation/chat widgets smoothly fade out.

✅ Expected PASS Result:

1. The official horizontal Street Youth Ministry logo image (green text with orange accents) is clearly visible and correctly scaled (~32-40px height). 2. On screens >= 768px, full horizontal navigation links + action buttons are visible on the right. 3. On screens < 768px, inline links cleanly hide and a hamburger icon button appears on the top-right. 4. Clicking the hamburger opens a dark slate-900 slide-over drawer from the right over top of the page with smooth transition and translucent backdrop. 5. Main page content stays locked in place (zero layout shift / CLS). 6. Fixed & floating widgets (e.g. Click & Pledge floating tabs, chat toggles) smoothly fade out (opacity-0 pointer-events-none) while drawer is open. 7. Closing the drawer smoothly fades floating widgets back in. 8. Clicking the backdrop, X button, navigation link, or pressing ESC smoothly closes the drawer.

Live Component Preview SandboxInteractive Verification

h-8 (32px) Scaled

Breakpoint:768px (`md:`)

📱 Slide-Over Drawer (<768px) • 💻 Inline Navbar (≥768px)

✨ Drawer Open Behavior:Adds data-drawer-open="true" & drawer-open to fade out all floating donation/chat widgets.

Test on Live Page ➔

Specification Requirement: Update Footer.astro to render the stacked square logo (green/orange variant) above organizational address and contact details.

🔍 Volunteer Action:

Scroll down to the Footer component preview below (or click "Test on Live Site"). Locate the logo in the bottom-left column.

✅ Expected PASS Result:

The square Street Youth Ministry logo (with green circle, cross, and orange text) is displayed with rounded corners and border next to "Street Youth Ministry, Austin, Texas".

Live Component Preview SandboxInteractive Verification

Street Youth Ministry

Austin, Texas

Test on Live Page ➔

Specification Requirement: Update /src/pages/hub/[id].astro and ManagedContentTemplate.astro to include the wide horizontal logo in the top print header section.

🔍 Volunteer Action:

Click "Test on Live Site" to open a Hub story page (e.g. /hub/c000-0101). Look at the top print header block or inspect print preview.

✅ Expected PASS Result:

The official horizontal SharinPix logo image is embedded at the top of the Hub printable header alongside "Street Youth Ministry of Austin".

Live Component Preview SandboxInteractive Verification

Street Youth Ministry of Austin

Printable Hub Document Header

Test on Live Page ➔

Specification Requirement: Add @media print CSS utility rules ensuring logo remains prominently visible at top of printed Hub pages while hiding non-printable web UI elements (buttons, navbars, chat launchers).

🔍 Volunteer Action:

Open /hub/c000-0101 and click the "Print / Save as PDF" button (or press Ctrl+P / Cmd+P). Check the browser print preview dialog.

✅ Expected PASS Result:

In the print preview, navigation bars, interactive buttons, and chat widgets are completely hidden. The page cleanly displays the official logo and content.

Live Component Preview SandboxInteractive Verification

🖨️@media print CSS Utility Rules ActiveVerified

Header logo & contact bar unhides (print:block)
2-Column static photo grid activates (print:grid)
Donation off-ramp callout displays with vector SVG QR code (print:block)
Interactive buttons, navbars, and chat widgets hide (print:hidden)

Scannable Print Donation QR Code

Target: https://give.symin.org

✓ Vector SVG: Sharp at 300+ DPI print resolution

Open Live Hub Page ➔

Test on Live Page ➔

Specification Requirement: Update Hero.astro to feature the primary hero banner image wrapped inside a semantic, accessible <figure> container using static SharinPix image URL.

🔍 Volunteer Action:

Inspect the Hero banner preview below or view HTML source. Check that the hero image is enclosed inside an HTML <figure> tag.

✅ Expected PASS Result:

The image element is neatly contained inside `<figure class="m-0">` with valid SharinPix image URL.

Live Component Preview SandboxInteractive Verification

Wrapped in semantic <figure class="m-0">

Test on Live Page ➔

Specification Requirement: Define and render static descriptive caption text inside <figcaption id="hero-banner-caption"> directly below or layered on hero image ("Street Youth Ministry Drop-In Center — 2008 Justin Ln, Austin, TX").

🔍 Volunteer Action:

Look directly beneath the hero image in the preview below.

✅ Expected PASS Result:

A styled caption card displays with pin icon 📍 and text: "Street Youth Ministry Drop-In Center — 2008 Justin Ln, Austin, TX" inside a `<figcaption id="hero-banner-caption">` element.

Live Component Preview SandboxInteractive Verification

📍

Street Youth Ministry Drop-In Center

2008 Justin Ln, Austin, TX

Test on Live Page ➔

Specification Requirement: Enforce WCAG 2.1 AA accessibility: set meaningful static alt attribute on <img> tag and explicitly link caption via aria-describedby="hero-banner-caption".

🔍 Volunteer Action:

Check the real-time DOM Attribute Inspector badge on the Hero preview below.

✅ Expected PASS Result:

Image has `alt="Street Youth Ministry Drop-In Center and Community Outreach in Austin, TX"` and `aria-describedby="hero-banner-caption"`.

Live Component Preview SandboxInteractive Verification

✓ alt="Street Youth Ministry Drop-In Center and Community Outreach in Austin, TX"

✓ aria-describedby="hero-banner-caption"

Test on Live Page ➔

Specification Requirement: Apply above-the-fold runtime performance attributes: set loading="eager" and fetchpriority="high" on hero <img> tag to eliminate layout shifts.

🔍 Volunteer Action:

Check the Performance Attributes in the Inspector badge on the Hero preview below.

✅ Expected PASS Result:

Image tag contains `loading="eager"` and `fetchpriority="high"`, ensuring instantaneous browser preloading without layout jumping.

Live Component Preview SandboxInteractive Verification

⚡ loading="eager" (No lazy delay)

⚡ fetchpriority="high" (Highest CDN priority)

Test on Live Page ➔

Specification Requirement: Verify presence of /public/favicon.svg in root static assets directory, featuring custom vector artwork based on square green/orange Street Youth Ministry logo geometry and palette (#e78b1e and #45b53f).

🔍 Volunteer Action:

Inspect the live SVG Favicon artwork rendered below or click the direct /favicon.svg link.

✅ Expected PASS Result:

Crisp vector artwork displays the brand green (#45b53f) background with the warm orange (#e78b1e) sun/cross geometry and white central symbol.

Live Component Preview SandboxInteractive Verification

/public/favicon.svgVector SVG with crisp white background, #e78b1e & #45b53f brand artwork

Test on Live Page ➔

Specification Requirement: Update Layout.astro <head> elements to link SVG favicon: <link rel="icon" type="image/svg+xml" href="/favicon.svg" />.

🔍 Volunteer Action:

Look at the browser tab icon for this website, or check the <head> link tag.

✅ Expected PASS Result:

The browser tab displays the custom Street Youth Ministry SVG logo icon.

Live Component Preview SandboxInteractive Verification

Test on Live Page ➔

🖼️ Complete Live Header & Footer Test Instances

Interactive full component renders verifying that both Header.astro and Footer.astro load and render correctly with brand logos.

Header.astro Component (Test 2.1.1)Live Instance

Core Mission Urgent Needs Schedules HubContact

Old Site Test

Navigation Menu

🎯Core Mission➔📦Urgent Needs➔📅Schedules & Outreach➔📚Community HubExplore ➔📍Contact & Location➔

Old Site QA Tests

Street Youth Ministry • Austin, TX

Hero.astro Component (Tests 3.1.1 - 3.1.4)Live Instance

Serving Street-Dependent Youth in Austin

Providing safety, community, and support.

Customize Your Experience

Select your relationship with Street Youth Ministry to filter relevant schedules and actions.

Introductory overview, core services, and popular ways to get involved.

Basic Needs & Urgent Supplies 📦•Spiritual & Growth Groups 🕊️•Location, Hours & Transit 📍

📍 Client Services & Contact Options🤝 Youth Seeking Meals, Supplies, or Support

📍Open Location in Google Maps

⚠️We are NOT an overnight shelter. We do NOT provide cash assistance.

📍 Day Center & Sunshine Store

📍 2008 Justin Ln, Austin, TX

Across Burnet Rd from Lala's. Look for the Street Youth Ministry sign on the building with murals.

📞 Call or Text (Phone / SMS)

📞 512-553-3796

Street Outreach team meets youth on West Campus and local libraries. Text or call for current team location.

🙌 Volunteer & In-Kind GivingThank you for sharing your time, skills, and supplies!

📍Open Drop-Off Location in Google Maps

🙏 Prayer Team

Hold one youth in prayer every 3 weeks.

📍 Physical Item Drop-Off

📍 2008 Justin Ln, Austin, TX
Drop-Off Hours: Mon–Fri 12:30 PM – 3:30 PM (No appointment needed)

📮 Official Shipping & Package Address

Street Youth Ministry
7421 Burnet Rd #264
Austin, TX 78757

501(c)(3) Tax-Exempt NonprofitEIN / IRS Charity ID: 46-1449556

📮 Official Check & Package Mailing Address

Street Youth Ministry
7421 Burnet Rd #264
Austin, TX 78757

Check donations receive a formal tax acknowledgment letter by mail.

📈 Appreciated Stocks & Investment Gifts

Giving appreciated stock or investment instruments directly to Street Youth Ministry can eliminate capital gains tax while providing a full fair-market charitable deduction.

Transfer details via chat assistant

📬 News, Impact Stories & UpdatesFor Volunteers, Donors, Supporters & Community Partners

📬 Quarterly Print Mailer

In-depth print newsletter featuring impact metrics, financial accountability, and team notes.

📱 Urgent Needs SMS Alerts

Immediate text alerts when weather emergencies occur or specific items run critically low.

🌐 Complete Overview & Community PitchAll Programs, Volunteer Shifts, Supplies & News Updates

Showing all community programs, client support schedules, volunteer opportunities, item acceptance lists, and field stories across Street Youth Ministry. Subscribe to our monthly newsletter or SMS updates to stay connected!

Basic Needs

Food, shelter & safety

Spiritual Guidance

Mentorship & faith

Developmental

Healing, growth & life skills

Street Youth Ministry Drop-In Center and Community Outreach in Austin, TX — 📍
Street Youth Ministry Drop-In Center
2008 Justin Ln, Austin, TX

Footer.astro Component (Test 2.1.2)Live Instance

Street Youth MinistryAustin, Texas

Street Youth Ministry serves street-dependent youth and young adults in Austin, Texas. Providing basic needs, spiritual guidance, and developmental support.

Austin, Texas•Short link: symin.org•Old Site (Google Sites)

Navigation

Community HubNEW
Core Mission
Contact Us
Donate / Give
Old Site

Publishing & Endpoints

symin.org (Short Domain)
/robots.txt
/llms.txt
Targeted for GitHub & Cloudflare publication.

Austin, TX Youth Outreach & Care