diff --git a/README.md b/README.md index 43b529c..442c1a2 100644 --- a/README.md +++ b/README.md @@ -11,9 +11,9 @@ Styles here cover primarily three aspects: ## Installation -Copy [ao3-sitestyle-basicimproved.css] into a named Work Skin. +Create a new CSS file and ``cat`` or copy over the styles from the files you want. -Copy the styles you want from the various css files in [styles/]. +Copy the resulting file into a named Work Skin. Adjust as needed. @@ -23,9 +23,32 @@ Decorate the elements of the chapter's HTML with the styles as needed. The [offi ## Contents -* [ao3-sitestyle-basicimproved.css] — General layout and typography styles. +* [ao3-sitestyle-basicimproved.css] — General layout and typography styles used by default in my stories. + +Some impirtant class names that are defined: + +* ``print``: Applied to a ``div``, will format its children ``p`` with spacing between paragraphs. +* ``flashback`` for flashback sections, has left indent and wavy left border. +* ``epistolary`` for IU documents, has side margin and straight side borders. +* ``REDACTED`` for spans of lines and sections that are redacted over. +* ``EVIL`` for spans of red-speak as it's used in WAAPT. +* ``newspaper`` for elements with style. +* ``newsreel`` for elements with style. +* ``font-{fallback}``: styles general font fallbacks (eg.: "sans-serif") preferring Libre fonts where available. +* ``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) +* ``dl-sidenote.css``: implements paragraph-level footnotes by styling definition lists (``
``). +* ``ruby.css``: Ruby presentation fallback, obsolete since late 2023. +* ``terminal.css``: styles content as if it were computer terminal output. + ## License -Creative Commons. See [LICENSE] for details. +Creative Commons **BY-NC-SA 4.0**. See [LICENSE] for details. diff --git a/ao3-pokemon.css b/ao3-pokemon.css index 3d6106a..13bb1c0 100644 --- a/ao3-pokemon.css +++ b/ao3-pokemon.css @@ -11,30 +11,33 @@ * 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; + font-family: 'Pokemon Fire Red Regular', 'Pokemon', monospace; } /* * Unown from: https://www.fontspace.com/unown-font-f44872 (Freeware license) * */ #workskin .font.Unown { - font-family: 'Unown', fantasy; + font-family: 'Unown Regular', 'Unown', fantasy; } #workskin .pokemon.msgbox { - margin: 0 16%; - min-width: 50%; - padding: 4pt; + margin: 0 24%; + min-width: 30%; + padding: 2pt; background-color: #eee; border: 4pt double #444; } #workskin .pokemon.msgbox p { + padding: 0 auto; width: 100%; - font-family: "Pokemon Fire Red", "Pokemon", monospace; + font-family: "Pokemon Fire Red Regular", "Pokemon", monospace; color: #444; } -#workskin .pokemon.msgbox .p:last-child::after { - content: '▼'; +/* little prompt-thingy ▼ at the end of messageboxes */ +#workskin .pokemon.msgbox p:last-child::after { + margin-left: 8pt; + content: "\25bc "; } diff --git a/ao3-sitestyle-basicimproved.css b/ao3-sitestyle-basicimproved.css index 8aabcd6..a5bdd96 100644 --- a/ao3-sitestyle-basicimproved.css +++ b/ao3-sitestyle-basicimproved.css @@ -3,55 +3,294 @@ * Inherits from "Basic Formatting" * * Revision 3 - * 2023-02-04 + * 2024-02-29 * * */ +#workskin span.htab { + display: inline-block; + width: 4ex; +} + +#workskin span.vtab { + display: inline-block; + height: 4ex; +} + +#workskin p.print { + white-space: pre-line; +} + +#workskin div.print p { + white-space: pre-line; +} + #workskin .indent { - padding: 0 5em 0 5em; + text-indent: 3em; +} + +#workskin .indent-percent { + text-indent: 12%; } #workskin .book { - margin: 0 auto; - text-indent: 3em; + margin: 0 auto; + text-indent: 3em; } -/* Modified to prefer libre fonts */ -#workskin .dropcap { - font-family: 'Liberation Serif', 'DejaVu Serif', Georgia, serif; - font-size: 3em; +/* + * Modified to prefer libre/free distributable fonts. + * + * Due to AO3 limitations, these fonts must be installed user-side. + * + * 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 fonts */ -#workskin .flashback { - 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%; +/* + * Modified to prefer libre/free distributable fonts. + * + * Due to AO3 limitations, these fonts must be installed user-side. + * + * 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-sansserif { + 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. + * + * Due to AO3 limitations, these fonts must be installed user-side. + * + * 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: 'Iosevka', 'Monoid', 'Liberation Mono', 'Inconsolata', 'Source Code Pro', 'Consolas', 'Courier Prime', 'Courier New', 'Courier' + , monospace; +} + +/* + * Modified to prefer libre/free distributable fonts. + * + * Due to AO3 limitations, these fonts must be installed user-side. + * + * 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: 'Allura', 'Sofia Regular', 'Cursive', 'Feltpen Regular' + , cursive; +} + +/* + * Modified to prefer libre/free distributable fonts. + * + * Due to AO3 limitations, these fonts must be installed user-side. + * + * */ +#workskin .font-fantasy { + font-family: fantasy; +} + +#workskin .font-system-ui { + font-family: system-ui; +} + +/* Metric compatibility; Prefers libre fonts */ +#workskin .metric-arial { + font-family: 'Liberation Sans', 'Albany', 'Arimo', 'Arial', sans-serif; +} + +#workskin .metric-courier { + font-family: 'Nimbus Mono', 'Liberation Mono', 'Cumberland', 'TeX Gyre Cursor', 'Cousine', 'Courier New', monospace; +} + +#workskin .metric-helvetica { + font-family: 'Nimbus Sans', 'FreeSans', 'Helvetica', sans-serif; +} + +#workskin .metric-times { + font-family: 'TeX Gyre Termes', 'Nimbus Roman', 'Tinos', 'Times', serif; +} + +#workskin .metric-cambria { + font-family: 'Caladea', 'Cambria', sans-serif; +} + +#workskin .metric-calibri { + font-family: 'Carlito', 'Calibri', serif; +} + + /* * Typographical Styles * Apply to eg.:

, , etc. + * + * The section order is: size, color, weight, form variant, stretch, etc. * */ +/* relative sizes */ +#workskin .font-big { + font-size: 120%; +} +#workskin .font-x-big { + font-size: 155%; +} +#workskin .font-little { + font-size: 85%; +} +#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; +} + +/* + * font colors + * 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 + * * https://en.wikipedia.org/wiki/X11_color_names + * */ + +#workskin .color-red { + color: red; +} + +#workskin .color-orange { + color: orange; +} + +#workskin .color-yellow { + color: yellow; +} + +#workskin .color-green { + color: green; +} + +#workskin .color-blue { + color: blue; +} + +#workskin .color-purple { + color: purple; +} +/* intentionally different */ +#workskin .color-white { + color: #eee; +} +/* intentionally different */ +#workskin .color-black { + color: #111; +} + +#workskin .color-pink { + color: pink; +} + +#workskin .color-teal { + color: #008282; +} + +#workskin .fontweight-normal { + font-weight: normal; +} +#workskin .fontweight-lighter { + font-weight: lighter; +} +#workskin .fontweight-bolder { + font-weight: bolder; +} + +#workskin .fontstretch-normal { + font-stretch: normal; +} +#workskin .fontstretch-condensed { + font-stretch: condensed; +} +#workskin .fontstretch-expanded { + font-stretch: expanded; +} + + /* inherited */ + #workskin .caps { - font-variant-caps: small-caps; + font-variant-caps: small-caps; } #workskin .all-small-caps { - font-variant-caps: all-small-caps; + font-variant-caps: all-small-caps; } #workskin .spoiler { - background: #333; - color: #333; + background: #333; + color: #333; +} + +/* Prefers libre fonts */ +#workskin .dropcap { + font-family: 'Liberation Serif', 'DejaVu Serif', 'Bitstream Serif', Georgia, serif; + font-size: 3em; +} + +/* + * Narrative layout sections + * */ + + +/* Prefers libre fonts */ +#workskin .flashback { + font-family: 'Lato', 'Nimbus', 'Palatino', serif; + + border-left: 8pt wavy gray; + padding-left: 12%; + /* disable (comment) the following for print versions */ + opacity: 75%; +} + +#workskin .epistolary { + margin-left: 2ex; + margin-right: 2ex; } /* More "TLA"-like version of spoiler */ @@ -70,112 +309,6 @@ color: red; } -/* - * 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 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-sansserif { - 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: '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: 'Allura', 'Sofia Regular', 'Cursive', 'Feltpen Regular' , cursive; -} - -/* - * Modified to prefer libre/free distributable fonts - * - * */ -#workskin .font-fantasy { - font-family: fantasy; -} - -#workskin .font-system-ui { - font-family: system-ui; -} - -/* relative sizes */ -#workskin .font-big { - font-size: 120%; -} - -#workskin .font-x-big { - font-size: 175%; -} - -#workskin .font-little { - font-size: 80%; -} - -#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; -} - - /* @@ -273,7 +406,7 @@ } #workskin hr.twothirds { - width: 66; + width: 66%; margin: auto; } @@ -295,56 +428,6 @@ border-style: double; } -/* - * font colors - * 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 - * * https://en.wikipedia.org/wiki/X11_color_names - * */ - -#workskin .color-red { - color: red; -} - -#workskin .color-orange { - color: orange; -} - -#workskin .color-yellow { - color: yellow; -} - -#workskin .color-green { - color: green; -} - -#workskin .color-blue { - color: blue; -} - -#workskin .color-purple { - color: purple; -} - -#workskin .color-white { - color: white; -} - -#workskin .color-black { - color: black; -} - -#workskin .color-pink { - color: pink; -} - -#workskin .color-teal { - color: #008282; -} - /* * layout for boxes. @@ -389,21 +472,6 @@ #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 {
 }
@@ -424,4 +492,14 @@
   text-decoration-style: wavy;
 }
 
+#workskin a.reflink[href*="wikipedia.org/"] {
+	text-decoration-style: double;
+}
 
+#workskin a.reflink[href*="veniasilente.user.tropi.us/"] {
+	color: forestgreen;
+}
+
+#workskin a.reflink[href*="suoceverse.tropi.us/"] {
+	color: green;
+}
diff --git a/styles/layout.css b/styles/layout.css
new file mode 100644
index 0000000..3d70745
--- /dev/null
+++ b/styles/layout.css
@@ -0,0 +1,99 @@
+
+#workskin .layout-center {
+	margin: 0 auto;
+}
+
+#workskin .layout-vcenter {
+	margin: auto 0;
+}
+
+#workskin .layout-center.w80 {
+	margin: 0 auto;
+	max-width: 80%;
+	width: 80%;
+}
+
+#workskin .layout-center.w75 {
+	margin: 0 auto;
+	max-width: 75%;
+	width: 75%;
+}
+
+#workskin .float-clear 
+, #workskin .box-clear {
+	float: clear;
+}
+
+#workskin .float-left, #workskin .box-left {
+  float: left;
+  max-width: 33%;
+  margin-right: 0.8ex;
+}
+
+#workskin .float-right, #workskin .box-right {
+  float: right;
+  max-width: 33%;
+  margin-left: 0.8ex;
+}
+
+#workskin .float-left.box-border, #workskin .box-left.box-border {
+  border-right: 0.22ex dotted #333;
+}
+
+#workskin .float-right.box-border, #workskin .box-right.box-border {
+  border-left: 0.22ex dotted #333;
+}
+
+
+/* 
+ * table layout 
+ * */
+
+#workskin table.fixed {
+	table-layout: fixed;
+}
+
+#workskin table.x-wide {
+	width: 95%;
+}
+
+#workskin table.wide {
+	width: 75%;
+}
+
+#workskin table.narrow {
+	width: 55%;
+}
+
+#workskin table.x-narrow {
+	width: 35%;
+}
+
+#workskin table > col.rownum {
+	color: #ccc;
+	background-color: #222;
+	text-align: right;
+	padding-right: 0.5ex;
+	font-family: monospace;
+}
+
+/* 
+ * table zebraing 
+ * */
+
+
+#workskin table.zebra {
+}
+
+#workskin table.zebra > tbody > tr:nth-child(odd) > td {
+	background-color: rgba(242, 220, 220, 0.56);
+}
+
+#workskin table.zebra > tbody > tr:nth-child(even) > td {
+	background-color: rgba(220, 242, 242, 0.56);
+}
+
+#workskin table.zebra > tbody > tr > td.unzebra {
+	background-color: reset;
+}
+
diff --git a/styles/ruby.css b/styles/ruby.css
index 964b9ff..4796ae4 100644
--- a/styles/ruby.css
+++ b/styles/ruby.css
@@ -3,6 +3,8 @@
  * 
  * Ruby / Furigana Emulation
  * 
+ * As of 2023-10, AO3 has now added support for , making the span fallback obsolete. It is maintained here for posterity.
+ * 
  * 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:
@@ -22,13 +24,13 @@
  * [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 {
+#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;