From ca43e9f52bf6c7e2a18f9645d258ddad36d9c7a7 Mon Sep 17 00:00:00 2001 From: zaler23 <151525037+zaler23@users.noreply.github.com> Date: Tue, 16 Jun 2026 02:02:40 +0800 Subject: [PATCH 1/2] Add Acme Tools static pages --- about.html | 19 +++++++++++++++++++ contact.html | 19 +++++++++++++++++++ index.html | 19 +++++++++++++++++++ 3 files changed, 57 insertions(+) create mode 100644 about.html create mode 100644 contact.html create mode 100644 index.html diff --git a/about.html b/about.html new file mode 100644 index 0000000..98ceef6 --- /dev/null +++ b/about.html @@ -0,0 +1,19 @@ + + + + + + About Acme Tools + + + + +
+

About Acme Tools

+

We build practical tools for founders, maintainers, and small product teams.

+
+ + diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..c636e77 --- /dev/null +++ b/contact.html @@ -0,0 +1,19 @@ + + + + + + Contact Acme Tools + + + + +
+

Contact Acme Tools

+

Email us at hello@example.com for product questions.

+
+ + diff --git a/index.html b/index.html new file mode 100644 index 0000000..4a25813 --- /dev/null +++ b/index.html @@ -0,0 +1,19 @@ + + + + + + Welcome to Acme Tools + + + + +
+

Welcome to Acme Tools

+

Acme Tools helps small teams ship simple software faster.

+
+ + From 57d85b7589575ed17de1522e9f97a19c6f53ef79 Mon Sep 17 00:00:00 2001 From: zaler23 <151525037+zaler23@users.noreply.github.com> Date: Tue, 16 Jun 2026 02:10:32 +0800 Subject: [PATCH 2/2] Improve static page structure and styling --- about.html | 41 ++++++++-- contact.html | 39 +++++++-- index.html | 45 +++++++++-- styles.css | 219 +++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 323 insertions(+), 21 deletions(-) create mode 100644 styles.css diff --git a/about.html b/about.html index 98ceef6..8e3589c 100644 --- a/about.html +++ b/about.html @@ -3,17 +3,44 @@ + About Acme Tools + - + -
-

About Acme Tools

-

We build practical tools for founders, maintainers, and small product teams.

+
+

Acme Tools

+ +
+ +
+
+

Built for maintainable momentum

+

About Acme Tools

+

We build practical tools for founders, maintainers, and small product teams.

+
+ +
+
+

What guides the work

+

Every page starts with a clear outcome, plain language, and navigation that remains easy to follow.

+
+
+

Who it helps

+

Small groups can publish useful information without adding scripts, trackers, or heavy dependencies.

+
+
+ + diff --git a/contact.html b/contact.html index c636e77..c6ac4cd 100644 --- a/contact.html +++ b/contact.html @@ -3,17 +3,42 @@ + Contact Acme Tools + - + -
-

Contact Acme Tools

-

Email us at hello@example.com for product questions.

+
+

Acme Tools

+ +
+ +
+
+

Start with a simple message

+

Contact Acme Tools

+

Email us at hello@example.com for product questions.

+
+ +
+

Helpful context to include

+
    +
  • The product question you want answered.
    • +
  • The page, workflow, or launch milestone involved.
    • +
  • Any deadline that changes the priority.
    • +
+
+ +
+

Acme Tools keeps contact simple and direct.

+
diff --git a/index.html b/index.html index 4a25813..819eeef 100644 --- a/index.html +++ b/index.html @@ -3,17 +3,48 @@ + Welcome to Acme Tools + - + -
-

Welcome to Acme Tools

-

Acme Tools helps small teams ship simple software faster.

+
+

Acme Tools

+ +
+ +
+
+

Simple software support for focused teams

+

Welcome to Acme Tools

+

Acme Tools helps small teams ship simple software faster.

+
+ +
+
+

Plan the next release

+

Turn loose product notes into a short checklist that keeps design, build, and review work moving.

+
+
+

Keep handoffs clear

+

Use lightweight page templates so founders, maintainers, and small teams can share status quickly.

+
+
+

Launch without clutter

+

Stay dependency-free for small sites that only need readable content and reliable navigation.

+
+
+ + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..20bf457 --- /dev/null +++ b/styles.css @@ -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; + } +}