ReversiPlusPlus
Reversi — but better. An Archive of Our Own “dark mode” reskin of Reversi with a focus on readability and less noise.
This project is a work-in-progress. Please bear with me while I find my style sheet legs.
| Reversi++ |
Reversi++ Mobile |
 |
 |
1 Features
✅ Darker colours!
✅ Colourfully obvious tags trapped in a scroll box!
✅ Cool fonts (if you’re willing to install them)!
1.1 Dark mode redux
If you:
- hate reading on a stark white background
- hate reading on a light background
- prefer OLED themes or find some dark themes too bright
- have tired and/or light-sensitive eyes that suffer every time you step outside your carefully curated internet
cave corner
Then ReversiPlusPlus might be your cup of tea!
Inspired by Mozilla Firefox’s dark colour scheme, ReversiPlusPlus:
- Uses a darker colour palette that is easier on the eye
- Reduces visual noise by relying on colour/element contrast rather than borders and lines
Tags are essential when trying to find stories you want to read, but they’re often lost in the noise.
With ReversiPlusPlus, tags are colour-coded by category!
- Red: content warnings
- Blue: relationships
- Green: characters
- Grey: freeform tags
In the case of tag-heavy works, tags are also confined to a scroll box!
- Tags are confined to ~4 lines per work blurb
- If the number of tags exceeds ~4 lines in a particular blurb, the overflow will be trapped in scroll box jail
1.3 Custom fonts
- Good news: ReversiPlusPlus uses some common web-safe and system font alternatives in addition to Ao3’s default fonts!
- Bad news: Due to how Ao3 handles user skins and limits CSS, they can’t be automatically packaged with or built into the skin.
This means if you want alternative fonts to appear, you’ll have to install them on your device — PC, phone, tablet, or whatever else.
For your convenience, here is a handy table containing (most) of the fonts and where to find them.
* − Web font (i.e., free!)
@ − iOS/iPadOS system font
# − Microsoft Office cloud/Windows system font
$ − Paid
2 Installation
2.1 Create a site skin
ReversiPlusPlus builds right off of Ao3’s existing stylesheet, so no extra add-ons or browser extensions required!
Installing is as simple as creating a new site skin for your user. All user site skins are private by default — no worries about accidentally making something public.
To create a new site skin:
-
Navigate to Archive Of Our Own.
-
While logged in, go to your dashboard.
-
On the dashboard, select Skins.
-
The Skins page will have multiple buttons. In the top right-hand corner, select Create Site Skin.
Welcome to the Create New Site Skin page!
-
Fill in the following fields:
- The
Type field must be set to Site Skin.
- The
Title field must have a value in it, and that value must be unique because Ao3 only distinguishes user site skins by name, not by user.
- The
CSS field must have CSS in it — i.e., the text in rpp.css or rpp-mobile.css.
Don’t submit just yet!
Need a couple extra things first — namely, the options hidden under this fun little Show ↓ button under the giant CSS field.
You’ll get a section that looks like this:
-
Here, fill in the following fields:
- The
What it does field must be set to add on to archive skin.
- In the
Media section under Choose @media, the ⬜ all option must be checked.
All done?
-
Hit Submit!
-
You’ll be taken to a new page with your site skin with a Skin was successfully created. message.
Scroll down to the bottom where you’ll see these four options:
Hit Use.
And voilà! There you have it. Skin installed. 🌠
2.2 Changing fonts
ReversiPlusPlus offers different default fonts than Ao3. Should you want to change them, you will need to edit rpp.css or rpp-mobile.css to include more or less of the fonts listed above (or others you may have installed on your machine).
There are four separate places to define fonts, each marked by /* font choices go here ↓ */ for easy searching.
-
Body fonts
body { /* font choices go here ↓ */
font-family: "IBM Plex Sans", "Proxima Nova", "Helvetica Neue", "Lucida Grande", "Lucida Sans Unicode", "GNU Unifont", Verdana, Helvetica, sans-serif;
}
…
input,
textarea,
blockquote,
blockquote.userstuff,
.blurb blockquote,
.dropdown,
.expander,
.toggled form { /* font choices go here ↓ */
font-family: "IBM Plex Sans", "Proxima Nova", "Helvetica Neue", "Lucida Grande", "Lucida Sans Unicode", "GNU Unifont", Verdana, Helvetica, sans-serif;
}
-
Header fonts
h1,
h2,
h3,
h4,
h5,
h6,
.heading,
.bookmark .user .meta { /* font choices go here ↓ */
font-family: "Charter", "IBM Plex Serif", "Palatino", "Georgia", serif;
}
-
Mono fonts
kbd,
tt,
code,
var,
pre,
samp { /* font choices go here ↓ */
font-family: "Fira Code", "Source Code Pro", "Menlo", "Monaco", "Consolas", Courier, monospace;
…
}
-
Work fonts
#chapters .userstuff a,
#chapters .userstuff p,
#chapters .userstuff ol,
#chapters .userstuff ul { /* font choices go here ↓ */
font-family: "Charter", "IBM Plex Serif", "Palatino Linotype", "Palatino", "Literata", "Georgia", serif;
…
}
The font-family value determines what font displays on a device. If the first font choice in the font-family list isn’t available, the next choice will be used, eventually falling back to the device’s default font (designated sans-serif, serif, or monospace). This means if you have multiple devices with different fonts, you can include them in the list and the appropriate one will display.
[!NOTE]
When editing the font list, make sure the chosen font name is spelled correctly, enclosed in straight quotes (""), and followed by a comma (,) if another value follows it like the example below.
font-family: "Font Choice 1", "Font Choice 2", "Font Choice 3", serif;
3 Road map
3.1 Short-term to-do list
4 Credits & acknowledgements
ReversiPlusPlus incorporates the work of those listed below. Without their dedication, time, and effort, this pet project would not be possible.
评论