Feature: Responsive sizing for 4K and 1080p displays

- 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 <noreply@anthropic.com>
2025-10-24 09:55:59 -04:00
parent fbdb39ce13
commit c9bc2c68a8
1 changed files with 93 additions and 0 deletions
--- 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;
+            }
+        }
    </style>
 </head>
 <body>