Skip to content

Instantly share code, notes, and snippets.

@stephanieleary
Last active January 15, 2024 16:22
Show Gist options
  • Save stephanieleary/717fc8d70d56c65934f20ae94aa57946 to your computer and use it in GitHub Desktop.
Save stephanieleary/717fc8d70d56c65934f20ae94aa57946 to your computer and use it in GitHub Desktop.
Instafic skins for AO3: large font + limited line length for readability, based on Readability (RIP) and Instapaper. Includes white, cream, and dark modes.
/* 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;
}
/* 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;
}
/* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment