website update

1 files changed, 118 insertions, 165 deletions

diff --git a/docs/index.css b/docs/index.css
index 80376c903..874725192 100644
--- a/docs/index.css
+++ b/docs/index.css
@@ -18,10 +18,10 @@ body {
   scroll-behavior: smooth;
 
   font-kerning: normal;
-  -moz-font-feature-settings:"kern" 1, "liga" 1; 
-  -ms-font-feature-settings:"kern" 1, "liga" 1; 
-  -o-font-feature-settings:"kern" 1, "liga" 1; 
-  -webkit-font-feature-settings:"kern" 1, "liga" 1; 
+  -moz-font-feature-settings:"kern" 1, "liga" 1;
+  -ms-font-feature-settings:"kern" 1, "liga" 1;
+  -o-font-feature-settings:"kern" 1, "liga" 1;
+  -webkit-font-feature-settings:"kern" 1, "liga" 1;
   font-feature-settings:"kern" 1, "liga" 1;
 }
 
@@ -43,7 +43,7 @@ a.fat {
   color: #333;
 }
 a:hover {
-  color: rgba(3, 102, 214, 1);
+  color: rgb(3, 102, 214);
   text-decoration: underline rgba(3, 102, 214, 0.6);
 }
 a.plain, a.fat {
@@ -83,6 +83,10 @@ q:after {
   content: "";
 }
 kbd {
+  -moz-font-feature-settings: 'kern' 1, 'case' 1;
+  -ms-font-feature-settings: 'kern' 1, 'case' 1;
+  -o-font-feature-settings: 'kern' 1, 'case' 1;
+  -webkit-font-feature-settings: 'kern' 1, 'case' 1;
   font-feature-settings: 'kern' 1, 'case' 1;
   border: 1px solid rgba(0,0,0,0.18);
   border-radius: 3px;
@@ -94,6 +98,10 @@ dem { /* de-emphasize */
   opacity: 0.7;
 }
 num { /* number */
+  -moz-font-feature-settings: 'calt' 1, 'ss01' 1;
+  -ms-font-feature-settings: 'calt' 1, 'ss01' 1;
+  -o-font-feature-settings: 'calt' 1, 'ss01' 1;
+  -webkit-font-feature-settings: 'calt' 1, 'ss01' 1;
   font-feature-settings: 'calt' 1, 'ss01' 1;
   white-space: pre;
 }
@@ -135,6 +143,23 @@ h2.back a:hover {
 h2.back a:hover::before {
   content: "<- ";
 }
+h2.banner {
+  text-align: center;
+  display: flex;
+  justify-content: center;
+}
+  h2.banner > * {
+    flex: 0 1 auto;
+    padding: 0.8em 1.2em;
+    border-radius: 4em;
+    display: block;
+    background: white;
+  }
+  h2.banner > a:hover {
+    color: black;
+    background: rgba(0,0,0,0.1);
+  }
+
 h3 {
   font-size: inherit;
 }
@@ -143,7 +168,7 @@ h1 > a, h2 > a, h3 > a {
   color: inherit;
   text-decoration: none !important;
   text-shadow: none;
-  background: none !important;
+  background: none;
 }
 
 .row {
@@ -192,14 +217,19 @@ h1 > a, h2 > a, h3 > a {
       transition: 300ms opacity cubic-bezier(0.25, 0.47, 0.44, 0.93);
       border-bottom: 3px solid transparent;
     }
-    .row.menu ul li > a:hover {
+    .row.menu ul li > a:hover, .row.menu ul li > a.active {
       color: black;
       border-bottom-color: black;
       opacity: 1;
-    }
+    } 
+  .row.menu ul li.home > a {
+    font-weight: 500;
+    color: black;
+    opacity: 1;
+  }
 
 /* narrow windows */
-@media only screen and (max-width: 500px) {
+@media only screen and (max-width: 565px) {
   .row.menu ul {
     justify-content: space-between;
   }
@@ -209,7 +239,28 @@ h1 > a, h2 > a, h3 > a {
     .row.menu ul li:last-child {
       margin-right: 0;
     }
-
+  .row.menu ul li.home {
+    /*color: red;
+    clear: both;*/
+    /*display: block;*/
+    text-align:center;
+    margin:0 0 -12px 0;
+    width: 100%;
+  }
+  .row.menu ul li.home > a {
+    border-bottom: none;
+    padding: 0 1em;
+    margin: 0.5em 0;
+    line-height:34px;
+    border-radius: 90px;
+
+    /*color: white;
+    background-color: rgba(3, 102, 214, 1);*/
+  }
+  .row.menu ul li.home > a:hover {
+    color: white;
+    background-color: #222;
+  }
 }
 
 /* small devices (<= iPhone 6+) */
@@ -294,6 +345,16 @@ a > img {
   background-color: #f4f4f4;
 }
 
+.sample-images {}
+  .sample-images > img, .sample-images > svg {
+    display: block;
+    margin:100px 0;
+    width:100%;
+  }
+  .sample-images > img:first-child, .sample-images > svg:first-child {
+    margin-top:50px;
+  }
+
 
 /* FAQ */
 ul.faq {
@@ -357,6 +418,10 @@ tablex {
     width:0;
   }*/
   tablex to::after {
+    -moz-font-feature-settings: 'calt' 1, 'case' 1;
+    -ms-font-feature-settings: 'calt' 1, 'case' 1;
+    -o-font-feature-settings: 'calt' 1, 'case' 1;
+    -webkit-font-feature-settings: 'calt' 1, 'case' 1;
     font-feature-settings: 'calt' 1, 'case' 1;
     content: "   →   ";
     color: rgba(0,0,0,0.2);
@@ -365,16 +430,54 @@ tablex {
     color: rgba(0,0,0,0.8);
   }
   tablex in {
+    -moz-font-feature-settings: 'calt' 0;
+    -ms-font-feature-settings: 'calt' 0;
+    -o-font-feature-settings: 'calt' 0;
+    -webkit-font-feature-settings: 'calt' 0;
     font-feature-settings: 'calt' 0;
   }
   tablex out {
+    -moz-font-feature-settings: 'calt' 1;
+    -ms-font-feature-settings: 'calt' 1;
+    -o-font-feature-settings: 'calt' 1;
+    -webkit-font-feature-settings: 'calt' 1;
     font-feature-settings: 'calt' 1;
   }
-  tablex out.zero { font-feature-settings: 'calt' 1, 'zero' 1; }
-  tablex out.tnum { font-feature-settings: 'calt' 1, 'tnum' 1; }
-  tablex out.case { font-feature-settings: 'calt' 1, 'case' 1; }
-  tablex out.frac { font-feature-settings: 'calt' 1, 'frac' 1; }
-  tablex out.ss01 { font-feature-settings: 'calt' 1, 'ss01' 1; }
+  tablex out.zero {
+    -moz-font-feature-settings: 'calt' 1, 'zero' 1;
+    -ms-font-feature-settings: 'calt' 1, 'zero' 1;
+    -o-font-feature-settings: 'calt' 1, 'zero' 1;
+    -webkit-font-feature-settings: 'calt' 1, 'zero' 1;
+    font-feature-settings: 'calt' 1, 'zero' 1;
+  }
+  tablex out.tnum {
+    -moz-font-feature-settings: 'calt' 1, 'tnum' 1;
+    -ms-font-feature-settings: 'calt' 1, 'tnum' 1;
+    -o-font-feature-settings: 'calt' 1, 'tnum' 1;
+    -webkit-font-feature-settings: 'calt' 1, 'tnum' 1;
+    font-feature-settings: 'calt' 1, 'tnum' 1;
+  }
+  tablex out.case {
+    -moz-font-feature-settings: 'calt' 1, 'case' 1;
+    -ms-font-feature-settings: 'calt' 1, 'case' 1;
+    -o-font-feature-settings: 'calt' 1, 'case' 1;
+    -webkit-font-feature-settings: 'calt' 1, 'case' 1;
+    font-feature-settings: 'calt' 1, 'case' 1;
+  }
+  tablex out.frac {
+    -moz-font-feature-settings: 'calt' 1, 'frac' 1;
+    -ms-font-feature-settings: 'calt' 1, 'frac' 1;
+    -o-font-feature-settings: 'calt' 1, 'frac' 1;
+    -webkit-font-feature-settings: 'calt' 1, 'frac' 1;
+    font-feature-settings: 'calt' 1, 'frac' 1;
+  }
+  tablex out.ss01 {
+    -moz-font-feature-settings: 'calt' 1, 'ss01' 1;
+    -ms-font-feature-settings: 'calt' 1, 'ss01' 1;
+    -o-font-feature-settings: 'calt' 1, 'ss01' 1;
+    -webkit-font-feature-settings: 'calt' 1, 'ss01' 1;
+    font-feature-settings: 'calt' 1, 'ss01' 1;
+  }
   tablex em {
     font-style: inherit;
     background: #FBE9A3;
@@ -411,153 +514,3 @@ box:first-child {
 box h3 {
   margin-bottom:0.8em;
 }
-
-.glyph-repertoire {
-  position: relative;
-  background: white;
-  margin-bottom:0;
-  border-top-left-radius:3px;
-  border-top-right-radius:3px;
-  padding-top:3px;
-}
-.glyph-repertoire-link {
-  margin-top:0;
-  background: white;
-  border-bottom-left-radius:3px;
-  border-bottom-right-radius:3px;
-}
-  .glyph-repertoire-link a {
-    display: block;
-    padding: 2em;
-    text-align: center;
-  }
-.glyph-repertoire .fade {
-  position: absolute;
-  display: block;
-  left:0; bottom:0; right:0;
-  height:50px;
-  pointer-events: none;
-
-  background-image:
-    linear-gradient(to bottom,
-      rgba(255,255,255,0) 0%,
-      rgba(255,255,255,1) 100%);
-  background-repeat: repeat-x;
-  background-size: 2px 50px;
-  background-position: 0 0;
-}
-.glyph-repertoire a {
-  display: block;
-  font-feature-settings: 'case' 1;
-}
-  .glyph-repertoire iframe {
-    pointer-events: none;
-
-    /*width: 100%;
-    height: 100px;*/
-    /*height: 0.5vh;*/
-    height: 330px;
-
-    width: 1px;
-    min-width: 100%;
-    *width: 100%;
-  }
-
-
-.carousel, .carousel * {
-  user-select: none;
-  cursor: default;
-}
-
-.carousel .header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  line-height: 40px;
-  height: 40px;
-  /*background:#eee;*/
-}
-  .carousel .header h2 {
-    margin: 0 0 1px 0;
-  }
-  .carousel .dots {
-    display: flex;
-    align-items: stretch;
-    /*background:salmon;*/
-    height: 40px;
-  }
-    .carousel .dots > .dot {
-      width:  14px;
-      margin: 0;
-      display: flex;
-      align-items: center;
-    }
-      .carousel .dot > .graphic {
-        box-sizing: border-box;
-        border-radius: 100%;
-        width:  10px;
-        height: 10px;
-        border: 1px solid #ccc;
-      }
-      .carousel .dots > .dot:hover > .graphic {
-        border-color:#111;
-      }
-      .carousel .dots > .dot.active > .graphic {
-        background: #222;
-        border: none;
-      }
-
-  .carousel .preload {
-    visibility: hidden;
-    pointer-events: none;
-    position: fixed;
-  }
-
-  .carousel .items {
-    margin-bottom: 0;
-    overflow-x: scroll;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    height:780px;
-    /*width: 100vw;*/
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-    .carousel .items > * {
-      flex: 1 0 auto;
-      margin-right: 20vw;
-      width: 80vw;
-      max-width: 888px;
-      cursor: e-resize;
-      transition: all 200ms ease-out;
-    }
-    .carousel .items > .loading {
-      opacity: 0.6;
-      -webkit-filter: url('#blur');
-      filter: url('#blur');
-      -webkit-filter: blur(20px);
-      filter: blur(20px);
-    }
-
-
-@media only screen and (max-device-width: 780px) and (orientation: portrait) {
-  .carousel .items {
-    height: auto !important;
-    max-height: 90vw;
-  }
-  .carousel .items img {
-    max-height: 90vw;
-  }
-}
-@media only screen and (max-device-width: 780px) and (orientation: landscape) {
-  .carousel .items {
-    height: auto !important;
-    width: 90vh;
-    margin: 0 auto;
-  }
-  .carousel .items > * {
-    width: 90vh;
-    max-height: 90vh;
-  }
-}