Skip to content

Commit f227fc4

Browse files
staredclaude
stared
and
claude
committed
Add sidebar navigation for equation list
Restructured layout to use left sidebar for equation navigation: - HTML: Added sidebar with nav element and main content wrapper - CSS: Implemented flexbox two-column layout (250px sidebar + flex main) - Sidebar: Gray background, vertical equation list, responsive - Mobile: Stacks sidebar on top on screens < 768px - Styling: Added hover effects, improved button spacing The equation selector is now a permanent sidebar navigation instead of horizontal buttons above the content. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
1 parent f99aa9b commit f227fc4

File tree

2 files changed

+75
-26
lines changed

2 files changed

+75
-26
lines changed

‎index.html‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,29 +8,34 @@
88
</head>
99
<body>
1010
<div id="app">
11-
<h1 id="equation-title">Interactive Equations</h1>
12-
<p class="subtitle">Hover over colored terms to explore their meaning</p>
11+
<aside id="sidebar" class="sidebar">
12+
<h2>Equations</h2>
13+
<nav id="equation-selector" class="equation-selector"></nav>
14+
</aside>
1315

14-
<div id="equation-selector" class="equation-selector"></div>
16+
<main id="main-content" class="main-content">
17+
<h1 id="equation-title">Interactive Equations</h1>
18+
<p class="subtitle">Hover over colored terms to explore their meaning</p>
1519

16-
<div id="color-scheme-switcher" class="color-scheme-switcher"></div>
20+
<div id="color-scheme-switcher" class="color-scheme-switcher"></div>
1721

18-
<div id="equation-container"></div>
22+
<div id="equation-container"></div>
1923

20-
<div id="static-description" class="static-description"></div>
24+
<div id="static-description" class="static-description"></div>
2125

22-
<div id="hover-explanation" class="hover-explanation"></div>
26+
<div id="hover-explanation" class="hover-explanation"></div>
2327

24-
<footer class="footer">
25-
<p>
26-
Demo by <a href="https://p.migdal.pl" target="_blank" rel="noopener">Piotr Migdał</a> ·
27-
<a href="https://github.com/stared/equations-explained-colorfully" target="_blank" rel="noopener">View source on GitHub</a>
28-
</p>
29-
<p>
30-
For more on interactive explanations, see:
31-
<a href="https://p.migdal.pl/blog/2024/05/science-games-explorable-explanations/" target="_blank" rel="noopener">Science, games, and explorable explanations</a>
32-
</p>
33-
</footer>
28+
<footer class="footer">
29+
<p>
30+
Demo by <a href="https://p.migdal.pl" target="_blank" rel="noopener">Piotr Migdał</a> ·
31+
<a href="https://github.com/stared/equations-explained-colorfully" target="_blank" rel="noopener">View source on GitHub</a>
32+
</p>
33+
<p>
34+
For more on interactive explanations, see:
35+
<a href="https://p.migdal.pl/blog/2024/05/science-games-explorable-explanations/" target="_blank" rel="noopener">Science, games, and explorable explanations</a>
36+
</p>
37+
</footer>
38+
</main>
3439
</div>
3540
<script type="module" src="/src/main.ts"></script>
3641
</body>

‎src/style.css‎

Lines changed: 53 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,37 @@ body {
1616
background-color: var(--bg-color);
1717
color: var(--text-color);
1818
line-height: 1.6;
19-
padding: 2rem;
19+
margin: 0;
20+
padding: 0;
2021
}
2122

2223
#app {
23-
max-width: 800px;
24+
display: flex;
25+
min-height: 100vh;
26+
}
27+
28+
/* Sidebar */
29+
.sidebar {
30+
width: 250px;
31+
min-width: 250px;
32+
background-color: #f9fafb;
33+
border-right: 1px solid var(--border-color);
34+
padding: 2rem 1.5rem;
35+
overflow-y: auto;
36+
}
37+
38+
.sidebar h2 {
39+
font-size: 1.25rem;
40+
font-weight: 400;
41+
margin-bottom: 1.5rem;
42+
color: var(--text-color);
43+
}
44+
45+
/* Main content */
46+
.main-content {
47+
flex: 1;
48+
padding: 2rem;
49+
max-width: 900px;
2450
margin: 0 auto;
2551
}
2652

@@ -71,19 +97,24 @@ h1 {
7197
/* Equation selector */
7298
.equation-selector {
7399
display: flex;
74-
gap: 0.5rem;
75-
margin-bottom: 1.5rem;
76-
flex-wrap: wrap;
100+
flex-direction: column;
101+
gap: 0.75rem;
77102
}
78103

79104
.equation-selector button {
80-
padding: 0.5rem 1rem;
105+
padding: 0.75rem 1rem;
81106
border: 1px solid var(--border-color);
82107
background-color: transparent;
83108
color: var(--text-color);
84109
font-size: 0.875rem;
85110
cursor: pointer;
86111
font-family: inherit;
112+
text-align: left;
113+
transition: background-color 0.2s ease;
114+
}
115+
116+
.equation-selector button:hover {
117+
background-color: #e5e7eb;
87118
}
88119

89120
.equation-selector button.active {
@@ -92,9 +123,10 @@ h1 {
92123
}
93124

94125
.equation-selector .category {
126+
display: block;
95127
font-size: 0.75rem;
96128
color: #6b7280;
97-
margin-left: 0.25rem;
129+
margin-top: 0.25rem;
98130
}
99131

100132
/* Color scheme switcher */
@@ -190,8 +222,20 @@ h1 {
190222

191223
/* Responsive design */
192224
@media (max-width: 768px) {
193-
body {
194-
padding: 1rem;
225+
#app {
226+
flex-direction: column;
227+
}
228+
229+
.sidebar {
230+
width: 100%;
231+
min-width: 100%;
232+
border-right: none;
233+
border-bottom: 1px solid var(--border-color);
234+
padding: 1.5rem 1rem;
235+
}
236+
237+
.main-content {
238+
padding: 1.5rem 1rem;
195239
}
196240

197241
h1 {

0 commit comments

Comments
 (0)