Skip to content

Add Acme Tools static HTML site #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
stmr wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Add Acme Tools static HTML site #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8a59790
Add Acme Tools static site
stmr Jun 13, 2026
ffaa15e
Improve Acme Tools static pages
stmr Jun 14, 2026
01ede89
Refine Acme Tools page structure
stmr Jun 14, 2026
150a1b0
Reduce static page overlap
stmr Jun 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 51 additions & 0 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta
name="description"
content="Learn how Acme Tools supports founders, maintainers, and small product teams."
>
<title>About Acme Tools</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a class="skip-link" href="#main-content">Skip to main content</a>
<header class="site-header">
<a class="brand" href="index.html">Acme Tools</a>
<nav aria-label="Primary navigation">
<ul>
<li><a class="nav-link" href="index.html">Home</a></li>
<li><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main id="main-content" class="page-shell">
<section class="hero compact" aria-labelledby="about-heading">
<p class="eyebrow">About the team</p>
<h1 id="about-heading"><span>About Acme Tools</span></h1>
<p><span>We build practical tools for founders, maintainers, and small product teams.</span></p>
</section>
<section class="content-grid" aria-label="How Acme Tools works">
<article>
<h2>Small-team focus</h2>
<p>Interfaces stay direct so teams can make decisions without extra process.</p>
</article>
<article>
<h2>Maintainer friendly</h2>
<p>Every workflow favors clear ownership, visible status, and low setup cost.</p>
</article>
</section>
<section class="workflow" aria-labelledby="values-heading">
<h2 id="values-heading">How we judge useful software</h2>
<ol>
<li>It should explain current work without a meeting.</li>
<li>It should make the next decision easier to see.</li>
<li>It should stay small enough for busy teams to maintain.</li>
</ol>
</section>
</main>
<footer>Purpose-built tools for focused software teams.</footer>
</body>
</html>
57 changes: 57 additions & 0 deletions contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta
name="description"
content="Contact Acme Tools for simple product software questions."
>
<title>Contact Acme Tools</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a class="skip-link" href="#main-content">Skip to main content</a>
<header class="site-header">
<a class="brand" href="index.html">Acme Tools</a>
<nav aria-label="Primary navigation">
<ul>
<li><a class="nav-link" href="index.html">Home</a></li>
<li><a class="nav-link" href="about.html">About</a></li>
</ul>
</nav>
</header>
<main id="main-content" class="page-shell">
<section class="hero compact" aria-labelledby="contact-heading">
<p class="eyebrow">Start a conversation</p>
<h1 id="contact-heading"><span>Contact Acme Tools</span></h1>
<p><span>Email us at hello@example.com for product questions.</span></p>
<a class="button-link" href="mailto:hello@example.com">hello@example.com</a>
</section>
<section class="content-grid" aria-label="Contact expectations">
<article>
<h2>Product questions</h2>
<p>Share what your team is shipping and where the workflow feels slow.</p>
</article>
<article>
<h2>Founder support</h2>
<p>Ask about lightweight tools for planning, release notes, and handoffs.</p>
</article>
</section>
<section class="workflow" aria-labelledby="contact-details-heading">
<h2 id="contact-details-heading">What helps us respond</h2>
<dl>
<div>
<dt>Team size</dt>
<dd>Tell us how many people share the product workflow.</dd>
</div>
<div>
<dt>Main blocker</dt>
<dd>Point to the planning, shipping, or handoff step that slows you down.</dd>
</div>
</dl>
</section>
</main>
<footer>We respond to practical product questions.</footer>
</body>
</html>
52 changes: 52 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta
name="description"
content="Acme Tools helps small teams ship simple software faster."
>
<title>Welcome to Acme Tools</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a class="skip-link" href="#main-content">Skip to main content</a>
<header class="site-header">
<a class="brand" href="index.html" aria-current="page">Acme Tools</a>
<nav aria-label="Primary navigation">
<ul>
<li><a class="nav-link" href="about.html">About</a></li>
<li><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main id="main-content" class="page-shell">
<section class="hero" aria-labelledby="home-heading">
<p class="eyebrow">Simple software for focused teams</p>
<h1 id="home-heading"><span>Welcome to Acme Tools</span></h1>
<p><span>Acme Tools helps small teams ship simple software faster.</span></p>
<a class="button-link" href="contact.html">Start with Acme Tools</a>
</section>
<section class="content-grid" aria-label="Acme Tools priorities">
<article>
<h2>Practical planning</h2>
<p>Keep product work visible, scoped, and ready for handoff.</p>
</article>
<article>
<h2>Faster delivery</h2>
<p>Turn recurring release chores into clear team routines.</p>
</article>
</section>
<section class="workflow" aria-labelledby="workflow-heading">
<h2 id="workflow-heading">Built around small-team rhythm</h2>
<ol>
<li>Capture the next product move in one place.</li>
<li>Turn the move into a short, testable checklist.</li>
<li>Ship, review, and keep the next handoff clear.</li>
</ol>
</section>
</main>
<footer>Built for founders, maintainers, and small product teams.</footer>
</body>
</html>
193 changes: 193 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
:root {
color-scheme: light;
--ink: #1f2933;
--muted: #5b6775;
--line: #d7dee8;
--paper: #f7f9fc;
--surface: #ffffff;
--accent: #256f8c;
--accent-strong: #174f65;
}

* {
box-sizing: border-box;
}

body {
min-height: 100vh;
margin: 0;
color: var(--ink);
background: var(--paper);
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
}

.skip-link {
position: absolute;
left: 1rem;
top: 1rem;
z-index: 1;
transform: translateY(-150%);
padding: 0.5rem 0.75rem;
border-radius: 4px;
background: var(--accent-strong);
color: #ffffff;
}

.skip-link:focus {
transform: translateY(0);
}

.site-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem clamp(1rem, 4vw, 3rem);
border-bottom: 1px solid var(--line);
background: var(--surface);
}

.brand {
color: var(--accent-strong);
font-weight: 700;
text-decoration: none;
}

nav {
min-width: 0;
}

nav ul {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin: 0;
padding: 0;
list-style: none;
}

nav a,
.button-link {
color: var(--accent-strong);
font-weight: 700;
}

nav a {
text-decoration: none;
}

nav a:hover,
nav a:focus,
.button-link:hover,
.button-link:focus {
text-decoration: underline;
}

.page-shell {
width: min(100%, 960px);
margin: 0 auto;
padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem);
}

.hero {
padding: clamp(2rem, 5vw, 4rem);
border: 1px solid var(--line);
border-radius: 6px;
background: var(--surface);
}

.hero.compact {
padding-block: clamp(1.5rem, 4vw, 3rem);
}

.eyebrow {
margin: 0 0 0.5rem;
color: var(--accent);
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
}

h1,
h2,
p {
margin-top: 0;
}

h1 {
margin-bottom: 0.75rem;
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.1;
}

h2 {
margin-bottom: 0.5rem;
font-size: 1.1rem;
}

.hero p,
article p,
footer {
color: var(--muted);
}

.content-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
margin-top: 1rem;
}

.workflow {
margin-top: 1rem;
padding: 1.5rem;
border-left: 4px solid var(--accent);
background: var(--surface);
}

.workflow ol,
.workflow dl {
margin-bottom: 0;
padding-left: 1.25rem;
}

.workflow li + li,
.workflow div + div {
margin-top: 0.5rem;
}

article {
padding: 1.25rem;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--surface);
}

.button-link {
display: inline-block;
margin-top: 0.5rem;
}

footer {
padding: 1.5rem clamp(1rem, 4vw, 3rem);
border-top: 1px solid var(--line);
text-align: center;
}

@media (max-width: 620px) {
.site-header {
align-items: flex-start;
flex-direction: column;
}

nav ul {
gap: 0.5rem 1rem;
}

.hero,
.workflow,
article {
padding: 1rem;
}
}