From 6b3ed7b142cb25693218a25e85a588894ab0c901 Mon Sep 17 00:00:00 2001 From: Hans Heinemann Date: Fri, 13 Mar 2026 15:32:03 -0400 Subject: [PATCH] Add Axis bar static site: menu and events pages - index.html: full menu page with cocktails, beer, wine, spirits, and food sections; dark/gold theme navbar linking to both pages - events.html: upcoming events calendar rendered from an admin-editable JSON array in a + + + + + +
+

What's On

+

Upcoming Events

+

Live music · Tastings · Special nights

+
+ + +
+
+
+ +
+
+
+ + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..dbd5956 --- /dev/null +++ b/index.html @@ -0,0 +1,335 @@ + + + + + + Axis — Menu + + + + + + + + +
+

Est. 2018 — Downtown

+

Our Menu

+

Handcrafted cocktails · Curated spirits · Small plates

+
+ + +
+
+ + + + +
+ + + + +
+
+ + + + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..83e27ea --- /dev/null +++ b/style.css @@ -0,0 +1,417 @@ +/* =========================== + Axis Bar — style.css + =========================== */ + +/* ---------- Reset & Base ---------- */ +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --bg: #0d0d0d; + --bg-surface: #161616; + --bg-card: #1c1c1c; + --gold: #c8922a; + --gold-light: #e0aa45; + --gold-dim: #7a5518; + --text: #e8e0d0; + --text-muted: #8a8070; + --border: #2a2520; + --red-accent: #8b1a1a; + --font-display: 'Georgia', 'Times New Roman', serif; + --font-body: 'Helvetica Neue', Arial, sans-serif; + --nav-h: 68px; +} + +html { + scroll-behavior: smooth; +} + +body { + background-color: var(--bg); + color: var(--text); + font-family: var(--font-body); + font-size: 16px; + line-height: 1.6; + min-height: 100vh; +} + +a { + color: var(--gold); + text-decoration: none; + transition: color 0.2s; +} + +a:hover { + color: var(--gold-light); +} + +img { display: block; max-width: 100%; } + +/* ---------- Navbar ---------- */ +.navbar { + position: sticky; + top: 0; + z-index: 100; + height: var(--nav-h); + background: rgba(13, 13, 13, 0.96); + border-bottom: 1px solid var(--gold-dim); + backdrop-filter: blur(8px); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 2rem; +} + +.navbar__brand { + font-family: var(--font-display); + font-size: 1.8rem; + letter-spacing: 0.25em; + text-transform: uppercase; + color: var(--gold); +} + +.navbar__brand:hover { + color: var(--gold-light); +} + +.navbar__links { + display: flex; + gap: 2rem; + list-style: none; +} + +.navbar__links a { + font-size: 0.85rem; + letter-spacing: 0.15em; + text-transform: uppercase; + color: var(--text-muted); + padding-bottom: 3px; + border-bottom: 2px solid transparent; + transition: color 0.2s, border-color 0.2s; +} + +.navbar__links a:hover, +.navbar__links a.active { + color: var(--gold-light); + border-bottom-color: var(--gold); +} + +/* Hamburger (mobile) */ +.navbar__toggle { + display: none; + flex-direction: column; + gap: 5px; + cursor: pointer; + background: none; + border: none; + padding: 4px; +} + +.navbar__toggle span { + display: block; + width: 24px; + height: 2px; + background: var(--gold); + border-radius: 2px; + transition: transform 0.3s, opacity 0.3s; +} + +/* ---------- Hero / Page Header ---------- */ +.page-hero { + background: linear-gradient(160deg, #1a1208 0%, #0d0d0d 60%); + border-bottom: 1px solid var(--border); + padding: 4rem 2rem 3rem; + text-align: center; +} + +.page-hero__eyebrow { + font-size: 0.75rem; + letter-spacing: 0.3em; + text-transform: uppercase; + color: var(--gold-dim); + margin-bottom: 0.75rem; +} + +.page-hero__title { + font-family: var(--font-display); + font-size: clamp(2rem, 5vw, 3.5rem); + color: var(--gold); + letter-spacing: 0.08em; +} + +.page-hero__sub { + margin-top: 0.75rem; + color: var(--text-muted); + font-size: 0.95rem; + letter-spacing: 0.05em; +} + +/* ---------- Layout ---------- */ +.container { + max-width: 1100px; + margin: 0 auto; + padding: 0 1.5rem; +} + +main { + padding: 3rem 0 5rem; +} + +/* ---------- Section headings ---------- */ +.section-title { + font-family: var(--font-display); + font-size: 1.6rem; + color: var(--gold); + letter-spacing: 0.1em; + text-transform: uppercase; + border-bottom: 1px solid var(--gold-dim); + padding-bottom: 0.5rem; + margin-bottom: 2rem; +} + +.section-subtitle { + font-size: 0.75rem; + letter-spacing: 0.25em; + text-transform: uppercase; + color: var(--text-muted); + margin-bottom: 1.25rem; + margin-top: 2.5rem; +} + +.menu-section { + margin-bottom: 4rem; +} + +/* ---------- Menu Grid ---------- */ +.menu-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 1px; + background: var(--border); + border: 1px solid var(--border); + border-radius: 4px; + overflow: hidden; +} + +.menu-item { + background: var(--bg-card); + padding: 1.25rem 1.5rem; + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 1rem; + transition: background 0.2s; +} + +.menu-item:hover { + background: #222018; +} + +.menu-item__info { + flex: 1; +} + +.menu-item__name { + font-weight: 600; + font-size: 0.95rem; + color: var(--text); + margin-bottom: 0.2rem; +} + +.menu-item__desc { + font-size: 0.8rem; + color: var(--text-muted); + line-height: 1.4; +} + +.menu-item__price { + font-family: var(--font-display); + font-size: 1rem; + color: var(--gold); + white-space: nowrap; + padding-top: 1px; +} + +/* ---------- Divider ---------- */ +.divider { + border: none; + border-top: 1px solid var(--border); + margin: 3rem 0; +} + +/* ---------- Events Page ---------- */ +.events-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: 1.5rem; +} + +.event-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-top: 3px solid var(--gold-dim); + border-radius: 4px; + padding: 1.75rem; + transition: border-top-color 0.2s, transform 0.2s; +} + +.event-card:hover { + border-top-color: var(--gold); + transform: translateY(-2px); +} + +.event-card__date-block { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 1rem; +} + +.event-card__cal { + background: var(--gold-dim); + color: var(--bg); + border-radius: 4px; + width: 52px; + min-width: 52px; + text-align: center; + overflow: hidden; + font-weight: 700; +} + +.event-card__cal-month { + background: var(--gold); + font-size: 0.65rem; + letter-spacing: 0.1em; + text-transform: uppercase; + padding: 2px 0; + color: #0d0d0d; +} + +.event-card__cal-day { + font-size: 1.5rem; + line-height: 1; + padding: 4px 0 6px; + color: var(--text); +} + +.event-card__datetime { + flex: 1; +} + +.event-card__time { + font-size: 0.8rem; + color: var(--gold); + letter-spacing: 0.05em; +} + +.event-card__dow { + font-size: 0.75rem; + color: var(--text-muted); + text-transform: uppercase; + letter-spacing: 0.1em; +} + +.event-card__name { + font-family: var(--font-display); + font-size: 1.2rem; + color: var(--text); + margin-bottom: 0.5rem; +} + +.event-card__desc { + font-size: 0.85rem; + color: var(--text-muted); + line-height: 1.55; +} + +.event-card__tag { + display: inline-block; + margin-top: 1rem; + font-size: 0.7rem; + letter-spacing: 0.12em; + text-transform: uppercase; + background: rgba(200, 146, 42, 0.12); + color: var(--gold); + border: 1px solid var(--gold-dim); + border-radius: 2px; + padding: 2px 8px; +} + +.no-events { + text-align: center; + color: var(--text-muted); + padding: 4rem 0; + font-size: 0.95rem; + letter-spacing: 0.05em; +} + +/* ---------- Footer ---------- */ +footer { + border-top: 1px solid var(--border); + padding: 2rem 1.5rem; + text-align: center; + font-size: 0.8rem; + color: var(--text-muted); + letter-spacing: 0.08em; +} + +footer span { + color: var(--gold-dim); +} + +/* ---------- Responsive ---------- */ +@media (max-width: 680px) { + .navbar__links { + display: none; + flex-direction: column; + gap: 0; + position: absolute; + top: var(--nav-h); + left: 0; + right: 0; + background: rgba(13, 13, 13, 0.98); + border-bottom: 1px solid var(--gold-dim); + padding: 1rem 0; + } + + .navbar__links.open { + display: flex; + } + + .navbar__links li { + width: 100%; + } + + .navbar__links a { + display: block; + padding: 0.75rem 2rem; + border-bottom: none; + border-left: 2px solid transparent; + } + + .navbar__links a:hover, + .navbar__links a.active { + border-left-color: var(--gold); + border-bottom: none; + background: rgba(200, 146, 42, 0.06); + } + + .navbar__toggle { + display: flex; + } + + .menu-grid { + grid-template-columns: 1fr; + } + + .events-grid { + grid-template-columns: 1fr; + } + + .page-hero { + padding: 2.5rem 1.5rem 2rem; + } +}