66 lines
4 KiB
Markdown
66 lines
4 KiB
Markdown
# ao3-styles
|
|
|
|
A few style templates and models I'm using for [Work Skins](https://archiveofourown.org/admin_posts/1370) in my AO3 profile. They are built on top of the site's default "Basic" style.
|
|
|
|
Styles here cover primarily three aspects:
|
|
|
|
* Supplementing styles (eg.: cursive font) and typographical effects (indentation, small-caps, etc).
|
|
* Prefering Libre / free resources (eg.: Liberation fonts before Microsoft's fonts).
|
|
* Adding styles that emphasize a 1/3rd or 2/3rd column design (tables, floatboxes, etc).
|
|
|
|
There is a lot of repetition and granularity in the templates, not beause of themselves but because AO3 (as of this last push) does *not* support ``<tag style="...">`` or [Data Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/data-*), thus personalizing style in AO3 requires a level of CSS involvement and granularity not too dissimilar to that of CSS frameworks like Tailwind. As of 2025-05 [I've already officiated AO3](https://fandom.ink/@VeniaSilente/114492965701227802) on ways to fix this issue.
|
|
|
|
|
|
## Installation
|
|
|
|
Create a new CSS file and concat or copy over the styles from the files you want.
|
|
|
|
Copy the resulting file into a named Work Skin. Adjust as needed. Take note that the AO3 parser might arbitrarily remove some elements, according to what support for CSS is like in a given year and month.
|
|
|
|
AO3's parser will automatically prepend each style with the prerequisite ``#workskin`` element.
|
|
|
|
## Usage
|
|
|
|
Decorate the elements of the chapter's HTML with the styles as needed. The [official AO3 FAQ on Work Skins](https://archiveofourown.org/faq/tutorial-creating-a-work-skin?language_id=en) covers the overall procedure.
|
|
|
|
## Contents
|
|
|
|
* [ao3-sitestyle-basicimproved.css] — General layout and typography styles used by default in my stories.
|
|
* [ao3-sitestyle-resets.css] — Construction to reset some formatting options, similar to eg.: Normalize.css.
|
|
|
|
Some important class names that are defined:
|
|
|
|
* ``print``: Applied to a ``div``, will format its children ``p`` with spacing between paragraphs, similar to a print medium.
|
|
* ``flashback`` for flashback sections, has left indent and wavy left border.
|
|
* ``epistolary`` for IU documents, has side margin and straight side borders.
|
|
* ``newspaper`` for <hX> elements with style.
|
|
* ``newsreel`` for <hX> elements with style.
|
|
* ``font-{fallback}``: styles general font fallbacks (eg.: "sans-serif") preferring Libre fonts where available. See [./Fonts.md] for more information.
|
|
* ``metric-{font}``: styles text with Libre fonts metric-compatible to proprietary fonts.
|
|
* ``reflink``: styles links so they are distinguishable when they point to select targets such as Wikipedia.
|
|
|
|
## Extensions
|
|
|
|
Each file in ``styles/`` contains a selection of styles that can be added together to realize various effects. These effects include:
|
|
|
|
* ``color-x11.css``: gives class name to X11 / SVG colours. Not needed if colour is used sparingly. (background-colors is pending). Deprecable if AO3 allows style/data-attr.
|
|
* ``dl-sidenote.css``: implements paragraph-level footnotes by styling definition lists (``<dl>``).
|
|
* ``ruby.css``: Ruby presentation fallback, obsolete since late 2023.
|
|
* ``terminal.css``: styles content as if it were computer terminal output.
|
|
* ``waapt.css``: Presentation styles inherited from my time in WAAPT, including EVIL text and Spectrumized text.
|
|
|
|
## Deprecation
|
|
|
|
As of last edit of this document, the following files and features are deprecated:
|
|
|
|
* ``ruby.css``: AO3 added native support for Ruby, making a ``span.ruby`` fallback unnecessary.
|
|
|
|
The following files or features would (hopefully) become deprecated as AO3's CSS and HTML support advances, in particular if they add support for ``style`` or ``data-*`` attributes:
|
|
|
|
* ``color-x11.css``: All the per-``<named-color>`` classes are removed, with only the ``data-color`` and ``data-bgcolor`` attribute-aware classes remaining.
|
|
* ``zlayout.css``: Exploded graularity of the ``z-index`` property. Only ``with-z`` would remain.
|
|
|
|
## License
|
|
|
|
Creative Commons **BY-NC-SA 4.0**. See [LICENSE] for details.
|
|
|