Text message styling for AO3

A quick way to style text messages in stories posted to AO3. If you have any questions, please ask @museawayfic on Twitter

by muse away

HTML

<!-- This fiddle was updated in 2021 to remove colors in case people are using dark themes, but please modify for your needs. 

museaway.carrd.co --> 

<div id="workskin">
<div id="chapters">

<!-- Only use what's below this comment! The part above simulates AO3 -->

<blockquote>
  <p><strong>12:30pm</strong> hey</p>
  <p><strong>12:32pm</strong> are you asleep?</p>
  <p><strong>12:48pm</strong> anyway get this</p>
  <p>
    <em>Delivered</em>
  </p>
</blockquote>

<!-- stop here, please! don't copy the stuff below -->

</div>
</div>

CSS

/* Add this to a new or existing workskin. Make sure to apply the skin to the fic or the styling won't show up! */

#workskin #chapters blockquote {
  padding: 30px;
  margin: 20px 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

#workskin #chapters blockquote strong {
  font-style: normal;
  font-weight: normal;
  display: block;
  margin-bottom: 5px;
  font-size: .8em;
  text-transform: uppercase;
}

#workskin #chapters blockquote em {
  font-size: .8em;
  font-style: normal;
}

JavaScript

none needed