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