<!--Excerpt from https://humanewebmanifesto.com/-->

<main>
  <article class="content">
    <p>The web is becoming hostile to humans. Users are tracked and their privacy is routinely violated. Search results are populated with ads. We are constantly spammed by bots. Generative AI threatens to turn previously useful public forums into soulless marketing soup, while sacrificing the livelihoods of the creators that unwittingly power them<a class="footnote-anchor" href="#ref_1"><sup>1</sup></a><button popovertarget="ref_1">1</button>. Power-hungry data centres<a class="footnote-anchor" href="#ref_2"><sup>2</sup></a><button popovertarget="ref_2">2</button> demand the burning of fossil fuels, and divert water and energy from communities, emitting tonnes of carbon in order to power this digital junkyard. Users abandon hostile websites that take too long to load on low-powered devices, or are forced to upgrade, as the pile of electronic waste grows<a class="footnote-anchor" href="#ref_3"><sup>3</sup></a><button popovertarget="ref_3">3</button></p>

    <p>We need a web <strong>by and for humans</strong>.</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem natus veritatis placeat temporibus aperiam? Sed, quos in, quisquam dolor aut ad eaque amet odit laboriosam doloremque nulla beatae. Ratione, consequuntur!</p>
    <p>Aut nulla quaerat officia maiores aliquid? Earum, maiores. Eligendi, cum! Quaerat ipsam labore, neque sunt expedita facere recusandae quam nemo veniam nesciunt quae magnam perspiciatis corporis voluptate saepe eaque sapiente!</p>
    <p>Sapiente voluptatum officiis quisquam voluptatem soluta asperiores laboriosam quae velit sit, repellat, id error beatae neque architecto expedita voluptates? Sint aliquid fugit adipisci officia minima, fuga ab maiores cum a!</p>
  </article>

  <hr />

  <ol class="references">
    <li id="ref_1" popover>
      <p><cite><a href="https://techwontsave.us/episode/174_why_ai_is_a_threat_to_artists_w_molly_crabapple">Why AI is a Threat to Artists</a></cite>, an interview with artist Molly Crabapple from the podcast Tech Won’t Save Us</p>
    </li>

    <li id="ref_2" popover>
      <p><cite><a href="https://www.theguardian.com/world/2024/feb/15/power-grab-hidden-costs-of-ireland-datacentre-boom">Power grab: the hidden costs of Ireland’s datacentre boom</a></cite>, from The Guardian</p>
    </li>

    <li id="ref_3" popover>
      <p><cite><a href="https://gerrymcgovern.com/world-wide-waste/">World Wide Waste</a></cite>, book by Gerry McGovern</p>
    </li>
  </ol>
</main>

.footnote-anchor {
  display: none;
}
html.no-popovers {
  .footnote-anchor {
    display: inline;
  }
  [popovertarget] {
    display: none;
  }
}

[popovertarget] {
  background: #42a5f5;
  color: white;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  text-align: center;
  font-size: 60%;
  margin-inline-start: 0.1rem;
  inset-block-end: 0.33rem;
  position: relative;
  border: 0;
  padding: 0.1rem;

  &:hover,
  &:focus {
    background: black;
  }
}

/* Display as a footnote */
[popover] {
  display: list-item;
  position: relative;
  border: 0;
  padding: 0;
  width: auto;
  overflow: visible;

  p {
    max-width: 50ch;
    text-wrap: balance;
  }

  /* Display as a drawer */
  &:popover-open {
    z-index: 1;
    position: fixed;
    display: grid;
    place-items: center;
    inset: auto;
    bottom: 0;
    left: 0;
    margin: 0;
    width: 100vi;
    padding: 2rem;
    background: lavender;
    box-shadow: 0 -1rem 5rem oklch(0% 0 0 / 0.33);

    animation: slide-open 0.2s;

    /* Make sure the popup isn't screen-covering */
    max-block-size: 50dvh;
    overflow: auto;

    &::marker {
      content: "";
    }
  }
}

@keyframes slide-open {
  0% {
    transform: translate(0, 100%);
  }
  100% {
    transform: translate(0, 0);
  }
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    font-family: "Syne", sans-serif;
    line-height: 1.6;
    font-size: 1.35rem;
  }

  main {
    max-width: 55ch;
    margin: 0 auto;
    padding-bottom: 50dvh; /* ensure a popup can't cover up the button that opened it */
  }
}

if (!HTMLElement.prototype.hasOwnProperty("popover")) {
  document.documentElement.classList.add("no-popovers");
}