index.pug

doctype html
html(lang="en")
  head
    title The Abecedarian
    meta(charset="UTF-8")
    meta(name="Description" content="Learn the alphabet")
    meta(name="theme-color" content="#fffff0")
    meta(name="apple-mobile-web-app-capable" content="yes")
    meta(name="viewport" content="width=device-width, initial-scale=1")
    link(rel="icon" href="favicon.ico" type="image/x-icon")
    link(rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png")
    link(rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png")
    link(rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png")
    script(src="index.js")
    link(rel="manifest" href="manifest.webmanifest")
    link(rel="stylesheet" href="index.css")
    meta(name="theme-color" content="hsl(60, 56%, 97%)" media="(prefers-color-scheme: light)")
    meta(name="theme-color" content="hsl(0, 0%, 20%)" media="(prefers-color-scheme: dark)")
    noscript
      style.
        div[id^=letter] path {
          stroke: var(--stroke-path);
          stroke-width: 1.5vw;
          stroke-dasharray: none !important;
          stroke-dashoffset: 0 !important;
        }
  body
    .y-snap
      each letter in letters
        .pane(id=`letter-${letter.glyph}`)
          svg(viewBox="0 0 200 200")
            each path in letter.paths.reverse()
              path(d=path.d, stroke-dasharray=path.length, stroke-dashoffset=path.length, style=path.style)
          div
            .x-snap
              each word in (letter.words || [])
                div=word