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
|
||||
|
||||
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
|
||||
* 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.: <p class="name">, <span class="name">, 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,68 +62,206 @@
|
|||
margin: auto 1em;
|
||||
}
|
||||
|
||||
#workskin .border {
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
#workskin .border-dotted {
|
||||
border: 1px dotted;
|
||||
/* WAAPT's version of EVIL */
|
||||
#workskin .EVIL {
|
||||
display: inline-block;
|
||||
padding: auto 2em;
|
||||
background-color: #333;
|
||||
color: red;
|
||||
}
|
||||
|
||||
/*
|
||||
* modified to prefer libre/free software fonts
|
||||
* 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: 'Liberation Serif', 'Gentium', 'Gentium Plus', 'Nimbus Roman', 'Libra Serif Modern', Cambria, Constantia, Palatino, Georgia, 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: '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.: <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 {
|
||||
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;
|
||||
|
|
@ -146,6 +272,12 @@
|
|||
margin: auto;
|
||||
}
|
||||
|
||||
#workskin hr.twothirds {
|
||||
width: 66;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* inherited with name "full" rather than eg.: "auto" */
|
||||
#workskin hr.full {
|
||||
width: auto;
|
||||
margin: auto;
|
||||
|
|
@ -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.: <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