Reorganized styles in folders
This commit is contained in:
parent
71cad68b79
commit
f177723c03
6 changed files with 564 additions and 260 deletions
30
README.md
30
README.md
|
|
@ -1,3 +1,31 @@
|
||||||
# ao3-styles
|
# ao3-styles
|
||||||
|
|
||||||
A few basic and improved styles I'm using for Work Styles in my AO3 profile.
|
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.
|
||||||
|
|
||||||
|
|
|
||||||
40
ao3-pokemon.css
Normal file
40
ao3-pokemon.css
Normal file
|
|
@ -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: '▼';
|
||||||
|
}
|
||||||
|
|
@ -1,14 +1,9 @@
|
||||||
/*
|
/*
|
||||||
* Basic Improved
|
* Basic Improved
|
||||||
* We inherit the stuff pointed in "Basic Formatting"
|
* Inherits from "Basic Formatting"
|
||||||
*
|
*
|
||||||
* Changes cover three aspects:
|
* Revision 3
|
||||||
*
|
* 2023-02-04
|
||||||
* * 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
|
|
||||||
*
|
*
|
||||||
* */
|
* */
|
||||||
|
|
||||||
|
|
@ -21,52 +16,45 @@
|
||||||
text-indent: 3em;
|
text-indent: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Modified to prefer libre fonts */
|
||||||
#workskin .dropcap {
|
#workskin .dropcap {
|
||||||
font-family: Georgia, serif;
|
font-family: 'Liberation Serif', 'DejaVu Serif', Georgia, serif;
|
||||||
font-size: 3em;
|
font-size: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Modified to prefer libre fonts */
|
||||||
#workskin .flashback {
|
#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.: <p class="name">, <span class="name">, etc.
|
||||||
|
* */
|
||||||
|
|
||||||
|
/* inherited */
|
||||||
#workskin .caps {
|
#workskin .caps {
|
||||||
font-variant-caps: small-caps;
|
font-variant-caps: small-caps;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* missing font-variant and decoration details
|
|
||||||
* */
|
|
||||||
#workskin .all-small-caps {
|
#workskin .all-small-caps {
|
||||||
font-variant-caps: 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 {
|
#workskin .spoiler {
|
||||||
background: #333;
|
background: #333;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/* More "TLA"-like version of spoiler */
|
||||||
* a variant of "spoiler" more in line with government docs
|
|
||||||
* */
|
|
||||||
#workskin .REDACTED {
|
#workskin .REDACTED {
|
||||||
background: #333;
|
background: #333;
|
||||||
color: #333;
|
color: #333;
|
||||||
|
|
@ -74,93 +62,237 @@
|
||||||
margin: auto 1em;
|
margin: auto 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workskin .border {
|
/* WAAPT's version of EVIL */
|
||||||
border: 1px solid;
|
#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 {
|
#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 {
|
#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 {
|
#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 {
|
#workskin .font-fantasy {
|
||||||
font-family: fantasy;
|
font-family: fantasy;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workskin .font-system {
|
#workskin .font-system-ui {
|
||||||
font-family: system-ui;
|
font-family: system-ui;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* relative sizes */
|
||||||
#workskin .font-big {
|
#workskin .font-big {
|
||||||
font-size: 120%;
|
font-size: 120%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workskin .font-small {
|
#workskin .font-x-big {
|
||||||
|
font-size: 175%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#workskin .font-little {
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
#workskin .font-x-little {
|
||||||
* sometimes this is needed explicitly
|
font-size: 65%;
|
||||||
* */
|
|
||||||
#workskin .align-left {
|
|
||||||
text-align: right;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 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.: <h3 class="class1 class2">
|
||||||
|
* */
|
||||||
|
|
||||||
|
#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 {
|
#workskin .align-right {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* inherited */
|
||||||
#workskin .align-center {
|
#workskin .align-center {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* inherited */
|
||||||
#workskin .align-justify {
|
#workskin .align-justify {
|
||||||
text-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 {
|
#workskin hr.third {
|
||||||
width: 33%;
|
width: 33%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workskin hr.half {
|
#workskin hr.half {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#workskin hr.twothirds {
|
||||||
|
width: 66;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* inherited with name "full" rather than eg.: "auto" */
|
||||||
#workskin hr.full {
|
#workskin hr.full {
|
||||||
width: auto;
|
width: auto;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workskin hr.solid {
|
#workskin hr.solid {
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workskin hr.dashed {
|
#workskin hr.dashed {
|
||||||
border-style: dashed;
|
border-style: dashed;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workskin hr.double {
|
#workskin hr.double {
|
||||||
border-style: double;
|
border-style: double;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -168,234 +300,53 @@
|
||||||
* The listing from AO3 is supplemented with some SVG/X11 colornames.
|
* 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.
|
* 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;
|
color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workskin .font-orange {
|
#workskin .color-orange {
|
||||||
color: orange;
|
color: orange;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workskin .font-yellow {
|
#workskin .color-yellow {
|
||||||
color: yellow;
|
color: yellow;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workskin .font-green {
|
#workskin .color-green {
|
||||||
color: green;
|
color: green;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workskin .font-blue {
|
#workskin .color-blue {
|
||||||
color: blue;
|
color: blue;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workskin .font-purple {
|
#workskin .color-purple {
|
||||||
color: purple;
|
color: purple;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workskin .font-white {
|
#workskin .color-white {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workskin .font-black {
|
#workskin .color-black {
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workskin .font-pink {
|
#workskin .color-pink {
|
||||||
color: pink;
|
color: pink;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workskin .font-teal {
|
#workskin .color-teal {
|
||||||
color: #008282;
|
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.
|
* 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.
|
* 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 {
|
#workskin table tr th.cell-important1 {
|
||||||
background-color: #ddd;
|
background-color: #ddd;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* For "visible" tabs */
|
||||||
|
#workskin span.tab {
|
||||||
|
display: inline-block;
|
||||||
|
width: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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 .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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
156
styles/color-x11.css
Normal file
156
styles/color-x11.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
35
styles/dl-sidenote.css
Normal file
35
styles/dl-sidenote.css
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
/*
|
||||||
|
* dl-sidenote.css
|
||||||
|
*
|
||||||
|
* Implements paragraph-level sidenotes.
|
||||||
|
*
|
||||||
|
<p> Content...<sup>[ref]</sup> </p>
|
||||||
|
<dl class="sidenote"><dt>[ref]</dt><dd> Description </dd>
|
||||||
|
</dl>
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
|
||||||
49
styles/ruby.css
Normal file
49
styles/ruby.css
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
/*
|
||||||
|
* ruby.css
|
||||||
|
*
|
||||||
|
* Ruby / Furigana Emulation
|
||||||
|
*
|
||||||
|
* 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:
|
||||||
|
|
||||||
|
* from:
|
||||||
|
<ruby> Text <rt> Annotation </rt> </ruby>
|
||||||
|
* to:
|
||||||
|
<span class="ruby"> Text <span class="rt"> Annotation </span> </span>
|
||||||
|
|
||||||
|
* 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";
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in a new issue