diff --git a/README.md b/README.md index 59ba310..43b529c 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,31 @@ # ao3-styles -A few basic and improved styles I'm using for Work Styles in my AO3 profile. \ No newline at end of file +A few style templates and models I'm using for Work Styles 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). + + +## Installation + +Copy [ao3-sitestyle-basicimproved.css] into a named Work Skin. + +Copy the styles you want from the various css files in [styles/]. + +Adjust as needed. + +## 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. + +## License + +Creative Commons. See [LICENSE] for details. + diff --git a/ao3-pokemon.css b/ao3-pokemon.css new file mode 100644 index 0000000..3d6106a --- /dev/null +++ b/ao3-pokemon.css @@ -0,0 +1,40 @@ +/* + * Pokémon styles + * + * This goes combined with the basicimproved base stylesheet. + * + * */ + + +/* + * Context-specific font families. + * These need to be installed by the client to work on AO3 and other platforms, otherwise they fallback to the generics added here (usually 'fantasy')*/ + +#workskin .font.Pokemon { + font-family: 'Pokemon Fire Red Regular', 'Pokemon', fantasy; +} + +/* + * Unown from: https://www.fontspace.com/unown-font-f44872 (Freeware license) + * */ +#workskin .font.Unown { + font-family: 'Unown', fantasy; +} + +#workskin .pokemon.msgbox { + margin: 0 16%; + min-width: 50%; + padding: 4pt; + background-color: #eee; + border: 4pt double #444; +} + +#workskin .pokemon.msgbox p { + width: 100%; + font-family: "Pokemon Fire Red", "Pokemon", monospace; + color: #444; +} + +#workskin .pokemon.msgbox .p:last-child::after { + content: '▼'; +} diff --git a/ao3-sitestyle-basicimproved.css b/ao3-sitestyle-basicimproved.css index 050ce58..8aabcd6 100644 --- a/ao3-sitestyle-basicimproved.css +++ b/ao3-sitestyle-basicimproved.css @@ -1,14 +1,9 @@ /* * Basic Improved - * We inherit the stuff pointed in "Basic Formatting" + * Inherits from "Basic Formatting" * - * Changes cover three aspects: - * - * * missing styles (eg.: missing font-cursive) - * * prefering Libre resources (eg.: Liberation fonts before Microsoft fonts) - * * adding styles that emphasize 2/3rds-column design - * - * Revision 1 + * Revision 3 + * 2023-02-04 * * */ @@ -21,52 +16,45 @@ text-indent: 3em; } +/* Modified to prefer libre fonts */ #workskin .dropcap { - font-family: Georgia, serif; + font-family: 'Liberation Serif', 'DejaVu Serif', Georgia, serif; font-size: 3em; } +/* Modified to prefer libre fonts */ #workskin .flashback { - font-style: italic; + font-family: 'Lato', 'Nimbus', 'Palatino', serif; + /* uncomment if desired on white background; adjust on other background colors */ + /* background-color: #efe; */ + + border-left: 8pt wavy gray; + padding-left: 12%; + /* disable (comment) the following for print versions */ + opacity: 75%; } + +/* + * Typographical Styles + * Apply to eg.:

, , etc. + * */ + +/* inherited */ #workskin .caps { font-variant-caps: small-caps; } -/* missing font-variant and decoration details - * */ #workskin .all-small-caps { font-variant-caps: all-small-caps; } -#workskin .line-decoration-solid { - text-decoration-style: solid; -} -#workskin .line-decoration-dotted { - text-decoration-style: dotted; -} - -#workskin .line-decoration-double { - text-decoration-style: double; -} - -#workskin .line-decoration-wavy { - text-decoration-style: wavy; -} - -/* - * ---- - * */ - #workskin .spoiler { background: #333; color: #333; } -/* - * a variant of "spoiler" more in line with government docs - * */ +/* More "TLA"-like version of spoiler */ #workskin .REDACTED { background: #333; color: #333; @@ -74,93 +62,237 @@ margin: auto 1em; } -#workskin .border { - border: 1px solid; +/* WAAPT's version of EVIL */ +#workskin .EVIL { + display: inline-block; + padding: auto 2em; + background-color: #333; + color: red; } - -#workskin .border-dotted { - border: 1px dotted; + +/* + * Modified to prefer libre/free distributable fonts + * + * Gentium from: https://software.sil.org/gentium/ / Debian package fonts-sil-gentium + * Libra from: https://fontlibrary.org/en/font/libra-serif-modern + * Liberation from: https://github.com/liberationfonts/liberation-fonts/releases / Debian package fonts-liberation + * DejaVu from: https://dejavu-fonts.github.io/ + * Caladea from: https://fontlibrary.org/en/font/caladea + * */ +#workskin .font-serif { + font-family: 'Gentium Plus', 'Gentium Basic', 'Libra Serif', 'Libra Serif Modern', 'Liberation Serif', 'Nimbus Roman', 'FreeSerif', 'DejaVu Serif', 'Caladea', 'Cambria', 'Tinos', 'Constantia', 'Palatino', 'Times New Roman', 'Georgia' , serif; } /* - * modified to prefer libre/free software fonts + * Modified to prefer libre/free distributable fonts + * + * Isabella from: https://fontlibrary.org/en/font/isabella-sans + * Metropolitano from: https://fontlibrary.org/en/font/metropolitano + * Gidole from: https://fontlibrary.org/en/font/gidole-regular + * Caladea from: https://fontlibrary.org/en/font/carlito + * Lucida Grande is the default font on AO3 * */ -#workskin .font-serif { - font-family: 'Liberation Serif', 'Gentium', 'Gentium Plus', 'Nimbus Roman', 'Libra Serif Modern', Cambria, Constantia, Palatino, Georgia, serif; -} - #workskin .font-sansserif { - font-family: 'Liberation Sans', 'Nimbus Sans', 'Open Sans', 'Gidole', 'Isabella Sans', 'Metropolitano', 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif; + font-family: 'Isabella Sans', 'Metropolitano', 'Gidole', 'Open Sans', 'Nimbus Sans', 'Liberation Sans', 'Libra Sans', 'DejaVu Sans', 'Charis', 'Lucida Grande', 'Carlito', 'Calibri', 'Arimo', 'Verdana', 'Helvetica', 'Arial' , sans-serif; } +/* + * Modified to prefer libre/free distributable fonts + * + * Iosevka from: https://typeof.net/Iosevka/ / Debian package fonts-iosevka + * Monoid from: https://github.com/larsenwork/monoid + * Inconsolata from: Debian package fonts-inconsolata + * */ #workskin .font-monospace { - font-family: 'Liberation Mono', 'Inconsolata', 'Source Code Pro', consolas, courier, monospace; + font-family: 'Iosevka', 'Monoid', 'Liberation Mono', 'Inconsolata', 'Source Code Pro', 'Consolas', 'Courier Prime', 'Courier New', 'Courier' , monospace; } +/* + * Modified to prefer libre/free distributable fonts + * + * Allura from: https://www.1001fonts.com/allura-font.html + * Sofia from: http://www.latinotype.com/ + * Feltpen from: https://fontlibrary.org/en/font/feltpen + * + * */ #workskin .font-cursive { - font-family: 'Cursive', 'Feltpen Regular', cursive; + font-family: 'Allura', 'Sofia Regular', 'Cursive', 'Feltpen Regular' , cursive; } +/* + * Modified to prefer libre/free distributable fonts + * + * */ #workskin .font-fantasy { font-family: fantasy; } -#workskin .font-system { +#workskin .font-system-ui { font-family: system-ui; } +/* relative sizes */ #workskin .font-big { font-size: 120%; } -#workskin .font-small { +#workskin .font-x-big { + font-size: 175%; +} + +#workskin .font-little { font-size: 80%; } -/* - * sometimes this is needed explicitly - * */ -#workskin .align-left { - text-align: right; +#workskin .font-x-little { + font-size: 65%; } +/* absolute sizes */ +#workskin .font-large { + font-size: large; +} + +#workskin .font-x-large { + font-size: x-large; +} + +#workskin .font-small { + font-size: small; +} + +#workskin .font-x-small { + font-size: x-small; +} + +/* relative keywords */ + +#workskin .font-larger { + font-size: larger; +} + +#workskin .font-smaller { + font-size: smaller; +} + + + + +/* + * heading sections + * apply as eg.:

+ * */ + +#workskin h3.title.shadow1 { + text-shadow: 2pt -3pt gray; +} + +#workskin h3.title.shadow2 { + text-shadow: -2pt -2pt #bee; +} + +#workskin h3.title.newspaper { + /* pending */ +} + +/* + * Text and Element Layout, Ordering + * */ + +#workskin .invisible { + visibility: hidden; +} + + +/* sometimes this is needed explicitly */ +#workskin .align-left { + text-align: left; +} + +/* inherited */ #workskin .align-right { text-align: right; } +/* inherited */ #workskin .align-center { text-align: center; } +/* inherited */ #workskin .align-justify { text-align: justify; } +#workskin .valign-top { + vertical-align: top; +} + +#workskin .valign-middle { + vertical-align: middle; +} + +#workskin .valign-bottom { + vertical-align: bottom; +} + +/* + * Line and Border markers + * */ + +#workskin .border { + border: 2px solid; +} + +#workskin .border-dotted { + border: 2px dotted; +} + +#workskin .border-dashed { + border: 2px dashed; +} + +#workskin table.border1 { + border: 2px solid #222; + outline: 1px solid #222; +} + +#workskin table.border2 { + border: 4px outset #442; + outline: 1px solid #442; +} + #workskin hr.third { - width: 33%; - margin: auto; + width: 33%; + margin: auto; } #workskin hr.half { - width: 50%; - margin: auto; + width: 50%; + margin: auto; } +#workskin hr.twothirds { + width: 66; + margin: auto; +} + +/* inherited with name "full" rather than eg.: "auto" */ #workskin hr.full { - width: auto; - margin: auto; + width: auto; + margin: auto; } #workskin hr.solid { - border-style: solid; + border-style: solid; } #workskin hr.dashed { - border-style: dashed; + border-style: dashed; } #workskin hr.double { - border-style: double; + border-style: double; } /* @@ -168,234 +300,53 @@ * The listing from AO3 is supplemented with some SVG/X11 colornames. * Priority is given to colors that distinguish themselves well on standard white-background pages. * - * Official listing from https://en.wikipedia.org/wiki/X11_color_names + * Official listing from: + * * https://en.wikipedia.org/wiki/X11_color_names + * * https://en.wikipedia.org/wiki/X11_color_names * */ -#workskin .font-red { +#workskin .color-red { color: red; } -#workskin .font-orange { +#workskin .color-orange { color: orange; } -#workskin .font-yellow { +#workskin .color-yellow { color: yellow; } -#workskin .font-green { +#workskin .color-green { color: green; } -#workskin .font-blue { +#workskin .color-blue { color: blue; } -#workskin .font-purple { +#workskin .color-purple { color: purple; } -#workskin .font-white { +#workskin .color-white { color: white; } -#workskin .font-black { +#workskin .color-black { color: black; } -#workskin .font-pink { +#workskin .color-pink { color: pink; } -#workskin .font-teal { +#workskin .color-teal { color: #008282; } -#workskin .font-redbrown { - color: #a15000; -} -#workskin .font-cherryred { - color: #e00707; -} - -#workskin .font-brickred { - color: #a10000; -} - -#workskin .font-dimorange { - color: #f2a400; -} - -#workskin .font-murkyyellow { - color: #a1a100; -} - -#workskin .font-jade { - color: #4ac925; -} - -#workskin .font-dimgreen { - color: #008141; -} - -#workskin .font-leafgreen { - color: #1f9400; -} - -#workskin .font-darkolive { - color: #416600; -} - -#workskin .font-dimblue { - color: #005682; -} - -#workskin .font-midblue { - color: #0715cd; -} - -#workskin .font-mediumskyblue { - color: #00d5f2; -} - -#workskin .font-darknavy { - color: #000056; -} - -#workskin .font-lightpurple { - color: #f141ef; -} - -#workskin .font-midviolet { - color: #b536da; -} - -#workskin .font-verydarkpurple { - color: #2b0057; -} - -#workskin .font-darkplum { - color: #6a006a; -} - -#workskin .font-darkmaroon { - color: #77003c; -} - -#workskin .font-reallydarkgray { - color: #626262; -} - -#workskin .font-x11-bisque { - color: bisque; -} - -#workskin .font-x11-brown { - color: brown; -} - -#workskin .font-x11-chocolate { - color: chocolate; -} - -#workskin .font-x11-coral { - color: coral; -} - -#workskin .font-x11-crimson { - color: crimson; -} - -#workskin .font-x11-forestgreen { - color: forestgreen; -} - -#workskin .font-x11-fuchsia { - color: fuchsia; -} - -#workskin .font-x11-gold { - color: gold; -} - -#workskin .font-x11-goldenrod { - color: goldenrod; -} - -#workskin .font-x11-indigo { - color: indigo; -} - -#workskin .font-x11-lime { - color: lime; -} - -#workskin .font-x11-magenta { - color: magenta; -} - -#workskin .font-x11-olive { - color: olive; -} - -#workskin .font-x11-orange { - color: orange; -} - -#workskin .font-x11-orangered { - color: orangered; -} - -#workskin .font-x11-peru { - color: peru; -} - -#workskin .font-x11-plum { - color: plum; -} - -#workskin .font-x11-purple { - color: purple; -} - -#workskin .font-x11-sandybrown { - color: sandybrown; -} - -#workskin .font-x11-seagreen { - color: seagreen; -} - -#workskin .font-x11-sienna { - color: sienna; -} - -#workskin .font-x11-silver { - color: silver; -} - -#workskin .font-x11-steelblue { - color: steelblue; -} - -#workskin .font-x11-teal { - color: teal; -} - -#workskin .font-x11-violet { - color: violet; -} - -#workskin .font-x11-yellow { - color: yellow; -} - -/** - * ---- - * */ - -/** +/* * layout for boxes. * Boxes are floated to be either the leftmost 1/3rd of content, or the rightmost 1/3rd of content, with an inner padding. * @@ -427,5 +378,50 @@ #workskin table tr th.cell-important1 { background-color: #ddd; - } + +/* For "visible" tabs */ +#workskin span.tab { + display: inline-block; + width: 4em; +} + +#workskin .Newsreel { +} + +/* + * apply to eg.:
+ * then add content inside an *inner*
 
+ * */
+#workskin .Terminal {
+}
+
+#workskin .Terminal.vt100 {
+}
+
+#workskin .Terminal.Matrix {
+	color: green;
+	font-weight: 500;
+}
+
+
+#workskin .initial {
+}
+
+
+#workskin .line-decoration-solid {
+  text-decoration-style: solid;
+}
+#workskin .line-decoration-dotted {
+  text-decoration-style: dotted;
+}
+
+#workskin .line-decoration-double {
+  text-decoration-style: double;
+}
+
+#workskin .line-decoration-wavy {
+  text-decoration-style: wavy;
+}
+
+
diff --git a/styles/color-x11.css b/styles/color-x11.css
new file mode 100644
index 0000000..156b747
--- /dev/null
+++ b/styles/color-x11.css
@@ -0,0 +1,156 @@
+/*
+ * Extended colors are the result of merging specifications from HTML 4.01, CSS 2.0, SVG 1.0 and CSS3 User Interfaces (CSS3 UI).
+ * */
+
+#workskin .color-x11-beige {
+  color: beige;
+}
+
+#workskin .color-x11-bisque {
+  color: bisque;
+}
+
+#workskin .color-x11-brown {
+  color: brown;
+}
+
+#workskin .color-x11-chocolate {
+  color: chocolate;
+}
+
+#workskin .color-x11-coral {
+  color: coral;
+}
+
+#workskin .color-x11-crimson {
+  color: crimson;
+}
+
+#workskin .color-x11-darkkhaki {
+  color: darkkhaki;
+}
+
+#workskin .color-x11-darkorchid {
+  color: darkorchid;
+}
+
+#workskin .color-x11-deeppink {
+  color: deeppink;
+}
+
+#workskin .color-x11-forestgreen {
+  color: forestgreen;
+}
+
+#workskin .color-x11-firebrick {
+  color: firebrick;
+}
+
+#workskin .color-x11-fuchsia {
+  color: fuchsia;
+}
+
+#workskin .color-x11-gold {
+  color: gold;
+}
+
+#workskin .color-x11-goldenrod {
+  color: goldenrod;
+}
+
+#workskin .color-x11-hotpink {
+  color: hotpink;
+}
+
+#workskin .color-x11-khaki {
+  color: khaki;
+}
+
+#workskin .color-x11-indigo {
+  color: indigo;
+}
+
+#workskin .color-x11-lime {
+  color: lime;
+}
+
+#workskin .color-x11-limegreen {
+  color: limegreen;
+}
+
+#workskin .color-x11-magenta {
+  color: magenta;
+}
+
+#workskin .color-x11-mintcream {
+  color: mintcream;
+}
+
+#workskin .color-x11-olive {
+  color: olive;
+}
+
+#workskin .color-x11-orange {
+  color: orange;
+}
+
+#workskin .color-x11-orangered {
+  color: orangered;
+}
+
+#workskin .color-x11-peru {
+  color: peru;
+}
+
+#workskin .color-x11-plum {
+  color: plum;
+}
+
+#workskin .color-x11-purple {
+  color: purple;
+}
+
+#workskin .color-x11-royalblue {
+  color: royalblue;
+}
+
+#workskin .color-x11-salmon {
+  color: salmon;
+}
+
+#workskin .color-x11-sandybrown {
+  color: sandybrown;
+}
+
+#workskin .color-x11-seagreen {
+  color: seagreen;
+}
+
+#workskin .color-x11-sienna {
+  color: sienna;
+}
+
+#workskin .color-x11-silver {
+  color: silver;
+}
+
+#workskin .color-x11-skyblue {
+  color: skyblue;
+}
+
+#workskin .color-x11-steelblue {
+  color: steelblue;
+}
+
+#workskin .color-x11-teal {
+  color: teal;
+}
+
+#workskin .color-x11-violet {
+  color: violet;
+}
+
+#workskin .color-x11-yellow {
+  color: yellow;
+}
+
diff --git a/styles/dl-sidenote.css b/styles/dl-sidenote.css
new file mode 100644
index 0000000..11a9532
--- /dev/null
+++ b/styles/dl-sidenote.css
@@ -0,0 +1,35 @@
+/*
+ * dl-sidenote.css
+ * 
+ * Implements paragraph-level sidenotes.
+ * 
+

Content...[ref]

+
[ref]
Description
+
+ * + */ + +#workskin dl.sidenote { + display: grid; + grid-column-gap: 0; + grid-template-columns: 1fr 8fr; + margin-left: 50%; + margin-bottom: 2ex; + border-top: 2pt solid gray; + font-size: 67%; +} + +#workskin dl.sidenote > dt { + margin: 1ex 0; + vertical-align: middle; + text-decoration: underline; +} + +#workskin dl.sidenote > dd { + display: inline-block; + margin-left: 0; + padding-left: 0; + right: 0; + text-align: left; +} + diff --git a/styles/ruby.css b/styles/ruby.css new file mode 100644 index 0000000..964b9ff --- /dev/null +++ b/styles/ruby.css @@ -0,0 +1,49 @@ +/* + * ruby.css + * + * Ruby / Furigana Emulation + * + * As of 2022-12, AO3 does not support the HTML tag, which is sanitized out of the usertext. + * + * To emulate ruby support in your usertext, build the HTML as follows: + + * from: + Text Annotation + * to: + Text Annotation + + * See [1] for rationale and [2] for a progress report. + * + * [1] https://old.reddit.com/r/AO3/comments/qpn48k/ive_requested_ao3_to_add_support_for_furigana/ + * [2] https://fandom.ink/@VeniaSilente/107174379581940635 + * + * See also [3] for an alternative implementation. This stylesheet partially uses it as a styling source. + * + * [3] https://old.reddit.com/r/AO3/comments/10e3js0/tired_of_not_being_able_to_use_furigana_on_ao3_be/ + * */ + +#workskin span.ruby, +#workskin ruby { + display: inline-block; +} + +#workskin span.ruby > span.rt +/*, #workskin ruby > rt*/ { + font-family: sans-serif; + font-size: 65%; + color: gray; +} + +#workskin span.ruby > span.rt { + margin-left: 1ex; + margin-right: 1ex; +} + +#workskin span.rt:before { + content: "\28"; +} + +#workskin span.rt:after { + content: "\29"; +} +