inter/docs/glyphs/glyphs.css

h1 > a { display:inline; }
h1 .glyph-name:before {
  content: " / ";
  color: rgba(0,0,0,0.2);
  font-weight:400;
}

body.iframe {
  background-color:#fff;
  padding:20px 10px;
}

/*body .charset-table { margin-bottom: 3rem; }*/
body.single .row.charset { display: none; }

body        .row.intro { display: none; }
body.single .row.intro { display: flex; }

#glyphs {
  display: none;
  flex-wrap: wrap;
  padding-left: 6px;
  overflow: hidden;
  width:200%;
  box-sizing: border-box;
  transform-origin: 0 0;
  /*transform: scale(0.5);*/
  transform: scale(1);
  justify-content: center;
  /*transition: transform 50ms ease-out;*/
  margin-bottom: 0px;
}
body.single #glyphs {
  justify-content: flex-start;
  max-width:888px;
  margin:0 auto;
  padding-left: 0;
  overflow: visible;
  display: flex;
}
  .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 .line {
    background: rgba(0,0,0,0.05);
    position: absolute;
    left:0; right:0;
    height: 1px;
    z-index:0;
    visibility: hidden;
  }
  .glyph .line.baseline { bottom: 64px; visibility: visible; }
  .glyph .line.x-height { top: 128px; }
  .glyph .line.cap-height { top: 76px; }
  .glyph:hover .line.baseline { background: rgba(0,90,230,.6); }
  .glyph:hover .line.x-height { background: rgba(230,60,10,.6); }
  .glyph:hover .line.cap-height { background: rgba(60,130,20,.6); }
  .glyph:hover .line {
    visibility: visible;
  }
  .glyph .names {
    position: absolute;
    left:20px; right:20px; bottom:6px;
    color: white;
    text-align: center;
    font-size:1em;
    white-space: pre;
    overflow:hidden;
    cursor: default;
  }
  body.single .glyph .names {
    display: none;
  }
  .glyph:hover .name {
    color: rgba(0,0,0,0.8);
  }
  .glyph .advance {
    box-sizing: border-box;
    position: relative;
    width: 1px;
    box-shadow: -1px 0 0 0 rgba(0,0,0,0.05), 1px 0 0 0 rgba(0,0,0,0.05);
  }
  .glyph.zero-width .advance {
    background: transparent;
    border-left: 1px dashed transparent;
  }
  .glyph:hover .advance {
    box-shadow: -1px 0 0 0 rgba(0,0,0,0.15), 1px 0 0 0 rgba(0,0,0,0.15);
  }
  .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;
  }
  body.single .glyph svg {
    overflow: visible;
  }
  /*.glyph .advance {
    display: block;
    background: salmon;
    z-index:0;
  }*/
  .glyph.stroke svg path {
    stroke-width: 8px;
    stroke: black;
    fill: none;
  }


body.single .intro {
  padding-bottom: 1em;
}
body.single .intro p {
  display: none;
}

#single-info {
  max-width: 500px;
}
#single-info a {
  background-image: none;
  text-shadow: none;
}
#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 .svgFile {
  font-feature-settings: 'case' 1;
}
#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;
}


body.single .row.styles { display: flex; }
body        .row.styles { display: none; }
#style-spectrum {
  list-style:none;
  /*display: flex;*/
  /*flex-wrap: wrap;*/
  margin-left:0;
}
#style-spectrum > div {
  --size: 5rem;
  font-family: "Inter var experimental";
  font-size: var(--size);
  line-height: 1rem;
  display:inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--size) * 1.25);
  min-width: calc(var(--size) * 1.1);
  margin-right:0.1rem;
  text-align: center;
  cursor: default;
}
#style-spectrum.xl > div {
  /* e.g. P.circled */
  --size: 4rem;
  min-height: calc(var(--size) * 1.7);
  min-width: calc(var(--size) * 1.5);
}




.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(0, 0, 0, 0.9);
  /*color: white;*/
}
.kernpair:target svg path, .kernpair.selected svg path {
  fill: white;
}
.kernpair:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
}
  .kernpair .g.left, .kernpair .g.right {
    width:100px;
    height:100px;
    /*background:rgba(40,240,90,0.3);*/
    background-size: contain;
    background-repeat: no-repeat;
    opacity:0.8;
  }
  .kernpair:hover .g.left, .kernpair:hover .g.right {
    opacity:0.9;
  }
  .kernpair.selected .g.left, .kernpair.selected .g.right {
    opacity:1;
  }
  /*.kernpair .g.left { background-color:rgba(120,90,140,0.3); }*/
  .kernpair .kern {
    position: absolute;
    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,100,100,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:-6px; bottom:-20px;
    z-index:1;
    text-align: center;
    color: rgba(255,0,0,0.8);
    visibility:hidden;
    pointer-events: none;
    font-size:11px;
  }
  .kernpair .kern.pos .label {
    color: rgba(1,163,88,0.8);
  }
  .kernpair:hover .kern .label,
  .kernpair.selected .kern .label {
    visibility:visible;
  }
  .kernpair .link {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    /*background: yellow;*/
    left:0; right:0; bottom:-22px;
    height: 20px;
    padding-top:2px;
    user-select: none;
    opacity: 0;
    z-index:0;
  }
  .kernpair:hover .link {
    opacity: 1;
  }
    .kernpair .link a {
      background: none;
      box-sizing: border-box;
      color: rgba(0,0,0,0.2);
      /*border: 1px solid #aaa;*/
      text-shadow: none;
      display: block;
      text-align: center;
      font-size: 13px;
      font-weight: 500;
      width: 16px; /* sync with JS kLinkAWidth */
      height: 16px;
      line-height: 14px;
      padding-top:3px;
      border-radius: 50%;
    }
    .kernpair .link:hover {
      z-index:999;
    }
    .kernpair .link a:hover {
      color: white;
      background: #222;
    }
  .kernpair.right .link {
    justify-content: flex-start;
  }