From 61d5ddc3af6335f036133379002379ff838fbf24 Mon Sep 17 00:00:00 2001 From: Dan Giordano Date: Mon, 6 Jul 2026 07:59:27 -0400 Subject: [PATCH 1/2] Unify homepage card system and enlarge header tap targets MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Homepage (index.mdx): collapse the four ad-hoc card treatments into two intentional types — the blue img "hero" row (Detect/Communicate/Resolve) and uniform icon cards everywhere else. Drop the redundant nested #### sub-headings (and their stray heading anchors), remove the one-off `cta` props, and add icons to the Learn More and Quick Links rows so every non-hero card matches. style.css: expand the small header icon buttons (search, assistant, dark-mode, more-actions) to a 44x44 minimum touch target (WCAG 2.5.5) via an invisible ::after hit-area overlay — no visual change, and the theme's responsive show/hide still applies. Verified live at 390px: targets go from 18–32px to ~44px, hit-tested. Addresses the homepage card-consistency and mobile touch-target findings from the /impeccable critique of the docs. Co-Authored-By: Claude Opus 4.8 (1M context) --- index.mdx | 53 +++++++++++++++++++---------------------------------- style.css | 23 +++++++++++++++++++++++ 2 files changed, 42 insertions(+), 34 deletions(-) diff --git a/index.mdx b/index.mdx index 80e98ca2..d896e5cb 100644 --- a/index.mdx +++ b/index.mdx @@ -11,11 +11,11 @@ mode: "wide" Checkly combines **testing**, **monitoring**, and **incident communication**
into a single platform to help you catch issues before your users do. - + Learn more about how Checkly works for modern teams. - + Get up and running with tests and monitors deployed in 5 minutes. @@ -25,21 +25,15 @@ Get up and running with tests and monitors deployed in 5 minutes. ## Product Documentation - -#### Monitor & Test - + Detect issues before they happen with multiple layers of detection from around the globe. - -#### Alerts & Status - + Get notified when issues happen with smart alerting, status pages, and dashboards. - -#### Debug & Fix - + Debug issues with distributed OTel tracing, AI-powered insights, and performance analysis. @@ -47,12 +41,12 @@ Debug issues with distributed OTel tracing, AI-powered insights, and performance --- ## Developer Tools Documentation + Build and deploy monitoring infrastructure with reusable code constructs. - Get everything you need to monitor and test your applications continuously with the Checkly CLI. @@ -60,9 +54,6 @@ Get everything you need to monitor and test your applications continuously with Extend the Checkly platform with our powerful REST API and SDKs. - - - --- @@ -70,23 +61,17 @@ Extend the Checkly platform with our powerful REST API and SDKs. ## Learn More - - #### Reliability Fundamentals - - Learn the fundamentals of reliability and how to build a reliable application. - - - - #### How-to Guides - - Implementation tutorials, best practices, and real-world examples. - + +Learn the fundamentals of reliability and how to build a reliable application. + - - #### Join the Checkly Community + +Implementation tutorials, best practices, and real-world examples. + - Ask questions and get help from the Checkly team and other users. - + +Ask questions and get help from the Checkly team and other users. + --- @@ -94,19 +79,19 @@ Extend the Checkly platform with our powerful REST API and SDKs. ## Quick Links - + Platform overview - + Monitor APIs - + Get notified - + Monitoring as code diff --git a/style.css b/style.css index ef124f56..291a8fdf 100644 --- a/style.css +++ b/style.css @@ -36,3 +36,26 @@ tr { border-color: rgba(255, 255, 255, 0.2); color: #e6e6e6; } + +/* Expand small header icon buttons to a 44x44 minimum touch target + (WCAG 2.5.5) via an invisible hit-area overlay, so the visual header + layout is unchanged and the theme's responsive show/hide still applies. */ +header button[aria-label="Open search"], +header button[aria-label="Toggle assistant panel"], +header button[aria-label="Toggle dark mode"], +header button[aria-label="More actions"] { + position: relative; +} + +header button[aria-label="Open search"]::after, +header button[aria-label="Toggle assistant panel"]::after, +header button[aria-label="Toggle dark mode"]::after, +header button[aria-label="More actions"]::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 44px; + height: 44px; + transform: translate(-50%, -50%); +} From d21fc67f654be7482613f02d0e522523f8cc16f2 Mon Sep 17 00:00:00 2001 From: Dan Giordano Date: Mon, 6 Jul 2026 10:17:40 -0400 Subject: [PATCH 2/2] quick homepage clean up --- .claude/settings.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.claude/settings.json b/.claude/settings.json index 05ad30ef..87376569 100644 --- a/.claude/settings.json +++ b/.claude/settings.json @@ -1,15 +1,15 @@ { "permissions": { - "rules": [ + "allow": [ + "mcp__plugin_playwright_playwright", "Edit(docs/**)", "Edit(*.mdx)", - "Edit(*.md)", + "Edit(*.md)", "Edit(docs.json)", "Read(**)", "Bash(git *)", "Bash(gh *)", "Bash(npm *)" - ], - "mode": "acceptEdits" + ] } -} \ No newline at end of file +}