Reorganized styles in folders

This commit is contained in:
veniasilente 2023-02-04 21:57:56 -03:00
parent 71cad68b79
commit f177723c03
6 changed files with 564 additions and 260 deletions

View file

@ -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
View 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: '▼';
}

View file

@ -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;
#workskin .border-dotted { background-color: #333;
border: 1px dotted; 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 { #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 { #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
View 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
View 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
View 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";
}