Skip to content

Commit c3823ec

Browse files
pepc84pepc84
committed
Add consistent left sidebar navigation to all pages
1 parent f8f337d commit c3823ec

3 files changed

Lines changed: 126 additions & 6 deletions

File tree

‎about.html‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,7 @@
2222
.nav-links a { font-size: 14px; color: #555; }
2323
.nav-links a:hover { color: #111; }
2424

25-
.content {
26-
max-width: 680px;
27-
margin: 0 auto;
28-
padding: 5rem 2rem;
29-
}
25+
3026

3127
.content h1 {
3228
font-size: 2.2rem;
@@ -65,6 +61,18 @@
6561
font-size: 13px;
6662
color: #888;
6763
}
64+
65+
.layout { display: flex; min-height: calc(100vh - 60px); }
66+
.sidebar {
67+
width: 180px; min-width: 180px;
68+
border-right: 1px solid #e0e0e0;
69+
padding: 2rem 1.5rem;
70+
display: flex; flex-direction: column; gap: 0.25rem;
71+
}
72+
.sidebar a { font-size: 14px; color: #555; padding: 0.35rem 0; display: block; }
73+
.sidebar a:hover { color: #111; }
74+
.sidebar a.active { color: #111; font-weight: 500; }
75+
.page-content { flex: 1; max-width: 720px; padding: 4rem 3rem; }
6876
</style>
6977
</head>
7078
<body>
@@ -81,7 +89,13 @@
8189
</div>
8290
</nav>
8391

84-
<div class="content">
92+
<div class="layout">
93+
<div class="sidebar">
94+
<a href="reference.html" >Reference</a>
95+
<a href="examples.html" >Examples</a>
96+
<a href="about.html" class='active'>About</a>
97+
</div>
98+
<div class="page-content">
8599
<h1>About</h1>
86100

87101
<p>C++ Mode is a plugin for the Processing 4 IDE that lets you write sketches in C++ instead of Java. The idea is to take everything that makes Processing easy to pick up and bring it to C++.</p>

‎examples.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Examples - C++ Mode for Processing</title>
7+
<style>
8+
* { margin: 0; padding: 0; box-sizing: border-box; }
9+
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #111; background: #fff; }
10+
a { color: #111; text-decoration: none; }
11+
nav { border-bottom: 1px solid #e0e0e0; padding: 0 3rem; display: flex; align-items: center; justify-content: space-between; height: 60px; }
12+
.nav-logo { display: flex; align-items: center; gap: 10px; color: #111; }
13+
.nav-logo img { width: 28px; height: 28px; }
14+
.nav-logo span { font-size: 15px; font-weight: 500; }
15+
16+
.layout { display: flex; min-height: calc(100vh - 60px); }
17+
.sidebar {
18+
width: 180px; min-width: 180px;
19+
border-right: 1px solid #e0e0e0;
20+
padding: 2rem 1.5rem;
21+
display: flex; flex-direction: column; gap: 0.25rem;
22+
}
23+
.sidebar a { font-size: 14px; color: #555; padding: 0.35rem 0; display: block; }
24+
.sidebar a:hover { color: #111; }
25+
.sidebar a.active { color: #111; font-weight: 500; }
26+
.page-content { flex: 1; max-width: 720px; padding: 4rem 3rem; }
27+
28+
.page-content h1 { font-size: 2rem; font-weight: 600; margin-bottom: 1rem; }
29+
.page-content p { color: #555; line-height: 1.8; }
30+
footer { border-top: 1px solid #e0e0e0; padding: 2rem; text-align: center; font-size: 13px; color: #888; }
31+
</style>
32+
</head>
33+
<body>
34+
<nav>
35+
<a href="index.html" class="nav-logo">
36+
<img src="assets/cpp-logo.png" alt="C++ Mode">
37+
<span>C++ Mode</span>
38+
</a>
39+
</nav>
40+
<div class="layout">
41+
<div class="sidebar">
42+
<a href="reference.html" >Reference</a>
43+
<a href="examples.html" class='active'>Examples</a>
44+
<a href="about.html" >About</a>
45+
</div>
46+
<div class="page-content">
47+
<h1>Examples</h1>
48+
<p>Examples coming soon.</p>
49+
</div>
50+
</div>
51+
<footer><p>C++ Mode for Processing</p></footer>
52+
</body>
53+
</html>

‎reference.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Reference - C++ Mode for Processing</title>
7+
<style>
8+
* { margin: 0; padding: 0; box-sizing: border-box; }
9+
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #111; background: #fff; }
10+
a { color: #111; text-decoration: none; }
11+
nav { border-bottom: 1px solid #e0e0e0; padding: 0 3rem; display: flex; align-items: center; justify-content: space-between; height: 60px; }
12+
.nav-logo { display: flex; align-items: center; gap: 10px; color: #111; }
13+
.nav-logo img { width: 28px; height: 28px; }
14+
.nav-logo span { font-size: 15px; font-weight: 500; }
15+
16+
.layout { display: flex; min-height: calc(100vh - 60px); }
17+
.sidebar {
18+
width: 180px; min-width: 180px;
19+
border-right: 1px solid #e0e0e0;
20+
padding: 2rem 1.5rem;
21+
display: flex; flex-direction: column; gap: 0.25rem;
22+
}
23+
.sidebar a { font-size: 14px; color: #555; padding: 0.35rem 0; display: block; }
24+
.sidebar a:hover { color: #111; }
25+
.sidebar a.active { color: #111; font-weight: 500; }
26+
.page-content { flex: 1; max-width: 720px; padding: 4rem 3rem; }
27+
28+
.page-content h1 { font-size: 2rem; font-weight: 600; margin-bottom: 1rem; }
29+
.page-content p { color: #555; line-height: 1.8; }
30+
footer { border-top: 1px solid #e0e0e0; padding: 2rem; text-align: center; font-size: 13px; color: #888; }
31+
</style>
32+
</head>
33+
<body>
34+
<nav>
35+
<a href="index.html" class="nav-logo">
36+
<img src="assets/cpp-logo.png" alt="C++ Mode">
37+
<span>C++ Mode</span>
38+
</a>
39+
</nav>
40+
<div class="layout">
41+
<div class="sidebar">
42+
<a href="reference.html" class='active'>Reference</a>
43+
<a href="examples.html" >Examples</a>
44+
<a href="about.html" >About</a>
45+
</div>
46+
<div class="page-content">
47+
<h1>Reference</h1>
48+
<p>Full API reference coming soon.</p>
49+
</div>
50+
</div>
51+
<footer><p>C++ Mode for Processing</p></footer>
52+
</body>
53+
</html>

0 commit comments

Comments
 (0)