review.pug

doctype html
html
  head
    meta(charset="utf-8")
    title Yin-Yang Font Review
    script(type="text/javascript", src="node_modules/@svgdotjs/svg.js/dist/svg.min.js")
    script(type="text/javascript", src="node_modules/font-webapp/font-webapp.js")
    script(type="text/javascript").
      module = {};
    script(type="text/javascript", src="node_modules/json-stringify-pretty-compact/index.js")
    script(type="text/javascript").
      stringify = module.exports
    script(type="text/javascript", src="review-data.js")
    // If existing font selection exists, load it
    script(type="text/javascript", src="font.js")
    script(type="text/javascript", src="yinyang.js")
    style
      include:stylus yinyang.styl
      :stylus
        .container
          overflow-x: auto
          white-space: nowrap
        .review
          display: inline-block
          width: 300px
          border: 5px transparent solid
          &.selected
            border-color: purple
        #downloadFont
          margin: 1em
          font-size: x-large
        .test
          border: solid
          padding: 1em
  body
    table.w-100
      tr
        td.text-left.align-middle
          h1 Yin-Yang Font Review
        td.text-right.align-middle
          h2 by <a href="https://erikdemaine.org/">Erik&nbsp;Demaine</a> and <a href="http://martindemaine.org">Martin&nbsp;Demaine</a>, 2021

    #review.w-100

    button#downloadFont Download Font

    .test
      h2 Visualize puzzles/solutions:
      textarea#testInput(rows="10", cols="80")
      #testOutput