diff --git a/ao3-sitestyle-basicimproved.css b/ao3-sitestyle-basicimproved.css new file mode 100644 index 0000000..050ce58 --- /dev/null +++ b/ao3-sitestyle-basicimproved.css @@ -0,0 +1,431 @@ +/* + * Basic Improved + * We inherit the stuff pointed in "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 + * + * */ + +#workskin .indent { + padding: 0 5em 0 5em; +} + +#workskin .book { + margin: 0 auto; + text-indent: 3em; +} + +#workskin .dropcap { + font-family: Georgia, serif; + font-size: 3em; +} + +#workskin .flashback { + font-style: italic; +} + +#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 + * */ +#workskin .REDACTED { + background: #333; + color: #333; + font-family: monospace; + margin: auto 1em; +} + +#workskin .border { + border: 1px solid; +} + +#workskin .border-dotted { + border: 1px dotted; +} + +/* + * modified to prefer libre/free software fonts + * */ +#workskin .font-serif { + font-family: 'Liberation Serif', 'Gentium', 'Gentium Plus', 'Nimbus Roman', 'Libra Serif Modern', Cambria, Constantia, Palatino, Georgia, serif; +} + +#workskin .font-sansserif { + font-family: 'Liberation Sans', 'Nimbus Sans', 'Open Sans', 'Gidole', 'Isabella Sans', 'Metropolitano', 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif; +} + +#workskin .font-monospace { + font-family: 'Liberation Mono', 'Inconsolata', 'Source Code Pro', consolas, courier, monospace; +} + +#workskin .font-cursive { + font-family: 'Cursive', 'Feltpen Regular', cursive; +} + +#workskin .font-fantasy { + font-family: fantasy; +} + +#workskin .font-system { + font-family: system-ui; +} + +#workskin .font-big { + font-size: 120%; +} + +#workskin .font-small { + font-size: 80%; +} + +/* + * sometimes this is needed explicitly + * */ +#workskin .align-left { + text-align: right; +} + +#workskin .align-right { + text-align: right; +} + +#workskin .align-center { + text-align: center; +} + +#workskin .align-justify { + text-align: justify; +} + +#workskin hr.third { + width: 33%; + margin: auto; +} + +#workskin hr.half { + width: 50%; + margin: auto; +} + +#workskin hr.full { + width: auto; + margin: auto; +} + +#workskin hr.solid { + border-style: solid; +} + +#workskin hr.dashed { + border-style: dashed; +} + +#workskin hr.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 + * */ + +#workskin .font-red { + color: red; +} + +#workskin .font-orange { + color: orange; +} + +#workskin .font-yellow { + color: yellow; +} + +#workskin .font-green { + color: green; +} + +#workskin .font-blue { + color: blue; +} + +#workskin .font-purple { + color: purple; +} + +#workskin .font-white { + color: white; +} + +#workskin .font-black { + color: black; +} + +#workskin .font-pink { + color: pink; +} + +#workskin .font-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. + * + * */ + +#workskin .box-clear { + float: clear; +} + +#workskin .box-left { + float: left; + max-width: 33%; + margin-right: 8pt; +} + +#workskin .box-right { + float: right; + max-width: 33%; + margin-left: 8pt; +} + +#workskin .box-left.box-border { + border-right: 4pt dotted #333; +} + +#workskin .box-right.box-border { + border-left: 4pt dotted #333; +} + +#workskin table tr th.cell-important1 { + background-color: #ddd; + +}