Update guide and demo styles

kobihcmomanyi · Jun 22, 2018 · 0b13981 · 0b13981
1 parent 7449ef7
commit 0b13981
Show file tree

Hide file tree

Showing 33 changed files with 77 additions and 81 deletions.
diff --git a/demo/css/style.css b/demo/css/style.css
@@ -24,7 +24,6 @@ html * {
 #header {
   font-size: 1.5em;
   position: relative;
-  border-bottom: 3px solid #fff;
   line-height: 70px;
 }
 
@@ -43,7 +42,7 @@ html * {
   padding-right: 10px;
 }
 #header a:hover {
-  color: #f03;
+  color: #42e;
   border-bottom: none;
 }
 
@@ -62,7 +61,7 @@ html * {
   padding-right: 0px;
 }
 #pts a > span {
-  color: #f03;
+  color: #42e;
   display: inline-block;
   padding: 0 2px; 
 }
@@ -161,11 +160,11 @@ html * {
   display: block;
   border: none;
   text-decoration: none;
-  color: #f03;
+  color: #42e;
 }
 
 #hint a:hover {
-  color: #c03;
+  color: #75f;
 }
 
 h1 {
@@ -183,14 +182,14 @@ p {
 
 
 a {
-  color: #f03;
+  color: #42e;
   font-weight: 500;
   text-decoration: none;
   display: inline-block;
 }
 
 a:hover {
-  border-bottom: 1px solid #f03;
+  text-decoration: underline;
 }
 
 .demo, .section {
@@ -211,7 +210,7 @@ a:hover {
 .demo > strong {
   font-weight: 400;
 }
-.demo:hover, .demo:hover > span { color: #f03;}
+.demo:hover, .demo:hover > span { color: #42e;}
 
 .section {
   font-weight: 600;

diff --git a/demo/index.html b/demo/index.html
@@ -86,7 +86,7 @@
 <div id="header">
   <div id="pts"><a href="../">Pts<span>.</span></a>demos</div>
   <div id="topmenu">
-    <a href="../guide/Introduction-0000.html"/>guide</a>
+    <a href="../guide/Get-started-0100.html"/>guide</a>
     <a href="../study/index.html"/>studies</a>
     <a href="../docs/"/>docs</a>
     <a href="https://github.com/williamngan/pts"/>github</a>

diff --git a/demo/quickstart.html b/demo/quickstart.html
@@ -0,0 +1,17 @@
+<html>
+
+  <head>
+    <script src="https://unpkg.com/pts/dist/pts.min.js"></script>
+    <style>#demo { width: 600px; height: 600px; }</style>
+  </head>
+
+  <body>
+
+    <div id="demo"></div>
+
+    <script type="text/javascript">
+      Pts.quickStart("demo")( t => form.point( space.pointer ) )
+    </script>
+
+  </body>
+</html>
diff --git a/guide/Get-started-0100.html b/guide/Get-started-0100.html
@@ -137,10 +137,9 @@ <h3>Visibles from invisibles</h3>
 <p>Enjoy and have fun!</p>
 </div>
 
-<ol id="menu"><a id="close" href="#">&times;</a><li><a href="Introduction-0000.html">Introduction</a></li><li><a href="Get-started-0100.html">Get started</a></li><li><a href="Pt-0200.html">Pt</a></li><li><a href="Group-0300.html">Group</a></li><li><a href="Op-0400.html">Op</a></li><li><a href="Space-0500.html">Space</a></li><li><a href="Typography-0600.html">Typography</a></li><li><a href="Technical-notes-9000.html">Technical notes</a></li></ol>
+<ol id="menu"><a id="close" href="#">&times;</a><li><a href="Get-started-0100.html">Get started</a></li><li><a href="Pt-0200.html">Pt</a></li><li><a href="Group-0300.html">Group</a></li><li><a href="Op-0400.html">Op</a></li><li><a href="Space-0500.html">Space</a></li><li><a href="Typography-0600.html">Typography</a></li><li><a href="Technical-notes-9000.html">Technical notes</a></li></ol>
 
-<div id="footer"><strong>pts</strong> is an open source project started by <a href="https://twitter.com/williamngan">@williamngan</a>. 
-  See&nbsp;<a href="https://github.com/williamngan/pts">its&nbsp;repository</a>&nbsp;for&nbsp;Apache&nbsp;license and copyright info.</div>
+<div id="footer">Copyright &copy; 2017-current by <a href="https://twitter.com/williamngan">William Ngan</a> and contributors. Pts is an <a href="https://github.com/williamngan/pts">open source project</a> under Apache License 2.0.</div>
 
 <script type="text/javascript" src="../dist/pts.js"></script>
 <script type="text/javascript" src="./js/guide.js"></script>

diff --git a/guide/Group-0300.html b/guide/Group-0300.html
@@ -110,10 +110,9 @@ <h3>Cheat sheet</h3>
 <p>Check out the <a href="../docs/classes/_pt_.group.html">full documentation</a> too.</p>
 </div>
 
-<ol id="menu"><a id="close" href="#">&times;</a><li><a href="Introduction-0000.html">Introduction</a></li><li><a href="Get-started-0100.html">Get started</a></li><li><a href="Pt-0200.html">Pt</a></li><li><a href="Group-0300.html">Group</a></li><li><a href="Op-0400.html">Op</a></li><li><a href="Space-0500.html">Space</a></li><li><a href="Typography-0600.html">Typography</a></li><li><a href="Technical-notes-9000.html">Technical notes</a></li></ol>
+<ol id="menu"><a id="close" href="#">&times;</a><li><a href="Get-started-0100.html">Get started</a></li><li><a href="Pt-0200.html">Pt</a></li><li><a href="Group-0300.html">Group</a></li><li><a href="Op-0400.html">Op</a></li><li><a href="Space-0500.html">Space</a></li><li><a href="Typography-0600.html">Typography</a></li><li><a href="Technical-notes-9000.html">Technical notes</a></li></ol>
 
-<div id="footer"><strong>pts</strong> is an open source project started by <a href="https://twitter.com/williamngan">@williamngan</a>. 
-  See&nbsp;<a href="https://github.com/williamngan/pts">its&nbsp;repository</a>&nbsp;for&nbsp;Apache&nbsp;license and copyright info.</div>
+<div id="footer">Copyright &copy; 2017-current by <a href="https://twitter.com/williamngan">William Ngan</a> and contributors. Pts is an <a href="https://github.com/williamngan/pts">open source project</a> under Apache License 2.0.</div>
 
 <script type="text/javascript" src="../dist/pts.js"></script>
 <script type="text/javascript" src="./js/guide.js"></script>

diff --git a/guide/Op-0400.html b/guide/Op-0400.html
@@ -163,10 +163,9 @@ <h3>Cheat sheet</h3>
 <p>Check out the <a href="../docs/modules/_op_.html">full documentation</a> too.</p>
 </div>
 
-<ol id="menu"><a id="close" href="#">&times;</a><li><a href="Introduction-0000.html">Introduction</a></li><li><a href="Get-started-0100.html">Get started</a></li><li><a href="Pt-0200.html">Pt</a></li><li><a href="Group-0300.html">Group</a></li><li><a href="Op-0400.html">Op</a></li><li><a href="Space-0500.html">Space</a></li><li><a href="Typography-0600.html">Typography</a></li><li><a href="Technical-notes-9000.html">Technical notes</a></li></ol>
+<ol id="menu"><a id="close" href="#">&times;</a><li><a href="Get-started-0100.html">Get started</a></li><li><a href="Pt-0200.html">Pt</a></li><li><a href="Group-0300.html">Group</a></li><li><a href="Op-0400.html">Op</a></li><li><a href="Space-0500.html">Space</a></li><li><a href="Typography-0600.html">Typography</a></li><li><a href="Technical-notes-9000.html">Technical notes</a></li></ol>
 
-<div id="footer"><strong>pts</strong> is an open source project started by <a href="https://twitter.com/williamngan">@williamngan</a>. 
-  See&nbsp;<a href="https://github.com/williamngan/pts">its&nbsp;repository</a>&nbsp;for&nbsp;Apache&nbsp;license and copyright info.</div>
+<div id="footer">Copyright &copy; 2017-current by <a href="https://twitter.com/williamngan">William Ngan</a> and contributors. Pts is an <a href="https://github.com/williamngan/pts">open source project</a> under Apache License 2.0.</div>
 
 <script type="text/javascript" src="../dist/pts.js"></script>
 <script type="text/javascript" src="./js/guide.js"></script>

diff --git a/guide/Pt-0200.html b/guide/Pt-0200.html
@@ -145,10 +145,9 @@ <h3>Cheat sheet</h3>
 <p>Check out the <a href="../docs/classes/_pt_.pt.html">full documentation</a> too.</p>
 </div>
 
-<ol id="menu"><a id="close" href="#">&times;</a><li><a href="Introduction-0000.html">Introduction</a></li><li><a href="Get-started-0100.html">Get started</a></li><li><a href="Pt-0200.html">Pt</a></li><li><a href="Group-0300.html">Group</a></li><li><a href="Op-0400.html">Op</a></li><li><a href="Space-0500.html">Space</a></li><li><a href="Typography-0600.html">Typography</a></li><li><a href="Technical-notes-9000.html">Technical notes</a></li></ol>
+<ol id="menu"><a id="close" href="#">&times;</a><li><a href="Get-started-0100.html">Get started</a></li><li><a href="Pt-0200.html">Pt</a></li><li><a href="Group-0300.html">Group</a></li><li><a href="Op-0400.html">Op</a></li><li><a href="Space-0500.html">Space</a></li><li><a href="Typography-0600.html">Typography</a></li><li><a href="Technical-notes-9000.html">Technical notes</a></li></ol>
 
-<div id="footer"><strong>pts</strong> is an open source project started by <a href="https://twitter.com/williamngan">@williamngan</a>. 
-  See&nbsp;<a href="https://github.com/williamngan/pts">its&nbsp;repository</a>&nbsp;for&nbsp;Apache&nbsp;license and copyright info.</div>
+<div id="footer">Copyright &copy; 2017-current by <a href="https://twitter.com/williamngan">William Ngan</a> and contributors. Pts is an <a href="https://github.com/williamngan/pts">open source project</a> under Apache License 2.0.</div>
 
 <script type="text/javascript" src="../dist/pts.js"></script>
 <script type="text/javascript" src="./js/guide.js"></script>

diff --git a/guide/Space-0500.html b/guide/Space-0500.html
@@ -140,10 +140,9 @@ <h3>Cheat sheet</h3>
 </code></pre>
 </div>
 
-<ol id="menu"><a id="close" href="#">&times;</a><li><a href="Introduction-0000.html">Introduction</a></li><li><a href="Get-started-0100.html">Get started</a></li><li><a href="Pt-0200.html">Pt</a></li><li><a href="Group-0300.html">Group</a></li><li><a href="Op-0400.html">Op</a></li><li><a href="Space-0500.html">Space</a></li><li><a href="Typography-0600.html">Typography</a></li><li><a href="Technical-notes-9000.html">Technical notes</a></li></ol>
+<ol id="menu"><a id="close" href="#">&times;</a><li><a href="Get-started-0100.html">Get started</a></li><li><a href="Pt-0200.html">Pt</a></li><li><a href="Group-0300.html">Group</a></li><li><a href="Op-0400.html">Op</a></li><li><a href="Space-0500.html">Space</a></li><li><a href="Typography-0600.html">Typography</a></li><li><a href="Technical-notes-9000.html">Technical notes</a></li></ol>
 
-<div id="footer"><strong>pts</strong> is an open source project started by <a href="https://twitter.com/williamngan">@williamngan</a>. 
-  See&nbsp;<a href="https://github.com/williamngan/pts">its&nbsp;repository</a>&nbsp;for&nbsp;Apache&nbsp;license and copyright info.</div>
+<div id="footer">Copyright &copy; 2017-current by <a href="https://twitter.com/williamngan">William Ngan</a> and contributors. Pts is an <a href="https://github.com/williamngan/pts">open source project</a> under Apache License 2.0.</div>
 
 <script type="text/javascript" src="../dist/pts.js"></script>
 <script type="text/javascript" src="./js/guide.js"></script>

diff --git a/guide/Technical-notes-9000.html b/guide/Technical-notes-9000.html
@@ -47,10 +47,9 @@ <h3>Remember to file issues and feedbacks</h3>
 <p>Support this open-source project by filing bugs and pull requests on <a href="https://github.com/williamngan/pts">github</a>. If you have other feedbacks, please ping <a href="https://twitter.com/williamngan">@williamngan</a>. Show us what you have made with Pts too!</p>
 </div>
 
-<ol id="menu"><a id="close" href="#">&times;</a><li><a href="Introduction-0000.html">Introduction</a></li><li><a href="Get-started-0100.html">Get started</a></li><li><a href="Pt-0200.html">Pt</a></li><li><a href="Group-0300.html">Group</a></li><li><a href="Op-0400.html">Op</a></li><li><a href="Space-0500.html">Space</a></li><li><a href="Typography-0600.html">Typography</a></li><li><a href="Technical-notes-9000.html">Technical notes</a></li></ol>
+<ol id="menu"><a id="close" href="#">&times;</a><li><a href="Get-started-0100.html">Get started</a></li><li><a href="Pt-0200.html">Pt</a></li><li><a href="Group-0300.html">Group</a></li><li><a href="Op-0400.html">Op</a></li><li><a href="Space-0500.html">Space</a></li><li><a href="Typography-0600.html">Typography</a></li><li><a href="Technical-notes-9000.html">Technical notes</a></li></ol>
 
-<div id="footer"><strong>pts</strong> is an open source project started by <a href="https://twitter.com/williamngan">@williamngan</a>. 
-  See&nbsp;<a href="https://github.com/williamngan/pts">its&nbsp;repository</a>&nbsp;for&nbsp;Apache&nbsp;license and copyright info.</div>
+<div id="footer">Copyright &copy; 2017-current by <a href="https://twitter.com/williamngan">William Ngan</a> and contributors. Pts is an <a href="https://github.com/williamngan/pts">open source project</a> under Apache License 2.0.</div>
 
 <script type="text/javascript" src="../dist/pts.js"></script>
 <script type="text/javascript" src="./js/guide.js"></script>

diff --git a/guide/Typography-0600.html b/guide/Typography-0600.html
@@ -71,10 +71,9 @@ <h3>Cheatsheet</h3>
 </code></pre>
 </div>
 
-<ol id="menu"><a id="close" href="#">&times;</a><li><a href="Introduction-0000.html">Introduction</a></li><li><a href="Get-started-0100.html">Get started</a></li><li><a href="Pt-0200.html">Pt</a></li><li><a href="Group-0300.html">Group</a></li><li><a href="Op-0400.html">Op</a></li><li><a href="Space-0500.html">Space</a></li><li><a href="Typography-0600.html">Typography</a></li><li><a href="Technical-notes-9000.html">Technical notes</a></li></ol>
+<ol id="menu"><a id="close" href="#">&times;</a><li><a href="Get-started-0100.html">Get started</a></li><li><a href="Pt-0200.html">Pt</a></li><li><a href="Group-0300.html">Group</a></li><li><a href="Op-0400.html">Op</a></li><li><a href="Space-0500.html">Space</a></li><li><a href="Typography-0600.html">Typography</a></li><li><a href="Technical-notes-9000.html">Technical notes</a></li></ol>
 
-<div id="footer"><strong>pts</strong> is an open source project started by <a href="https://twitter.com/williamngan">@williamngan</a>. 
-  See&nbsp;<a href="https://github.com/williamngan/pts">its&nbsp;repository</a>&nbsp;for&nbsp;Apache&nbsp;license and copyright info.</div>
+<div id="footer">Copyright &copy; 2017-current by <a href="https://twitter.com/williamngan">William Ngan</a> and contributors. Pts is an <a href="https://github.com/williamngan/pts">open source project</a> under Apache License 2.0.</div>
 
 <script type="text/javascript" src="../dist/pts.js"></script>
 <script type="text/javascript" src="./js/guide.js"></script>

diff --git a/guide/assets/footer.html b/guide/assets/footer.html
@@ -1,5 +1,4 @@
-<div id="footer"><strong>pts</strong> is an open source project started by <a href="https://twitter.com/williamngan">@williamngan</a>. 
-  See&nbsp;<a href="https://github.com/williamngan/pts">its&nbsp;repository</a>&nbsp;for&nbsp;Apache&nbsp;license and copyright info.</div>
+<div id="footer">Copyright &copy; 2017-current by <a href="https://twitter.com/williamngan">William Ngan</a> and contributors. Pts is an <a href="https://github.com/williamngan/pts">open source project</a> under Apache License 2.0.</div>
 
 <script type="text/javascript" src="../dist/pts.js"></script>
 <script type="text/javascript" src="./js/guide.js"></script>

diff --git a/guide/assets/style.css b/guide/assets/style.css
@@ -24,8 +24,8 @@ a:hover { color: #42e; }
 #footer {
   font-size: 1.1em;
   color: #aeb7c1;
-  width: 50%;
-  margin-left: 40%;
+  width: 70%;
+  margin-left: 30%;
   padding: 30px 0;
 }
 

diff --git a/guide/js/examples/canvas_aligntext.js b/guide/js/examples/canvas_aligntext.js
@@ -19,7 +19,7 @@
       let size = space.center.$subtract( space.pointer ).abs().multiply(2);
       let rect = Rectangle.fromCenter( space.center, size.$max( space.size.$divide(6) )  );
 
-      form.fill("#fff").stroke("#f03", 3).rect( rect );
+      form.fill("#fff").stroke("#0ca", 3).rect( rect );
       form.fillOnly("#123");
       form.font(12)
       form.alignText("left").textBox( rect, content, "top" );

diff --git a/guide/js/examples/canvas_paragraphbox.js b/guide/js/examples/canvas_paragraphbox.js
@@ -19,7 +19,7 @@
       let size = space.center.$subtract( space.pointer ).abs().multiply(2);
       let rect = Rectangle.fromCenter( space.center, size.$max( space.size.$divide(6) )  );
 
-      form.fill("#fff").stroke("#f03", 3).rect( rect );
+      form.fill("#fff").stroke("#0ca", 3).rect( rect );
       form.fillOnly("#123");
       form.alignText("center").paragraphBox( rect, content, 1.5, "middle" );
     }

diff --git a/guide/js/examples/canvas_paragraphbox2.js b/guide/js/examples/canvas_paragraphbox2.js
@@ -20,11 +20,11 @@
       let rect = Rectangle.fromCenter( space.center, size.$max( space.size.$divide(6) )  );
       let boxes = Rectangle.halves( rect, 0.5 );
 
-      form.fill("#fff").stroke("#f03", 3).rect( rect );
+      form.fill("#fff").stroke("#0ca", 3).rect( rect );
       form.fillOnly("#123");
       form.paragraphBox( boxes[0], content, 1, "top", false );
       form.alignText("right").paragraphBox( boxes[1], content, 2, "bottom", false );
-      form.strokeOnly("#f03", 1).line( [new Pt(space.center.x, 0), new Pt(space.center.x, space.size.y)] );
+      form.strokeOnly("#42e", 1).line( [new Pt(space.center.x, 0), new Pt(space.center.x, space.size.y)] );
     }
 
   });

diff --git a/guide/js/examples/canvas_textbox.js b/guide/js/examples/canvas_textbox.js
@@ -19,7 +19,7 @@
       let size = space.center.$subtract( space.pointer ).abs().multiply(2);
       let rect = Rectangle.fromCenter( space.center, size.$max( space.size.$divide(6) )  );
 
-      form.fill("#fff").stroke("#f03", 3).rect( rect );
+      form.fill("#fff").stroke("#0ca", 3).rect( rect );
       form.fillOnly("#123");
       form.font(24).textBox( rect, content, "top", "..." );
       form.font(16).textBox( rect, content, "middle", " ☞ " );

diff --git a/guide/js/examples/getting_started.js b/guide/js/examples/getting_started.js
@@ -25,7 +25,7 @@
 
     // drawing
     form.fillOnly("#123").polygon( poly );
-    form.fill("#f03").circles( circles );
+    form.fill("#f05").circles( circles );
     form.strokeOnly("#fff ", 3 ).polygons( tris );
     form.fill("#123").point( space.pointer, 5 );
 

diff --git a/guide/js/examples/getting_started_2.js b/guide/js/examples/getting_started_2.js
@@ -11,7 +11,7 @@
   // animation
   space.add( (time, ftime) => {
     let radius = Num.cycle( (time%1000)/1000 ) * 20;
-    form.fill("#09f").point( space.pointer, radius, "circle" );
+    form.fill("#0ca").point( space.pointer, radius, "circle" );
   });
 
   // start

diff --git a/guide/js/examples/getting_started_5.js b/guide/js/examples/getting_started_5.js
@@ -25,7 +25,7 @@
 
     // drawing
     form.fillOnly("#123").polygon( poly );
-    form.fill("#f03").circles( circles );
+    form.fill("#f05").circles( circles );
     form.strokeOnly("#fff ", 3 ).polygons( tris );
     form.fill("#123").point( space.pointer, 5 );
 

diff --git a/guide/js/examples/group_segments.js b/guide/js/examples/group_segments.js
@@ -38,7 +38,7 @@
         form.strokeOnly("#123", 10, "round");
         form.line( group );
         form.fill("#fff").circles( cs );
-        form.fillOnly("#f03").point( lastPt, 10, "circle" );
+        form.fillOnly("#f05").point( lastPt, 10, "circle" );
 
       }
     }

diff --git a/guide/js/examples/op_bspline.js b/guide/js/examples/op_bspline.js
@@ -25,9 +25,9 @@
 
     // draw the B-spline curve
     let curve = Curve.bspline( pts );
-    form.fill("#f03").stroke("#fff", 5).polygon( curve );
+    form.fill("#0ca").stroke("#fff", 5).polygon( curve );
     form.stroke("rgba(0,0,0,.2", 1).lines( corners.map( (p) => [p, space.center]) );
-    form.fillOnly("#123").points( pts, 3, "circle" );
+    form.fillOnly("#f05").points( pts, 3, "circle" );
 
   });
 

diff --git a/guide/js/examples/op_bspline_2.js b/guide/js/examples/op_bspline_2.js
@@ -24,10 +24,10 @@
 
     form.fillOnly("#123").points( pts, 2, "circle" );
     form.strokeOnly("#fff",3).line( curve );
-    form.stroke("#000").polygon( Curve.bspline( curve ) );
+    form.stroke("#123").polygon( Curve.bspline( curve ) );
 
     let pp = ten.map( (p) => [space.pointer, p] );
-    form.strokeOnly("#f03", 2).lines( pp );
+    form.strokeOnly("#f05", 2).lines( pp );
 
   });
 

diff --git a/guide/js/examples/op_closest.js b/guide/js/examples/op_closest.js
@@ -18,8 +18,8 @@
     pts.sort( (a,b) => a.$subtract(t).magnitudeSq() - b.$subtract(t).magnitudeSq() );
 
     form.fillOnly("#123").points( pts, 2, "circle" );
-    form.fill("#f03").point( pts[0], 10, "circle" );
-    form.strokeOnly("#f03", 2).line( [pts[0], space.pointer] );
+    form.fill("#f05").point( pts[0], 10, "circle" );
+    form.strokeOnly("#f05", 2).line( [pts[0], space.pointer] );
 
   });
 

diff --git a/guide/js/examples/op_closest_2.js b/guide/js/examples/op_closest_2.js
@@ -24,8 +24,8 @@
 
     let three = pts.slice(0, 3);
     let threeLines = three.map( (p) => [p, space.pointer] );
-    form.strokeOnly("#f03", 2).lines( threeLines );
-    form.fillOnly("#f03").points( three, 3, "circle" );
+    form.strokeOnly("#f05", 2).lines( threeLines );
+    form.fillOnly("#f05").points( three, 3, "circle" );
   });
 
   // start

diff --git a/guide/js/examples/op_intersect.js b/guide/js/examples/op_intersect.js
@@ -24,9 +24,9 @@
     let hitPts = pairs.map( (pa) => hit( pa ) );
 
     form.strokeOnly("#123").lines( pairs );
-    form.stroke("#f03").line([space.center, space.pointer]);
+    form.stroke("#42e").line([space.center, space.pointer]);
     form.fillOnly("#123").points( pts, 2, "circle" );
-    form.fill("#f03").points( hitPts, 5, "circle" );
+    form.fill("#42e").points( hitPts, 5, "circle" );
 
   });
 

diff --git a/guide/js/examples/op_perpendicular.js b/guide/js/examples/op_perpendicular.js
@@ -18,7 +18,7 @@
     let perpends = pts.map( (p) => [p, Line.perpendicularFromPt( path, p )] );
 
 
-    form.strokeOnly("#f03", 5).line( path );
+    form.strokeOnly("#42e", 5).line( path );
     form.strokeOnly("#123", 1).lines( perpends );
     form.fillOnly("#123").points( pts, 2, "circle" );
 

diff --git a/guide/js/examples/pt_angle.js b/guide/js/examples/pt_angle.js
@@ -20,9 +20,9 @@
     let angText = Geom.boundRadian( ang ); // bound between 0 to 2-PI
 
 
-    form.strokeOnly("#f03", 10, "round", "round").line( [c, m] );
+    form.strokeOnly("#0ca", 10, "round", "round").line( [c, m] );
     form.stroke("#fff").line( [c, new Pt(c.x + lengthP, c.y)])
-    form.stroke("#f03", 10).arc(c, lengthP, 0, ang);
+    form.stroke("#42e", 10).arc(c, lengthP, 0, ang);
     form.fill("#123").font(18, "bold").text( c.$add( p.toAngle( angText/2, lengthP/2 ) ).add(10, 5), Math.floor( Geom.toDegree(angText) )+"°" );
   });