Skip to content

Commit bef5d09

Browse files
committed
Fix all sidebar links and rewrite reference, about, libraries pages
1 parent af293e2 commit bef5d09

4 files changed

Lines changed: 121 additions & 128 deletions

File tree

about/index.html

Lines changed: 40 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,37 +8,53 @@
88
* { margin: 0; padding: 0; box-sizing: border-box; }
99
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #111; background: #fff; }
1010
a { color: #111; text-decoration: none; }
11-
nav { border-bottom: 1px solid #e0e0e0; padding: 0 2rem; display: flex; align-items: center; height: 60px; }
12-
.nav-logo { display: flex; align-items: center; gap: 10px; }
11+
nav { border-bottom: 1px solid #e0e0e0; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 60px; position: sticky; top: 0; background: #fff; z-index: 100; }
12+
.nav-logo { display: flex; align-items: center; gap: 10px; color: #111; }
1313
.nav-logo img { width: 28px; height: 28px; }
1414
.nav-logo span { font-size: 15px; font-weight: 500; }
15+
.hamburger { background: none; border: none; cursor: pointer; font-size: 22px; padding: 4px 8px; display: none; }
1516
.layout { display: flex; min-height: calc(100vh - 60px); }
16-
.sidebar { width: 180px; min-width: 180px; border-right: 1px solid #e0e0e0; padding: 2.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
17-
.sidebar a { font-size: 14px; color: #555; padding: 0.4rem 0; display: block; }
18-
.sidebar a:hover { color: #111; }
19-
.sidebar a.active { color: #111; font-weight: 500; }
20-
.content { max-width: 680px; padding: 4rem 3rem; }
21-
.content h1 { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 2.5rem; }
22-
.content h2 { font-size: 1rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: 0.75rem; }
23-
.content p { font-size: 1rem; color: #444; line-height: 1.85; margin-bottom: 1.25rem; }
24-
.content code { font-family: "SF Mono", "Fira Code", monospace; font-size: 13px; background: #f4f4f4; border-radius: 4px; padding: 2px 6px; color: #111; }
17+
.sidebar-outer { width: 220px; min-width: 220px; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; position: sticky; top: 60px; height: calc(100vh - 60px); }
18+
#site-sidebar { padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid #e0e0e0; display: flex; flex-direction: column; }
19+
#site-sidebar a { font-size: 14px; color: #555; padding: 0.4rem 0; display: block; }
20+
#site-sidebar a:hover { color: #111; }
21+
#site-sidebar a.active { color: #111; font-weight: 500; }
22+
.content { flex: 1; padding: 4rem; max-width: 820px; }
23+
.content h1 { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
24+
.content h2 { font-size: 1.1rem; font-weight: 600; margin-top: 3rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e0e0e0; }
25+
.content p { color: #444; line-height: 1.8; margin-bottom: 1rem; font-size: 0.95rem; }
26+
.content .subtitle { color: #888; font-size: 0.95rem; margin-bottom: 3rem; }
27+
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background: #e0e0e0; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; margin-bottom: 2rem; }
28+
.lib-card { background: #fff; padding: 1.25rem 1.5rem; }
29+
.lib-card code { font-family: "SF Mono","Fira Code",monospace; font-size: 13px; font-weight: 600; color: #111; display: block; margin-bottom: 0.35rem; }
30+
.lib-card p { font-size: 13px; color: #888; line-height: 1.5; margin: 0; }
31+
.tip { background: #f8f8f8; border-left: 3px solid #111; border-radius: 4px; padding: 1rem 1.25rem; margin-bottom: 2rem; font-size: 13px; color: #555; line-height: 1.7; }
32+
.tip code { font-family: "SF Mono","Fira Code",monospace; font-size: 12px; background: #eee; border-radius: 3px; padding: 1px 5px; color: #111; }
2533
footer { border-top: 1px solid #e0e0e0; padding: 2rem; text-align: center; font-size: 13px; color: #888; }
26-
</style>
34+
@media (max-width: 768px) {
35+
.hamburger { display: block; }
36+
.sidebar-outer { position: fixed; top: 60px; left: -240px; width: 240px; height: calc(100vh - 60px); background: #fff; z-index: 200; transition: left 0.25s ease; box-shadow: 2px 0 12px rgba(0,0,0,0.08); }
37+
.sidebar-outer.open { left: 0; }
38+
.content { padding: 2rem 1.25rem; }
39+
}
40+
</style>
2741
</head>
2842
<body>
29-
3043
<nav>
3144
<a href="../" class="nav-logo">
32-
<img src="assets/cpp-logo.png" alt="C++ Mode">
45+
<img src="../assets/cpp-logo.png" alt="C++ Mode">
3346
<span>C++ Mode</span>
3447
</a>
48+
<button class="hamburger" onclick="document.querySelector('.sidebar-outer').classList.toggle('open')"></button>
3549
</nav>
36-
3750
<div class="layout">
38-
<div class="sidebar">
39-
<a href="../reference">Reference</a>
40-
<a href="../examples">Examples</a>
41-
<a href="../about" class="active">About</a>
51+
<div class="sidebar-outer">
52+
<div id="site-sidebar">
53+
<a href="../libraries">Libraries</a>
54+
<a href="../reference">Reference</a>
55+
<a href="../examples">Examples</a>
56+
<a href="../about" class="active">About</a>
57+
</div>
4258
</div>
4359
<div class="content">
4460
<h1>About</h1>
@@ -49,25 +65,21 @@ <h2>Why C++ Mode?</h2>
4965

5066
<p>Getting started with C++ is hard. Before you can draw anything on screen you need to set up a build system, open a window, initialize OpenGL, and write a lot of setup code. Most people give up before they see anything.</p>
5167

52-
<p>Processing solved this problem for Java. C++ Mode does the same thing for C++. You type <code>ellipse(300, 300, 50, 50)</code>, hit Run, and something appears on screen. The window, the event loop, the OpenGL context, all of it is taken care of.</p>
68+
<p>Processing solved this problem for Java. C++ Mode does the same thing for C++. You type <code style="font-family:monospace;background:#f4f4f4;padding:2px 6px;border-radius:4px;">ellipse(300, 300, 50, 50)</code>, hit Run, and something appears on screen. The window, the event loop, the OpenGL context, all of it is taken care of.</p>
5369

5470
<h2>A friendlier path into C++</h2>
5571

56-
<p>If you already know Processing, you already know most of the API. <code>setup()</code>, <code>draw()</code>, <code>background()</code>, <code>mouseX</code>, <code>fill()</code> all work the same way. The only difference is that you are now writing C++.</p>
72+
<p>If you already know Processing, you already know most of the API. setup(), draw(), background(), mouseX, fill() all work the same way. The only difference is that you are now writing C++.</p>
5773

5874
<p>You can take it step by step. Start with sketches that look almost identical to what you would write in Java. Then start introducing C++ concepts at your own pace: structs, vectors, pointers, templates. The visual feedback makes it easier to understand what your code is actually doing.</p>
5975

6076
<h2>Who is it for</h2>
6177

6278
<p>C++ Mode is for Processing users who are curious about C++ and want a familiar starting point. It is for students taking a C++ course who want to make something visual while they learn. It is for developers who already know C++ and want a fast creative coding environment. And it is for artists who want their sketches to run as fast as possible without giving up the simplicity of the Processing API.</p>
6379

64-
<p>Made by <a href="https://github.com/pepc84" style="border-bottom: 1px solid #ddd;">Jose Gonzalez Llamas</a>. Contributions welcome on <a href="https://github.com/processing-cpp/processing.cpp" style="border-bottom: 1px solid #ddd;">GitHub</a>.</p>
80+
<p>Made by <a href="https://github.com/pepc84" style="border-bottom:1px solid #ddd;">Jose Gonzalez Llamas</a>. Contributions welcome on <a href="https://github.com/processing-cpp/processing.cpp" style="border-bottom:1px solid #ddd;">GitHub</a>.</p>
6581
</div>
6682
</div>
67-
68-
<footer>
69-
<p>C++ Mode for Processing</p>
70-
</footer>
71-
83+
<footer><p>C++ Mode for Processing</p></footer>
7284
</body>
73-
</html>
85+
</html>

assets/examples_js/Basics/camera/Perspective_vs_Ortho/Perspective_vs_Ortho.js

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,21 @@ let showPerspective = false;
22

33
function setup() {
44
createCanvas(600, 360, WEBGL);
5-
fill(255);
65
noStroke();
76
}
87

98
function draw() {
10-
lights();
119
background(0);
10+
lights();
1211

13-
let far = map(mouseX, 0, width, 120, 400);
12+
let far = map(mouseX, 0, width, 300, 1000);
1413

1514
if (showPerspective) {
1615
perspective(PI / 3, width / height, 10, far);
1716
} else {
18-
ortho(
19-
-width / 2,
20-
width / 2,
21-
-height / 2,
22-
height / 2,
23-
10,
24-
far
25-
);
17+
ortho(-width / 2, width / 2,
18+
-height / 2, height / 2,
19+
10, far);
2620
}
2721

2822
rotateX(-PI / 6);
@@ -33,4 +27,4 @@ function draw() {
3327

3428
function mousePressed() {
3529
showPerspective = !showPerspective;
36-
}
30+
}

libraries/index.html

Lines changed: 35 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -3,93 +3,68 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Documentation - C++ Mode for Processing</title>
6+
<title>Libraries - C++ Mode for Processing</title>
77
<style>
88
* { margin: 0; padding: 0; box-sizing: border-box; }
99
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #111; background: #fff; }
1010
a { color: #111; text-decoration: none; }
1111
nav { border-bottom: 1px solid #e0e0e0; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 60px; position: sticky; top: 0; background: #fff; z-index: 100; }
12-
.nav-logo { display: flex; align-items: center; gap: 10px; }
12+
.nav-logo { display: flex; align-items: center; gap: 10px; color: #111; }
1313
.nav-logo img { width: 28px; height: 28px; }
1414
.nav-logo span { font-size: 15px; font-weight: 500; }
15-
.hamburger { display: none; background: none; border: none; cursor: pointer; font-size: 22px; padding: 4px 8px; }
16-
15+
.hamburger { background: none; border: none; cursor: pointer; font-size: 22px; padding: 4px 8px; display: none; }
1716
.layout { display: flex; min-height: calc(100vh - 60px); }
18-
.sidebar { width: 220px; min-width: 220px; border-right: 1px solid #e0e0e0; padding: 2rem 0; position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; }
19-
.sidebar-top { padding: 0 1.5rem 1.5rem; border-bottom: 1px solid #e0e0e0; margin-bottom: 1rem; }
20-
.sidebar-top a { font-size: 14px; color: #555; padding: 0.4rem 0; display: block; }
21-
.sidebar-top a:hover { color: #111; }
22-
.sidebar-top a.active { color: #111; font-weight: 500; }
23-
.sidebar-section { padding: 0 1.5rem; }
24-
.sidebar-section a { font-size: 13px; color: #555; padding: 0.3rem 0; display: block; }
25-
.sidebar-section a:hover { color: #111; }
26-
17+
.sidebar-outer { width: 220px; min-width: 220px; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; position: sticky; top: 60px; height: calc(100vh - 60px); }
18+
#site-sidebar { padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid #e0e0e0; display: flex; flex-direction: column; }
19+
#site-sidebar a { font-size: 14px; color: #555; padding: 0.4rem 0; display: block; }
20+
#site-sidebar a:hover { color: #111; }
21+
#site-sidebar a.active { color: #111; font-weight: 500; }
2722
.content { flex: 1; padding: 4rem; max-width: 820px; }
2823
.content h1 { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
29-
.content .subtitle { color: #888; font-size: 0.95rem; margin-bottom: 3rem; }
3024
.content h2 { font-size: 1.1rem; font-weight: 600; margin-top: 3rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e0e0e0; }
3125
.content p { color: #444; line-height: 1.8; margin-bottom: 1rem; font-size: 0.95rem; }
32-
26+
.content .subtitle { color: #888; font-size: 0.95rem; margin-bottom: 3rem; }
3327
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background: #e0e0e0; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; margin-bottom: 2rem; }
3428
.lib-card { background: #fff; padding: 1.25rem 1.5rem; }
3529
.lib-card code { font-family: "SF Mono","Fira Code",monospace; font-size: 13px; font-weight: 600; color: #111; display: block; margin-bottom: 0.35rem; }
3630
.lib-card p { font-size: 13px; color: #888; line-height: 1.5; margin: 0; }
37-
3831
.tip { background: #f8f8f8; border-left: 3px solid #111; border-radius: 4px; padding: 1rem 1.25rem; margin-bottom: 2rem; font-size: 13px; color: #555; line-height: 1.7; }
3932
.tip code { font-family: "SF Mono","Fira Code",monospace; font-size: 12px; background: #eee; border-radius: 3px; padding: 1px 5px; color: #111; }
40-
4133
footer { border-top: 1px solid #e0e0e0; padding: 2rem; text-align: center; font-size: 13px; color: #888; }
42-
4334
@media (max-width: 768px) {
4435
.hamburger { display: block; }
45-
.sidebar { position: fixed; top: 60px; left: -240px; width: 240px; height: calc(100vh - 60px); background: #fff; z-index: 200; transition: left 0.25s ease; box-shadow: 2px 0 12px rgba(0,0,0,0.08); }
46-
.sidebar.open { left: 0; }
36+
.sidebar-outer { position: fixed; top: 60px; left: -240px; width: 240px; height: calc(100vh - 60px); background: #fff; z-index: 200; transition: left 0.25s ease; box-shadow: 2px 0 12px rgba(0,0,0,0.08); }
37+
.sidebar-outer.open { left: 0; }
4738
.content { padding: 2rem 1.25rem; }
4839
}
49-
</style>
40+
</style>
5041
</head>
5142
<body>
52-
5343
<nav>
5444
<a href="../" class="nav-logo">
5545
<img src="../assets/cpp-logo.png" alt="C++ Mode">
5646
<span>C++ Mode</span>
5747
</a>
58-
<button class="hamburger" onclick="document.getElementById('sidebar').classList.toggle('open')"></button>
48+
<button class="hamburger" onclick="document.querySelector('.sidebar-outer').classList.toggle('open')"></button>
5949
</nav>
60-
6150
<div class="layout">
62-
<div class="sidebar" id="sidebar">
63-
<div class="sidebar-top">
64-
<a href="../documentation">Documentation</a>
51+
<div class="sidebar-outer">
52+
<div id="site-sidebar">
53+
<a href="../libraries" class="active">Libraries</a>
6554
<a href="../reference">Reference</a>
6655
<a href="../examples">Examples</a>
6756
<a href="../about">About</a>
6857
</div>
69-
<div class="sidebar-section">
70-
<a href="#included">Included libraries</a>
71-
<a href="#containers">Containers</a>
72-
<a href="#algorithms">Algorithms</a>
73-
<a href="#strings">Strings and IO</a>
74-
<a href="#concurrency">Concurrency</a>
75-
<a href="#utilities">Utilities</a>
76-
<a href="#math">Math</a>
77-
</div>
7858
</div>
79-
8059
<div class="content">
81-
<h1>Documentation</h1>
60+
<h1>Libraries</h1>
8261
<p class="subtitle">Everything available in C++ Mode out of the box.</p>
8362

8463
<div class="tip">
8564
None of these require an <code>#include</code>. They are all automatically available in every sketch through <code>Processing.h</code>.
8665
</div>
8766

88-
<h2 id="included">What is included</h2>
89-
<p>C++ Mode includes the full C++ Standard Library automatically. You can use any of the following without writing a single <code>#include</code> at the top of your sketch.</p>
90-
<p>If you want to use a third-party library, you can still add <code>#include</code> statements as normal.</p>
91-
92-
<h2 id="containers">Containers</h2>
67+
<h2>Containers</h2>
9368
<div class="lib-grid">
9469
<div class="lib-card"><code>std::vector</code><p>Dynamic array. The most common container. Use instead of Java's ArrayList.</p></div>
9570
<div class="lib-card"><code>std::map</code><p>Key-value pairs sorted by key. Use instead of Java's HashMap.</p></div>
@@ -100,54 +75,51 @@ <h2 id="containers">Containers</h2>
10075
<div class="lib-card"><code>std::stack</code><p>LIFO stack adapter.</p></div>
10176
</div>
10277

103-
<h2 id="algorithms">Algorithms</h2>
78+
<h2>Algorithms</h2>
10479
<div class="lib-grid">
10580
<div class="lib-card"><code>std::sort</code><p>Sort any container. Works with lambdas for custom comparison.</p></div>
10681
<div class="lib-card"><code>std::find</code><p>Find an element in a range.</p></div>
10782
<div class="lib-card"><code>std::remove_if</code><p>Remove elements matching a condition. Commonly used with vectors.</p></div>
108-
<div class="lib-card"><code>std::min / std::max</code><p>Min and max of two values. Also available as the Processing functions min() and max().</p></div>
83+
<div class="lib-card"><code>std::min / std::max</code><p>Min and max of two values.</p></div>
10984
<div class="lib-card"><code>std::accumulate</code><p>Sum or fold a range of values.</p></div>
11085
<div class="lib-card"><code>std::transform</code><p>Apply a function to every element in a range.</p></div>
11186
</div>
11287

113-
<h2 id="strings">Strings and IO</h2>
88+
<h2>Strings and IO</h2>
11489
<div class="lib-grid">
115-
<div class="lib-card"><code>std::string</code><p>Text string. Use instead of Java's String. Supports +, ==, .size(), .substr() and more.</p></div>
116-
<div class="lib-card"><code>std::stringstream</code><p>Build strings from mixed types. Useful for formatting numbers into text.</p></div>
90+
<div class="lib-card"><code>std::string</code><p>Text string. Use instead of Java's String.</p></div>
91+
<div class="lib-card"><code>std::stringstream</code><p>Build strings from mixed types.</p></div>
11792
<div class="lib-card"><code>std::ifstream</code><p>Read from files.</p></div>
11893
<div class="lib-card"><code>std::ofstream</code><p>Write to files.</p></div>
119-
<div class="lib-card"><code>std::regex</code><p>Regular expressions for pattern matching in strings.</p></div>
120-
<div class="lib-card"><code>std::cout / std::cerr</code><p>Print to the console. Also available as println() in Processing style.</p></div>
94+
<div class="lib-card"><code>std::regex</code><p>Regular expressions for pattern matching.</p></div>
95+
<div class="lib-card"><code>std::cout / std::cerr</code><p>Print to the console. Also available as println().</p></div>
12196
</div>
12297

123-
<h2 id="concurrency">Concurrency</h2>
98+
<h2>Concurrency</h2>
12499
<div class="lib-grid">
125-
<div class="lib-card"><code>std::thread</code><p>Run code on a separate thread. Useful for background loading or computation.</p></div>
100+
<div class="lib-card"><code>std::thread</code><p>Run code on a separate thread.</p></div>
126101
<div class="lib-card"><code>std::mutex</code><p>Protect shared data between threads.</p></div>
127102
<div class="lib-card"><code>std::atomic</code><p>Thread-safe operations on single values.</p></div>
128103
</div>
129104

130-
<h2 id="utilities">Utilities</h2>
105+
<h2>Utilities</h2>
131106
<div class="lib-grid">
132-
<div class="lib-card"><code>std::optional</code><p>A value that may or may not be present. Avoids null pointers.</p></div>
107+
<div class="lib-card"><code>std::optional</code><p>A value that may or may not be present.</p></div>
133108
<div class="lib-card"><code>std::variant</code><p>A value that can be one of several types.</p></div>
134109
<div class="lib-card"><code>std::tuple</code><p>A fixed-size collection of values of different types.</p></div>
135110
<div class="lib-card"><code>std::pair</code><p>Two values grouped together.</p></div>
136-
<div class="lib-card"><code>std::memory (unique_ptr, shared_ptr)</code><p>Smart pointers for automatic memory management.</p></div>
111+
<div class="lib-card"><code>std::unique_ptr / std::shared_ptr</code><p>Smart pointers for automatic memory management.</p></div>
137112
<div class="lib-card"><code>std::chrono</code><p>Time utilities. Measure durations and get the current time.</p></div>
138113
</div>
139114

140-
<h2 id="math">Math</h2>
115+
<h2>Math</h2>
141116
<div class="lib-grid">
142-
<div class="lib-card"><code>std::cmath</code><p>sin, cos, tan, sqrt, pow, abs, floor, ceil and more. Also available as Processing-style functions.</p></div>
143-
<div class="lib-card"><code>std::random</code><p>Random number generation. Also available as random() in Processing style.</p></div>
144-
<div class="lib-card"><code>std::numeric</code><p>Numeric utilities like iota, accumulate, inner_product.</p></div>
117+
<div class="lib-card"><code>std::cmath</code><p>sin, cos, tan, sqrt, pow, abs, floor, ceil and more.</p></div>
118+
<div class="lib-card"><code>std::random</code><p>Random number generation. Also available as random().</p></div>
119+
<div class="lib-card"><code>std::numeric</code><p>iota, accumulate, inner_product and more.</p></div>
145120
</div>
146-
147121
</div>
148122
</div>
149-
150123
<footer><p>C++ Mode for Processing</p></footer>
151-
152124
</body>
153-
</html>
125+
</html>

0 commit comments

Comments
 (0)