1 files changed, 235 insertions, 0 deletions
diff --git a/docs/glyphs/glyphs.css b/docs/glyphs/glyphs.css
new file mode 100644
index 000000000..636211aa1
--- /dev/null
+++ b/docs/glyphs/glyphs.css
@@ -0,0 +1,235 @@
+h1 span.glyph-name {}
+h1 span.glyph-name:before {
+  content: " / ";
+  color: rgba(0,0,0,0.2);
+  font-weight:400;
+}
+
+body.iframe {
+  background-color:#fff;
+  padding:20px 10px;
+}
+
+#glyphs {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 6px;
+  overflow: hidden;
+  width:200%;
+  box-sizing: border-box;
+  transform-origin: 0 0;
+  transform: scale(0.5);
+  justify-content: center;
+  transition: transform 50ms ease-out;
+}
+body.single #glyphs {
+  justify-content: flex-start;
+  max-width:888px;
+  margin:0 auto;
+  padding-left: 0;
+}
+  .glyph {
+    height: 346px;
+    width: 346px;
+    background-image: none !important; /* since .glyph is an `a` */
+    background-color: white;
+    border-radius: 9px;
+    margin-right: 6px;
+    margin-bottom: 6px;
+    display: flex;
+    justify-content: center;
+    position: relative;
+    text-shadow: none;
+  }
+  .glyph .baseline {
+    background: rgba(0,90,230,.6);
+    position: absolute;
+    left:0; right:0; bottom:64px;
+    height: 1px;
+    z-index:0;
+    visibility: hidden;
+  }
+  .glyph .names {
+    position: absolute;
+    left:20px; right:20px; bottom:6px;
+    color:white;
+    text-align: center;
+    font-size:1em;
+  }
+  .glyph:hover .name {
+    color: rgba(0,0,0,0.8);
+  }
+  .glyph .advance {
+    box-sizing: border-box;
+    position: relative;
+    width: 1px;
+  }
+  .glyph.zero-width .advance {
+    background: transparent;
+    border-left: 1px dashed transparent;
+  }
+  .glyph:hover .baseline {
+    visibility: visible;
+  }
+  .glyph:hover .advance {
+    background: rgba(0,90,200,0.1);
+  }
+  .glyph.zero-width:hover .advance {
+    border-color: #aaa;
+  }
+  /*#glyphs .glyph .img*/
+  .glyph svg {
+    /*min-width: 346px;*/
+    /*height: 346px;*/
+    background-repeat: no-repeat;
+    /*background-size: contain;*/
+    /*background-color: #f5f5f5;*/
+    position: absolute;
+    top:0; bottom:0;
+    z-index:1;
+    opacity:0.95;
+  }
+  .glyph .advancez {
+    display: block;
+    background: salmon;
+    z-index:0;
+  }
+
+
+body.single .intro {
+  padding-bottom: 1em;
+}
+body.single .intro p {
+  display: none;
+}
+
+#single-info {
+  max-width: 500px;
+}
+#single-info ul {
+  list-style: none;
+}
+#single-info ul li {
+  margin-bottom: 6px;
+}
+#single-info .num {
+  font-feature-settings: 'ss01' 1, 'zero' 1;
+}
+#single-info .unicodeName {
+  font-feature-settings: 'case' 1;
+  padding-left:0.3em;
+}
+#single-info .colorMark {
+  display:inline-block;
+  vertical-align:baseline;
+  width:20px;
+  height:20px;
+  border-radius:50%;
+  border: 1px solid rgba(0,0,0,0.2);
+}
+#single-info .colorMark.none {
+  border: 1px dashed rgba(0,0,0,0.4);
+}
+
+#svgs {
+  display: none;
+}
+
+.row.kerning {
+  display: none;
+}
+
+body.single .row.kerning {
+  display: flex;
+}
+
+.row.kerning .empty {
+  opacity:0.3;
+}
+
+#kerning-list {
+  display: flex;
+  /*flex-direction: column;*/
+  flex-wrap: wrap;
+}
+
+#kerning-list .divider {
+  clear:both;
+  width:100%;
+  flex: 1 0 100%;
+  height: 1px;
+  background:rgba(0,0,0,0.1);
+  margin-bottom: 1em;
+}
+
+.kernpair {
+  /*background: white;*/
+  border-radius:3px;
+  background-image: none !important;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  position: relative;
+  margin:0 2em 2em 0;
+  text-shadow: none;
+}
+.kernpair:hover {
+  background: white;
+}
+.kernpair:target, .kernpair.selected {
+  background: rgba(250, 240, 0, 0.9);
+}
+.kernpair:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(0,0,0,0.4);
+}
+  .kernpair .left, .kernpair .right {
+    width:100px;
+    height:100px;
+    /*background:rgba(40,240,90,0.3);*/
+    background-size: contain;
+    background-repeat: no-repeat;
+    opacity:0.8;
+  }
+  .kernpair:hover .left, .kernpair:hover .right {
+    opacity:0.9;
+  }
+  .kernpair.selected .left, .kernpair.selected .right {
+    opacity:1;
+  }
+  /*.kernpair .left { background-color:rgba(120,90,140,0.3); }*/
+  .kernpair .kern {
+    position: absolute;
+    /*background-color: blue;*/
+    background-color: rgba(255,0,0,0.1);
+    right:0; top:0; bottom:0;
+    z-index:9;
+  }
+  .kernpair .kern.pos {
+    background-color: rgba(36,207,128,0.3);
+  }
+  .kernpair:hover .kern, .kernpair.selected .kern {
+    background-color: rgba(255,0,0,0.5);
+  }
+  .kernpair:hover .kern.pos, .kernpair.selected .kern.pos {
+    background-color: rgba(36,207,128,0.5);
+  }
+  .kernpair .kern .label {
+    position: absolute;
+    white-space: nowrap;
+    opacity:0.9;
+    height: 20px;
+    right:-8px; bottom:-20px;
+    z-index:1;
+    text-align: center;
+    color: rgba(255,0,0,0.8);
+    visibility:hidden;
+  }
+  .kernpair .kern.pos .label {
+    color: rgba(36,207,128,0.8);
+  }
+  .kernpair:hover .kern .label,
+  .kernpair.selected .kern .label {
+    visibility:visible;
+  }
+