Skip to content

Add Acme Tools static pages #28

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

Closed
zaler23 wants to merge 2 commits into from
Closed

Add Acme Tools static pages #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ca43e9f
Add Acme Tools static pages
zaler23 Jun 15, 2026
57d85b7
Improve static page structure and styling
zaler23 Jun 15, 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
46 changes: 46 additions & 0 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!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 product teams.">
<title>About Acme Tools</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a class="skip-link" href="#content">Skip to content</a>

<header class="site-header">
<p class="site-mark">Acme Tools</p>
<nav aria-label="Primary navigation">
<ul class="nav-list">
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>

<main id="content" class="page-shell">
<section class="hero hero-compact" aria-labelledby="about-title">
<p class="eyebrow">Built for maintainable momentum</p>
<h1 id="about-title">About Acme Tools</h1>
<p class="lead">We build practical tools for founders, maintainers, and small product teams.</p>
</section>

<section class="split-panel" aria-label="How Acme Tools works">
<div>
<h2>What guides the work</h2>
<p>Every page starts with a clear outcome, plain language, and navigation that remains easy to follow.</p>
</div>
<div>
<h2>Who it helps</h2>
<p>Small groups can publish useful information without adding scripts, trackers, or heavy dependencies.</p>
</div>
</section>
</main>

<footer class="site-footer">
<p>Clear tools, concise pages, fewer distractions.</p>
</footer>
</body>
</html>
44 changes: 44 additions & 0 deletions contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!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 product questions.">
<title>Contact Acme Tools</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a class="skip-link" href="#content">Skip to content</a>

<header class="site-header">
<p class="site-mark">Acme Tools</p>
<nav aria-label="Primary navigation">
<ul class="nav-list">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>

<main id="content" class="page-shell">
<section class="hero hero-compact" aria-labelledby="contact-title">
<p class="eyebrow">Start with a simple message</p>
<h1 id="contact-title">Contact Acme Tools</h1>
<p class="lead">Email us at hello@example.com for product questions.</p>
</section>

<section class="contact-panel" aria-label="Contact details">
<h2>Helpful context to include</h2>
<ul class="check-list">
<li>The product question you want answered.</li>
<li>The page, workflow, or launch milestone involved.</li>
<li>Any deadline that changes the priority.</li>
</ul>
</section>
</main>

<footer class="site-footer">
<p>Acme Tools keeps contact simple and direct.</p>
</footer>
</body>
</html>
50 changes: 50 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!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="#content">Skip to content</a>

<header class="site-header">
<p class="site-mark">Acme Tools</p>
<nav aria-label="Primary navigation">
<ul class="nav-list">
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>

<main id="content" class="page-shell">
<section class="hero" aria-labelledby="home-title">
<p class="eyebrow">Simple software support for focused teams</p>
<h1 id="home-title">Welcome to Acme Tools</h1>
<p class="lead">Acme Tools helps small teams ship simple software faster.</p>
</section>

<section class="content-grid" aria-label="Acme Tools highlights">
<article class="info-card">
<h2>Plan the next release</h2>
<p>Turn loose product notes into a short checklist that keeps design, build, and review work moving.</p>
</article>
<article class="info-card">
<h2>Keep handoffs clear</h2>
<p>Use lightweight page templates so founders, maintainers, and small teams can share status quickly.</p>
</article>
<article class="info-card">
<h2>Launch without clutter</h2>
<p>Stay dependency-free for small sites that only need readable content and reliable navigation.</p>
</article>
</section>
</main>

<footer class="site-footer">
<p>Practical pages for practical teams.</p>
</footer>
</body>
</html>
219 changes: 219 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,219 @@
:root {
color-scheme: light;
--background: #f6f3ee;
--surface: #fffaf2;
--surface-strong: #fff3d8;
--text: #243041;
--muted: #5e6a7d;
--accent: #9b4d24;
--accent-dark: #6d3318;
--border: #eadcc8;
--shadow: 0 22px 50px rgba(36, 48, 65, 0.12);
}

* {
box-sizing: border-box;
}

body {
margin: 0;
min-height: 100vh;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--text);
background:
radial-gradient(circle at top left, rgba(250, 202, 138, 0.42), transparent 34rem),
linear-gradient(135deg, var(--background), #eef3f6);
}

.skip-link {
position: absolute;
left: 1rem;
top: 1rem;
transform: translateY(-140%);
padding: 0.6rem 0.9rem;
border-radius: 999px;
background: var(--text);
color: #fff;
text-decoration: none;
transition: transform 160ms ease;
z-index: 10;
}

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

.site-header,
.site-footer,
.page-shell {
width: min(1080px, calc(100% - 2rem));
margin-inline: auto;
}

.site-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 0;
}

.site-mark {
margin: 0;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-dark);
}

.nav-list {
display: flex;
gap: 0.65rem;
margin: 0;
padding: 0;
list-style: none;
}

.nav-list a {
display: inline-flex;
min-height: 2.5rem;
align-items: center;
padding: 0.45rem 0.9rem;
border: 1px solid var(--border);
border-radius: 999px;
background: rgba(255, 250, 242, 0.78);
color: var(--text);
font-weight: 700;
text-decoration: none;
}

.nav-list a:hover,
.nav-list a:focus-visible {
border-color: var(--accent);
color: var(--accent-dark);
outline: none;
}

.page-shell {
padding: 3rem 0 4rem;
}

.hero,
.info-card,
.split-panel,
.contact-panel {
border: 1px solid var(--border);
border-radius: 28px;
background: rgba(255, 250, 242, 0.9);
box-shadow: var(--shadow);
}

.hero {
padding: clamp(2rem, 6vw, 5rem);
}

.hero-compact {
padding-block: clamp(2rem, 5vw, 3.5rem);
}

.eyebrow {
margin: 0 0 0.85rem;
color: var(--accent);
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}

h1,
h2,
p {
overflow-wrap: anywhere;
}

h1 {
max-width: 13ch;
margin: 0;
font-size: clamp(2.55rem, 9vw, 5.75rem);
line-height: 0.92;
letter-spacing: -0.07em;
}

h2 {
margin: 0 0 0.75rem;
font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.lead {
max-width: 42rem;
margin: 1.35rem 0 0;
color: var(--muted);
font-size: clamp(1.15rem, 2.5vw, 1.45rem);
line-height: 1.55;
}

.content-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin-top: 1rem;
}

.info-card,
.split-panel,
.contact-panel {
padding: 1.35rem;
}

.info-card p,
.split-panel p,
.contact-panel li,
.site-footer p {
color: var(--muted);
line-height: 1.65;
}

.split-panel {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
margin-top: 1rem;
}

.contact-panel {
margin-top: 1rem;
}

.check-list {
display: grid;
gap: 0.7rem;
margin: 0;
padding-left: 1.2rem;
}

.site-footer {
padding: 0 0 2rem;
}

.site-footer p {
margin: 0;
font-size: 0.95rem;
}

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

.content-grid,
.split-panel {
grid-template-columns: 1fr;
}

.hero,
.info-card,
.split-panel,
.contact-panel {
border-radius: 20px;
}
}