|
8 | 8 | * { margin: 0; padding: 0; box-sizing: border-box; } |
9 | 9 | body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #111; background: #fff; } |
10 | 10 | a { color: #111; text-decoration: none; } |
11 | | - |
12 | | - nav { |
13 | | - border-bottom: 1px solid #e0e0e0; |
14 | | - padding: 0 3rem; |
15 | | - display: flex; align-items: center; justify-content: space-between; |
16 | | - height: 60px; |
17 | | - } |
18 | | - .nav-logo { display: flex; align-items: center; gap: 10px; color: #111; } |
| 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; } |
19 | 13 | .nav-logo img { width: 28px; height: 28px; } |
20 | 14 | .nav-logo span { font-size: 15px; font-weight: 500; } |
21 | | - .nav-links { display: flex; gap: 2.5rem; } |
22 | | - .nav-links a { font-size: 14px; color: #555; } |
23 | | - .nav-links a:hover { color: #111; } |
24 | | - |
25 | | - |
26 | | - |
27 | | - .content h1 { |
28 | | - font-size: 2.2rem; |
29 | | - font-weight: 600; |
30 | | - letter-spacing: -0.02em; |
31 | | - margin-bottom: 3rem; |
32 | | - } |
33 | | - |
34 | | - .content h2 { |
35 | | - font-size: 1.1rem; |
36 | | - font-weight: 600; |
37 | | - margin-top: 3rem; |
38 | | - margin-bottom: 1rem; |
39 | | - } |
40 | | - |
41 | | - .content p { |
42 | | - font-size: 1rem; |
43 | | - color: #444; |
44 | | - line-height: 1.85; |
45 | | - margin-bottom: 1.25rem; |
46 | | - } |
47 | | - |
48 | | - .content code { |
49 | | - font-family: "SF Mono", "Fira Code", monospace; |
50 | | - font-size: 13px; |
51 | | - background: #f4f4f4; |
52 | | - border-radius: 4px; |
53 | | - padding: 2px 6px; |
54 | | - color: #111; |
55 | | - } |
56 | | - |
57 | | - footer { |
58 | | - border-top: 1px solid #e0e0e0; |
59 | | - padding: 2rem; |
60 | | - text-align: center; |
61 | | - font-size: 13px; |
62 | | - color: #888; |
63 | | - } |
64 | | - |
65 | 15 | .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; } |
| 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; } |
73 | 18 | .sidebar a:hover { color: #111; } |
74 | 19 | .sidebar a.active { color: #111; font-weight: 500; } |
75 | | - .page-content { flex: 1; max-width: 720px; padding: 4rem 3rem; } |
| 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; } |
| 25 | + footer { border-top: 1px solid #e0e0e0; padding: 2rem; text-align: center; font-size: 13px; color: #888; } |
76 | 26 | </style> |
77 | 27 | </head> |
78 | 28 | <body> |
|
82 | 32 | <img src="assets/cpp-logo.png" alt="C++ Mode"> |
83 | 33 | <span>C++ Mode</span> |
84 | 34 | </a> |
85 | | - <div class="nav-links"> |
86 | | - <a href="reference.html">Reference</a> |
87 | | - <a href="examples.html">Examples</a> |
88 | | - <a href="about.html">About</a> |
89 | | - </div> |
90 | 35 | </nav> |
91 | 36 |
|
92 | 37 | <div class="layout"> |
93 | 38 | <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> |
| 39 | + <a href="reference.html">Reference</a> |
| 40 | + <a href="examples.html">Examples</a> |
| 41 | + <a href="about.html" class="active">About</a> |
97 | 42 | </div> |
98 | | - <div class="page-content"> |
99 | | - <h1>About</h1> |
| 43 | + <div class="content"> |
| 44 | + <h1>About</h1> |
100 | 45 |
|
101 | | - <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> |
| 46 | + <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> |
102 | 47 |
|
103 | | - <h2>Why C++ Mode?</h2> |
| 48 | + <h2>Why C++ Mode?</h2> |
104 | 49 |
|
105 | | - <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> |
| 50 | + <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> |
106 | 51 |
|
107 | | - <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> |
| 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> |
108 | 53 |
|
109 | | - <h2>A friendlier path into C++</h2> |
| 54 | + <h2>A friendlier path into C++</h2> |
110 | 55 |
|
111 | | - <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> |
| 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> |
112 | 57 |
|
113 | | - <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> |
| 58 | + <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> |
114 | 59 |
|
115 | | - <h2>Who is it for</h2> |
| 60 | + <h2>Who is it for</h2> |
116 | 61 |
|
117 | | - <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> |
| 62 | + <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> |
118 | 63 |
|
119 | | - <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> |
| 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> |
| 65 | + </div> |
120 | 66 | </div> |
121 | 67 |
|
122 | 68 | <footer> |
123 | | - <p>C++ Mode for Processing 4</p> |
| 69 | + <p>C++ Mode for Processing</p> |
124 | 70 | </footer> |
125 | 71 |
|
126 | 72 | </body> |
|
0 commit comments