"don't tell me"

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <link href="https://cdn.staticdelivr.com/gfonts/css2?family=Atkinson+Hyperlegible" rel="stylesheet">
    <title>"don't tell me"</title>
  </head>
  <body>
    <!-- <figure>
      <h1 id="poem_title"><em>don't tell me</em></h1>
      <div id="poem_body">
        <p tabindex="1">don't tell me the cops keep us safe</p>
      </div>
      <figcaption id="caption">(click, tap, or select anywhere)</figcaption>
    </figure>
    <script src="lib/script.js"></script> -->
    <a href="https://emmajune.neocities.org/dont-tell-me">sorry y'all -- please use this link instead</a>
  </body>
</html>

/* Add your styles here */
body, body * {
  font-family: "Atkinson Hyperlegible";
  font-weight: 100;
  user-select: none;
}

h1 {
  font-size: 2em
}

#poem_body * {
  width: fit-content;
  white-space: pre;
  font-size: 2em;
}

figure {
  margin: 3em;
}

#caption {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 2em;
  backdrop-filter: blur(1px) brightness(250%);
  padding-top: 3px;
  padding-left: 3px;
}

// Add your code here

var lines = ["don't tell me cops keep us safe", 'if your eyes have never tasted pepper spray', "& you've never been thrashed", "onto bitter cement", "again, & again", "until your hand purples & plums &", "no one in sacred your life", "brain has damage coz a cop", "sublimes power into powerful-er fear", "feeling white rich manly patriotic", "if you value sacred oxygen", " dancing  through our veins"]
var line = 0
var abs_line = 0


async function interact() {
  abs_line++
  line = (line+1)%lines.length
  poem_body.innerHTML = `
    <p tabindex="${abs_line+1}">${lines[line]}</p>
    ${poem_body.innerHTML}
  `
}

document.addEventListener('click', interact)

poem_body.addEventListener('focusin', (e)=>{
  if (e.target.tabIndex === (abs_line+1)) {
    interact()
    poem_body.children[1].focus()
  }
})