orphan.dat

All Hugo Award-winning fanfic, all the time.

orphan’s AO3 skins.

Because I just got asked for this and the old link is broken: behold! The CSS files for the work and site skins I use at the AO3. Feel free to take this and hack and edit it as much as you like.

Site skin

#footer,
#header .primary {
  background-image: none;
  box-shadow: none;
}

.wrapper {
  box-shadow: none;
}

#header {
  font-size: 12px;
}

#header .primary {
  padding-top: 5px;
  padding-bottom: 5px;
}

#header .search {
  margin-top: 2px;
}

.notice,
.comment_notice,
ul.notes,
.caution,
.error,
.comment_error {
  box-shadow: none;
}

ul.actions,
p.actions,
li.actions,
span.actions,
fieldset.actions,
dd.actions {
  padding: .429em .25em 2em 0;
}

dl.meta,
li.blurb,
.blurb .blurb {
  border-radius: 6px;
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-weight: 100;
  font-size: 14px;
  line-height: 2;
}

dl.work.meta,
#feedback {
  max-width: 710px;
  margin: 0 auto;
}

.meta dt {
  font-weight: 400;
}

.blurb .tags,
.blurb .stats {
  font-size: 12px;
  text-transform: lowercase;
}

.blurb blockquote {
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  margin-top: 2em;
  font-weight: 400;
}

#workskin #chapters,
#comments_placeholder,
#kudos {
  font-family: Lora, "Iowan Old Style", Baskerville, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  font-size: 16px;
  line-height: 1.2;
  max-width: 640px;
  margin: 0 auto;
}

#comments_placeholder,
#kudos {
  max-width: 710px;
}

#kudos {
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-weight: 100;
  font-size: 12px;
  line-height: 2;
}

#kudos a {
  border: 0;
}

#workskin #chapters p {
  text-indent: 1em;
}

#workskin #chapters center p {
  text-indent: 0;
}

#workskin #chapters hr {
  width: 25px;
  margin: 2em auto;
  border: 0;
  border-bottom: 5px dotted #bbb;
}

h4.heading,
h5.heading {
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-weight: 100;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

h5.heading {
  font-size: 10px;
}

.preface h2.title,
h3.title,
h2.heading {
  font-family: "Reenie Beanie", "Bradley Hand", Lora, "Iowan Old Style", Baskerville, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  font-size: 42px;
  font-style: italic;
  margin-top: 2em;
}

h3.title {
  font-size: 36px;
  margin-bottom: 1em;
  margin-top: 2em;
}

h3.byline {
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-weight: 100;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

h3.title a,
h3.title a:hover,
h2.title a,
h2.title a:hover {
  border: 0 !important;
  text-decoration: none !important;
}

.chapter .preface {
  border-top: 0;
}

.preface.group {
  max-width: 640px;
  margin: 0 auto !important;
  padding: 0 !important;
  clear: right;
}

.summary.module,
.notes.module,
.series.module,
.children.module {
  padding: 1em !important;
  margin: 0;
  background: #eee;
  border-radius: 6px;
  border: 0;
  margin-bottom: 2em !important;
  overflow: hidden;
  line-height: 2;
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-weight: 100;
  font-size: 14px;
}

.summary.module img,
.notes.module img,
#chapters img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  text-indent: 0 !important;
}

.notes.module p,
.summary.module p,
.series.module li,
.children.module li {
  text-indent: 0 !important;
  line-height: 2;
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-weight: 100;
}

.series.module ul,
.children.module ul {
  padding: 0 !important;
}

.summary.module blockquote,
.notes.module blockquote,
.series.module blockquote,
.children.module blockquote {
  margin: 0;
}

.summary.module h3,
.notes.module h3,
.series.module h3,
.children.module h3 {
  background: transparent;
  border-bottom: 0;
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

div.preface .notes,
div.preface .summary,
div.preface .series,
div.preface .children {
  min-height: 0;
}

.comment div.icon {
  float: left;
  margin: -33px .5625em .5625em -3em;
  border: 3px solid #ddd;
}

.thread .thread .comment div.icon {
  margin-left: -2em;
}

.comment .icon {
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
}

.comment .icon .visitor {
  background: none;
  display: block;
}

.thread .thread .comment .icon {
  width: 70px;
  height: 70px;
}

.comment h4.byline {
  font-family: "Reenie Beanie", "Bradley Hand", Lora, "Iowan Old Style", Baskerville, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  font-size: 24px;
  background: #ddd;
  padding: .25em .25em .25em 70px;
  margin: 0 auto -.25em;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  text-transform: none;
  letter-spacing: normal;
}

.comment h4.byline a {
  text-decoration: none;
  border: none;
}

.datetime {
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.comment h4.byline .datetime {
  padding-top: 9px;
}

.thread .thread .comment h4.byline {
  padding-left: 50px;
}

li.comment {
  border: 0;
}

.thread .even {
  background: transparent;
}

.comment .userstuff {
  margin-left: 70px;
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-size: 14px;
}

.thread .thread .comment .userstuff {
  margin-left: 50px;
}

.thread .thread {
  margin-left: 20px;
}

.thread .thread .thread {
  margin-left: 0;
}

.comment .userstuff blockquote {
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-style: italic;
  margin: 1em 0;
  padding: 0 0 0 1em;
}

.comment .edited {
  margin: 0;
  text-align: right;
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.actions a,
.actions a:link,
.action,
.action:link,
.actions input,
input[type="submit"],
button,
.current,
.actions label {
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 0;
  border-bottom: 0;
  background-image: none;
  padding: 5px 1em;
  vertical-align: middle;
}

.actions a:hover,
.action:hover,
.actions input:hover,
input[type="submit"]:hover,
button:hover,
.current:hover,
.actions label:hover {
  border: 0;
  border-bottom: 0;
  background-image: none;
}

fieldset,
form dl,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff {
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-size: 14px;
  font-weight: 100;
  display: block;
  background: #ddd;
  border: 0;
  margin: .643em;
  padding: .643em;
  box-shadow: none;
  border-radius: 6px;
}

div.comment,
li.comment {
  position: relative;
  border: 0;
  overflow: visible;
}

#dashboard a,
#dashboard span {
  font-size: 10px;
}

Work skin

#workskin #footer,
#workskin #header .primary {
  background-image: none;
  box-shadow: none;
}

#workskin .wrapper {
  box-shadow: none;
}

#workskin #header {
  font-size: 12px;
}

#workskin #header .primary {
  padding-top: 5px;
  padding-bottom: 5px;
}

#workskin #header .search {
  margin-top: 2px;
}

#workskin .notice,
#workskin .comment_notice,
#workskin ul.notes,
#workskin .caution,
#workskin .error,
#workskin .comment_error {
  box-shadow: none;
}

#workskin ul.actions,
#workskin p.actions,
#workskin li.actions,
#workskin span.actions,
#workskin fieldset.actions,
#workskin dd.actions {
  padding: .429em .25em 2em 0;
}

#workskin dl.meta,
#workskin li.blurb,
#workskin .blurb .blurb {
  border-radius: 6px;
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-weight: 100;
  font-size: 14px;
  line-height: 2;
}

#workskin dl.work.meta,
#workskin #feedback {
  max-width: 710px;
  margin: 0 auto;
}

#workskin .meta dt {
  font-weight: 400;
}

#workskin .blurb .tags,
#workskin .blurb .stats {
  font-size: 12px;
  text-transform: lowercase;
}

#workskin .blurb blockquote {
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  margin-top: 2em;
  font-weight: 400;
}

#workskin #chapters,
#workskin #comments_placeholder,
#workskin #kudos {
  font-family: Lora, "Iowan Old Style", Baskerville, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  font-size: 16px;
  line-height: 1.2;
  max-width: 640px;
  margin: 0 auto;
}

#workskin #comments_placeholder,
#workskin #kudos {
  max-width: 710px;
}

#workskin #kudos {
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-weight: 100;
  font-size: 12px;
  line-height: 2;
}

#workskin #kudos a {
  border: 0;
}

#workskin #chapters p {
  text-indent: 1em;
}

#workskin #chapters hr {
  width: 25px;
  margin: 2em auto;
  border: 0;
  border-bottom: 5px dotted #bbb;
  text-indent: 0 !important;
}

#workskin #chapters img {
  max-width: 100%;
  height: auto;
  text-indent: 0 !important;
}

#workskin h4.heading,
#workskin h5.heading {
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-weight: 100;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

#workskin h5.heading {
  font-size: 10px;
}

#workskin .preface h2.title,
#workskin h3.title,
#workskin h2.heading {
  font-family: "Reenie Beanie", "Bradley Hand", Lora, "Iowan Old Style", Baskerville, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  font-size: 42px;
  font-style: italic;
  margin-top: 2em;
}

#workskin h3.title {
  font-size: 36px;
  margin-bottom: 1em;
  margin-top: 2em;
}

#workskin h3.byline {
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-weight: 100;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

#workskin h3.title a,
#workskin h3.title a:hover,
#workskin h2.title a,
#workskin h2.title a:hover {
  border: 0 !important;
  text-decoration: none !important;
}

#workskin .chapter .preface {
  border-top: 0;
}

#workskin .preface.group {
  max-width: 640px;
  margin: 0 auto !important;
  padding: 0 !important;
  clear: right;
}

#workskin .summary.module,
#workskin .notes.module,
#workskin .series.module,
#workskin .children.module {
  padding: 1em !important;
  margin: 0;
  background: #eee;
  border-radius: 6px;
  border: 0;
  margin-bottom: 2em !important;
  overflow: hidden;
  line-height: 2;
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-weight: 100;
  font-size: 14px;
}

#workskin .summary.module img,
#workskin .notes.module img {
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
  text-indent: 0 !important;
}

#workskin .notes.module p,
#workskin .summary.module p,
#workskin .series.module li,
#workskin .children.module li {
  text-indent: 0 !important;
  line-height: 2;
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-weight: 100;
}

#workskin .series.module ul,
#workskin .children.module ul {
  padding: 0 !important;
}

#workskin .summary.module blockquote,
#workskin .notes.module blockquote,
#workskin .series.module blockquote,
#workskin .children.module blockquote {
  margin: 0;
}

#workskin .summary.module h3,
#workskin .notes.module h3,
#workskin .series.module h3,
#workskin .children.module h3 {
  background: transparent;
  border-bottom: 0;
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

#workskin div.preface .notes,
#workskin div.preface .summary,
#workskin div.preface .series,
#workskin div.preface .children {
  min-height: 0;
}

#workskin .comment div.icon {
  float: left;
  margin: -33px .5625em .5625em -3em;
  border: 3px solid #ddd;
}

#workskin .thread .thread .comment div.icon {
  margin-left: -2em;
}

#workskin .comment .icon {
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
}

#workskin .comment .icon .visitor {
  background: none;
  display: block;
}

#workskin .thread .thread .comment .icon {
  width: 70px;
  height: 70px;
}

#workskin .comment h4.byline {
  font-family: "Reenie Beanie", "Bradley Hand", Lora, "Iowan Old Style", Baskerville, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  font-size: 24px;
  background: #ddd;
  padding: .25em .25em .25em 70px;
  margin: 0 auto -.25em;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  text-transform: none;
  letter-spacing: normal;
}

#workskin .comment h4.byline a {
  text-decoration: none;
  border: none;
}

#workskin .datetime {
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

#workskin .comment h4.byline .datetime {
  padding-top: 9px;
}

#workskin .thread .thread .comment h4.byline {
  padding-left: 50px;
}

#workskin li.comment {
  border: 0;
}

#workskin .thread .even {
  background: transparent;
}

#workskin .comment .userstuff {
  margin-left: 70px;
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-size: 14px;
}

#workskin .thread .thread .comment .userstuff {
  margin-left: 50px;
}

#workskin .thread .thread {
  margin-left: 20px;
}

#workskin .thread .thread .thread {
  margin-left: 0;
}

#workskin .comment .userstuff blockquote {
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-style: italic;
  margin: 1em 0;
  padding: 0 0 0 1em;
}

#workskin .comment .edited {
  margin: 0;
  text-align: right;
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

#workskin .actions a,
#workskin .action,
#workskin .actions input,
#workskin input[type="submit"],
#workskin button,
#workskin .current,
#workskin .actions label {
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 0;
  border-bottom: 0;
  background-image: none;
  padding: 5px 1em;
  vertical-align: middle;
}

#workskin .actions a:hover,
#workskin .action:hover,
#workskin .actions input:hover,
#workskin input[type="submit"]:hover,
#workskin button:hover,
#workskin .current:hover,
#workskin .actions label:hover {
  border: 0;
  border-bottom: 0;
  background-image: none;
}

#workskin fieldset,
#workskin form dl,
#workskin fieldset dl dl,
#workskin fieldset fieldset fieldset,
#workskin fieldset fieldset dl dl,
#workskin dd.hideme,
#workskin form blockquote.userstuff {
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  font-size: 14px;
  font-weight: 100;
  display: block;
  background: #ddd;
  border: 0;
  margin: .643em;
  padding: .643em;
  box-shadow: none;
  border-radius: 6px;
}

#workskin div.comment,
#workskin li.comment {
  position: relative;
  border: 0;
  overflow: visible;
}

#workskin .spoilers {
  background: #000;
  color: #000;
}

#workskin .spoilers:focus,
#workskin .spoilers:hover {
  background: transparent;
}

#workskin .chat-text {
  font-family: "source code pro", Monaco, Consolas, monospace;
  font-size: 90%;
}

#workskin .chat-text em {
  font-style: normal;
}

#workskin p.chat-text {
  text-indent: 0 !important;
  margin-left: 10%;
  margin-right: 10%;
}

#workskin .handwriting {
  font-family: "Reenie Beanie", "Chalkduster", "Bradley Hand", "Monotype Corsiva", cursive;
  font-size: 130%;
}

#workskin .cursive {
  font-family: Zapfino, cursive;
}

#workskin p.align-center {
  text-indent: 0 !important;
  text-align: center;
}

#workskin p.article-text {
  text-indent: 0 !important;
  font-family: Avenir, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  margin-left: 5%;
}

#workskin p.article-text em {
  font-style: normal;
}

#workskin .screenplay {
  font-family: "source code pro", Monaco, Consolas, monospace;
  font-size: 80%;
}

#workskin .screenplay p {
  margin: 0;
  text-indent: 0 !important;
}

#workskin .sp-diag {
  max-width: 35em;
  margin-left: auto !important;
  margin-right: auto !important;
}

#workskin .sp-par {
  max-width: 35em;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 5em;
}

#workskin .sp-char {
  max-width: 35em;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 1em !important;
  padding-left: 10em;
}

#workskin .sp-cut {
  text-align: right;
}

#workskin .sp-act {
  margin-top: 1em !important;
}

#workskin .sp-end {
  text-align: center;
  text-decoration: underline;
  margin-bottom: 3em !important;
}

Font fixes

Because the AO3 doesn’t support font imports (boo), to make the above properly pretty, you’ll need a browser extension like Stylus and the following custom stylesheet for the AO3 domain:

@import url(https://fonts.googleapis.com/css?family=Reenie+Beanie|Lora:400,400italic,700,700italic|Source+Code+Pro);

Or you could just install the fonts locally:

Enjoy!

Leave a Reply

Your email address will not be published.