ash-bot/ash-pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

workout template: widescreen side-by-side layout + TV scaling + screen lock fallback

Browse Source
This commit is contained in:
Ash
2026-04-22 15:53:17 +00:00
parent 161a54d2ae
commit 6fd7f25fcb
2 changed files with 198 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workout/2026-04-22.html
+58
View File
@@ -17,6 +17,31 @@
padding: 40px 20px;
}
.container { max-width: 1200px; width: 100%; }
/* TV / Widescreen Layout: side-by-side */
@media (min-width: 1600px) {
.container {
max-width: 100%;
display: grid;
grid-template-columns: 1.4fr 1fr;
grid-template-rows: auto auto auto 1fr auto;
gap: 40px;
align-items: start;
}
.breadcrumb { grid-column: 1 / -1; }
h1 { grid-column: 1 / -1; font-size: 3.5rem; }
.date-header { grid-column: 1 / -1; font-size: 1.6rem; }
.day-badge { grid-column: 1 / -1; font-size: 1.3rem; }
.workout-column { grid-column: 1; }
.anatomy-column {
grid-column: 2;
grid-row: 4 / span 2;
position: sticky;
top: 40px;
}
.back-link { grid-column: 1 / -1; }
.anatomy-diagrams { grid-template-columns: 1fr; }
.diagram-container img { max-height: 45vh; }
}
h1 { font-size: 1.8rem; margin-bottom: 4px; color: #f97316; }
.breadcrumb { color: #666; margin-bottom: 24px; font-size: 0.85rem; }
.breadcrumb a { color: #888; text-decoration: none; }
@@ -185,6 +210,29 @@
.note { padding: 20px 24px; font-size: 1.1rem; }
.section { margin-bottom: 48px; }
}
/* TV Mode: very large text, full use of widescreen */
@media (min-width: 1600px) {
body { padding: 40px 60px; }
.container { max-width: 100%; gap: 50px; }
h1 { font-size: 4rem; margin-bottom: 8px; }
h2 { font-size: 2.4rem; margin-bottom: 20px; }
.date-header { font-size: 1.8rem; }
.day-badge { font-size: 1.4rem; padding: 8px 24px; border-radius: 24px; }
.table th { padding: 20px 28px; font-size: 1.4rem; }
.table td { padding: 20px 28px; font-size: 1.6rem; }
.exercise-name { font-size: 1.7rem; }
.reps, .weight { font-size: 1.4rem; }
.video-link { font-size: 1.3rem; }
.form-note { font-size: 1.3rem; }
.note { padding: 24px 28px; font-size: 1.3rem; margin-top: 24px; }
.section { margin-bottom: 40px; }
.breadcrumb { font-size: 1.1rem; margin-bottom: 32px; }
.back-link { font-size: 1.2rem; margin-top: 40px; }
.anatomy-title { font-size: 1.5rem; }
.anatomy-hint { font-size: 1.1rem; }
.muscle-tag { font-size: 1rem; padding: 6px 14px; }
.muscle-label { font-size: 1rem; }
}
@keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
.wake-locked { position: fixed; bottom: 20px; right: 20px; background: rgba(249, 115, 22, 0.9); color: white; padding: 8px 16px; border-radius: 20px; font-size: 0.85rem; animation: pulse 2s infinite; display: none; }
</style>
@@ -196,6 +244,10 @@
<div class="date-header">Wednesday, April 22, 2026</div>
<div class="day-badge">Day B — Full-Body Circuit</div>
</div> <!-- /workout-column -->
<!-- Anatomy column: sticks on the right on widescreen -->
<div class="anatomy-column">
<!-- Anatomy Reference Section -->
<div class="section anatomy-section">
<div class="anatomy-header">
@@ -215,9 +267,15 @@
</div>
</div>
</div>
</div> <!-- /anatomy-column -->
<a href="index.html" class="back-link">← Back to workout list</a>
</div>
<div class="note" style="margin-bottom:24px;"><strong>🎉 New gear:</strong> BowFlex SelectTech 840 adjustable KB (up to 40 lbs) arrived. Current workout uses fixed weights — feel free to dial up on the KB moves.</div>
<!-- Workout columns wrapper for widescreen -->
<div class="workout-column">
<!-- Main workout table -->
<div class="section">
<h2>Main Workout</h2>