diff --git a/workout/2026-04-22.html b/workout/2026-04-22.html index f593f99..167ed51 100644 --- a/workout/2026-04-22.html +++ b/workout/2026-04-22.html @@ -17,31 +17,6 @@ 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; } @@ -70,7 +45,7 @@ .back-link { display: inline-block; color: #f97316; text-decoration: none; font-size: 0.85rem; margin-top: 32px; } .back-link:hover { color: #ff8c42; } - /* Anatomy Diagram Section */ + /* Anatomy Section */ .anatomy-section { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); @@ -78,97 +53,21 @@ padding: 20px; margin-bottom: 24px; } - .anatomy-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 16px; - flex-wrap: wrap; - gap: 12px; - } - .anatomy-title { - font-size: 1rem; - color: #f97316; - font-weight: 600; - } - .anatomy-hint { - font-size: 0.8rem; - color: #666; - } - .anatomy-diagrams { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 20px; - align-items: start; - } - .diagram-container { - background: #ffffff; - border-radius: 8px; - padding: 12px; - text-align: center; - position: relative; - transition: all 0.3s ease; - border: 2px solid transparent; - } - .diagram-container h3 { - font-size: 0.85rem; - color: #888; - margin-bottom: 12px; - text-transform: uppercase; - letter-spacing: 0.5px; - } - .diagram-container img { - width: auto; - max-width: 100%; - height: auto; - max-height: 550px; - object-fit: contain; - filter: none; - transition: filter 0.3s, transform 0.3s; - display: block; - margin: 0 auto; - } - .diagram-container.highlighted { - box-shadow: 0 0 25px rgba(249, 115, 22, 0.6); - border-color: rgba(249, 115, 22, 0.8); - transform: scale(1.02); - } - .diagram-container.highlighted img { - filter: brightness(1.05) contrast(1.05); - } - .muscle-label { - font-size: 0.75rem; - color: #aaa; - margin-top: 8px; - font-style: italic; - } + .anatomy-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; } + .anatomy-title { font-size: 1rem; color: #f97316; font-weight: 600; } + .anatomy-hint { font-size: 0.8rem; color: #666; } + .anatomy-diagrams { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } + .diagram-container { background: #ffffff; border-radius: 8px; padding: 12px; text-align: center; border: 2px solid transparent; transition: all 0.3s ease; } + .diagram-container h3 { font-size: 0.85rem; color: #888; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; } + .diagram-container img { width: auto; max-width: 100%; height: auto; max-height: 550px; object-fit: contain; display: block; margin: 0 auto; } + .diagram-container.highlighted { box-shadow: 0 0 25px rgba(249, 115, 22, 0.6); border-color: rgba(249, 115, 22, 0.8); transform: scale(1.02); } + .muscle-label { font-size: 0.75rem; color: #aaa; margin-top: 8px; font-style: italic; } - /* Exercise muscle tags */ - .exercise-muscles { - display: flex; - gap: 6px; - flex-wrap: wrap; - margin-top: 6px; - } - .muscle-tag { - font-size: 0.7rem; - padding: 3px 10px; - border-radius: 12px; - font-weight: 500; - cursor: pointer; - transition: all 0.2s; - border: 2px solid transparent; - user-select: none; - } - .muscle-tag:hover { - transform: scale(1.08); - filter: brightness(1.2); - } - .muscle-tag.active { - border-color: currentColor; - box-shadow: 0 0 12px currentColor; - transform: scale(1.1); - } + /* Muscle tags */ + .exercise-muscles { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } + .muscle-tag { font-size: 0.7rem; padding: 3px 10px; border-radius: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s; border: 2px solid transparent; user-select: none; } + .muscle-tag:hover { transform: scale(1.08); filter: brightness(1.2); } + .muscle-tag.active { border-color: currentColor; box-shadow: 0 0 12px currentColor; transform: scale(1.1); } .muscle-tag.deltoid { background: rgba(100, 181, 246, 0.25); color: #64b5f6; } .muscle-tag.pectoralis { background: rgba(229, 115, 115, 0.25); color: #e57373; } .muscle-tag.trapezius { background: rgba(129, 199, 132, 0.25); color: #81c784; } @@ -186,13 +85,34 @@ .muscle-tag.erector-spinae { background: rgba(161, 136, 127, 0.25); color: #a1887f; } .muscle-tag.core { background: rgba(186, 104, 200, 0.25); color: #ba68c8; } .muscle-tag.shoulders { background: rgba(100, 181, 246, 0.25); color: #64b5f6; } + .muscle-tag.forearms { background: rgba(255, 183, 77, 0.25); color: #ffb74d; } @media (max-width: 768px) { - .anatomy-diagrams { - grid-template-columns: 1fr; - } + .anatomy-diagrams { grid-template-columns: 1fr; } } + /* === WIDESCREEN: side-by-side layout === */ + @media (min-width: 1400px) { + .container { + max-width: 100%; + display: grid; + grid-template-columns: 1.5fr 1fr; + grid-template-rows: auto auto auto 1fr auto; + gap: 40px; + align-items: start; + } + .breadcrumb { grid-column: 1 / -1; } + h1 { grid-column: 1 / -1; } + .date-header { grid-column: 1 / -1; } + .day-badge { grid-column: 1 / -1; } + .workout-column { grid-column: 1; grid-row: 4; } + .anatomy-column { grid-column: 2; grid-row: 4; position: sticky; top: 40px; } + .back-link { grid-column: 1 / -1; } + .anatomy-diagrams { grid-template-columns: 1fr; gap: 16px; } + .diagram-container img { max-height: 38vh; } + } + + /* === TABLET / SMALL DESKTOP === */ @media (min-width: 1200px) { body { padding: 60px 40px; } .container { max-width: 1400px; } @@ -210,29 +130,31 @@ .note { padding: 20px 24px; font-size: 1.1rem; } .section { margin-bottom: 48px; } } - /* TV Mode: very large text, full use of widescreen */ + + /* === TV MODE: very large text === */ @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; } + body { padding: 50px 60px; } + .container { gap: 60px; } + h1 { font-size: 3.5rem; margin-bottom: 8px; } + h2 { font-size: 2.2rem; margin-bottom: 20px; } + .date-header { font-size: 1.6rem; } + .day-badge { font-size: 1.3rem; padding: 8px 20px; border-radius: 20px; } + .table th { padding: 18px 24px; font-size: 1.3rem; } + .table td { padding: 18px 24px; font-size: 1.5rem; } + .exercise-name { font-size: 1.6rem; } + .reps, .weight { font-size: 1.3rem; } + .video-link { font-size: 1.2rem; } + .form-note { font-size: 1.2rem; } + .note { padding: 22px 26px; font-size: 1.2rem; margin-top: 20px; } .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; } + .breadcrumb { font-size: 1rem; margin-bottom: 28px; } + .back-link { font-size: 1.1rem; margin-top: 36px; } + .anatomy-title { font-size: 1.4rem; } + .anatomy-hint { font-size: 1rem; } + .muscle-tag { font-size: 0.95rem; padding: 5px 12px; } + .muscle-label { font-size: 0.95rem; } } + @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; } @@ -244,218 +166,202 @@
| # | Exercise | Reps | Weight | Target Muscles | Form Video |
|---|---|---|---|---|---|
| 1 | +KB Around the World | +20 (10/dir) | +25 lb KB → 35 lb | +
+
+ Shoulders
+ Core
+ Forearms
+
+ |
+ ▶ Video | +
| 2 | +DB Lateral Raises | +15 | +10 lb pair | +
+
+ Lateral Deltoid
+ Upper Trapezius
+
+ |
+ ▶ Video | +
| 3 | +KB Sumo Deadlift | +10 | +35 lb KB | +
+
+ Glutes
+ Quadriceps
+ Hamstrings
+ Erector Spinae
+
+ |
+ adductors & hip rotators also active | +
| 4 | +DB Biceps Curls | +10 | +12 lb pair | +
+
+ Biceps Brachii
+ Forearms
+
+ |
+ pain around elbows — drop weight if needed, check form with Christo | +
| 5 | +Push-ups | +15 | +bodyweight | +
+
+ Pectoralis Major
+ Anterior Deltoid
+ Triceps
+
+ |
+ full form — take breaks between sets as needed | +
| 6 | +DB Glute Bridge | +12 | +15 lb on hips → 20 lb | +
+
+ Glutes
+ Hamstrings
+ Core
+
+ |
+ lie on floor, feet flat, press hips up. Slow & controlled. | +
| # | Exercise | Reps/Time | Weight | Target Muscles | Form Video |
|---|---|---|---|---|---|
| 1 | +Dead Bugs | +10/side | +bodyweight | +
+
+ Rectus Abdominis
+ Obliques
+
+ |
+ ▶ Video | +
| 2 | +Russian Twists | +20 total (10/side) | +10 lb DB | +
+
+ Obliques
+ Rectus Abdominis
+
+ |
+ ▶ Video | +
| 3 | +Plank Hold | +30-45s | +bodyweight | +
+
+ Rectus Abdominis
+ Obliques
+ Erector Spinae
+
+ |
+ ▶ Video | +
-
-
+
+ | # | Exercise | Reps | Weight | Target Muscles | Form Video |
|---|---|---|---|---|---|
| 1 | -KB Around the World | -20 (10/dir) | -20 lb KB | -
-
- Shoulders
- Core
- Forearms
-
- |
- ▶ Video | -
| 2 | -DB Lateral Raises | -15 | -5 lb pair → 10 lb | -
-
- Lateral Deltoid
- Upper Trapezius
-
- |
- ▶ Video | -
| 3 | -KB Sumo Deadlift | -10 | -25 lb KB | -
-
- Glutes
- Quadriceps
- Hamstrings
- Erector Spinae
-
- |
- ▶ Video | -
| 4 | -DB Biceps Curls | -10 | -10 lb pair → 12 lb | -
-
- Biceps Brachii
- Forearms
-
- |
- standard curl form | -
| 5 | -Push-ups (on knees) | -15 | -bodyweight | -
-
- Pectoralis Major
- Anterior Deltoid
- Triceps
-
- |
- progress to full push-ups | -
| 6 | -DB Glute Bridge | -12 | -15 lb on hips | -
-
- Glutes
- Hamstrings
- Core
-
- |
- lie on floor, feet flat, press hips up | -
| # | Exercise | Reps/Time | Weight | Target Muscles | Form Video |
|---|---|---|---|---|---|
| 1 | -Dead Bugs | -10/side | -bodyweight | -
-
- Rectus Abdominis
- Obliques
-
- |
- ▶ Video | -
| 2 | -Russian Twists | -20 total | -8 lb KB or 10 lb DB | -
-
- Obliques
- Rectus Abdominis
-
- |
- ▶ Video | -
| 3 | -Plank Hold | -30-45s | -bodyweight | -
-
- Rectus Abdominis
- Obliques
- Erector Spinae
-
- |
- ▶ Video | -