Instafic skins for AO3: large font + limited line length for readability, based on Readability (RIP) and Instapaper. Includes white, cream, and dark modes.

instafic-base.css

/* TO USE: Add this as a site skin. This is the base for the other two color schemes.

You may use this as the preview image for the basic (white background) skin: https://www.dropbox.com/s/iutrts8fawidn0d/ao3skin-instafic-gentle-antidote.jpeg?dl=0
/**/

.listbox blockquote,
.listbox pre {
  font-family: Georgia, serif;
  font-size: 1.15em;
  line-height: 1.4;
}

#workskin {
  font-family: Georgia, serif;
  font-size: 1.5em;
  max-width: 50em;
}

div.preface {
  font-size: 0.8em;
}

.preface blockquote {
  font-size: 0.9em;
}

h3 {
  font-size: 1em;
}

h3.title {
  font-size: 1.4em;
}

.userstuff,
.userstuff p {
  line-height: 1.8;
}

instafic-cream.css

/* TO USE: First, create the Instafic site skin. Then create a second site skin using this CSS. At the bottom of the skin creation screen, open the Advanced settings section. Add the first Instafic skin as the parent.

You may use this as the preview image for the cream color scheme: https://www.dropbox.com/s/qhy4j6z5jid84cw/ao3skin-instafic-cream-gentle-antidote.jpeg?dl=0
/**/

body,
#outer,
.listbox .index {
  background-color: #F9F5E9;
}

#header .primary a,
#footer .heading,
#footer a {
  color: #F9F5E9;
}

#dashboard .current,
#dashboard a:hover,
#dashboard a:focus,
.comment h4.byline {
  background-color: #E3DFD5;
}

#header .actions a:hover,
#header .actions a:focus,
#header .dropdown:hover a,
#header .open a,
.thread .even {
  background-color: #E2DFD4;
}

.thread .odd {
  background-color: #D7D4C9;
}

.listbox,
fieldset fieldset.listbox,
fieldset,
form dl,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff {
  background-color: #E2DFD4;
  border-color: #CCC8BF;
  box-shadow: inset 1px 0 5px #BAB5A5;
}

li.relationships a {
  background-color: #FDFCF8;
}

.actions a,
.actions a:link,
.action,
.action:link,
.actions input,
input[type="submit"],
button,
.current,
.actions label {
  background-color: #E2DFD4;
  background-image: linear-gradient(#F9F5E9 2%,#D7D4C9 95%,#B5B2A9 100%);
}

.own,
.draft,
.draft .wrapper,
.unread,
.child,
.unwrangled,
.unreviewed {
  background: #E3DDCA;
  opacity: .95;
}

instafic-reversi.css

/* TO USE: First, create the Instafic site skin. Then create a second site skin using this CSS. At the bottom of the skin creation screen, open the Advanced settings section. You will need to add TWO parent skins, in this order:
1. Reversi
2. Instafic (or whatever you named the first skin in this set)

You may use this as the preview image for the dark color scheme: https://www.dropbox.com/s/5vjpifm3yynhyvc/ao3skin-instafic-reversi-gentle-antidote.jpeg?dl=0
/**/

#header #greeting img,
#header .heading a,
#header fieldset,
#header form,
#header p,
.delete a,
span.delete,
span.unread,
.replied,
span.claimed,
.draggable,
.droppable,
span.requested,
a.work,
.blurb h4 a:link,
.blurb h4 img,
.splash .module h3,
.splash .browse li a:before,
.required,
.error,
.comment_error,
.kudos_error,
a.cloud7,
a.cloud8,
#tos_prompt .heading {
  color: #8ccfde;
}

a:visited,
.actions a:visited,
.action a:link:visited,
.action a:visited,
#header .heading a:visited,
.listbox .heading a:visited,
span.series .divider {
  color: #73a9d1;
}

#header .user a:hover,
#header .user a:focus,
#dashboard a:hover,
#dashboard a:focus,
.actions a:hover,
.actions a:focus,
.actions input:hover,
.actions input:focus,
a:visited:hover,
a:visited:focus,
.actions a:hover,
.actions a:focus,
.actions input:hover,
.actions input:focus,
label.action:hover,
label.action:focus,
.action:hover,
.action:focus {
  color: #b5dfe8;
}

.actions a,
.actions a:link,
.action,
.action:link,
.actions input,
input[type="submit"],
button,
.current,
.actions label,
#header .actions a {
  background: #333;
  color: #eee;
}

select,
option {
  background: #555;
  color: #eee;
}

.own,
.draft,
.draft .wrapper,
.unread,
.child,
.unwrangled,
.unreviewed {
  background: #1d1d1d;
  opacity: .95;
}