Skip to content

Commit f2b7cb9

Browse files
pepc84pepc84
committed
Add logo and update asset path
1 parent 91afa10 commit f2b7cb9

2 files changed

Lines changed: 35 additions & 57 deletions

File tree

‎assets/cpp-logo.png‎

5.2 KB
Loading

‎index.html‎

Lines changed: 35 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>C++ Mode for Processing 4</title>
77
<style>
88
* { margin: 0; padding: 0; box-sizing: border-box; }
9-
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #111; background: #fff; }
9+
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #111; background: #fff; height: 100vh; overflow: hidden; }
1010
a { color: #111; text-decoration: none; }
1111

1212
nav {
@@ -15,85 +15,63 @@
1515
display: flex; align-items: center; justify-content: space-between;
1616
height: 60px;
1717
}
18-
.nav-logo { display: flex; align-items: center; gap: 12px; }
19-
.nav-logo img { width: 32px; height: 32px; }
18+
.nav-logo { display: flex; align-items: center; gap: 10px; }
19+
.nav-logo img { width: 28px; height: 28px; }
2020
.nav-logo span { font-size: 15px; font-weight: 500; }
2121
.nav-links { display: flex; gap: 2.5rem; }
2222
.nav-links a { font-size: 14px; color: #555; }
2323
.nav-links a:hover { color: #111; }
2424

25-
.hero {
26-
max-width: 720px; margin: 0 auto;
27-
padding: 6rem 2rem 5rem; text-align: center;
25+
.main {
26+
height: calc(100vh - 60px);
27+
display: flex; align-items: center;
28+
padding: 0 6rem;
29+
gap: 4rem;
2830
}
29-
.hero img { width: 100px; height: 100px; margin-bottom: 2rem; }
30-
.hero h1 { font-size: 2.8rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 1.25rem; }
31-
.hero p { font-size: 1.1rem; color: #555; max-width: 500px; margin: 0 auto 2.5rem; line-height: 1.8; }
32-
.hero-buttons { display: flex; gap: 1rem; justify-content: center; }
33-
.btn { padding: 0.6rem 1.4rem; border-radius: 6px; font-size: 14px; font-weight: 500; border: 1px solid #ddd; cursor: pointer; }
34-
.btn-primary { background: #111; color: #fff; border-color: #111; }
35-
.btn-primary:hover { background: #333; }
36-
.btn-secondary:hover { background: #f5f5f5; }
3731

38-
section { max-width: 860px; margin: 0 auto; padding: 5rem 2rem; border-top: 1px solid #e0e0e0; }
39-
section h2 { font-size: 1.6rem; font-weight: 600; margin-bottom: 1rem; }
40-
section p { color: #555; line-height: 1.8; max-width: 600px; }
32+
.left { flex: 1; }
33+
.left h1 { font-size: 2.6rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 2.5rem; line-height: 1.2; }
34+
.left nav-links { display: flex; flex-direction: column; gap: 1rem; }
35+
.page-links { display: flex; flex-direction: column; gap: 1rem; margin-top: 0; }
36+
.page-links a { font-size: 1.1rem; color: #555; display: flex; align-items: center; gap: 8px; }
37+
.page-links a:hover { color: #111; }
38+
.page-links a::before { content: ''; width: 20px; height: 1px; background: #ccc; display: inline-block; }
4139

42-
.reference-note { color: #aaa; font-size: 14px; margin-top: 1rem; }
40+
.right { flex: 1; display: flex; justify-content: flex-end; align-items: center; }
41+
.right img { width: 380px; height: 380px; object-fit: contain; }
4342

44-
footer { border-top: 1px solid #e0e0e0; padding: 2rem; text-align: center; font-size: 13px; color: #888; }
45-
footer a { color: #888; }
46-
footer a:hover { color: #111; }
43+
@media (max-width: 768px) {
44+
.main { flex-direction: column; padding: 3rem 2rem; }
45+
.right img { width: 200px; height: 200px; }
46+
body { overflow: auto; }
47+
}
4748
</style>
4849
</head>
4950
<body>
5051

5152
<nav>
5253
<div class="nav-logo">
53-
<img src="cpp-logo.png" alt="C++ Mode logo">
54+
<img src="assets/cpp-logo.png" alt="C++ Mode">
5455
<span>C++ Mode</span>
5556
</div>
5657
<div class="nav-links">
57-
<a href="#reference">Reference</a>
58-
<a href="#examples">Examples</a>
59-
<a href="#about">About</a>
60-
<a href="https://github.com/processing-cpp/processing.cpp">GitHub</a>
58+
<a href="reference.html">Reference</a>
6159
</div>
6260
</nav>
6361

64-
<div class="hero">
65-
<img src="cpp-logo.png" alt="C++ Mode">
66-
<h1>C++ Mode for Processing 4</h1>
67-
<p>Write and run Processing sketches in C++. Same API you already know, compiled to a native binary.</p>
68-
<div class="hero-buttons">
69-
<a href="https://github.com/processing-cpp/processing.cpp/releases/latest" class="btn btn-primary">Download</a>
70-
<a href="https://github.com/processing-cpp/processing.cpp" class="btn btn-secondary">GitHub</a>
62+
<div class="main">
63+
<div class="left">
64+
<h1>C++ Mode for<br>Processing 4</h1>
65+
<div class="page-links">
66+
<a href="reference.html">Reference</a>
67+
<a href="examples.html">Examples</a>
68+
<a href="about.html">About</a>
69+
</div>
70+
</div>
71+
<div class="right">
72+
<img src="assets/cpp-logo.png" alt="C++ Mode">
7173
</div>
7274
</div>
7375

74-
<section id="reference">
75-
<h2>Reference</h2>
76-
<p>Full API reference coming soon.</p>
77-
<p class="reference-note">In the meantime, C++ Mode supports the standard Processing API — any sketch that runs in Processing Java will run in C++ Mode with minimal changes.</p>
78-
</section>
79-
80-
<section id="examples">
81-
<h2>Examples</h2>
82-
<p>Examples coming soon.</p>
83-
</section>
84-
85-
<section id="about">
86-
<h2>About</h2>
87-
<p>C++ Mode is a plugin for the Processing 4 IDE that brings C++ to the Processing creative coding environment. It lets you write sketches using the same familiar API — setup(), draw(), ellipse(), mouseX — but your code is compiled to a native binary via g++ and runs at full speed without a JVM or interpreter.</p>
88-
<br>
89-
<p>It supports Linux and Windows out of the box, handles all the OpenGL setup internally, and fits right into the Processing workflow you are already used to. Missing dependencies like g++, GLFW, or GLEW are detected automatically with a one-click installer.</p>
90-
<br>
91-
<p>Made by <a href="https://github.com/pepc84">Jose Gonzalez Llamas</a>.</p>
92-
</section>
93-
94-
<footer>
95-
<p>C++ Mode for Processing 4 &mdash; <a href="https://github.com/processing-cpp/processing.cpp">GitHub</a></p>
96-
</footer>
97-
9876
</body>
9977
</html>

0 commit comments

Comments
 (0)