From 912618127989a4cdf5462649b68bb0b60acb8002 Mon Sep 17 00:00:00 2001 From: Hans Heinemann Date: Tue, 17 Mar 2026 10:46:25 -0400 Subject: [PATCH] feat: landing page, menu tabs + brunch, events calendar Co-Authored-By: Claude Sonnet 4.6 --- events.html | 269 +++++++++++++++++++++---- index.html | 488 +++++++++++---------------------------------- menu.html | 519 ++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 559 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 1417 insertions(+), 418 deletions(-) create mode 100644 menu.html diff --git a/events.html b/events.html index e5c9b14..4ea42ac 100644 --- a/events.html +++ b/events.html @@ -19,47 +19,131 @@ ==================================================== --> @@ -71,7 +155,8 @@ @@ -80,9 +165,14 @@

What's On

Upcoming Events

-

Live music · Tastings · Special nights

+

Live music · Trivia · Board games · Special nights

+ +
+
+
+
@@ -94,7 +184,7 @@
-

Axis — Open Tue–Sun, 5pm–2am — 44 Commerce St

+

Axis — 3048 Dundas Street West — Open Tue–Sun 5pm–2am — Brunch Thu–Sun 9am–3pm

Events subject to change. Follow us for updates.

@@ -104,6 +194,108 @@ document.getElementById('nav-links').classList.toggle('open'); } + /* ---- Calendar Widget ---- */ + (function () { + const calEl = document.getElementById('cal-widget'); + const MONTH_NAMES = ['January','February','March','April','May','June','July','August','September','October','November','December']; + const today = new Date(); + let viewYear = today.getFullYear(); + let viewMonth = today.getMonth(); + + function is2ndThursday(y, m, d) { + if (new Date(y, m, d).getDay() !== 4) return false; + let count = 0; + for (let i = 1; i <= d; i++) { + if (new Date(y, m, i).getDay() === 4) count++; + } + return count === 2; + } + + function getDots(y, m, d) { + const dow = new Date(y, m, d).getDay(); + const dots = []; + if (dow === 2) dots.push({ color: 'var(--gold)', label: 'Trivia Night' }); + if (dow === 1 || dow === 5) dots.push({ color: '#e07020', label: 'Live Music' }); + if (is2ndThursday(y, m, d)) dots.push({ color: '#8844cc', label: 'Board Games & Chess Night' }); + return dots; + } + + function isBrunchDay(dow) { + // Thu=4, Fri=5, Sat=6, Sun=0 + return dow === 0 || dow === 4 || dow === 5 || dow === 6; + } + + function render() { + const firstDow = new Date(viewYear, viewMonth, 1).getDay(); + const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate(); + + let html = '
'; + html += ''; + html += '' + MONTH_NAMES[viewMonth] + ' ' + viewYear + ''; + html += ''; + html += '
'; + + html += '
'; + // Day-of-week headers + ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'].forEach(function (d) { + html += '
' + d + '
'; + }); + + // Empty leading cells + for (let i = 0; i < firstDow; i++) { + html += '
'; + } + + // Day cells + for (let d = 1; d <= daysInMonth; d++) { + const dow = new Date(viewYear, viewMonth, d).getDay(); + const isToday = (today.getFullYear() === viewYear && today.getMonth() === viewMonth && today.getDate() === d); + const brunch = isBrunchDay(dow); + const dots = getDots(viewYear, viewMonth, d); + + let cls = 'cal-cell'; + if (brunch) cls += ' cal-cell--brunch'; + if (isToday) cls += ' cal-cell--today'; + + html += '
'; + html += '' + d + ''; + if (dots.length > 0) { + html += '
'; + dots.forEach(function (dot) { + html += ''; + }); + html += '
'; + } + html += '
'; + } + + html += '
'; // .cal-grid + + // Legend + html += '
'; + html += ' Trivia Night (Tue)'; + html += ' Live Music (Mon & Fri)'; + html += ' Board Games & Chess (2nd Thu)'; + html += ' Brunch hours (Thu–Sun)'; + html += '
'; + + calEl.innerHTML = html; + + document.getElementById('cal-prev').addEventListener('click', function () { + viewMonth--; + if (viewMonth < 0) { viewMonth = 11; viewYear--; } + render(); + }); + document.getElementById('cal-next').addEventListener('click', function () { + viewMonth++; + if (viewMonth > 11) { viewMonth = 0; viewYear++; } + render(); + }); + } + + render(); + })(); + /* ---- Render events ---- */ (function () { const DAYS = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; @@ -118,15 +310,12 @@ return; } - // Sort by date ascending events.sort((a, b) => new Date(a.date) - new Date(b.date)); - // Only show today and future events const today = new Date(); today.setHours(0, 0, 0, 0); const upcoming = events.filter(e => { - // Parse date as local to avoid UTC-offset surprises const [y, m, d] = e.date.split('-').map(Number); const dt = new Date(y, m - 1, d); return dt >= today; diff --git a/index.html b/index.html index cd1029d..65ba09b 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - Axis — Menu + Axis — Junction's Oldest Bar @@ -15,392 +15,124 @@ -
-

Est. 2018 — Downtown

-

Our Menu

-

Handcrafted cocktails · Curated spirits · Small plates

-
- - -
-
- - - - -
- - - - +
+
+
+

AXIS

+

Junction's Oldest Bar

+

3048 Dundas Street West

+
+ View Menu + Upcoming Events +
-
+ + + +
+
+
+

Est. 1987

+

A Junction Institution

+

Axis has been pouring pints and pulling neighbours together since 1987. Tucked along Dundas Street West, we've watched the Junction transform around us — but our commitment to a cold beer, a warm welcome, and a no-fuss good time has never changed.

+

Over three decades, we've become the spot where regulars have a stool with their name on it, where strangers become friends over a round of trivia, and where live music on a Monday night can turn an ordinary week around. We're not trendy. We're better than that — we're yours.

+

Whether you're stopping in for a quiet pint after work, settling in for brunch with friends on a Sunday morning, or catching a band on a Friday night, Axis is the kind of bar that feels like it was made for you specifically. Because, in a way, it was.

+
+
+ Bar Hours +

Tuesday–Sunday · 5pm–2am

+
+
+ Brunch +

Thursday–Sunday · 9am–3pm

+
+
+

3048 Dundas Street West, Toronto

+
+
+ Axis bar interior +
+
+
+ + +
+
+

What's On

+
+ +
+
◆
+
Weekly
+

Trivia Night

+

Every Tuesday · 8pm

+

Teams of up to 6. Prizes include bar tabs and Axis swag. Arrive early to grab a table.

+
+ +
+
♬
+
Recurring
+

Live Music

+

Every Monday & Friday · 9pm

+

Local and touring acts across folk, rock, soul, and jazz. No cover charge, ever.

+
+ +
+
♟
+
Monthly
+

Board Games & Chess Night

+

2nd Thursday of the month · 7pm

+

Bring your A-game. Classic board games, chess sets, and cold drinks. All skill levels welcome.

+
+ +
+

See full calendar →

+
+
+ + +
+
+

Specials

+
+ +
+

Happy Hour

+

Tuesday–Friday · 5pm–7pm

+

$2 off all draught pints. Kick off your evening right.

+
+ +
+

Weekend Brunch

+

Thursday–Sunday · 9am–3pm

+

Eggs benny, poutine, french toast, and mimosas. The only brunch you need.

+
+ +
+

Live Music

+

Every Monday & Friday from 9pm

+

No cover charge. Just great music and a full bar. Every week.

+
+ +
+
+
-

Axis — Open Tue–Sun, 5pm–2am — 44 Commerce St

-

Please drink responsibly. Must be 21+ to consume alcohol.

+

Axis — 3048 Dundas Street West — Open Tue–Sun 5pm–2am — Brunch Thu–Sun 9am–3pm

+

Please drink responsibly. Must be of legal drinking age.

+ + + diff --git a/style.css b/style.css index 83e27ea..4d154a9 100644 --- a/style.css +++ b/style.css @@ -363,6 +363,509 @@ footer span { } /* ---------- Responsive ---------- */ +/* ======================================== + LANDING PAGE + ======================================== */ + +/* --- Hero --- */ +.landing-hero { + position: relative; + height: 100vh; + min-height: 560px; + background-image: url('https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?w=1400&q=80&auto=format&fit=crop'); + background-size: cover; + background-position: center; + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.landing-hero__overlay { + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.62); +} + +.landing-hero__content { + position: relative; + z-index: 1; + padding: 0 1.5rem; +} + +.landing-hero__title { + font-family: var(--font-display); + font-size: clamp(4rem, 14vw, 9rem); + color: var(--gold); + letter-spacing: 0.3em; + line-height: 1; + text-shadow: 0 2px 24px rgba(0,0,0,0.6); +} + +.landing-hero__subtitle { + margin-top: 0.75rem; + font-size: clamp(0.9rem, 2.5vw, 1.2rem); + letter-spacing: 0.25em; + text-transform: uppercase; + color: var(--text); +} + +.landing-hero__address { + margin-top: 0.4rem; + font-size: 0.85rem; + letter-spacing: 0.15em; + color: var(--text-muted); +} + +.landing-hero__ctas { + margin-top: 2.5rem; + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; +} + +.btn { + display: inline-block; + padding: 0.75rem 2rem; + font-size: 0.8rem; + letter-spacing: 0.2em; + text-transform: uppercase; + border-radius: 2px; + font-family: var(--font-body); + font-weight: 600; + transition: background 0.2s, color 0.2s, border-color 0.2s; + cursor: pointer; +} + +.btn--gold { + background: var(--gold); + color: #0d0d0d; + border: 2px solid var(--gold); +} + +.btn--gold:hover { + background: var(--gold-light); + border-color: var(--gold-light); + color: #0d0d0d; +} + +.btn--outline { + background: transparent; + color: var(--gold); + border: 2px solid var(--gold); +} + +.btn--outline:hover { + background: rgba(200, 146, 42, 0.12); + color: var(--gold-light); + border-color: var(--gold-light); +} + +/* --- Section headings (landing) --- */ +.section-eyebrow { + font-size: 0.7rem; + letter-spacing: 0.3em; + text-transform: uppercase; + color: var(--gold-dim); + margin-bottom: 0.5rem; +} + +.section-heading { + font-family: var(--font-display); + font-size: clamp(1.5rem, 3.5vw, 2.2rem); + color: var(--gold); + letter-spacing: 0.06em; + margin-bottom: 1.5rem; +} + +.section-heading--center { + text-align: center; +} + +/* --- About section --- */ +.about-section { + padding: 5rem 0; + background: var(--bg-surface); + border-top: 1px solid var(--border); + border-bottom: 1px solid var(--border); +} + +.about-section__inner { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; +} + +.about-section__text p { + color: var(--text-muted); + font-size: 0.95rem; + line-height: 1.75; + margin-bottom: 1rem; +} + +.about-section__hours { + display: flex; + gap: 2rem; + margin: 1.75rem 0 1.25rem; + padding: 1.25rem 1.5rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 4px; +} + +.about-section__hours-block strong { + display: block; + font-size: 0.7rem; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--gold); + margin-bottom: 0.25rem; +} + +.about-section__hours-block p { + margin: 0; + font-size: 0.875rem; + color: var(--text-muted); +} + +.about-section__addr { + font-size: 0.8rem !important; + letter-spacing: 0.1em; + color: var(--text-muted) !important; +} + +.about-section__image img { + width: 100%; + border-radius: 4px; + border: 1px solid var(--border); + object-fit: cover; + aspect-ratio: 4 / 3; +} + +/* --- What's On / Poster cards --- */ +.whats-on-section { + padding: 5rem 0; +} + +.poster-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 1.5rem; + margin-bottom: 2rem; +} + +.poster-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-top: 3px solid var(--gold-dim); + border-radius: 4px; + padding: 2rem 1.75rem; + transition: border-top-color 0.2s, transform 0.2s; +} + +.poster-card:hover { + border-top-color: var(--gold); + transform: translateY(-2px); +} + +.poster-card__icon { + font-size: 1.5rem; + color: var(--gold-dim); + margin-bottom: 0.75rem; +} + +.poster-card__tag { + display: inline-block; + font-size: 0.65rem; + letter-spacing: 0.15em; + text-transform: uppercase; + background: rgba(200, 146, 42, 0.1); + color: var(--gold); + border: 1px solid var(--gold-dim); + border-radius: 2px; + padding: 2px 8px; + margin-bottom: 0.75rem; +} + +.poster-card__name { + font-family: var(--font-display); + font-size: 1.25rem; + color: var(--text); + margin-bottom: 0.4rem; +} + +.poster-card__when { + font-size: 0.8rem; + color: var(--gold); + letter-spacing: 0.05em; + margin-bottom: 0.75rem; +} + +.poster-card__desc { + font-size: 0.85rem; + color: var(--text-muted); + line-height: 1.55; +} + +.whats-on-link { + text-align: center; + font-size: 0.9rem; + letter-spacing: 0.05em; +} + +/* --- Promos --- */ +.promos-section { + padding: 5rem 0; + background: var(--bg-surface); + border-top: 1px solid var(--border); + border-bottom: 1px solid var(--border); +} + +.promo-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + gap: 1.5rem; +} + +.promo-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 4px; + padding: 2rem 1.75rem; + text-align: center; + transition: border-color 0.2s; +} + +.promo-card:hover { + border-color: var(--gold-dim); +} + +.promo-card__title { + font-family: var(--font-display); + font-size: 1.2rem; + color: var(--gold); + margin-bottom: 0.4rem; +} + +.promo-card__when { + font-size: 0.75rem; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--text-muted); + margin-bottom: 0.75rem; +} + +.promo-card__desc { + font-size: 0.875rem; + color: var(--text-muted); + line-height: 1.55; +} + +/* ======================================== + MENU PAGE — TABS + ======================================== */ + +.menu-tabs { + display: flex; + background: var(--bg-surface); + border-bottom: 2px solid var(--border); + padding: 0 1.5rem; + gap: 0; + overflow-x: auto; +} + +.menu-tab { + background: none; + border: none; + border-bottom: 2px solid transparent; + margin-bottom: -2px; + padding: 1rem 1.75rem; + font-family: var(--font-body); + font-size: 0.8rem; + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--text-muted); + cursor: pointer; + transition: color 0.2s, border-color 0.2s; + white-space: nowrap; +} + +.menu-tab:hover { + color: var(--gold-light); +} + +.menu-tab.active { + color: var(--gold-light); + border-bottom-color: var(--gold); +} + +.tab-panel { + display: none; +} + +.tab-panel.active { + display: block; +} + +.brunch-hours-note { + font-size: 0.85rem; + letter-spacing: 0.08em; + color: var(--gold-dim); + margin-bottom: 2rem; + padding: 0.75rem 1rem; + border: 1px solid var(--gold-dim); + border-radius: 3px; + display: inline-block; +} + +/* ======================================== + EVENTS PAGE — CALENDAR WIDGET + ======================================== */ + +.cal-widget { + margin: 2.5rem 0 1rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 6px; + overflow: hidden; + max-width: 700px; +} + +.cal-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 1.5rem; + background: var(--bg-surface); + border-bottom: 1px solid var(--border); +} + +.cal-month-label { + font-family: var(--font-display); + font-size: 1.1rem; + color: var(--gold); + letter-spacing: 0.1em; +} + +.cal-nav-btn { + background: none; + border: 1px solid var(--gold-dim); + border-radius: 3px; + color: var(--gold); + font-size: 1.4rem; + line-height: 1; + padding: 0.1rem 0.6rem 0.2rem; + cursor: pointer; + transition: background 0.2s, color 0.2s; +} + +.cal-nav-btn:hover { + background: rgba(200, 146, 42, 0.12); + color: var(--gold-light); +} + +.cal-grid { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 1px; + background: var(--border); + border-bottom: 1px solid var(--border); +} + +.cal-dow-header { + background: var(--bg-surface); + text-align: center; + padding: 0.5rem 0; + font-size: 0.65rem; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--text-muted); +} + +.cal-cell { + background: var(--bg-card); + min-height: 56px; + padding: 0.4rem 0.5rem; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.cal-cell--empty { + background: #111; +} + +.cal-cell--brunch { + background: rgba(40, 90, 50, 0.18); +} + +.cal-cell--today .cal-day-num { + display: inline-flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + border-radius: 50%; + outline: 2px solid var(--gold); + outline-offset: 1px; + color: var(--gold); + font-weight: 700; +} + +.cal-day-num { + font-size: 0.8rem; + color: var(--text-muted); + line-height: 1.4; +} + +.cal-dots { + display: flex; + gap: 3px; + flex-wrap: wrap; + margin-top: 3px; +} + +.cal-dot { + display: inline-block; + width: 7px; + height: 7px; + border-radius: 50%; + flex-shrink: 0; +} + +.cal-legend { + display: flex; + flex-wrap: wrap; + gap: 0.75rem 1.5rem; + padding: 1rem 1.5rem; + background: var(--bg-surface); +} + +.cal-legend-item { + display: flex; + align-items: center; + gap: 0.4rem; + font-size: 0.75rem; + color: var(--text-muted); + letter-spacing: 0.04em; +} + +.cal-legend-brunch-swatch { + display: inline-block; + width: 14px; + height: 10px; + border-radius: 2px; + background: rgba(40, 90, 50, 0.45); + border: 1px solid rgba(60, 140, 80, 0.4); + flex-shrink: 0; +} + +/* ======================================== + RESPONSIVE — NEW SECTIONS + ======================================== */ + @media (max-width: 680px) { .navbar__links { display: none; @@ -414,4 +917,60 @@ footer span { .page-hero { padding: 2.5rem 1.5rem 2rem; } + + .about-section__inner { + grid-template-columns: 1fr; + gap: 2.5rem; + } + + .about-section__image { + order: -1; + } + + .about-section__hours { + flex-direction: column; + gap: 1rem; + } + + .poster-grid, + .promo-grid { + grid-template-columns: 1fr; + } + + .landing-hero__ctas { + flex-direction: column; + align-items: center; + } + + .cal-widget { + margin: 1.5rem 0 0.5rem; + } + + .cal-cell { + min-height: 44px; + padding: 0.3rem 0.3rem; + } + + .cal-day-num { + font-size: 0.7rem; + } + + .cal-dot { + width: 5px; + height: 5px; + } + + .cal-legend { + gap: 0.5rem 1rem; + padding: 0.75rem 1rem; + } + + .menu-tabs { + padding: 0 0.5rem; + } + + .menu-tab { + padding: 0.85rem 1.25rem; + font-size: 0.72rem; + } }