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

sidebar goes to top: horizontal page layout, sidebar is top-level element

Browse Source
This commit is contained in:
Ash
2026-04-22 16:15:48 +00:00
parent a6d91eec4b
commit 2a52c4783d
2 changed files with 111 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workout/2026-04-22.html
+48 -41
View File
@@ -14,11 +14,23 @@
height: 100%;
overflow: hidden;
}
/* Page: horizontal layout. Sidebar is top-level so it goes to top */
.page {
display: flex;
flex-direction: column;
flex-direction: row;
height: 100vh;
max-width: 100%;
overflow: hidden;
}
/* Left side: header + workout */
.left {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
}
/* Header */
@@ -35,19 +47,12 @@
/* Main content area */
.main {
display: flex;
flex: 1;
overflow: hidden;
gap: 24px;
overflow-y: auto;
padding: 0 24px 16px;
}
/* Workout column */
.workout-column {
flex: 1;
overflow-y: auto;
min-width: 0;
}
.section { margin-bottom: 20px; }
h2 { font-size: 1rem; color: #f97316; margin-bottom: 10px; font-weight: 600; }
.table {
@@ -93,12 +98,13 @@
.muscle-tag.shoulders { background: rgba(100, 181, 246, 0.25); color: #64b5f6; }
.muscle-tag.forearms { background: rgba(255, 183, 77, 0.25); color: #ffb74d; }
/* Anatomy sidebar */
/* Anatomy sidebar — top-level, goes to top of page */
.anatomy-column {
width: 360px;
flex-shrink: 0;
display: flex;
flex-direction: column;
padding: 16px 24px 16px 0;
overflow-y: auto;
}
.anatomy-section {
@@ -137,8 +143,9 @@
/* Mobile: hide sidebar, stack normally */
@media (max-width: 1100px) {
html, body { height: auto; overflow: auto; }
.page { height: auto; }
.main { flex-direction: column; padding: 0 16px 16px; }
.page { flex-direction: column; height: auto; }
.left { height: auto; }
.main { padding: 0 16px 16px; }
.anatomy-column { display: none; }
.header { padding: 16px 16px 8px; }
}
@@ -146,14 +153,14 @@
/* TV adjustments */
@media (min-width: 1600px) {
.header { padding: 20px 32px 12px; }
.main { gap: 32px; padding: 0 32px 20px; }
.main { padding: 0 32px 20px; }
h1 { font-size: 2rem; }
.day-badge { font-size: 0.9rem; padding: 4px 12px; }
.table td { padding: 12px 14px; font-size: 1rem; }
.exercise-name { font-size: 1.1rem; }
.reps, .weight { font-size: 0.95rem; }
.muscle-tag { font-size: 0.75rem; padding: 3px 10px; }
.anatomy-column { width: 400px; }
.anatomy-column { width: 400px; padding: 20px 32px 20px 0; }
}
@keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
@@ -162,16 +169,16 @@
</head>
<body>
<div class="page">
<div class="header">
<p class="breadcrumb"><a href="../">Ash Pages</a> / <a href="index.html">Workouts</a> /</p>
<h1>💪 Full-Body Circuit</h1>
<div class="date-header">Wednesday, April 22, 2026</div>
<div class="day-badge">Day B — Full-Body Circuit</div>
</div>
<!-- LEFT SIDE: header + workout -->
<div class="left">
<div class="header">
<p class="breadcrumb"><a href="../">Ash Pages</a> / <a href="index.html">Workouts</a> /</p>
<h1>💪 Full-Body Circuit</h1>
<div class="date-header">Wednesday, April 22, 2026</div>
<div class="day-badge">Day B — Full-Body Circuit</div>
</div>
<div class="main">
<!-- WORKOUT COLUMN -->
<div class="workout-column" id="workoutColumn">
<div class="main">
<!-- Main workout table -->
<div class="section">
<h2>Main Workout</h2>
@@ -313,34 +320,34 @@
</div>
<a href="index.html" class="back-link">← Back to workout list</a>
</div> <!-- /workout-column -->
</div> <!-- /main -->
</div> <!-- /left -->
<!-- ANATOMY SIDEBAR -->
<div class="anatomy-column">
<div class="anatomy-section">
<div class="anatomy-header">
<div class="anatomy-title">📚 Muscle Reference</div>
<!-- RIGHT SIDE: anatomy sidebar — goes all the way to top -->
<div class="anatomy-column">
<div class="anatomy-section">
<div class="anatomy-header">
<div class="anatomy-title">📚 Muscle Reference</div>
</div>
<div class="anatomy-diagrams">
<div class="diagram-container" id="diagram-anterior">
<h3>Anterior (Front)</h3>
<img src="workout/muscles-anterior-labeled.png" alt="Anterior muscles">
</div>
<div class="anatomy-diagrams">
<div class="diagram-container" id="diagram-anterior">
<h3>Anterior (Front)</h3>
<img src="workout/muscles-anterior-labeled.png" alt="Anterior muscles">
</div>
<div class="diagram-container" id="diagram-posterior">
<h3>Posterior (Back)</h3>
<img src="workout/muscles-posterior-labeled.png" alt="Posterior muscles">
</div>
<div class="diagram-container" id="diagram-posterior">
<h3>Posterior (Back)</h3>
<img src="workout/muscles-posterior-labeled.png" alt="Posterior muscles">
</div>
</div>
</div> <!-- /anatomy-column -->
</div> <!-- /main -->
</div>
</div> <!-- /anatomy-column -->
</div> <!-- /page -->
<div class="wake-locked" id="wakeLockStatus">Screen locked for workout</div>
<script>
// Remote control: arrow keys scroll workout
const workoutCol = document.getElementById('workoutColumn');
const workoutCol = document.querySelector('.main');
const SCROLL_AMOUNT = 120;
document.addEventListener('keydown', (e) => {
workout/template.html
+63 -54
View File
@@ -15,11 +15,23 @@
height: 100%;
overflow: hidden;
}
/* Page: horizontal layout. Sidebar is top-level so it goes to top */
.page {
display: flex;
flex-direction: column;
flex-direction: row;
height: 100vh;
max-width: 100%;
overflow: hidden;
}
/* Left side: header + workout */
.left {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
}
/* Header */
@@ -36,19 +48,12 @@
/* Main content area */
.main {
display: flex;
flex: 1;
overflow: hidden;
gap: 24px;
overflow-y: auto;
padding: 0 24px 16px;
}
/* Workout column */
.workout-column {
flex: 1;
overflow-y: auto;
min-width: 0;
}
.section { margin-bottom: 20px; }
h2 { font-size: 1rem; color: #f97316; margin-bottom: 10px; font-weight: 600; }
.table {
@@ -94,12 +99,13 @@
.muscle-tag.shoulders { background: rgba(100, 181, 246, 0.25); color: #64b5f6; }
.muscle-tag.forearms { background: rgba(255, 183, 77, 0.25); color: #ffb74d; }
/* Anatomy sidebar */
/* Anatomy sidebar — top-level, goes to top of page */
.anatomy-column {
width: 360px;
flex-shrink: 0;
display: flex;
flex-direction: column;
padding: 16px 24px 16px 0;
overflow-y: auto;
}
.anatomy-section {
@@ -138,8 +144,9 @@
/* Mobile: hide sidebar, stack normally */
@media (max-width: 1100px) {
html, body { height: auto; overflow: auto; }
.page { height: auto; }
.main { flex-direction: column; padding: 0 16px 16px; }
.page { flex-direction: column; height: auto; }
.left { height: auto; }
.main { padding: 0 16px 16px; }
.anatomy-column { display: none; }
.header { padding: 16px 16px 8px; }
}
@@ -147,14 +154,14 @@
/* TV adjustments */
@media (min-width: 1600px) {
.header { padding: 20px 32px 12px; }
.main { gap: 32px; padding: 0 32px 20px; }
.main { padding: 0 32px 20px; }
h1 { font-size: 2rem; }
.day-badge { font-size: 0.9rem; padding: 4px 12px; }
.table td { padding: 12px 14px; font-size: 1rem; }
.exercise-name { font-size: 1.1rem; }
.reps, .weight { font-size: 0.95rem; }
.muscle-tag { font-size: 0.75rem; padding: 3px 10px; }
.anatomy-column { width: 400px; }
.anatomy-column { width: 400px; padding: 20px 32px 20px 0; }
}
@keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
@@ -163,52 +170,54 @@
</head>
<body>
<div class="page">
<div class="header">
<p class="breadcrumb"><a href="../">Ash Pages</a> / <a href="index.html">Workouts</a> /</p>
<h1>💪 Workout Day</h1>
<div class="date-header">DATE_HERE</div>
<div class="day-badge">Day X — DESCRIPTION</div>
</div>
<!-- LEFT SIDE: header + workout -->
<div class="left">
<div class="header">
<p class="breadcrumb"><a href="../">Ash Pages</a> / <a href="index.html">Workouts</a> /</p>
<h1>💪 Workout Day</h1>
<div class="date-header">DATE_HERE</div>
<div class="day-badge">Day X — DESCRIPTION</div>
</div>
<div class="main">
<!-- WORKOUT COLUMN -->
<div class="workout-column" id="workoutColumn">
<!-- Main workout table -->
<div class="section">
<h2>Main Workout</h2>
<div class="table">
<table>
<thead><tr><th>#</th><th>Exercise</th><th>Reps</th><th>Weight</th><th>Muscles</th></tr></thead>
<tbody>
<!-- Fill in exercises -->
</tbody>
</table>
<div class="main">
<div class="workout-column" id="workoutColumn">
<!-- Main workout table -->
<div class="section">
<h2>Main Workout</h2>
<div class="table">
<table>
<thead><tr><th>#</th><th>Exercise</th><th>Reps</th><th>Weight</th><th>Muscles</th></tr></thead>
<tbody>
<!-- Fill in exercises -->
</tbody>
</table>
</div>
<div class="note"><strong>Structure:</strong> 3 rounds, 60-90s rest</div>
</div>
<div class="note"><strong>Structure:</strong> 3 rounds, 60-90s rest</div>
<!-- Core finisher -->
</div> <!-- /workout-column --
</div> <!-- /main --
</div> <!-- /left -->
<!-- RIGHT SIDE: anatomy sidebar — goes all the way to top -->
<div class="anatomy-column">
<div class="anatomy-section">
<div class="anatomy-header">
<div class="anatomy-title">📚 Muscle Reference</div>
</div>
<!-- Core finisher -->
</div> <!-- /workout-column -->
<!-- ANATOMY SIDEBAR -->
<div class="anatomy-column">
<div class="anatomy-section">
<div class="anatomy-header">
<div class="anatomy-title">📚 Muscle Reference</div>
<div class="anatomy-diagrams">
<div class="diagram-container" id="diagram-anterior">
<h3>Anterior (Front)</h3>
<img src="workout/muscles-anterior-labeled.png" alt="Anterior muscles">
</div>
<div class="anatomy-diagrams">
<div class="diagram-container" id="diagram-anterior">
<h3>Anterior (Front)</h3>
<img src="workout/muscles-anterior-labeled.png" alt="Anterior muscles">
</div>
<div class="diagram-container" id="diagram-posterior">
<h3>Posterior (Back)</h3>
<img src="workout/muscles-posterior-labeled.png" alt="Posterior muscles">
</div>
<div class="diagram-container" id="diagram-posterior">
<h3>Posterior (Back)</h3>
<img src="workout/muscles-posterior-labeled.png" alt="Posterior muscles">
</div>
</div>
</div> <!-- /anatomy-column -->
</div> <!-- /main -->
</div>
</div> <!-- /anatomy-column --
</div> <!-- /page -->
<div class="wake-locked" id="wakeLockStatus">Screen locked for workout</div>