Claude/build lever website h38nk by guestgetter · Pull Request #299 · alirezarezvani/claude-skills

guestgetter · 2026-03-09T10:39:15Z

Summary

Context

Changes

Testing

Local quality checks passed (Python syntax, markdown links)
All Python scripts tested and working
Skills validated with Claude (if applicable)
ci-quality-gate workflow will pass
Manual testing completed

Testing Details:

Security

No secrets, credentials, or API keys committed
No destructive commands in generated outputs
Path traversal vulnerabilities checked
Dependencies reviewed (if added)

Documentation

README.md updated (if applicable)
CLAUDE.md updated (if applicable)
Inline code comments added for complex logic
CHANGELOG.md updated (if applicable)
Skill SKILL.md files updated (if applicable)

Reviewers

@

Related Issues

Fixes #
Closes #
Related to #

Type:
Scope:

Complete multi-page editorial website for The Lever — an AI, automation, and marketing newsletter for local businesses by Kyle and Reese. Architecture: - Pure HTML5/CSS3/vanilla JS — no frameworks, no build tools, 20-year durability - Modular CSS design system with tokens, components, and whimsical elements - Hub-and-spoke internal linking with SEO schema markup on every page - Self-hosted fonts (Fraunces + Outfit), SVG assets, paper texture overlay Pages built: - Homepage with hero, subscribe CTA, featured article, article feed - Article template with full body content, pull quotes, stat callouts - About page with origin story, column explanations, team profiles - Subscribe page with Sabri Suby-style conversion copy - 5 column landing pages (Signal, Field Notes, Systems, Experiment, Contrarian) - 2 contributor profiles (Kyle, Reese) - Archive page and Issue No. 009 - Custom 404 with broken lever illustration - Colophon with design philosophy Design system: - tokens.css: complete design token system (colors, typography, spacing, layout) - components.css: article cards, subscribe boxes, bylines, nav, footer, etc. - whimsy.css: tilt hovers, squiggly underlines, hand-drawn circles, lever animation, scroll reveal, big numbers, paper lift effects - Column-specific page tinting via CSS custom properties Infrastructure: - robots.txt welcoming AI crawlers (GPTBot, PerplexityBot, ClaudeBot) - site.webmanifest, humans.txt - SVG logo, avatars, OG image - Print stylesheet ready https://claude.ai/code/session_01Eo3BFY3nkA7jY5P58DY45w

- JS: scroll-reveal.js, nav.js (mobile toggle), subscribe.js (form placeholder) - Print stylesheet: hides nav/footer, shows URLs, clean typography - XML sitemap with all 30+ pages, AI-friendly robots.txt - 6 topic hub pages (AI Tools, Automation, Marketing, Operations, Case Studies) - 3 additional article pages with full body content (quiet-ranking-factor, graveyard-gap, ai-ad-variations) https://claude.ai/code/session_01Eo3BFY3nkA7jY5P58DY45w

Add 2 new article pages (chef-said-goodbye, website-not-destination) and update 5 topic pages with content and navigation improvements. https://claude.ai/code/session_01Eo3BFY3nkA7jY5P58DY45w

devin-ai-integration

Devin Review found 2 potential issues.

View 5 additional findings in Devin Review.

devin-ai-integration · 2026-03-09T10:41:43Z

the-lever/404.html

+  <script src="js/scroll-reveal.js"></script>
+  <script src="js/nav.js"></script>


🔴 Double-toggle on hamburger button breaks mobile menu on 404.html

The hamburger button has an inline onclick handler that toggles mobile-menu--open (the-lever/404.html:129), AND the page also loads js/nav.js (the-lever/404.html:207) which adds a second click event listener doing the exact same toggle (the-lever/js/nav.js:5-7). When a user clicks the hamburger, both handlers fire on the same click: the first toggles the class ON, the second immediately toggles it OFF. The mobile menu never opens.

Suggested change

<script src="js/scroll-reveal.js"></script>

<script src="js/nav.js"></script>

<script src="js/scroll-reveal.js"></script>

Was this helpful? React with 👍 or 👎 to provide feedback.

devin-ai-integration · 2026-03-09T10:41:44Z

the-lever/colophon.html

+  <script src="js/scroll-reveal.js"></script>
+  <script src="js/nav.js"></script>


🔴 Double-toggle on hamburger button breaks mobile menu on colophon.html

Same issue as 404.html: the hamburger button has an inline onclick handler (the-lever/colophon.html:102) that toggles mobile-menu--open, AND the page loads js/nav.js (the-lever/colophon.html:261) which adds a second click listener performing the same toggle. Both fire on one click, so the class is toggled twice and the mobile menu never opens.

Suggested change

<script src="js/scroll-reveal.js"></script>

<script src="js/nav.js"></script>

<script src="js/scroll-reveal.js"></script>

Was this helpful? React with 👍 or 👎 to provide feedback.

…fonts, and fixes - Add 3 missing articles: customer-acquisition-spread, local-seo-outdated, salon-no-marketing - Add self-hosted font files (Fraunces variable/italic, Outfit variable woff2) - Create doodles.svg sprite sheet with hand-drawn motifs (star, arrow, lever, sparkle, etc.) - Create favicon.ico - Create dedicated subscribe.css and remove inline styles from subscribe.html - Fix semantic HTML: move <footer> outside <main> on all 27 pages - Add pull quote rotation (CSS transform) per build plan - Add animated squiggly underline keyframes - Add squiggly SVG breadcrumb separators - Add skeleton loading state CSS utilities - Increase tilt-hover scale from 1.01 to 1.02 per plan spec - Add decorative SVG doodles between sections on homepage https://claude.ai/code/session_01Eo3BFY3nkA7jY5P58DY45w

devin-ai-integration

Devin Review found 2 new potential issues.

View 8 additional findings in Devin Review.

devin-ai-integration · 2026-03-09T11:29:21Z

the-lever/subscribe.html

+  <script>
+    // Scroll reveal
+    const obs = new IntersectionObserver((entries) => {
+      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('reveal--show'); });
+    }, { threshold: 0.08, rootMargin: '0px 0px -30px 0px' });
+    document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
+
+    // Footer lever tip animation
+    const leverObs = new IntersectionObserver((entries) => {
+      entries.forEach(e => {
+        if (e.isIntersecting) e.target.classList.add('lever-anim--tipped');
+      });
+    }, { threshold: 0.5 });
+    const lever = document.getElementById('footer-lever');
+    if (lever) leverObs.observe(lever);
+  </script>


🔴 subscribe.js is never loaded, causing all subscribe forms to reload the page on submit

The file the-lever/js/subscribe.js implements form submission handling (e.preventDefault(), success feedback, input clearing), but no HTML page in the entire site includes it via a <script> tag. Every subscribe form uses action="#" method="POST", so without the JS handler, form submission causes a full page reload to page# with no email captured and no user feedback. This affects every page with a subscribe form (index.html, about.html, archive.html, subscribe.html, all article pages, all column pages, etc.).

Prompt for agents

The file the-lever/js/subscribe.js exists and handles form submission with preventDefault() and user feedback, but it is never loaded on any page. Add a script tag for js/subscribe.js (or ../js/subscribe.js for subdirectory pages) on every page that contains a subscribe form. For example, in the-lever/subscribe.html after the existing inline script block (around line 332), add: <script src="js/subscribe.js"></script>. This needs to be done consistently across all HTML files that have subscribe forms. Alternatively, the subscribe.js logic could be merged into the inline script blocks that already exist on each page.

Was this helpful? React with 👍 or 👎 to provide feedback.

devin-ai-integration · 2026-03-09T11:29:22Z

the-lever/columns/experiment.html

+        <a href="../articles/customer-acquisition-spread.html" class="article-list__item paper-lift reveal">
+          <h2 class="article-list__title">Customer acquisition costs from 11 restaurants in the same city. The spread was 23x.</h2>
+          <div class="article-list__meta">
+            <span class="byline__avatar byline__avatar--lab">L</span>
+            <span>The Lab</span>
+            <span class="article-list__sep">·</span>
+            <span>Experiment</span>
+          </div>
+          <p class="article-list__excerpt">Same city, same industry, wildly different costs. We dug into the numbers to find out why.</p>
+        </a>


🟡 customer-acquisition-spread article misattributed as "Experiment" by "The Lab" across multiple pages

The article the-lever/articles/customer-acquisition-spread.html declares itself as column "Signal" by author "Reese" (line 14: article:section = Signal, line 13: article:author = Reese, line 56: articleSection = Signal). However, the homepage (the-lever/index.html:237-245), experiment column page (the-lever/columns/experiment.html:77-85), issue page (the-lever/issues/009.html:195-207), and related article links in the-lever/articles/graveyard-gap.html:253-258 and the-lever/articles/chef-said-goodbye.html:242-248 all label it as "Experiment" by "The Lab". This means it incorrectly appears in the Experiment column listing and shows the wrong author/column glyph to users.

Prompt for agents

The article customer-acquisition-spread.html self-identifies as 'Signal' by 'Reese' in its own metadata and header, but is listed as 'Experiment' by 'The Lab' on multiple other pages. Decide on the correct attribution and fix all inconsistent references. The affected locations are: (1) the-lever/columns/experiment.html lines 77-86 — currently lists this article under Experiment; (2) the-lever/index.html lines 237-248 — shows it as Experiment/The Lab; (3) the-lever/issues/009.html lines 195-207 — shows it as Experiment/The Lab; (4) the-lever/articles/graveyard-gap.html lines 253-258 — related article shows Experiment/The Lab; (5) the-lever/articles/chef-said-goodbye.html lines 242-248 — related article shows Experiment/The Lab. If the article is truly 'Signal' by 'Reese', remove it from the Experiment column page, change the glyph/author in all those listings, and add it to the Signal column page (the-lever/columns/signal.html). If it should be 'Experiment', update the article's own metadata and header.

Was this helpful? React with 👍 or 👎 to provide feedback.

claude added 3 commits March 9, 2026 00:55

feat(lever): add article pages and update topic pages

a529104

Add 2 new article pages (chef-said-goodbye, website-not-destination) and update 5 topic pages with content and navigation improvements. https://claude.ai/code/session_01Eo3BFY3nkA7jY5P58DY45w

devin-ai-integration bot reviewed Mar 9, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Claude/build lever website h38nk#299

Claude/build lever website h38nk#299
guestgetter wants to merge 4 commits intoalirezarezvani:mainfrom
guestgetter:claude/build-lever-website-H38nk

guestgetter commented Mar 9, 2026 •

edited by devin-ai-integration bot

Loading

Uh oh!

devin-ai-integration bot left a comment

Uh oh!

devin-ai-integration bot Mar 9, 2026

Uh oh!

devin-ai-integration bot Mar 9, 2026

Uh oh!

devin-ai-integration bot left a comment

Uh oh!

devin-ai-integration bot Mar 9, 2026

Uh oh!

devin-ai-integration bot Mar 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		<script src="js/scroll-reveal.js"></script>
		<script src="js/nav.js"></script>

Uh oh!

Conversation

guestgetter commented Mar 9, 2026 • edited by devin-ai-integration bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Context

Changes

Testing

Security

Documentation

Reviewers

Related Issues

Uh oh!

devin-ai-integration bot left a comment

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration bot Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration bot Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration bot left a comment

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration bot Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration bot Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

guestgetter commented Mar 9, 2026 •

edited by devin-ai-integration bot

Loading