From c9bc2c68a87bc294a345beb135d9aae78648d292 Mon Sep 17 00:00:00 2001 From: cproudlock Date: Fri, 24 Oct 2025 09:55:59 -0400 Subject: [PATCH] Feature: Responsive sizing for 4K and 1080p displays MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Added CSS media query for screens 2560px+ width (4K displays) - 4K displays automatically scale up all elements: * Logo: 90px → 180px (2x) * Main title: 42px → 84px (2x) * Clock: 28px → 56px (2x) * Section titles: 36px → 72px (2x) * Event titles: 32px → 64px (2x) * Event times: 22px → 44px (2x) * Color bar: 60px → 100px (1.67x) * LIVE badge: 18px → 32px (1.78x) * Footer: 18px → 36px (2x) - 1080p displays use default optimized sizes - Responsive design adapts automatically based on screen resolution - No configuration needed - works out of the box 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- public/index.html | 93 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 93 insertions(+) diff --git a/public/index.html b/public/index.html index ceef84b..244d110 100644 --- a/public/index.html +++ b/public/index.html @@ -289,6 +289,99 @@ color: #eaeaea; font-style: italic; } + + /* ============================================ */ + /* RESPONSIVE SIZING FOR 4K DISPLAYS */ + /* ============================================ */ + @media screen and (min-width: 2560px) { + .container { + padding: 40px 80px; + padding-bottom: 120px; + } + + .header { + gap: 60px; + margin-bottom: 50px; + padding-bottom: 30px; + } + + .logo-container img { + height: 180px; + } + + .location-title { + font-size: 40px; + } + + .header-center h1 { + font-size: 84px; + } + + .clock { + font-size: 56px; + } + + .connection-status { + padding: 20px 35px; + font-size: 32px; + gap: 15px; + } + + .status-dot { + width: 20px; + height: 20px; + } + + .section-title { + font-size: 72px; + margin-bottom: 30px; + padding: 24px 50px; + } + + .event-card { + padding: 60px 80px; + margin-bottom: 30px; + border-left: 100px solid; + } + + .event-title { + font-size: 64px; + } + + .event-ticket { + font-size: 48px; + padding: 16px 40px; + } + + .event-time { + font-size: 44px; + } + + .footer { + padding: 24px; + font-size: 36px; + } + + .no-events { + font-size: 64px; + padding: 80px 60px; + } + + .loading { + font-size: 64px; + padding: 80px 60px; + } + + .error-message { + font-size: 56px; + padding: 60px; + } + + .more-events { + font-size: 48px; + padding: 30px; + } + }