Update assets and homepage

assets/style.css

@@ -121,18 +121,19 @@ html * {
 
 
 .feature-block {
-  column-count: 4;
   height: 45vw;
-  column-gap: 0px;
-  margin: 150px 0px 0px;
-
+  margin: 100px 0px 0px;
+
 }
 
 .feature-block .feature {
-  display: inline-block;
-
   padding: 0;
   position: relative;
+  display: inline-block;
+  vertical-align: top;
+  width: 25vw;
+
+  box-sizing: border-box;
 
 }
 
@@ -145,13 +146,13 @@ html * {
 
 .feature-block .usage{
   color: #345;
-  padding: 20px 20px 20px 20px;
+  padding: 30px;
   font-size: 1.3em;
   text-align: left;
 }
 
 .feature-block .cta-link {
-  margin-top: 15px;
+  margin-top: 10px;
 }
 
 .block h3 {
@@ -388,6 +389,24 @@ a:hover {
   }
 
 
+  .feature-block { 
+    height: auto;
+  }
+
+  .feature-block .feature {
+    width: 50vw;
+    height: 50vw;
+  }
+
+  .feature-block .image {
+    height: 30vw;
+  }
+
+  .feature-block .usage{
+    padding: 20px 40px;
+  }
+
+
 
   #pts { padding-left: 0; line-height: 1.4; vertical-align: middle; }
   #pts a { padding: 0; }
@@ -449,6 +468,14 @@ a:hover {
   /* ------- */
 
 
+  .feature-block .feature {
+    width: 100vw;
+    height: 400px;
+  }
+
+  .feature-block .image {
+    height: 250px;
+  }
 
   .demo {
     padding: 3px 0;

index.html

@@ -4,13 +4,21 @@
 	<title>Pts.js</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <meta name="description" content="Pts is a javascript library that enables you to compose and visualize points in spaces.">
+    <meta name="description" content="Pts is a javascript library for visualization and creative-coding.">
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
+    <link rel="manifest" href="/assets/site.webmanifest">
+    <link rel="mask-icon" href="/assets/safari-pinned-tab.svg" color="#4422ee">
+    <meta name="msapplication-TileColor" content="#4422ee">
+    <meta name="theme-color" content="#4422ee">
 
     <meta name="thumbnail"           content="https://ptsjs.org/assets/thumbnail.png" />
     <meta property="og:url"          content="https://ptsjs.org" />
     <meta property="og:type"         content="website" />
     <meta property="og:title"        content="Pts.js" />
-    <meta property="og:description"  content="Pts is a javascript library that enables you to compose and visualize points." />
+    <meta property="og:description"  content="Pts is a javascript library for visualization and creative-coding." />
     <meta property="og:image"        content="https://ptsjs.org/assets/card_thumbnail.png" />
     <meta property="og:image:width"  content="1200">
     <meta property="og:image:height" content="630">
@@ -45,7 +53,7 @@ <h3>Connecting the dots</h3>
         <!-- <p>Can you find the Big Dipper in a sky full of stars? Can you discover, through your mind's eyes, invisible points in conceptual spaces too?</p> -->
         <!-- <p>Pts helps you connect and express those invisible points — as ideas, shapes, colors, motions, sounds, and more. </p> -->
         <p>Pts is about connecting the dots, like seeing the Big Dipper in a sky full of stars, like spotting dust in the air illuminated by a beam of light.</p> 
-        <p>Pts enables you to compose and visualize these invisible points and their relationships, and to express what you see from your mind's eyes — points as ideas, shapes, colors, motions, interactions, and more.</p>
+        <p>Pts enables you to compose and visualize these invisible points, and to creatively express what you see in your mind's eyes — points as ideas, shapes, colors, motions, interactions, and more.</p>
         <a href="./guide/Get-started-0100.html"><div class="cta">Get Started</div></a>
     </div>
     <div class="subcol">
@@ -67,22 +75,22 @@ <h3>A modern javascript library</h3>
     <div class="feature">
         <div class="image" style="background: url(./assets/feature1.jpg) center center"></div>
         <div class="usage"><strong>Linear algebra</strong> in an easy-to-use, non-technical API. 
-            <div class="cta-link"><a href="#">Read the Pt guide ›</a></div>
+            <div class="cta-link"><a href="./guide/Get-started-0100.html">Read the guide ›</a></div>
         </div>
     </div><div class="feature">
         <div class="image" style="background: url(./assets/feature2.jpg) center center"></div>
-        <div class="usage"><strong>Handy functions</strong> for geometry, color, simulation, and many more. 
-            <div class="cta-link"><a href="#">See a fun demo ›</a></div>
+        <div class="usage"><strong>Minimal code</strong> for quick iterations across canvas, svg, and other formats.
+            <div class="cta-link"><a href="./demo/edit/?name=geom.interpolate">Run code in live editor ›</a></div>
         </div>
     </div><div class="feature">
         <div class="image" style="background: url(./assets/feature3.jpg) center center"></div>
-        <div class="usage"><strong>Minimal code</strong> for quick iterations across canvas, svg, and other formats.
-            <div class="cta-link"><a href="#">Run code in live editor ›</a></div>
+        <div class="usage"><strong>Handy functions</strong> for geometry, color, simulation, and many more. 
+            <div class="cta-link"><a href="./demo/?name=create.delaunay">See a fun demo ›</a></div>
         </div>
     </div><div class="feature">
         <div class="image" style="background: url(./assets/feature4.jpg) center center"></div>
         <div class="usage"><strong>Lightweight library</strong> to use on its own, and together with other libraries. 
-            <div class="cta-link"><a href="#">Try a demo with tensflow.js ›</a></div>
+            <div class="cta-link"><a href="https://github.com/williamngan/pts/tree/master/demo/more/tfjs_posenet" target="_blank">Use it with tensorflow.js ›</a></div>
         </div>
     </div>
 </div>

site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "Pts",
+    "short_name": "Pts",
+    "icons": [
+        {
+            "src": "/assets/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#4422ee",
+    "background_color": "#4422ee",
+    "display": "standalone"
+}