patx/voldservices
add card wide link click
Commit fe85345 · patx · 2026-09-09T13:42:41-04:00
Comments
No comments yet.
Diff
diff --git a/docs/assets/site.css b/docs/assets/site.css
index 1692691..c517ffe 100644
--- a/docs/assets/site.css
+++ b/docs/assets/site.css
@@ -1204,6 +1204,11 @@
.service-title-link { color: inherit; text-decoration: none; }
.service-title-link:hover { color: var(--lift); }
+ .card-link { display: block; color: inherit; text-decoration: none; }
+ .service.card-link { display: flex; }
+ .card-link:hover, .card-link:focus-visible { border-color: var(--lift); }
+ .card-link:hover h3, .card-link:focus-visible h3 { color: var(--lift); }
+
/* ── lightbox ───────────────────────────────────────────────── */
.lightbox {
position: fixed;
diff --git a/docs/index.html b/docs/index.html
index 7f8ba31..2aaba9e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -145,7 +145,7 @@
</div>
<div class="service-grid">
- <article class="service service--wash reveal">
+ <a class="service service--wash reveal card-link" href="/services/pressure-washing/" aria-labelledby="pressure-washing-title">
<div class="service-icon" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M30 12h10l4 6-4 6H30z"/><path d="M30 18h-8v-4a3 3 0 0 0-3-3h-3"/>
@@ -153,7 +153,7 @@
<path d="M8 26h-3M8 32h-5M8 20h-4"/>
</svg>
</div>
- <h3 class="h3"><a class="service-title-link" href="/services/pressure-washing/">Pressure washing</a></h3>
+ <h3 class="h3" id="pressure-washing-title">Pressure washing</h3>
<p>
We use surface cleaners on concrete and lower pressure on painted or porous areas.
That clears algae, dirt, and tire marks without treating every surface like a driveway.
@@ -165,16 +165,16 @@
<li>Fences, screen enclosures, gutters</li>
<li>Dumpster pads & storefronts</li>
</ul>
- </article>
+ </a>
- <article class="service service--seal reveal">
+ <a class="service service--seal reveal card-link" href="/services/paver-sealing/" aria-labelledby="paver-sealing-title">
<div class="service-icon" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M24 6s10 11 10 17a10 10 0 0 1-20 0c0-6 10-17 10-17z"/>
<path d="M6 40h36M6 44h36"/>
</svg>
</div>
- <h3 class="h3"><a class="service-title-link" href="/services/paver-sealing/">Paver sealing</a></h3>
+ <h3 class="h3" id="paver-sealing-title">Paver sealing</h3>
<p>
Good sealing starts with clean, dry pavers and full joints. We wash the surface,
replace missing joint sand, and apply the finish you choose once the pavers are ready.
@@ -186,9 +186,9 @@
<li>Driveways, pool decks, walkways</li>
<li>Resealing for worn pavers</li>
</ul>
- </article>
+ </a>
- <article class="service service--repair reveal">
+ <a class="service service--repair reveal card-link" href="/services/paver-repair/" aria-labelledby="paver-repair-title">
<div class="service-icon" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="5" y="7" width="17" height="12" rx="1"/>
@@ -197,7 +197,7 @@
<path d="M27 34h16M35 24v18M30 29l5-5 5 5"/>
</svg>
</div>
- <h3 class="h3"><a class="service-title-link" href="/services/paver-repair/">Paver repair</a></h3>
+ <h3 class="h3" id="paver-repair-title">Paver repair</h3>
<p>
Loose, sunken, or separated pavers need more than fresh sand. We lift the affected
area, correct the base, replace damaged pieces when a match is available, and reset it.
@@ -209,16 +209,16 @@
<li>Damaged paver replacement</li>
<li>Joint sand and final rinse</li>
</ul>
- </article>
+ </a>
- <article class="service service--roof reveal">
+ <a class="service service--roof reveal card-link" href="/services/roof-cleaning/" aria-labelledby="roof-cleaning-title">
<div class="service-icon" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 24 24 8l20 16"/><path d="M8 22v18h32V22"/>
<path d="M16 40V28h8v12"/><path d="M30 28h6v6h-6z"/>
</svg>
</div>
- <h3 class="h3"><a class="service-title-link" href="/services/roof-cleaning/">Roof cleaning</a></h3>
+ <h3 class="h3" id="roof-cleaning-title">Roof cleaning</h3>
<p>
Black roof streaks are algae. We clean tile, shingle, and metal roofs with a
low-pressure soft wash, so a pressure-washer wand never touches the roof surface.
@@ -230,7 +230,7 @@
<li>Landscaping watered before and rinsed after</li>
<li>Photos available for HOA notices</li>
</ul>
- </article>
+ </a>
</div>
</div>
</section>
@@ -359,33 +359,33 @@
</div>
<div class="areas-grid reveal">
- <div class="area area--primary">
- <h3><a class="service-title-link" href="/service-areas/broward-county/">Broward County</a></h3>
+ <a class="area area--primary card-link" href="/service-areas/broward-county/" aria-labelledby="broward-county-title">
+ <h3 id="broward-county-title">Broward County</h3>
<ul>
<li>Fort Lauderdale</li><li>Pembroke Pines</li><li>Hollywood</li><li>Miramar</li>
<li>Coral Springs</li><li>Plantation</li><li>Weston</li><li>Pompano Beach</li><li>Deerfield Beach</li><li>Coconut Creek</li>
<li>Parkland</li><li>Margate</li><li>Lauderhill</li><li>Oakland Park</li><li>Wilton Manors</li>
<li>Dania Beach</li><li>Hallandale Beach</li><li>Lighthouse Point</li><li>Lauderdale-by-the-Sea</li>
</ul>
- </div>
+ </a>
- <div class="area">
- <h3><a class="service-title-link" href="/service-areas/miami-dade-county/">Miami-Dade County</a></h3>
+ <a class="area card-link" href="/service-areas/miami-dade-county/" aria-labelledby="miami-dade-county-title">
+ <h3 id="miami-dade-county-title">Miami-Dade County</h3>
<ul>
<li>Miami</li><li>Aventura</li><li>Miami Beach</li><li>Doral</li>
<li>Hialeah</li><li>Kendall</li><li>Coral Gables</li><li>Miami Lakes</li>
<li>North Miami</li><li>Pinecrest</li><li>Palmetto Bay</li><li>Homestead</li>
</ul>
- </div>
+ </a>
- <div class="area">
- <h3><a class="service-title-link" href="/service-areas/palm-beach-county/">Palm Beach County</a></h3>
+ <a class="area card-link" href="/service-areas/palm-beach-county/" aria-labelledby="palm-beach-county-title">
+ <h3 id="palm-beach-county-title">Palm Beach County</h3>
<ul>
<li>Boca Raton</li><li>Delray Beach</li><li>Boynton Beach</li><li>West Palm Beach</li>
<li>Wellington</li><li>Jupiter</li><li>Royal Palm Beach</li><li>Lake Worth</li>
<li>Palm Beach Gardens</li><li>Greenacres</li>
</ul>
- </div>
+ </a>
</div>
</div>
</section>