Skip to content

Commit 0be1003

Browse files
tstrombergtstromberg
committed
more tuning
1 parent cddad4c commit 0be1003

File tree

4 files changed

+208
-42
lines changed

4 files changed

+208
-42
lines changed

‎index.html‎

Lines changed: 136 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -282,6 +282,8 @@
282282
text-transform: uppercase;
283283
letter-spacing: 1px;
284284
position: relative;
285+
min-height: 44px;
286+
min-width: 44px;
285287
}
286288

287289
.cta-button:hover {
@@ -321,6 +323,56 @@
321323
transform: skew(-10deg);
322324
}
323325

326+
/* Focus styles for keyboard navigation */
327+
:focus-visible {
328+
outline: 4px solid #000;
329+
outline-offset: 2px;
330+
box-shadow: 0 0 0 6px rgba(255, 255, 0, 0.5);
331+
}
332+
333+
button:focus-visible,
334+
a:focus-visible {
335+
outline: 4px solid #000;
336+
outline-offset: 4px;
337+
background: rgba(255, 255, 0, 0.3);
338+
box-shadow: 0 0 0 8px rgba(255, 255, 0, 0.5);
339+
}
340+
341+
/* Remove default focus outline for mouse users */
342+
:focus:not(:focus-visible) {
343+
outline: none;
344+
}
345+
346+
/* Tablet styles */
347+
@media (max-width: 1024px) {
348+
.container {
349+
padding: 25px 20px;
350+
gap: 35px;
351+
}
352+
353+
h1 {
354+
font-size: 3.5rem;
355+
}
356+
357+
.tagline {
358+
font-size: 1.5rem;
359+
}
360+
361+
.pain-point {
362+
font-size: 2rem;
363+
}
364+
365+
.main-content {
366+
padding: 25px;
367+
}
368+
369+
.cta-button {
370+
font-size: 1.3rem;
371+
padding: 20px 40px;
372+
}
373+
}
374+
375+
/* Mobile styles */
324376
@media (max-width: 768px) {
325377
.container {
326378
grid-template-columns: 1fr;
@@ -353,12 +405,31 @@
353405
transform: rotate(0deg);
354406
padding: 30px;
355407
}
408+
.cta-button {
409+
min-width: 44px;
410+
min-height: 44px;
411+
padding: 16px 32px;
412+
font-size: 1.3rem;
413+
}
356414
.user-types {
357415
flex-direction: column;
358416
}
417+
.user-type {
418+
min-height: 44px;
419+
padding: 24px;
420+
}
359421
.bg-accent {
360422
display: none;
361423
}
424+
425+
/* Ensure all interactive elements are 44x44 minimum */
426+
button, a {
427+
min-height: 44px;
428+
min-width: 44px;
429+
display: inline-flex;
430+
align-items: center;
431+
justify-content: center;
432+
}
362433
}
363434
</style>
364435
<script>
@@ -400,27 +471,36 @@
400471

401472
// Create popup content
402473
const popup = document.createElement("div");
474+
popup.setAttribute("role", "dialog");
475+
popup.setAttribute("aria-labelledby", "popup-title");
476+
popup.setAttribute("aria-modal", "true");
477+
478+
// Responsive popup styles
479+
const isMobile = window.innerWidth <= 768;
403480
popup.style.cssText = `
404481
background: #FFFF00;
405482
border: 5px solid black;
406-
border-bottom: 10px solid black;
407-
border-right: 10px solid black;
408-
box-shadow: 12px 12px 0 black;
409-
padding: 40px;
410-
max-width: 500px;
483+
border-bottom: ${isMobile ? '6px' : '10px'} solid black;
484+
border-right: ${isMobile ? '6px' : '10px'} solid black;
485+
box-shadow: ${isMobile ? '6px 6px' : '12px 12px'} 0 black;
486+
padding: ${isMobile ? '20px' : '40px'};
487+
max-width: ${isMobile ? '95%' : '500px'};
488+
width: 90%;
489+
max-height: 90vh;
490+
overflow-y: auto;
411491
text-align: center;
412492
font-family: "Arial", "Helvetica", sans-serif;
413-
transform: rotate(-1deg);
493+
transform: ${isMobile ? 'rotate(0deg)' : 'rotate(-1deg)'};
414494
`;
415495

416496
popup.innerHTML = `
417-
<h3 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 20px; color: black;">
497+
<h2 id="popup-title" style="font-size: 1.5rem; font-weight: bold; margin-bottom: 20px; color: black;">
418498
Get Early Access
419-
</h3>
499+
</h2>
420500
<p style="font-size: 1.1rem; line-height: 1.6; margin-bottom: 25px; color: black;">
421501
Contact us at <a href="${mailtoLink}" style="color: black; font-weight: bold; text-decoration: underline;">${email}</a> and we'll give you first access to tools that will change how your team ships code.
422502
</p>
423-
<button onclick="closePopup()" style="
503+
<button id="popup-close-btn" onclick="closePopup()" style="
424504
font-family: 'Arial', 'Helvetica', sans-serif;
425505
font-size: 1.1rem;
426506
font-weight: bold;
@@ -440,6 +520,22 @@ <h3 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 20px; color: bla
440520
overlay.appendChild(popup);
441521
document.body.appendChild(overlay);
442522

523+
// Save previously focused element
524+
window.previouslyFocused = document.activeElement;
525+
526+
// Focus the close button
527+
setTimeout(() => {
528+
document.getElementById('popup-close-btn').focus();
529+
}, 100);
530+
531+
// Handle escape key
532+
function handleEscape(e) {
533+
if (e.key === 'Escape') {
534+
closePopup();
535+
}
536+
}
537+
document.addEventListener('keydown', handleEscape);
538+
443539
// Close popup when clicking outside
444540
overlay.addEventListener("click", function (e) {
445541
if (e.target === overlay) {
@@ -449,32 +545,55 @@ <h3 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 20px; color: bla
449545

450546
// Store reference for closing
451547
window.currentPopup = overlay;
548+
window.escapeHandler = handleEscape;
452549
}
453550

454551
function closePopup() {
455552
if (window.currentPopup) {
456553
document.body.removeChild(window.currentPopup);
457554
window.currentPopup = null;
555+
556+
// Remove escape handler
557+
if (window.escapeHandler) {
558+
document.removeEventListener('keydown', window.escapeHandler);
559+
window.escapeHandler = null;
560+
}
561+
562+
// Restore focus to previously focused element
563+
if (window.previouslyFocused) {
564+
window.previouslyFocused.focus();
565+
window.previouslyFocused = null;
566+
}
458567
}
459568
}
460569
</script>
461570
</head>
462571
<body>
572+
<!-- Skip navigation link for screen readers and keyboard users -->
573+
<a href="#main-content" class="skip-link" style="position: absolute; left: -9999px; z-index: 999; padding: 1rem; background: #000; color: #ffff00; text-decoration: none; font-weight: bold;">Skip to main content</a>
574+
<style>
575+
.skip-link:focus {
576+
position: fixed;
577+
left: 0;
578+
top: 0;
579+
z-index: 1001;
580+
}
581+
</style>
463582
<!-- Geometric background accents -->
464583
<div class="bg-accent bg-accent-1"></div>
465584
<div class="bg-accent bg-accent-2"></div>
466585
<div class="bg-accent bg-accent-3"></div>
467586

468587
<div class="container">
469588
<div class="hero-left">
470-
<img src="media/logo.png" alt="CodeGroove Logo" class="logo" />
589+
<img src="media/logo.png" alt="CodeGroove - Quality tools for open source engineers" class="logo" />
471590
<h1>codeGROOVE</h1>
472591
<div class="tagline">
473592
Open-source friendly developer tools that scale
474593
</div>
475594
</div>
476595

477-
<div class="hero-right">
596+
<main id="main-content" class="hero-right">
478597
<div class="pain-point">Out-ship your competition.</div>
479598

480599
<div class="main-content">
@@ -530,15 +649,16 @@ <h3>Enterprise Engineering Teams</h3>
530649
>
531650
Keep your engineers in the groove.
532651
</h2>
533-
<a
534-
href="#"
652+
<button
535653
class="cta-button"
536-
onclick="sendEmail(); return false;"
537-
>Get Early Access</a
654+
onclick="sendEmail()"
655+
type="button"
656+
aria-label="Get early access to CodeGroove developer tools"
657+
>Get Early Access</button
538658
>
539659
</div>
540660
</div>
541-
</div>
661+
</main>
542662
</div>
543663
</body>
544664
</html>

‎src/_layouts/base.njk‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,20 +17,20 @@
1717
<header class="site-header">
1818
<div class="container">
1919
<nav class="main-nav">
20-
<a href="/" class="logo-link">
21-
<img src="/media/logo.svg" alt="codeGROOVE" class="nav-logo">
20+
<a href="/" class="logo-link" aria-label="codeGROOVE home">
21+
<img src="/media/logo.svg" alt="" class="nav-logo" aria-hidden="true">
2222
<span class="brand-name">codeGROOVE</span>
2323
</a>
24-
<ul class="nav-menu">
25-
<li><a href="/" {% if page.url == '/' %}class="active"{% endif %}>Home</a></li>
26-
<li><a href="/products/" {% if page.url == '/products/' %}class="active"{% endif %}>Ready to Review</a></li>
27-
<li><a href="/open-source/" {% if page.url == '/open-source/' %}class="active"{% endif %}>Open Source</a></li>
28-
<li><a href="/security/" {% if page.url == '/security/' %}class="active"{% endif %}>Security</a></li>
29-
<li><a href="/about/" {% if page.url == '/about/' %}class="active"{% endif %}>About</a></li>
30-
<li><a href="/blog/" {% if page.url.startsWith('/blog/') %}class="active"{% endif %}>Blog</a></li>
31-
<li><a href="/contact/" {% if page.url == '/contact/' %}class="active"{% endif %}>Contact</a></li>
24+
<ul class="nav-menu" id="nav-menu" role="navigation" aria-label="Main navigation">
25+
<li><a href="/" {% if page.url == '/' %}class="active" aria-current="page"{% endif %}>Home</a></li>
26+
<li><a href="/products/" {% if page.url == '/products/' %}class="active" aria-current="page"{% endif %}>Ready to Review</a></li>
27+
<li><a href="/open-source/" {% if page.url == '/open-source/' %}class="active" aria-current="page"{% endif %}>Open Source</a></li>
28+
<li><a href="/security/" {% if page.url == '/security/' %}class="active" aria-current="page"{% endif %}>Security</a></li>
29+
<li><a href="/about/" {% if page.url == '/about/' %}class="active" aria-current="page"{% endif %}>About</a></li>
30+
<li><a href="/blog/" {% if page.url.startsWith('/blog/') %}class="active" aria-current="page"{% endif %}>Blog</a></li>
31+
<li><a href="/contact/" {% if page.url == '/contact/' %}class="active" aria-current="page"{% endif %}>Contact</a></li>
3232
</ul>
33-
<button class="nav-toggle" aria-label="Toggle navigation">
33+
<button class="nav-toggle" aria-label="Toggle navigation" aria-expanded="false" aria-controls="nav-menu">
3434
<span></span>
3535
<span></span>
3636
<span></span>

‎src/about.njk‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ description: Meet the team turning developer tools into instruments of pure prod
1414
<section class="container">
1515
<div class="content-section" style="max-width: 800px; margin: 0 auto;">
1616
<p style="font-size: 1.5rem; line-height: 1.8; font-weight: 500; margin-bottom: 2rem; text-align: center; color: var(--color-accent);">
17-
🎸 Remember when coding felt like jamming with your favorite band?
17+
<span aria-hidden="true">🎸</span> Remember when coding felt like jamming with your favorite band?
1818
</p>
1919

2020
<p style="font-size: 1.25rem; line-height: 1.8; margin-bottom: 3rem;">
@@ -24,7 +24,7 @@ description: Meet the team turning developer tools into instruments of pure prod
2424
<div style="display: flex; align-items: center; gap: 3rem; margin-bottom: 3rem; flex-wrap: wrap;">
2525
<img src="/media/founder.jpg" alt="Thomas Stromberg" style="width: 200px; height: 200px; border-radius: 50%; object-fit: cover;">
2626
<div style="flex: 1; min-width: 300px;">
27-
<h2 style="margin-bottom: 1rem;">🎹 Thomas Stromberg, Lead Composer</h2>
27+
<h2 style="margin-bottom: 1rem;"><span aria-hidden="true">🎹</span> Thomas Strömberg, Founder</h2>
2828
<p style="font-size: 1.125rem; line-height: 1.8;">
2929
After 30 years playing in the open source orchestra—from FreeBSD's early days to Kubernetes' main stage—I've learned what makes developers dance. Built Triage Party and malcontent because sometimes you gotta write your own sheet music.
3030
</p>
@@ -35,9 +35,9 @@ description: Meet the team turning developer tools into instruments of pure prod
3535
</div>
3636

3737
<div style="background: #f8f8f8; padding: 2rem; border-radius: 16px; margin: 3rem 0;">
38-
<h2 style="font-size: 2rem; margin-bottom: 1.5rem; text-align: center; color: var(--color-accent);">🎵 The codeGROOVE Sound</h2>
38+
<h2 style="font-size: 2rem; margin-bottom: 1.5rem; text-align: center; color: var(--color-accent);"><span aria-hidden="true">🎵</span> The codeGROOVE Sound</h2>
3939
<p style="font-size: 1.25rem; line-height: 1.8; text-align: center; margin-bottom: 0; font-weight: 500;">
40-
Simple beats complex. Flow beats friction. Ship beats stuck.
40+
Simple, not complex. Flow, not friction.
4141
</p>
4242
</div>
4343

@@ -46,22 +46,22 @@ description: Meet the team turning developer tools into instruments of pure prod
4646

4747
<div class="feature-grid" style="margin: 3rem 0;">
4848
<div class="card" style="text-align: center;">
49-
<div style="font-size: 3rem; margin-bottom: 1rem;">🏆</div>
49+
<div style="font-size: 3rem; margin-bottom: 1rem;" aria-hidden="true">🏆</div>
5050
<h3>30 Years of Open Source</h3>
5151
<p>From FreeBSD to Firefox to Kubernetes. We've been in the band since the beginning.</p>
5252
</div>
5353
<div class="card" style="text-align: center;">
54-
<div style="font-size: 3rem; margin-bottom: 1rem;">🚀</div>
54+
<div style="font-size: 3rem; margin-bottom: 1rem;" aria-hidden="true">🚀</div>
5555
<h3>Battle-Tested at Scale</h3>
5656
<p>Google. Chainguard. Equinix. We've performed on the biggest stages in tech.</p>
5757
</div>
5858
<div class="card" style="text-align: center;">
59-
<div style="font-size: 3rem; margin-bottom: 1rem;">🛠️</div>
59+
<div style="font-size: 3rem; margin-bottom: 1rem;" aria-hidden="true">🛠️</div>
6060
<h3>Tools That Actually Ship</h3>
6161
<p>Triage Party. malcontent. Real tools solving real problems for thousands of developers.</p>
6262
</div>
6363
<div class="card" style="text-align: center;">
64-
<div style="font-size: 3rem; margin-bottom: 1rem;">💡</div>
64+
<div style="font-size: 3rem; margin-bottom: 1rem;" aria-hidden="true">💡</div>
6565
<h3>AI-Powered, Human-Centered</h3>
6666
<p>We're riding the AI wave to amplify what small teams can accomplish—without the hype.</p>
6767
</div>
@@ -81,7 +81,7 @@ description: Meet the team turning developer tools into instruments of pure prod
8181

8282
<div style="text-align: center; padding: 4rem 0;">
8383
<h2 style="font-size: 2.5rem; margin-bottom: 1.5rem; color: var(--color-accent);">
84-
Ready to Join the Band? 🎸
84+
Ready to Join the Band? <span aria-hidden="true">🎸</span>
8585
</h2>
8686
<p style="font-size: 1.5rem; margin-bottom: 2rem; font-weight: 500;">
8787
Let's turn your development chaos into pure harmony.

0 commit comments

Comments
 (0)