meh - Plunker

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>meh</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #111;
        color: #eee;
        font-family: "Georgia", serif;
        line-height: 1.6;
      }

      h1 {
        text-align: center;
        font-size: 2.5rem;
        margin-top: 2rem;
        letter-spacing: 2px;
      }

      h3 {
        text-align: center;
        font-weight: normal;
        color: #aaa;
        margin-bottom: 3rem;
      }

      .content-list {
        max-width: 800px;
        margin: auto;
        padding: 0 1rem;
        list-style: none;
      }

      .content-item {
        margin: 2rem 0;
        padding: 1.5rem;
        border-left: 3px solid #444;
        background-color: #1a1a1a;
        border-radius: 8px;
      }

      .quote-text, .poem-text {
        font-size: 1.2rem;
        color: #ddd;
      }

      .quote-text {
        font-style: italic;
      }

      .poem-text {
        white-space: pre-line; /* preserves line breaks in poems */
      }

      .content-author {
        margin-top: 0.5rem;
        text-align: right;
        font-size: 1rem;
        color: #888;
      }

      footer {
        margin-top: 3rem;
        text-align: center;
        font-size: 0.9rem;
        color: #555;
      }
    </style>
  </head>

  <body>
    <h1>Quotes & Poems from the Excluded</h1>
    <h3>An existential nihilism experience</h3>

    <ul class="content-list" id="contentList">
      <!-- Loaded here -->
    </ul>

    <footer>Curated for those who don’t want to decide for themselves.</footer>

    <script>
      async function loadContent() {
        try {
          const response = await fetch("quotes.json");
          const items = await response.json();

          const list = document.getElementById("contentList");
          items.forEach(item => {
            const li = document.createElement("li");
            li.className = "content-item";

            if (item.type === "quote") {
              li.innerHTML = `
                <div class="quote-text">"${item.text}"</div>
                <div class="content-author">— ${item.author}</div>
              `;
            } else if (item.type === "poem") {
              li.innerHTML = `
                <div class="poem-text">${item.text}</div>
                <div class="content-author">— ${item.author}</div>
              `;
            }

            list.appendChild(li);
          });
        } catch (error) {
          console.error("Error loading content:", error);
        }
      }

      loadContent();
    </script>
  </body>
</html>

[
  {
    "type": "quote",
    "text": "The problem is not suffering itself or oblivion itself but the depraved meaninglessness of these things, the absolutely inhuman nihilism of suffering.",
    "author": "John Green"
  },
  {
    "type": "quote",
    "text": "And now maybe humankind is in the late smash-it-all-up teenage stage of self-harm and nihilism, because we didn’t ask to be alive, we didn’t ask to inherit an earth to look after, and we didn’t ask to be so completely unjustly darkly alone.",
    "author": "Samantha Harvey"
  },
  {
    "type": "quote",
    "text": "I’m matter but I don’t matter.",
    "author": "n/a"
  },
  {
    "type": "poem",
    "text": "Hands on the blade,\nsharp steel foggy from shaky exhales \ncut \n... \nRed spill … pain. Relief, stop it. one more / Cut",
    "author": "Daniel A. Teo"
  },
  {
    "type": "poem",
    "text": "Tell me how you found the courage to say \nThe first ‘I want’ — \nAnd the second — \nAnd the final, final one.",
    "author": "Anne Sexton"
  },
  {
    "type": "quote",
    "text": "Suicide is the act of freedom, and a confession. It's a decision free from imposed morality.",
    "author": "n/a"
  },
    {
    "type": "quote",
    "text": "Bottom.",
    "author": "n/a"
  }
]