I created an Archive of Our Own site skin with more readability. Feel free to copy, paste and modify it for your own use. | サクサクやりたい

I created an Archive of Our Own site skin with more readability. Feel free to copy, paste and modify it for your own use.

There is a Japanese version.

Archive of Our Own を読みやすくするsite skin を作りました。コピペ編集してお使いください。

No Warranty, No Guarantee

As I am a beginner, it is very likely that the code has errors and flaws.

I would be truly grateful if you could report them so I can make corrections.

Send a message unrelated to intellectual property rights in English

The CSS Code

Tested browsers

  • Desktop Chrome
  • iPhone 5s Safari

Tap or click 「ここをタップしてコピー」in the right corner and the code will be copied to your clipboard.

#outer {
  background: #deb887;
}

body {
  background: #deb887;
}

div.preface {
  max-width: 600px;
  margin: auto;
}

div#workskin {
  max-width: 800px;
}

body {
  font-size: 150%;
}

#footer {
  overflow-wrap: break-word;
}

p.kudos {
  overflow-wrap: break-word;
}

.blurb h4 a:link,
.blurb h4 img {
  overflow-wrap: break-word;
}

div.preface .associations {
  overflow-wrap: break-word;
}

.comment h4.byline {
  overflow-wrap: break-word;
}

a.tag {
  overflow-wrap: break-word;
}

#outer #dashboard,
#main.dashboard {
  float: none;
  width: auto;
  max-width: 100%;
  margin: 1%;
  padding: 0;
  clear: both;
}

#dashboard ul.navigation {
  float: left;
  margin: 3.5%;
}

#dashboard .landmark {
  clear: none;
  float: left;
}

How to apply the CSS code

How to apply an Archive of Our Own site skin

How it looks

Explanation of the CSS code for those who would like to make modifications

The original site skin

Show Skin | Archive of Our Own
An Archive of Our Own, a project of the Organization for Transformative Works

Change background color to Burlywood whose color code is #deb887

For mobile screens:

#outer {  
   background: #deb887;  
 }

For desktops screens:

body {
   background: #deb887;
 }

Just for when font size is bigger, style Title, Author, Summary, and Notes so that they fit to mobile screens

div.preface {
  max-width: 600px;
  margin: auto;
}

Set the story width to 800px

div#workskin {
  max-width: 800px;
}

Make the font 150% bigger, and wrap elements that get overflown

Reference
overflow-wrap - CSS: Cascading Style Sheets | MDN
The overflow-wrap CSS property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to preve...
body {
  font-size: 150%;
}

#footer {
  overflow-wrap: break-word;
}

p.kudos {
  overflow-wrap: break-word;
}

.blurb h4 a:link,
.blurb h4 img {
  overflow-wrap: break-word;
}

div.preface .associations {
  overflow-wrap: break-word;
}

.comment h4.byline {
  overflow-wrap: break-word;
}

a.tag {
  overflow-wrap: break-word;
}

Horizontally display dashboard elements

Reference
Show Skin | Archive of Our Own
An Archive of Our Own, a project of the Organization for Transformative Works
#outer #dashboard,
#main.dashboard {
  float: none;
  width: auto;
  max-width: 100%;
  margin: 1%;
  padding: 0;
  clear: both;
}

#dashboard ul.navigation {
  float: left;
  margin: 3.5%;
}

#dashboard .landmark {
  clear: none;
  float: left;
}

Redistribution

If you display the URL of this post in your post where redistribution takes place, you can redistribute the CSS code.

Change log

December 1, 2019: Published

December 7, 2019: Added CSS code to "The CSS Code" and "Make the font 150% bigger, and wrap elements that get overflown."

この記事は役に立ちましたか?
はいいいえ
サクサクやりたい
タイトルとURLをコピーしました