Archive of Our Own

Chapter Text

This is what the Headline class looks like!

And This is the Byline

The headline has <strong> HTML tags as well as the CSS, so that it will still be distinct from the body text if you disable the CSS. I think mixing CSS and HTML for the final aesthetic effect is sloppy as hell, but I'm not sure. In the twitter section below, I managed to get it so that the skin overrides the HTML, so that quoted tweets are italicized with the style turned off but display normally with the style turned on. I would love to do that with the headlines and the italics, but I can't replicate the effect to save my life, so have my messy code. If anyone knows why it works there and how to make it work again, I'd love to hear about it.

This is what the SubHead class looks like.

That's in bold same as the headline, and then the italics are part of the skin (technically oblique, but I don't think there's much of a difference with ao3's standard fonts). You could use<em> instead of bold tags if you want; it's up to you.

This is what using the MagLink class within a heading looks like.

You could, technically, create a MagLink outside of a SubHead category. I don't know what it will look like, but probably ass. The body paragraphs are unmodified, so if you want to do a link within one of those, just do it normally.

This is the PullQuote class!

Without styles on, the example text for the PullQuote will be a paragraph right above this one. That was a whole lot of work for something that I didn't end up using in the fic. It intersects all right with the SubHead class, but I didn't have any good quotes to pull. Here's some junk text so it displays properly: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia at nisi viverra tincidunt. Vivamus congue libero ut nisi tempor maximus. Phasellus feugiat, velit ac dignissim congue, erat lacus commodo magna, et auctor quam massa vel dolor. Donec diam elit, eleifend ac lacus in, lobortis pretium leo. Sed ullamcorper arcu purus, eu molestie elit facilisis a. Cras sagittis risus id velit fringilla aliquet. In gravida massa neque, et finibus ante vehicula eu. Maecenas sed semper nisl. Nunc aliquam urna nisl, vitae luctus augue interdum eget. Nulla a turpis vitae augue finibus lobortis.

Aenean ligula metus, gravida bibendum tempus in, rhoncus a mi. Fusce a quam feugiat, tristique diam et, consequat elit. Donec malesuada magna at turpis tempor, non finibus tellus gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla convallis tincidunt rutrum. Vivamus et auctor urna. Aenean tincidunt est non placerat bibendum. Suspendisse potenti. Phasellus feugiat molestie facilisis. Praesent id turpis et ligula malesuada tempus. Pellentesque semper faucibus elit ac blandit.

This is the PullRight class.

The PullRight example is right before this paragraph in the code and with styles hidden. (This bold is normal bold.) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia at nisi viverra tincidunt. Vivamus congue libero ut nisi tempor maximus. Phasellus feugiat, velit ac dignissim congue, erat lacus commodo magna, et auctor quam massa vel dolor. Donec diam elit, eleifend ac lacus in, lobortis pretium leo. Sed ullamcorper arcu purus, eu molestie elit facilisis a. Cras sagittis risus id velit fringilla aliquet. In gravida massa neque, et finibus ante vehicula eu. Maecenas sed semper nisl. Nunc aliquam urna nisl, vitae luctus augue interdum eget. Nulla a turpis vitae augue finibus lobortis.

And finally, a sample of the Twitter replica.