Fix homepage: ProcessingSans font, darker blue, arrow inside hero, nav in sync with other pages

Author: pepc84

index.html

@@ -6,80 +6,106 @@
   <title>Processing for C++</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
   <style>
-    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap');
+    @font-face {
+      font-family: "ProcessingSans";
+      src: url("/assets/ProcessingSansPro-Regular.ttf") format("truetype");
+    }
     * { margin: 0; padding: 0; box-sizing: border-box; }
     body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #111; background: #fff; }
     a { color: #111; text-decoration: none; }
 
-    nav {
+    /* Nav — matches all other pages via nav.js injection */
+    #site-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;
     }
-    .nav-logo { display: flex; align-items: center; gap: 10px; color: #111; }
-    .nav-logo img { width: 28px; height: 28px; }
-    .nav-logo span { font-size: 15px; font-weight: 500; }
-    .hamburger { display: none; background: none; border: none; cursor: pointer; font-size: 22px; padding: 4px 8px; }
-
-    .search-wrap { position: relative; }
-    .search-wrap input {
-      border: 1px solid #ddd; border-radius: 6px;
-      padding: 6px 12px 6px 32px;
-      font-size: 13px; outline: none; width: 180px;
-      background: #f8f8f8; color: #111;
-      transition: border-color 0.2s, width 0.2s;
-    }
-    .search-wrap input:focus { border-color: #aaa; width: 220px; background: #fff; }
-    .search-wrap svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; stroke: #aaa; fill: none; pointer-events: none; }
-    .search-results {
-      position: absolute; top: calc(100% + 8px); right: 0;
-      background: #fff; border: 1px solid #e0e0e0;
-      border-radius: 8px; width: 280px;
-      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
-      display: none; z-index: 200; overflow: hidden;
-    }
-    .search-results.show { display: block; }
-    .search-result-item { padding: 10px 14px; font-size: 13px; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
-    .search-result-item:last-child { border-bottom: none; }
-    .search-result-item:hover { background: #f8f8f8; }
-    .search-result-item .tag { font-size: 11px; color: #aaa; margin-left: 6px; }
-    .search-empty { padding: 12px 14px; font-size: 13px; color: #aaa; }
 
     .layout { display: flex; min-height: calc(100vh - 60px); }
 
+    /* Sidebar — matches other pages exactly */
     .sidebar {
-      width: 220px; min-width: 220px;
+      width: 220px;
+      min-width: 220px;
       border-right: 1px solid #e0e0e0;
-      padding: 2rem 1.5rem;
-      display: flex; flex-direction: column; gap: 0.25rem;
-      position: sticky; top: 60px;
+      padding: 1.5rem 1.5rem 1rem;
+      display: flex;
+      flex-direction: column;
+      position: sticky;
+      top: 60px;
       height: calc(100vh - 60px);
       background: #fff;
     }
-    .sidebar a { font-size: 14px; color: #555; padding: 0.4rem 0; display: block; }
+    .sidebar a {
+      font-size: 14px;
+      color: #555;
+      padding: 0.4rem 0;
+      display: block;
+    }
     .sidebar a:hover { color: #111; }
+    .sidebar a.active { color: #111; font-weight: 500; }
 
-    .page-body { flex: 1; }
+    .page-body { flex: 1; overflow-x: hidden; }
 
+    /* Hero */
     .main {
       height: calc(100vh - 60px);
-      display: flex; align-items: center;
-      padding: 0 5rem; gap: 4rem;
+      display: flex;
+      align-items: center;
+      padding: 0 5rem;
+      gap: 4rem;
+      position: relative;
     }
     .left { flex: 1; }
-    .left h1 { font-size: 2.6rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 1.5rem; }
-    .left h1 .proc { font-family: "IBM Plex Sans", sans-serif; color: #0064ff; font-weight: 700; }
-    .left p { font-size: 1rem; color: #555; margin-bottom: 0; }
+    .left h1 {
+      font-size: 2.6rem;
+      font-weight: 600;
+      letter-spacing: -0.02em;
+      line-height: 1.2;
+      margin-bottom: 1.5rem;
+    }
+    .left h1 .proc {
+      font-family: "ProcessingSans", sans-serif;
+      color: #003f6b;
+      font-weight: 400;
+    }
+    .left p { font-size: 1rem; color: #555; }
     .left p a { color: #111; border-bottom: 1px solid #111; font-weight: 500; }
     .right { flex: 1; display: flex; justify-content: flex-end; align-items: center; }
     .right img { width: 340px; height: 340px; object-fit: contain; }
 
-    .scroll-hint { text-align: center; padding: 1rem 0; color: #ccc; font-size: 22px; }
+    /* Arrow — positioned inside .main so it's always visible above the fold */
+    .scroll-hint {
+      position: absolute;
+      bottom: 1.5rem;
+      left: 50%;
+      transform: translateX(-50%);
+      color: #bbb;
+      font-size: 22px;
+      animation: bounce 1.8s infinite;
+    }
+    @keyframes bounce {
+      0%, 100% { transform: translateX(-50%) translateY(0); }
+      50% { transform: translateX(-50%) translateY(6px); }
+    }
 
-    .examples-section { max-width: 960px; margin: 0 auto; padding: 5rem 3rem; border-top: 1px solid #e0e0e0; }
+    /* Examples section */
+    .examples-section {
+      max-width: 960px;
+      margin: 0 auto;
+      padding: 5rem 3rem;
+      border-top: 1px solid #e0e0e0;
+    }
     .examples-section h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 2.5rem; }
-    .examples-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
+    .examples-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 1px;
+      border: 1px solid #e0e0e0;
+      border-radius: 8px;
+      overflow: hidden;
+    }
     .example-card { background: #fff; overflow: hidden; }
     .example-canvas { width: 100%; aspect-ratio: 1; background: #000; display: block; }
     .example-info { padding: 1rem 1.25rem; border-top: 1px solid #e0e0e0; }
@@ -92,17 +118,16 @@
     footer { border-top: 1px solid #e0e0e0; padding: 2rem; text-align: center; font-size: 13px; color: #888; }
 
     @media (max-width: 768px) {
-      .hamburger { display: block; }
       .sidebar {
         position: fixed; top: 60px; left: -240px;
         width: 240px; height: calc(100vh - 60px);
         z-index: 200; transition: left 0.25s ease;
         box-shadow: 2px 0 12px rgba(0,0,0,0.08);
       }
       .sidebar.open { left: 0; }
-      .main { flex-direction: column; padding: 3rem 2rem; height: auto; }
-      .right img { width: 200px; height: 200px; }
-      .search-wrap { display: none; }
+      .main { flex-direction: column; padding: 3rem 2rem; height: auto; gap: 2rem; }
+      .right img { width: 180px; height: 180px; }
+      .scroll-hint { position: static; transform: none; display: block; text-align: center; padding: 1rem 0; animation: none; }
     }
   </style>
 </head>
@@ -111,28 +136,21 @@
 <nav id="site-nav"></nav>
 
 <div class="layout">
-  <div class="sidebar" id="sidebar">
-    <a href="/libraries">Libraries</a>
-    <a href="/reference">Reference</a>
-    <a href="/examples">Examples</a>
-    <a href="/about">About</a>
-  </div>
+  <div class="sidebar" id="sidebar"></div>
 
   <div class="page-body">
     <div class="main">
       <div class="left">
         <h1>C++ Mode for<br><span class="proc">Processing</span></h1>
-        <p>Explore the <a href="/reference">C++ Mode reference</a> for the full API.</p>
+        <p>Explore the <a href="/reference">reference</a> for the full API.</p>
       </div>
       <div class="right">
-        <img src="assets/cpp-logo.png" alt="C++ Mode">
+        <img src="assets/cpp-logo.png" alt="Processing for C++">
       </div>
+      <div class="scroll-hint">↓</div>
     </div>
 
-    <div class="scroll-hint">↓</div>
-
     <div class="examples-section">
-      <p style="font-size:0.95rem;color:#888;margin-bottom:0.5rem;">Explore the <a href="/reference" style="color:#111;border-bottom:1px solid #ddd;">C++ Mode reference</a> for the full API.</p>
       <h2>Examples</h2>
       <div class="examples-grid">
         <div class="example-card">
@@ -149,64 +167,15 @@ <h2>Examples</h2>
         </div>
       </div>
       <div class="examples-footer">
-        <a href="/examples">View all examples</a>
+        <a href="/examples">View all examples →</a>
       </div>
     </div>
   </div>
 </div>
 
-<footer><p>C++ Mode for Processing</p></footer>
+<footer><p>Processing for C++</p></footer>
 
 <script>
-const data = [
-  { title: "Libraries", url: "/libraries", tag: "page" },
-  { title: "Reference", url: "/reference", tag: "page" },
-  { title: "Examples", url: "/examples", tag: "page" },
-  { title: "About", url: "/about", tag: "page" },
-  { title: "setup()", url: "/reference", tag: "reference" },
-  { title: "draw()", url: "/reference", tag: "reference" },
-  { title: "size()", url: "/reference", tag: "reference" },
-  { title: "background()", url: "/reference", tag: "reference" },
-  { title: "ellipse()", url: "/reference", tag: "reference" },
-  { title: "rect()", url: "/reference", tag: "reference" },
-  { title: "fill()", url: "/reference", tag: "reference" },
-  { title: "stroke()", url: "/reference", tag: "reference" },
-  { title: "mouseX", url: "/reference", tag: "reference" },
-  { title: "mouseY", url: "/reference", tag: "reference" },
-  { title: "std::vector", url: "/libraries", tag: "library" },
-  { title: "std::map", url: "/libraries", tag: "library" },
-  { title: "std::string", url: "/libraries", tag: "library" },
-  { title: "std::thread", url: "/libraries", tag: "library" },
-];
-
-const input = document.getElementById("search-input");
-const results = document.getElementById("search-results");
-
-input.addEventListener("input", function() {
-  const q = this.value.trim().toLowerCase();
-  results.innerHTML = "";
-  if (!q) { results.classList.remove("show"); return; }
-  const matches = data.filter(d =>
-    d.title.toLowerCase().includes(q)
-  ).slice(0, 8);
-  if (matches.length === 0) {
-    results.innerHTML = '<div class="search-empty">No results</div>';
-  } else {
-    matches.forEach(m => {
-      const div = document.createElement("div");
-      div.className = "search-result-item";
-      div.innerHTML = m.title + '<span class="tag">' + m.tag + '</span>';
-      div.onclick = () => { window.location = m.url; };
-      results.appendChild(div);
-    });
-  }
-  results.classList.add("show");
-});
-
-document.addEventListener("click", function(e) {
-  if (!e.target.closest(".search-wrap")) results.classList.remove("show");
-});
-
 new p5(function(p) {
   let x, y, vx, vy;
   p.setup = function() { p.createCanvas(300,300,p.document.getElementById('c1')); x=150;y=150;vx=2.5;vy=1.8;p.noStroke(); };