"Basic Improved"

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;
+  
+}