[devops] Updates public index (#240)

* adds new public index

* adds search and updates styles

* adds example search and p5 sketch

* rms npm script and comments out code - kept for ref

Author: joeyklee

package.json

@@ -8,7 +8,6 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "update:ml5": "node scripts/update-ml5-reference.js",
     "update:ml5-dev": "NODE_ENV=dev node scripts/update-ml5-reference.js",
-    "create:example-index": "node scripts/create-examples-index.js",
     "update:example-json": "node scripts/update-examples-json.js",
     "merge:release:ours": "git merge --strategy-option ours release"
   },

public/assets/style.css

@@ -9,114 +9,115 @@ body,
 html {
   width: 100%;
   height: 100%;
-  background-color:#F6FFFE;
+  /* background-color:#F6FFFE; */
 }
-.container {
-  display: grid;
-  grid-column-gap: 20px;
-  grid-row-gap: 20px;
-  grid-template-columns: auto auto auto auto;
-  padding-top: 2rem;
+
+#myCanvas {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  z-index: -10;
 }
 
-.container > .item {
-  text-align: center;
-  padding: 0.5rem;
-  border: 1px solid #A15FFB;
-  box-shadow: 4px 4px #A15FFB;
-  font-size: 0.9rem;
-  background-color: white;
-  min-height:100px;
-  display:flex;
+#app {
+  padding: 2rem;
+}
+
+.header{
+  display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items:center;
+  width:100%;
+  height: 50vh;
 }
-
-.container > .category-header {
-  grid-column: 1 / span 4;
-  color: black;
+.header-title{
+  font-size: 2rem;
+  text-align: center;
 }
-.container > .category-header > h3 {
-  font-size: 1.5rem;
-  padding-top:1.0rem;
-  color:#D5008F;
+.header-search{
+  display: flex;
+  justify-content: center;
+  width:100%;
+  max-width:400px;
 }
-
-.container > .category-header > h2 {
-    font-size: 2.0rem;
-    font-weight: 800;
-    padding-top:1.5rem;
-    padding-bottom:1.0rem;
-    grid-row-gap: 2em;
-    color:black;
-  }
-
-.container > .item:hover {
-  transform: scale(1.02);
+.header-search__input{
+  margin-top:2rem;
+  min-width:300px;
+  width: 50%;
+  border: 2px solid black;
+  padding:1rem 1.25rem;
+  box-shadow: 1rem 1rem #A15FFB;
 }
 
-a,
-a:link,
-a:visited {
-  color: #A15FFB;
-  font-size: 0.9rem;
-  text-decoration: none;
-  font-weight: 500;
+.header-text__links{
+  color: #5E2CA5;
+text-decoration: none;
+letter-spacing: 0.8px;
 }
 
-#app {
-  padding: 2rem;
+.header-text{
+  margin-top:3rem;
+  max-width: 500px;
+  text-align:left;
 }
 
-#app > h1 {
-  font-size: 3rem;
+.main{
+  width:100%;
+  display:grid;
+  justify-items: center;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-column-gap: 20px;
+  grid-row-gap: 40px;
 }
 
-#app > p {
-  margin-top: 1rem;
-  max-width: 600px;
+.section{
+  max-width:200px;
 }
 
+.section-header{
+  font-size: 1.6rem;
+  color: #A15FFB;
+}
 
-/* @media  (max-width: 600px) {
-
-    .container {
-        grid-template-columns: auto;
-      }
+.section-list,
+.section-list__item{
+  padding:0;
+  margin:0;
+}
+.section-list__item > a{
+  color: #5E2CA5;
+  text-decoration: none;
+  letter-spacing: 0.8px;
+  font-size: 0.9rem;
+  transition: all 0.2s;
+}
+.section-list__item > a:hover{
+  font-size:1.1rem;
+  text-decoration: underline;
+}
 
-      .container > .category-header {
-        grid-column: 1 / span 1;
-      }
-  } */
+.section-list__title{
+  margin:0.5rem 0;
+  font-size:1.2rem;
+  font-weight: 100;
+  color: #333333;
+}
 
 @media (max-width: 600px) {
-/* For mobile phones: */
-.container {
-    grid-template-columns: auto;
-    }
-
-    .container > .category-header {
-    grid-column: 1 / span 1;
-    }
+  .main {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (min-width:600px) and (max-width: 768px) {
-/* For mobile phones: */
-.container {
-    grid-template-columns: auto auto;
-    }
-
-    .container > .category-header {
-    grid-column: 1 / span 2;
-    }
+  .main {
+    grid-template-columns: 1fr 1fr;
+  }
 }
 
 @media (min-width:769px) and (max-width:992px){
-.container {
-    grid-template-columns: auto auto auto;
-    }
-
-    .container > .category-header {
-    grid-column: 1 / span 3;
-    }
+.main {
+    grid-template-columns: 1fr 1fr;
+  }
 }