ao3-styles/ao3-sitestyle-basicimproved.css

/*
 * Basic Improved
 * Inherits from "Basic Formatting"
 * 
 * Revision 3 
 * 2023-02-04
 * 
 * */

#workskin .indent {
  padding: 0 5em 0 5em;
}

#workskin .book {
  margin: 0 auto;
  text-indent: 3em;
}

/* Modified to prefer libre fonts */
#workskin .dropcap {
  font-family: 'Liberation Serif', 'DejaVu Serif', Georgia, serif;
  font-size: 3em;
}

/* Modified to prefer libre fonts */
#workskin .flashback {
  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;
}

#workskin .all-small-caps {
  font-variant-caps: all-small-caps;
}

#workskin .spoiler {
  background: #333;
  color: #333;
}

/* More "TLA"-like version of spoiler */
#workskin .REDACTED {
  background: #333;
  color: #333;
  font-family: monospace;
  margin: auto 1em;
}

/* WAAPT's version of EVIL */
#workskin .EVIL {
	display: inline-block;
	padding: auto 2em;
	background-color: #333;
	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;
}




/*
 * 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;
}

#workskin hr.half {
	width: 50%;
	margin: auto;
}

#workskin hr.twothirds {
	width: 66; 
	margin: auto;
}

/* inherited with name "full" rather than eg.: "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
 * * 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. 
 * 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;
}

/* 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;
}