Fix documentation formatting, code clarity, and layout issues

src/components/ReferenceDirectoryWithFilter/index.tsx

@@ -206,34 +206,32 @@ export const ReferenceDirectoryWithFilter = ({
 
   return (
     <div>
-      <div class="h-0 overflow-visible">
-        <div class="content-grid-simple absolute -left-0 -right-0 -top-[60px] h-[75px] border-b border-sidebar-type-color bg-accent-color px-5 pb-lg md:px-lg ">
-          <div class="text-body col-span-2 flex w-full max-w-[750px] border-b border-accent-type-color text-accent-type-color">
-            <input
-              type="text"
-              id="search"
-              ref={inputRef}
-              class="w-full bg-transparent py-xs text-accent-type-color placeholder:text-accent-type-color focus:outline-0"
-              placeholder={uiTranslations["Filter by keyword"]}
-              onKeyUp={(e: JSX.TargetedKeyboardEvent<HTMLInputElement>) => {
-                const target = e.target as HTMLInputElement;
-                setSearchKeyword(target?.value);
-              }}
-            />
-            {searchKeyword.length > 0 && (
-              <button
-                type="reset"
-                class=""
-                onClick={clearInput}
-                aria-label="Clear search input"
-              >
-                <Icon kind="close" className="h-4 w-4" />
-              </button>
-            )}
-          </div>
+      <div class="content-grid-simple h-[75px] border-b border-sidebar-type-color bg-accent-color px-5 pb-lg md:px-lg">
+        <div class="text-body col-span-2 flex w-full max-w-[750px] border-b border-accent-type-color text-accent-type-color">
+          <input
+            type="text"
+            id="search"
+            ref={inputRef}
+            class="w-full bg-transparent py-xs text-accent-type-color placeholder:text-accent-type-color focus:outline-0"
+            placeholder={uiTranslations["Filter by keyword"]}
+            onKeyUp={(e: JSX.TargetedKeyboardEvent<HTMLInputElement>) => {
+              const target = e.target as HTMLInputElement;
+              setSearchKeyword(target?.value);
+            }}
+          />
+          {searchKeyword.length > 0 && (
+            <button
+              type="reset"
+              class=""
+              onClick={clearInput}
+              aria-label="Clear search input"
+            >
+              <Icon kind="close" className="h-4 w-4" />
+            </button>
+          )}
         </div>
       </div>
-      <div class="-top-[75px] mx-5 min-h-[50vh] md:mx-lg">
+      <div class="mx-5 min-h-[50vh] md:mx-lg">
         {renderCategoryData()}
       </div>
     </div>

src/content/contributor-docs/en/contributor_guidelines.mdx

@@ -65,7 +65,7 @@ The majority of the activity on p5.js' GitHub repositories (repo for short) happ
 
 While an issue can be opened for a wide variety of reasons, we usually only use issues to discuss the development of p5.js source code. Topics such as debugging your own code, inviting collaborators to your project, or other unrelated topics should be discussed
 
-either on the [forum](https://discourse.processing.com) or on other platforms such as [Discord](https://discord.gg/SHQ8dH25r9/).
+either on the [forum](https://discourse.processing.org) or on other platforms such as [Discord](https://discord.gg/SHQ8dH25r9).
 
 We have created easy-to-use issue templates to aid you in deciding whether a topic should be a GitHub issue or posted elsewhere!
 

src/content/tutorials/en/conditionals-and-interactivity.mdx

@@ -483,8 +483,8 @@ Add a grassy landscape to your sketch so that you can’t see the sun below the
 
     ```js
     //grass
-    fill("green"); 
-    rect(0, horizon, 400, 400);
+    fill("green"); 
+    rect(0, horizon, 400, 200);
     ```
 
 Your code should look like this:
@@ -520,11 +520,9 @@ function draw() {
   stroke('green');
   line(0,horizon,400,horizon);
 
-  //grass
-
-  fill("green");
-
-  rect(0, horizon, 400, 400);
+  //grass
+  fill("green");
+  rect(0, horizon, 400, 200);
 
 }
 ```

src/content/tutorials/en/get-started.mdx

@@ -175,7 +175,9 @@ Visit the p5.js reference pages for [background()](/reference/p5/background) and
 
 #### Tip
 
-Use [Google’s Color Picker](https://g.co/kgs/aCdbzD) to search for the code that can set the background to any color. Find the color you would like to use, copy the numbers in the box labeled RGB, and paste them into [`background()`](/reference/p5/background).
+Use any online color picker to search for the code that can set the background to any color.
+
+Find the color you would like to use, copy the numbers in the box labeled RGB, and paste them into [`background()`](/reference/p5/background).
 
 
 ## Step 5: Draw shapes on the canvas
@@ -278,7 +280,9 @@ The default value for [`fill()`](/reference/p5/fill) is white. This means that i
 
 - See [this sketch](https://editor.p5js.org/Msqcoding/sketches/k0zCPrquf) for an example.
 
-Visit [the color reference](/reference/p5/color) page to learn more about [`fill()`](/reference/p5/fill),` `[`stroke()`](/reference/p5/stroke), and [`strokeWeight()`](/reference/p5/strokeWeight). Use the p5.js Web Editor’s color tool or [Google’s Color Picker](https://g.co/kgs/aCdbzD) to search for color codes to use in [`fill()`](/reference/p5/fill), [`stroke()`](/reference/p5/stroke), and [`background()`](/reference/p5/background).
+Visit [the color reference](/reference/p5/color) page to learn more about [`fill()`](/reference/p5/fill), [`stroke()`](/reference/p5/stroke), and [`strokeWeight()`](/reference/p5/strokeWeight).
+
+Use the p5.js Web Editor's color tool or any online color picker to search for color codes to use in [`fill()`](/reference/p5/fill), [`stroke()`](/reference/p5/stroke), and [`background()`](/reference/p5/background).
 
 
 ## Step 7: Draw and color more shapes on your canvas

src/content/tutorials/en/repeating-with-loops.mdx

@@ -199,7 +199,7 @@ Above `setup()`:
 In `draw()`:
 
 - After the code that draws the finish line, declare a new local variable `x` to position all the body segments: `let x = circX;`
-- Add a *for loop* using: `for (let i = 0; i < length; i += 1) { }`
+- Add a *for loop* using: `for (let i = 0; i < segments; i += 1) { }`
   - A *for loop* will repeat the code we write inside the curly brackets multiple times. 
   - Move the lines of code that draw the `circle()` into the curly brackets of the *for loop*.
 - After the for loop, add: `circX += spacing` 
@@ -933,11 +933,11 @@ Your function could look like this:
 
 ```js
 function moveCaterpillars() {
-  for (let i = 0; i < numCaterpillars; i += 1) {
-    //Give each caterpillar a
-    //random speed.
-    move = random(5, 30);
-    caterpillarEnds[i] += move;
+  for (let i = 0; i < numCaterpillars; i += 1) {
+    //Give each caterpillar a
+    //random speed.
+    let move = random(5, 30);
+    caterpillarEnds[i] += move;
   }
 }
 ```
@@ -998,13 +998,13 @@ function draw() {
 }
 
 function moveCaterpillars() {
-  for (let i = 0; i < numCaterpillars; i += 1) {
-    //Give each caterpillar a
-    //random speed.
-    move = random(5, 30);
+  for (let i = 0; i < numCaterpillars; i += 1) {
+    //Give each caterpillar a
+    //random speed.
+    let move = random(5, 30);
 
-    // Update caterpillars' x-coordinates
-    caterpillarEnds[i] += move;
+    // Update caterpillars' x-coordinates
+    caterpillarEnds[i] += move;
   }
 }
 
@@ -1359,8 +1359,8 @@ function drawCaterpillars() {
     // Update each caterpillar x-coordinate   
     let y = (i + 0.5) * padding;
 
-    // Update length of caterpillar.   
-    crawl = random(3, 6);
+    // Update length of caterpillar.   
+    let crawl = random(3, 6);
 
     // Draw caterpillars.
     drawCaterpillar(caterpillarEnds[i], y, crawl);