ge-aerospace/shopfloor-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature: Responsive sizing for 4K and 1080p displays

Browse Source 
- 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>
This commit is contained in:
cproudlock
2025-10-24 09:55:59 -04:00
parent fbdb39ce13
commit c9bc2c68a8
1 changed files with 93 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
public/index.html
View File

@@ -289,6 +289,99 @@
color: #eaeaea; color: #eaeaea;
font-style: italic; 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> </style>
</head> </head>
<body> <body>