*: Fix style (#1)

Signed-off-by: Ce Gao <ce.gao@outlook.com>

Author: gaocegege

css/style.css

@@ -584,8 +584,8 @@ pre {
 tr.name-row { height: 60px; }
 td p { margin-top: 0; }
 
-.example { clear: both; margin-bottom: 15px; width:600px; }
-.example pre.margin { margin-left: 115px; overflow:scroll; }
+.example img { float: left; margin-right: 15px; margin-bottom: 15px; }
+.example { clear: both; margin-bottom: 15px; }
 .example pre.margin { margin-left: 115px; }
 hr.noshade { height: 0px; color: #f1f1f1; border-color: #e0e0e0; margin: 30px 0 30px 0; clear: both; }
 

reference/ambientLight.html

@@ -65,7 +65,8 @@
 draw <- function() {
     background(0)
     noStroke()
-    # The spheres are white by default so the ambient light changes their color
+    # The spheres are white by default so the ambient light changes
+    # their color
     ambientLight(51, 102, 126)
     translate(20, 50, 0)
     sphere(30)

reference/applyMatrix.html

@@ -54,7 +54,8 @@
     ct = cos(PI/9)
     st = sin(PI/9)
     # Matrix for rotation around the Y axis
-    applyMatrix(ct, 0, st, 0, 0, 1, 0, 0, -st, 0, ct, 0, 0, 0, 0, 1)
+    applyMatrix(ct, 0, st, 0, 0, 1, 0, 0, -st, 0, ct, 0, 0, 0, 0, 
+        1)
     stroke(255)
     box(50)
 }

reference/beginContour.html

@@ -40,7 +40,8 @@
 
             <tr class=""><th scope="row">Examples</th><td>
                     <div class="example">                 <img src="img/beginContour1.png"/>
-                <pre class='margin'># beginContour 1 https://processing.org/reference/beginContour_.html
+                <pre class='margin'># beginContour 1
+# https://processing.org/reference/beginContour_.html
 
 size(100, 100)
 translate(50, 50)

reference/bezierTangent.html

@@ -40,7 +40,8 @@
 
             <tr class=""><th scope="row">Examples</th><td>
                     <div class="example">                 <img src="img/bezierTangent2.png"/>
-                <pre class='margin'># bezierTangent 2 https://processing.org/reference/bezierTangent_.html
+                <pre class='margin'># bezierTangent 2
+# https://processing.org/reference/bezierTangent_.html
 
 noFill()
 bezier(85, 20, 10, 10, 90, 90, 15, 80)
@@ -59,7 +60,8 @@
 </pre>
             </div>
                                 <div class="example">                 <img src="img/bezierTangent1.png"/>
-                <pre class='margin'># bezierTangent 1 https://processing.org/reference/bezierTangent_.html
+                <pre class='margin'># bezierTangent 1
+# https://processing.org/reference/bezierTangent_.html
 
 noFill()
 bezier(85, 20, 10, 10, 90, 90, 15, 80)
@@ -78,8 +80,8 @@
     a = a + PI
     stroke(255, 102, 0)
     line(x, y, cos(a) * 30 + x, sin(a) * 30 + y)
-    # The following line of code makes a line inverse of the above line line(x, y,
-    # cos(a)*-30 + x, sin(a)*-30 + y)
+    # The following line of code makes a line inverse of the above
+    # line line(x, y, cos(a)*-30 + x, sin(a)*-30 + y)
     stroke(0)
     ellipse(x, y, 5, 5)
 }

reference/bezierVertex.html

@@ -40,7 +40,8 @@
 
             <tr class=""><th scope="row">Examples</th><td>
                     <div class="example">                 <img src="img/bezierVertex1.png"/>
-                <pre class='margin'># bezierVertex 1 https://processing.org/reference/bezierVertex_.html
+                <pre class='margin'># bezierVertex 1
+# https://processing.org/reference/bezierVertex_.html
 
 noFill()
 beginShape()
@@ -50,7 +51,8 @@
 </pre>
             </div>
                                 <div class="example">                 <img src="img/bezierVertex2.png"/>
-                <pre class='margin'># bezierVertex 2 https://processing.org/reference/bezierVertex_.html
+                <pre class='margin'># bezierVertex 2
+# https://processing.org/reference/bezierVertex_.html
 
 beginShape()
 vertex(30, 20)

reference/color.html

@@ -61,8 +61,8 @@
                                 <div class="example">                 <img src="img/color3.png"/>
                 <pre class='margin'>noStroke()  # Don&#39;t draw a stroke around shapes
 
-# If no colorMode is specified, then the default of RGB with scale of 0-255 is
-# used.
+# If no colorMode is specified, then the default of RGB with scale
+# of 0-255 is used.
 c = color(50, 55, 100)  # Create a color for &#39;c&#39;
 fill(c)  # Use color variable &#39;c&#39; as fill color
 rect(0, 10, 45, 80)  # Draw left rect

reference/colorMode.html

@@ -51,9 +51,10 @@
 </pre>
             </div>
                                 <div class="example">                 <img src="img/colorMode3.png"/>
-                <pre class='margin'># If the color is defined here, it won&#39;t be affected by the colorMode() in
-# setup().  Instead, just declare the variable here and assign the value after
-# the colorMode() in setup() color bg = color(180, 50, 50); # No
+                <pre class='margin'># If the color is defined here, it won&#39;t be affected by the
+# colorMode() in setup().  Instead, just declare the variable here
+# and assign the value after the colorMode() in setup() color bg =
+# color(180, 50, 50); # No
 
 bg &lt;- NULL
 

reference/createImage.html

@@ -47,7 +47,7 @@
         img$set(i, j, color(0, 9, 102))
     }
 }
-img.updatePixels()
+img$updatePixels()
 image(img, 17, 17)
 </pre>
             </div>

reference/createShape.html

@@ -44,7 +44,8 @@
 }
 
 setup <- function() {
-    # Creating the PShape as a square. The numeric arguments are similar to rect().
+    # Creating the PShape as a square. The numeric arguments are
+    # similar to rect().
     s = createShape()
     s$beginShape(TRIANGLE_STRIP)
     s$vertex(30, 75)
@@ -93,7 +94,8 @@
 }
 
 setup <- function() {
-    # Creating the PShape as a square. The numeric arguments are similar to rect().
+    # Creating the PShape as a square. The numeric arguments are
+    # similar to rect().
     s = createShape()
     s$beginShape()
     s$fill(0, 0, 255)
@@ -115,7 +117,8 @@
 }
 
 setup <- function() {
-    # Creating the PShape as a square. The numeric arguments are similar to rect().
+    # Creating the PShape as a square. The numeric arguments are
+    # similar to rect().
     square = createShape(RECT, 0, 0, 50, 50)
     square$setFill(color(0, 0, 255))
     square$setStroke(FALSE)

reference/cursor.html

@@ -39,8 +39,8 @@
     </tr>
 
             <tr class=""><th scope="row">Examples</th><td>
-                    <div class="example">                <pre># Move the mouse left and right across the image to see the cursor change from a
-# cross to a hand
+                    <div class="example">                <pre># Move the mouse left and right across the image to see the cursor
+# change from a cross to a hand
 
 draw &lt;- function() {
     if (mouseX &lt; 50) {

reference/curveTangent.html

@@ -40,7 +40,8 @@
 
             <tr class=""><th scope="row">Examples</th><td>
                     <div class="example">                 <img src="img/curveTangent1.png"/>
-                <pre class='margin'># curveTangent 1 https://processing.org/reference/curveTangent_.html
+                <pre class='margin'># curveTangent 1
+# https://processing.org/reference/curveTangent_.html
 
 noFill()
 curve(5, 26, 73, 24, 73, 61, 15, 65)

reference/dist.html

@@ -39,8 +39,8 @@
     </tr>
 
             <tr class=""><th scope="row">Examples</th><td>
-                    <div class="example">                <pre># Sets the background gray value based on the distance of the mouse from the
-# center of the screen
+                    <div class="example">                <pre># Sets the background gray value based on the distance of the
+# mouse from the center of the screen
 draw &lt;- function() {
     noStroke()
     d = dist(width/2, height/2, mouseX, mouseY)

reference/keyPressedVar.html

@@ -41,8 +41,9 @@
             <tr class=""><th scope="row">Examples</th><td>
                     <div class="example">                <pre># Click on the image to give it focus, and then press any key.
 
-# Note: The rectangle in this example may flicker as the operating system may
-# register a long key press as a repetition of key presses.
+# Note: The rectangle in this example may flicker as the operating
+# system may register a long key press as a repetition of key
+# presses.
 
 draw &lt;- function() {
     if (keyPressedVar == TRUE) {

reference/keyTyped.html

@@ -39,7 +39,8 @@
     </tr>
 
             <tr class=""><th scope="row">Examples</th><td>
-                    <div class="example">                <pre># Run this program to learn how each of these functions relate to the others.
+                    <div class="example">                <pre># Run this program to learn how each of these functions relate to
+# the others.
 
 draw &lt;- function() {
 }  # Empty draw() needed to keep the program running

reference/mouseButtonVar.html

@@ -39,8 +39,8 @@
     </tr>
 
             <tr class=""><th scope="row">Examples</th><td>
-                    <div class="example">                <pre># Click within the image and press the left and right mouse buttons to change the
-# value of the rectangle
+                    <div class="example">                <pre># Click within the image and press the left and right mouse
+# buttons to change the value of the rectangle
 draw &lt;- function() {
     rect(25, 25, 50, 50)
 }
@@ -56,8 +56,8 @@
 }
 </pre>
             </div>
-                                <div class="example">                <pre># Click within the image and press the left and right mouse buttons to change the
-# value of the rectangle
+                                <div class="example">                <pre># Click within the image and press the left and right mouse
+# buttons to change the value of the rectangle
 draw &lt;- function() {
     if (mousePressedVar &amp;&amp; (mouseButtonVar == LEFT)) {
         fill(0)

reference/mouseClicked.html

@@ -39,8 +39,8 @@
     </tr>
 
             <tr class=""><th scope="row">Examples</th><td>
-                    <div class="example">                <pre># Click within the image to change the value of the rectangle after after the
-# mouse has been clicked
+                    <div class="example">                <pre># Click within the image to change the value of the rectangle
+# after after the mouse has been clicked
 
 value &lt;- 0
 

reference/mouseDragged.html

@@ -39,8 +39,8 @@
     </tr>
 
             <tr class=""><th scope="row">Examples</th><td>
-                    <div class="example">                <pre># Drag (click and hold) your mouse across the image to change the value of the
-# rectangle
+                    <div class="example">                <pre># Drag (click and hold) your mouse across the image to change the
+# value of the rectangle
 
 value &lt;- 0
 

reference/noiseDetail.html

@@ -46,12 +46,13 @@
     for (y in 0:height) {
         for (x in 0:width/2) {
             noiseDetail(3, 0.5)
-            noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale)
+            noiseVal = noise((mouseX + x) * noiseScale, (mouseY + 
+                y) * noiseScale)
             stroke(noiseVal * 255)
             point(x, y)
             noiseDetail(8, 0.65)
-            noiseVal = noise((mouseX + x + width/2) * noiseScale, (mouseY + y) * 
-                noiseScale)
+            noiseVal = noise((mouseX + x + width/2) * noiseScale, 
+                (mouseY + y) * noiseScale)
             stroke(noiseVal * 255)
             point(x + width/2, y)
         }

reference/pmouseX.html

@@ -39,8 +39,8 @@
     </tr>
 
             <tr class=""><th scope="row">Examples</th><td>
-                    <div class="example">                <pre># Move the mouse quickly to see the difference between the current and previous
-# position
+                    <div class="example">                <pre># Move the mouse quickly to see the difference between the current
+# and previous position
 
 draw &lt;- function() {
     background(204)

reference/pmouseY.html

@@ -39,8 +39,8 @@
     </tr>
 
             <tr class=""><th scope="row">Examples</th><td>
-                    <div class="example">                <pre># Move the mouse quickly to see the difference between the current and previous
-# position
+                    <div class="example">                <pre># Move the mouse quickly to see the difference between the current
+# and previous position
 draw &lt;- function() {
     background(204)
     line(20, mouseY, 80, pmouseY)

reference/quadraticVertex.html

@@ -40,7 +40,8 @@
 
             <tr class=""><th scope="row">Examples</th><td>
                     <div class="example">                 <img src="img/quadraticVertex2.png"/>
-                <pre class='margin'># quadraticVertex 2 https://processing.org/reference/quadraticVertex_.html
+                <pre class='margin'># quadraticVertex 2
+# https://processing.org/reference/quadraticVertex_.html
 
 noFill()
 strokeWeight(4)
@@ -53,7 +54,8 @@
 </pre>
             </div>
                                 <div class="example">                 <img src="img/quadraticVertex1.png"/>
-                <pre class='margin'># quadraticVertex 1 https://processing.org/reference/quadraticVertex_.html
+                <pre class='margin'># quadraticVertex 1
+# https://processing.org/reference/quadraticVertex_.html
 
 noFill()
 strokeWeight(4)

reference/screenX.html

@@ -65,7 +65,8 @@
     stroke(102)
     line(x, 0, 0, x, height, 0)
 
-    # Draw black line at z = 0 to match the x value element drawn at z = -100
+    # Draw black line at z = 0 to match the x value element drawn at z
+    # = -100
     stroke(0)
     theX = screenX(x, y, z)
     line(theX, 0, 0, theX, height, 0)

reference/screenY.html

@@ -65,7 +65,8 @@
     stroke(102)
     line(0, y, 0, width, y, 0)
 
-    # Draw black line at z = 0 to match the y value element drawn at z = -100
+    # Draw black line at z = 0 to match the y value element drawn at z
+    # = -100
     stroke(0)
     theY = screenY(x, y, z)
     line(0, theY, 0, width, theY, 0)

reference/shape.html

@@ -41,7 +41,8 @@
             <tr class=""><th scope="row">Examples</th><td>
                     <div class="example">                 <img src="img/shape0.png"/>
                 <pre class='margin'>setup &lt;- function() {
-    s = loadShape(&#34;https://raw.githubusercontent.com/processing/processing-docs/master/content/examples/Basics/Shape/LoadDisplaySVG/data/bot1.svg&#34;)
+    s = loadShape(paste(&#34;https://raw.githubusercontent.com&#34;, &#34;/gaocegege/Processing.R/master/raw-docs&#34;, 
+        &#34;/img/examples/bot1.svg&#34;, sep = &#34;&#34;))
 }
 
 draw &lt;- function() {

reference/shapeMode.html

@@ -42,7 +42,8 @@
                     <div class="example">                 <img src="img/shapeMode0.png"/>
                 <pre class='margin'>setup &lt;- function() {
     size(100, 100)
-    bot = loadShape(&#34;https://raw.githubusercontent.com/processing/processing-docs/master/content/examples/Basics/Shape/LoadDisplaySVG/data/bot1.svg&#34;)
+    bot = loadShape(paste(&#34;https://raw.githubusercontent.com&#34;, &#34;/gaocegege/Processing.R/master/raw-docs&#34;, 
+        &#34;/img/examples/bot1.svg&#34;, sep = &#34;&#34;))
 }
 
 draw &lt;- function() {

reference/translate.html

@@ -53,7 +53,8 @@
 }
 
 draw <- function() {
-    # Translate 30 across, 20 down, and 50 back, or 'away' from the screen.
+    # Translate 30 across, 20 down, and 50 back, or 'away' from the
+    # screen.
     translate(30, 20, -50)
     rect(0, 0, 55, 55)
 }