Splits main file for layout and color styles; updates Ruby fallback to official.
This commit is contained in:
parent
f177723c03
commit
b1d96949b1
5 changed files with 414 additions and 209 deletions
31
README.md
31
README.md
|
|
@ -11,9 +11,9 @@ Styles here cover primarily three aspects:
|
||||||
|
|
||||||
## Installation
|
## 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.
|
Adjust as needed.
|
||||||
|
|
||||||
|
|
@ -23,9 +23,32 @@ Decorate the elements of the chapter's HTML with the styles as needed. The [offi
|
||||||
|
|
||||||
## Contents
|
## 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 <hX> elements with style.
|
||||||
|
* ``newsreel`` for <hX> 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 (``<dl>``).
|
||||||
|
* ``ruby.css``: Ruby presentation fallback, obsolete since late 2023.
|
||||||
|
* ``terminal.css``: styles content as if it were computer terminal output.
|
||||||
|
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
Creative Commons. See [LICENSE] for details.
|
Creative Commons **BY-NC-SA 4.0**. See [LICENSE] for details.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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')*/
|
* 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 {
|
#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)
|
* Unown from: https://www.fontspace.com/unown-font-f44872 (Freeware license)
|
||||||
* */
|
* */
|
||||||
#workskin .font.Unown {
|
#workskin .font.Unown {
|
||||||
font-family: 'Unown', fantasy;
|
font-family: 'Unown Regular', 'Unown', fantasy;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workskin .pokemon.msgbox {
|
#workskin .pokemon.msgbox {
|
||||||
margin: 0 16%;
|
margin: 0 24%;
|
||||||
min-width: 50%;
|
min-width: 30%;
|
||||||
padding: 4pt;
|
padding: 2pt;
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
border: 4pt double #444;
|
border: 4pt double #444;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workskin .pokemon.msgbox p {
|
#workskin .pokemon.msgbox p {
|
||||||
|
padding: 0 auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-family: "Pokemon Fire Red", "Pokemon", monospace;
|
font-family: "Pokemon Fire Red Regular", "Pokemon", monospace;
|
||||||
color: #444;
|
color: #444;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workskin .pokemon.msgbox .p:last-child::after {
|
/* little prompt-thingy ▼ at the end of messageboxes */
|
||||||
content: '▼';
|
#workskin .pokemon.msgbox p:last-child::after {
|
||||||
|
margin-left: 8pt;
|
||||||
|
content: "\25bc ";
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,12 +3,34 @@
|
||||||
* Inherits from "Basic Formatting"
|
* Inherits from "Basic Formatting"
|
||||||
*
|
*
|
||||||
* Revision 3
|
* 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 {
|
#workskin .indent {
|
||||||
padding: 0 5em 0 5em;
|
text-indent: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#workskin .indent-percent {
|
||||||
|
text-indent: 12%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workskin .book {
|
#workskin .book {
|
||||||
|
|
@ -16,31 +38,222 @@
|
||||||
text-indent: 3em;
|
text-indent: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Modified to prefer libre fonts */
|
/*
|
||||||
#workskin .dropcap {
|
* Modified to prefer libre/free distributable fonts.
|
||||||
font-family: 'Liberation Serif', 'DejaVu Serif', Georgia, serif;
|
*
|
||||||
font-size: 3em;
|
* 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 {
|
* Modified to prefer libre/free distributable fonts.
|
||||||
font-family: 'Lato', 'Nimbus', 'Palatino', serif;
|
*
|
||||||
/* uncomment if desired on white background; adjust on other background colors */
|
* Due to AO3 limitations, these fonts must be installed user-side.
|
||||||
/* background-color: #efe; */
|
*
|
||||||
|
* Isabella from: https://fontlibrary.org/en/font/isabella-sans
|
||||||
border-left: 8pt wavy gray;
|
* Metropolitano from: https://fontlibrary.org/en/font/metropolitano
|
||||||
padding-left: 12%;
|
* Gidole from: https://fontlibrary.org/en/font/gidole-regular
|
||||||
/* disable (comment) the following for print versions */
|
* Caladea from: https://fontlibrary.org/en/font/carlito
|
||||||
opacity: 75%;
|
* 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
|
* Typographical Styles
|
||||||
* Apply to eg.: <p class="name">, <span class="name">, etc.
|
* Apply to eg.: <p class="name">, <span class="name">, 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 */
|
/* inherited */
|
||||||
|
|
||||||
#workskin .caps {
|
#workskin .caps {
|
||||||
font-variant-caps: small-caps;
|
font-variant-caps: small-caps;
|
||||||
}
|
}
|
||||||
|
|
@ -54,6 +267,32 @@
|
||||||
color: #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 */
|
/* More "TLA"-like version of spoiler */
|
||||||
#workskin .REDACTED {
|
#workskin .REDACTED {
|
||||||
background: #333;
|
background: #333;
|
||||||
|
|
@ -70,112 +309,6 @@
|
||||||
color: red;
|
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 {
|
#workskin hr.twothirds {
|
||||||
width: 66;
|
width: 66%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -295,56 +428,6 @@
|
||||||
border-style: double;
|
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.
|
* layout for boxes.
|
||||||
|
|
@ -389,21 +472,6 @@
|
||||||
#workskin .Newsreel {
|
#workskin .Newsreel {
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
* apply to eg.: <div>
|
|
||||||
* then add content inside an *inner* <pre>
|
|
||||||
* */
|
|
||||||
#workskin .Terminal {
|
|
||||||
}
|
|
||||||
|
|
||||||
#workskin .Terminal.vt100 {
|
|
||||||
}
|
|
||||||
|
|
||||||
#workskin .Terminal.Matrix {
|
|
||||||
color: green;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#workskin .initial {
|
#workskin .initial {
|
||||||
}
|
}
|
||||||
|
|
@ -424,4 +492,14 @@
|
||||||
text-decoration-style: wavy;
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
99
styles/layout.css
Normal file
99
styles/layout.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -3,6 +3,8 @@
|
||||||
*
|
*
|
||||||
* Ruby / Furigana Emulation
|
* Ruby / Furigana Emulation
|
||||||
*
|
*
|
||||||
|
* As of 2023-10, AO3 has now added support for <ruby>, making the span fallback obsolete. It is maintained here for posterity.
|
||||||
|
*
|
||||||
* As of 2022-12, AO3 does not support the <ruby> HTML tag, which is sanitized out of the usertext.
|
* As of 2022-12, AO3 does not support the <ruby> HTML tag, which is sanitized out of the usertext.
|
||||||
*
|
*
|
||||||
* To emulate ruby support in your usertext, build the HTML as follows:
|
* 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/
|
* [3] https://old.reddit.com/r/AO3/comments/10e3js0/tired_of_not_being_able_to_use_furigana_on_ao3_be/
|
||||||
* */
|
* */
|
||||||
|
|
||||||
#workskin span.ruby,
|
#workskin span.ruby
|
||||||
#workskin ruby {
|
/* , #workskin ruby */
|
||||||
|
{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workskin span.ruby > span.rt
|
#workskin span.ruby > span.rt
|
||||||
/*, #workskin ruby > rt*/ {
|
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
font-size: 65%;
|
font-size: 65%;
|
||||||
color: gray;
|
color: gray;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue