<body class="one-col-grid">
  <nav id="sitenav"></nav>
  <main>
    <h1 class="logo">xocoyotl</h1>
    <div class="tepiton">
      <article class="noTitle">
        <a href="/posts/66a89cb0-dfeb-432e-96ea-62e244c9e522/">
          <div class="ex">exit</div>
          <section>
            <p><a href="https://www.eurozine.com/change-course-human-history/">How to change the course of human history</a> …</p>
          </section>
        </a>
      </article>
      <article class="noTitle">
        <a href="/posts/72713fe3-1df2-4d99-bebf-8171bb87a90f/">
          <div class="ex">x</div>
          <section>
            <p>Today’s XKCD hits all of my buttons:</p>
            <ul>
              <li>tech</li>
              <li>religion</li>
              <li>nytimes</li>
              <li>hand-drawn wireframes</li>
            </ul>
            <p><a href="https://xkcd.com/2536/">Wirecutter</a></p>
          </section>
        </a>
      </article>
      <article class="noTitle">
        <a href="/posts/5c9c3669-c1d8-4f9d-b798-b7524453e6cb/">
          <div class="ex">x</div>
          <section>
            <p>you’re not wrong<br>
              where did that come from?</p>
          </section>
        </a>
      </article>
      <article class="noTitle">
        <a href="/posts/f1546b44-6e08-441b-b314-2f00115c122a/">
          <div class="ex">x</div>
          <section>
            <p>an interesting gadget</p>
            <p><a href="https://www.elevationlab.com/products/elevationhub">Elevation Hub</a></p>
          </section>
        </a>
      </article>
      <article class="noTitle">
        <a href="/posts/fba6703b-19fb-4c1a-9161-42cba3c001e6/">
          <div class="ex">x</div>
          <section>
            <p>It’s normal to try to put new information in a frame that you already know</p>
          </section>
        </a>
      </article>
      <article class="noTitle">
        <a href="/posts/5246493f-2749-4ca1-8b40-06075ab42266/">
          <div class="ex">x</div>
          <section>
            <p>“Everyone else has told me they like my new haircut but not you. Please explain why you don’t like my new haircut. Or, if you do, why you haven’t told me you like my new haircut.”</p>
          </section>
        </a>
      </article>
    </div>
  </main>
</body>
* {
  box-sizing: border-box;
}

article.noTitle {
  margin-bottom: 1em;
  border-radius: 10px;
  background-color: #ccc;
  padding: 1em 2em;
  border: 1px solid red;
  position: relative;
}

article.noTitle a {
  text-decoration: none;
  color: inherit;
}

article.noTitle section p a {
  text-decoration: underline;
}

.ex {
  position: absolute;
  top: 8px;
  right: 16px;
  content: "dd";
}

.ex:hover {
  background-color: #999;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.