Actions

Work Header

Rating:
Archive Warning:
Fandom:
Additional Tags:
Language:
English
Stats:
Published:
2023-03-03
Completed:
2023-03-03
Words:
4,333
Chapters:
2/2
Comments:
25
Kudos:
259
Bookmarks:
168
Hits:
10,993

Work Skin: Disco Elysium

Summary:

Mobile and desktop-friendly work skin replicating the game dialogue format and FELD tape background with pure CSS, no images. Includes two different versions with commented CSS, an HTML walkthrough, customization options, and notes on maintaining readability for those with work skins turned off.

Notes:

I’m far from the only one to have done a DE skin, but I spend a mildly inordinate amount of time stalking A Single Div and similar projects and was inspired to try replicating the FELD tape in pure CSS (meaning you’re not gambling on the continual existence of whatever hacky hosting solution I might’ve come up with for images, as there are none here). So… here’s my cake.

I make an effort to explain everything that’s going on here but this is an intermediate level tutorial which already assumes you basically know how work skins, HTML, and CSS selectors work. For an overview of work skins on AO3, see this official AO3 guide and linked references. That said, let me know if you have questions and I’ll do my best to answer them.

Hypothetically one could totally write a regex script to automate all this coding (maybe by developing a kind of markdown for the game format, maybe just by being clever about it), but unfortunately I am regex illiterate. Just saying it’s a thing someone could do.

My thanks to FAYDE On Air for the DE excerpts I’m using here.

 

Table of Contents

(See the end of the work for other works inspired by this one.)

Chapter 1

Chapter Text

Demo

KIM KITSURAGI – “That would just escalate tensions. No captain would sign off on it. Solving one murder isn’t worth a conflict between the RCM and the Débardeurs’ Union.”

KIM KITSURAGI – “In fact, even the *death* of two detectives might not warrant an all-out war. So let’s keep a cool head, okay?”

HALF LIGHT [Medium: Success] – He’s not exaggerating about that mortal danger. Just calmly factoring it in. Your fists clench and your pulse rises uncomfortably.

  1. “Why do we need to talk to them?”
  2. “What do you mean ‘rowdy’?”
  3. “Are those the men Garte told us about yesterday?”
  4. “There are so many of them. Maybe we should call in reinforcements?”
  5. “Let’s roll.” [Leave.]

YOU – “Let’s roll.”

KIM KITSURAGI – “One more thing before we do…” He glances at the booth again. “We don’t have to talk to them immediately. We can walk right past them, continue with our business.”

AUTHORITY [Easy: Success] – Good. A power move. *Purposefully* concentrate on something else first.

REACTION SPEED [Easy: Success] – Yeah — streetwise. Zoom right past, do it on your own terms.

LOGIC [Easy: Success] – But… aren’t you *curious* to know what they have to say about the murder?

KIM KITSURAGI – “They’re in no hurry to leave — they think they own the place… Anyway, I leave that choice to you. Whatever you decide is fine by me.”

TASK COMPLETED: Find out who is in the Union Box

Red and white checks:

  1. Look at the zoning plan.
  2. "Kim, what do you think of this?"
  3. [Logic - Challenging 11] Try to find a loophole in the deal.
  4. [Locked] Try to find a loophole in the deal.
  5. [Interfacing - Challenging 12] Okay, let's do this! (Commence the forgery.)
  6. Put the documents back in the envelope. [Leave.]

The Code

For details on how to create a work skin and apply it to your fic, see this official AO3 guide. Once you’ve got one up and going, copy and paste the following into it. You can also get it at Pastebin.

(Note that my comments (between the /* */) will disappear once you save the work skin. They’re mostly just me reminding myself what all my margin/padding properties were for because that’s always the first thing I forget about a stylesheet.)

/* Sets default text color & bg color. Handles gray sidebars, bg tick marks. */
#workskin { 
  background-color: #222222;
  color: #cfd5bf;
  background-image: repeating-linear-gradient(180deg, #939593 0, #939593 1.25em, transparent 0, transparent 1.75cm), repeating-linear-gradient(180deg, #5d6163 0, #545758 2px, transparent 0, transparent .5cm), linear-gradient(90deg, #616364 0, #616364 .75em, transparent .75em), linear-gradient(270deg, #616364 0, #616364 .75em, transparent .75em), repeating-linear-gradient(180deg, #393734 0, #393734 2px, transparent 0, transparent 2.5cm), repeating-linear-gradient(180deg, #393734 0, #393734 2px, transparent 0, transparent .5cm);
  background-position: 100% 0, 0 20px, 0 0, 0 0, 0 10px, 0 10px;
  background-size: .2em 100%, .3em 100%, 100% 100%, 100% 100%, 2.25em 100%, 1.2em 100%;
  background-repeat: no-repeat;
}

/* Planchette thingy on left + fake scrollbar. Adds spacing to prevent work text butting up against background details. 
   Using ".userstuff.module" / "#chapters div.userstuff" makes sure notes/endnotes don't get squeezed. */
#workskin #chapters div.userstuff,
#workskin .userstuff.module {
  background-image: conic-gradient(from 170deg, rgba(112, 112, 92, .5) 0, rgba(112, 112, 92, .5) 5.5%, transparent 5.5%), conic-gradient(from 170deg, rgba(112, 112, 92, .5) 0, rgba(112, 112, 92, .5) 5.5%, transparent 5.5%), conic-gradient(from 170deg, rgba(112, 112, 92, .5) 0, rgba(112, 112, 92, .5) 5.5%, transparent 5.5%), radial-gradient(.35em .35em, #d5d5c7 0, #d5d5c7 .3em, transparent .35em), linear-gradient(270deg, transparent 0, transparent 1.8em, #616364 1.8em, #616364 1.925em, transparent 1.925em), linear-gradient(270deg, transparent 0, transparent 1.2em, #222 1.2em, #222 2.6em, transparent 2.6em), radial-gradient(0.6em 0.5em, #222 0, #222 0.35em, transparent 0.375em), radial-gradient(0.6em 0.5em, #616364 0, #616364 0.5em, transparent 0.525em), radial-gradient(0.6em 0.5em, #222 0, #222 0.35em, transparent 0.375em), radial-gradient(0.6em 0.5em, #616364 0, #616364 0.5em, transparent 0.525em);
  background-position: 1.5em 0, 1.5em 45%, 1.5em 90%, 100% 100%, 0 50%, 100% 50%, 100% 0, 100% 0, 100% 100%, 100% 100%;
  background-size: .4em 7.5em, .4em 7.5em, .4em 7.5em, 3.725em 5%, 100% 98%, 3.725em 98%, 3.725em 2%, 3.725em 2%, 3.725em 2%, 3.725em 2%;
  background-repeat: no-repeat;
  padding: 0 2.6em;
  width: auto;
}

/* If people are using a site skin w/ custom bg, this ensures summary/notes are the same color as rest of work */
#workskin .group {
  background: #222222;
  color: #cfd5bf;
}

/* Padding on bg details makes long words in title more likely to break weirdly on mobile. 
   This restores left-right margin space to title. */
#workskin .preface h2.title {
  margin: .429em -1em;
}

#workskin a,
#workskin ul.associations li {
  color: #cfd5bf;
}

/* For no background at all, delete everything before this comment. See Light Mode section for more. */

/* Selectors setting text indents ↓ */
#workskin #chapters div.userstuff p,
#workskin .userstuff.module p {
  text-indent: -1em;
  margin-left: 1em;
}

#workskin #chapters div.userstuff .indent,
#workskin .userstuff.module .indent {
  text-indent: 0em;
  margin-left: 1em;
}

/* Hides stuff. For readability with workskins turned off */
#workskin .hide {
  display: none;
}

/* Makes dialogue tags bold, ensures they’re all-caps */
#workskin .neutral,
#workskin .int, #workskin .intellect,
#workskin .psy, #workskin .psyche,
#workskin .fys, #workskin .physique,
#workskin .mot, #workskin .motorics {
  text-transform: uppercase;
  font-weight: bold;
}

/* Selectors setting text color ↓ */
#workskin .you {
  color: #c3d2db;
}
  
#workskin .int,
#workskin .intellect {
  color: #5cc1d7;
}
  
#workskin .psy,
#workskin .psyche {
  color: #7556cf;
}
  
#workskin .fys,
#workskin .physique {
  color: #cb476a;
}
  
#workskin .mot, 
#workskin .motorics {
  color: #e3b734;
}

#workskin .check {
  color: #9c9686;
}
  
#workskin .task {
  color: #93b885;
}

/* Formats the "End ▉" block ↓ */
#workskin .disco-end {
  background-color: #8f2710;
  display: block;
  width: 97%;
  box-sizing: border-box;
  margin: auto;
  padding: .1em;
}

#workskin .disco-end::after {
  content: 'END \0000a0▉';
  font-family: Dobra, "Dobra Light", Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 1.75em;
  padding-left: .75em;
}

/* Selectors for question list/dialogue tree formatting ↓ */
#workskin li {
  color: #222222;
}

/* Makes numbers different color from text */
#workskin li.dialogue::marker, 
#workskin li.dialogue-fin::marker {
  color: #cfd5bf;
}

/* Automates hyphens after numbers (1. - ) */
#workskin li.dialogue::before,
#workskin li.dialogue-fin::before,
#workskin span.whitecheck::before,
#workskin span.whitecheck-locked::before,
#workskin span.redcheck::before {
  content: '-\000a0';
  color: inherit;
}
      
#workskin li, /* Tightens spacing between checks/dialogue */
#workskin .dialogue,
#workskin li.dialogue,
#workskin .dialogue-fin,
#workskin li.dialogue-fin {
  margin-top: 0;
  margin-bottom: 0;
}

#workskin .dialogue,
#workskin li.dialogue {
  color: #d7431b;
  padding: 0.4em 0.4em 0.4em 0;
}

#workskin .dialogue-fin,
#workskin li.dialogue-fin {
  color: #93341a;
  padding: 0.4em 0.4em 0.4em 0;
}

#workskin .dialogue-check,
#workskin li.dialogue-check {
  margin-top: 0.5em;
  margin-bottom: -0.5em;    
  position: relative;
  z-index: 0;
}

#workskin .whitecheck,
#workskin .whitecheck-locked,
#workskin .redcheck {
  border-top-right-radius: 20px 20px;
  border-top-left-radius: 20px 20px;
  border-bottom-right-radius: 30px 190px; /* Creates asymmetrical corners */
  border-bottom-left-radius: 30px 190px; 
  color: #222222;
  margin-left: -1.75em; /* Stretches background color over number */
  padding: 0.5em 0.5em 0.5em 1.75em;
  display: inline-block;
  line-height: 1.5em;
  width: 90%;
  position: relative;
  z-index: -9;
  vertical-align: text-top;
  top: -0.5em;
}

#workskin .whitecheck {
  background-color: #cdc5b8;
}

#workskin .whitecheck-locked {
  background-color: #cdc5b8;
  color: #7a7468;
}

#workskin .redcheck {
  background-color: #d64121;
}

/* Hover/mouseover effects for dialogue. Delete everything after this comment to turn the effect off. */
#workskin .whitecheck:hover,
#workskin li.dialogue-check:hover > .whitecheck {
  background-color: #868070;
  color: #fefbf4;
}
      
#workskin .redcheck:hover,
#workskin li.dialogue:hover,
#workskin li.dialogue-fin:hover,
#workskin li.dialogue-check:hover,
#workskin li.dialogue-check:hover > .redcheck {
  color: #fefbf4;
}

Details/Walkthrough

The selectors are as follows:

INTELLECT / PSYCHE / PHYSIQUE / MOTORICS / YOU / NEUTRAL

[check]  / dialogue / dialogue-fin /  task

[whitecheck] / [whitecheck-locked] / [redcheck]

  • int / intellect – for Intellect-related skills (Harry’s are Logic, Encyclopedia, Rhetoric, Drama, Conceptualization, and Visual Calculus)
  • psy / psyche – for Psyche-related skills (Volition, Inland Empire, Empathy, Authority, Esprit de Corps, and Suggestion)
  • fys / physique – for Physique-related skills (Endurance, Pain Threshold, Physical Instrument, Electrochemistry, Shivers, and Half Light)
  • mot / motorics – for Motorics-related skills (Hand/Eye Coordination, Perception, Reaction Speed, Savoir Faire, Interfacing, and Composure)
  • you – for dialogue said directly by the player
  • neutral – for non-Skill dialogue
  • check – for the passive skill check indicators, i.e. [Medium: Failure]
  • dialogue and dialogue-fin – for dialogue options; dialogue is for "unasked" questions and dialogue-fin is for questions that have been asked already
  • task – for Item Gained, Task Gained/Updated/Completed, and XP Gained lines
  • redcheck, whitecheck, and whitecheck-locked – for the active red and white checks
  • indent – for a secondary paragraph, i.e. for when the narration goes on for long enough that there’s a paragraph break, creating a paragraph without a dialogue tag of its own
  • disco-end – for the big “end” block/button

Using the Selectors

Example:

INLAND EMPIRE – You should totally sing karaoke here, the first chance you get. Your emotions need to be expressed. People need to know of your vast, oceanic soul.

YOU – My soul's cubic content is obscured by the hangover.

INLAND EMPIRE – Of course. At this point, precise measurements of your soul can only be performed from the outside. It needs to be heard.

INLAND EMPIRE – Through a PA system.

INLAND EMPIRE – By other people.

HALF LIGHT [Medium: Success] – Whether they like it or not. Ram it up their adrenaline gland. Violently express yourself.

  1. This goes well with a theory I'm developing: that I'm a down-on-my-luck superstar person.
  2. What should I sing, when it comes to it?

YOU – What should I sing, when it comes to it?

Inland Empire – You should sing the sad, small church song, duh. Thought it was obvious...

YOU – Of course! They'll really get a gauge on my soul with that one.

Inland Empire – Serves them right! Wipe that smirk off their face with your sad, tragic small church song. Who's laughing now? No one.

TASK GAINED: Sing karaoke

Example work code:

<p><span class="psy">INLAND EMPIRE</span> – You should totally sing karaoke here, the first chance you get. Your emotions need to be expressed. People need to know of your vast, oceanic soul.</p>

<p class="you"><span class="neutral">YOU</span> – My soul's cubic content is obscured by the hangover.</p>

<p><span class="psy">INLAND EMPIRE</span> – Of course. At this point, precise measurements of your soul can only be performed from the outside. It needs to be heard.</p>

<p class="indent"><span class="hide">INLAND EMPIRE – </span>Through a PA system.</p>

<p class="indent"><span class="hide">INLAND EMPIRE – </span>By other people.</p>

<p><span class="fys">HALF LIGHT</span> <span class="check">[Medium: Success]</span> – Whether they like it or not. Ram it up their adrenaline gland. Violently express yourself.</p>

<ol>

   <li class="dialogue-fin">This goes well with a theory I'm developing: that I'm a down-on-my-luck superstar person.</li>

   <li class="dialogue">What should I sing, when it comes to it?</li>

</ol>

<p class="you"><span class="neutral">YOU</span> – What should I sing, when it comes to it?</p>

<p><span class="psy">Inland Empire</span> – You should sing the sad, small church song, duh. Thought it was obvious...</p>

<p class="you"><span class="neutral">YOU</span> – Of course! They'll really get a gauge on my soul with that one.</p>

<p><span class="psy">Inland Empire</span> – Serves them right! Wipe that smirk off their face with your sad, tragic small church song. Who's laughing now? No one.</p>

<p class="task">TASK GAINED: Sing karaoke</p>

<div class="disco-end"></div>

Most paragraphs are formatted like Inland Empire and Half Light’s, with a <span> element around the dialogue tag. Paragraphs without a dialogue tag are indented by attaching the indent selector to the <p> element — <p class="indent">.

YOU paragraphs and task lines are a little different because the entire paragraph is a different color, not just the nametag. Attach the selector to the <p> element (<p class="you">) rather than wrapping the line in a <span class="you"> tag to keep your code cleaner. (Same for the dialogue options; more on them in the next section.) Then make sure that "YOU" is bolded by wrapping it in <span class="neutral"></span>. (You could use <strong> instead; however, if you do that, the "You" lines will be the only thing bolded for people reading with work skins turned off, and it’ll look weird.)

Notice the <span class="hide">INLAND EMPIRE – </span> code on the indented paragraphs. This is something I like to do for the secondary paragraphs without regular dialogue tags. With the work skin turned on, any text with class hide will be, well, hidden from view. But if someone is browsing with work skins off, the text within will be visible to them, making it clear those paragraphs are still Inland Empire talking. (You can check this out by scrolling up, hitting "Hide Creator’s Style", and scrolling back down to this section’s example.) Optional — you can just use indent — but I think it’s a nice touch. Of course, if you’re doing a mixed game format style with prose interludes, no need to bother with indented paragraphs or hidden dialogue tags at all. The selectors are your oyster.

As a final just-for-fun touch, the “End” block can be popped in wherever you want; just insert the code <div class="disco-end"></div> anywhere, no need to write anything inside the div.

Dialogue & Red/White Checks

Example:

  1. Look at the zoning plan.
  2. "Kim, what do you think of this?"
  3. [Logic - Challenging 11] Try to find a loophole in the deal.
  4. [Locked] Try to find a loophole in the deal.
  5. [Interfacing - Challenging 12] Okay, let's do this! (Commence the forgery.)
  6. Put the documents back in the envelope. [Leave.]

Example work code:

<ol>

  <li class="dialogue-fin">Look at the zoning plan.</li>

  <li class="dialogue-fin">"Kim, what do you think of this?"</li>

  <li class="dialogue-check"><span class="whitecheck">[Logic - Challenging 11] Try to find a loophole in the deal.</span></li>

  <li class="dialogue-check"><span class="whitecheck-locked">[Locked] Try to find a loophole in the deal.</span></li>

  <li class="dialogue-check"><span class="redcheck">[Interfacing - Challenging 12] Okay, let's do this! (Commence the forgery.)</span></li>

  <li class="dialogue">Put the documents back in the envelope. [Leave.]</li>

</ol>

Some notes:

  • Every list item needs a class expressing the type of dialogue, i.e. dialogue, dialogue-fin, and dialogue-check. These need to go on the <li> elements, not <span> elements, or the number will be the wrong color.
  • For checks, use <span> elements with a whitecheck, whitecheck-locked, or redcheck class.
  • The hyphens after numbers are automatic for all dialogue options.

There’s a few different ways writers like to indicate which option in a dialogue tree Harry ends up choosing, but with this skin the best way to do indicate it is probably to write it out below the list of choices in a YOU paragraph.

For silly reasons*, the hyphen after the numbers is automatic for dialogue/dialogue-fin options BUT you have to add it manually on red, white, and locked white checks. Sorry. (* Namely, using ::before and ::marker to do the hyphens rather than counter() (banned on AO3) causes the background of the span element to be stacked above the ::marker element, hiding the number. As far as I know ::marker can’t be used with z-index, leaving me slightly stymied for a way to automate the numbering. If someone can figure this out without resorting to faking the ol with divs (something I avoided doing because using ol is better for readers with work skins turned off and also using div means you have to do numbers manually), my hat is off to you.)

EDIT 26-Apr-2023: I figured it out! You can set position: relative for the li and span classes, then set their relative z-indexes to stack properly. The ::before tidbit, which is where the actual hyphen is stored, needs to be set to the span rather than the li or else it kinda goes a bit crazy; then just a little margin/padding jiggering after that to get everything to line up. Since the parent element (in this case the li) is now on top of the child element (the actual color blocks), you can then set hover on the parent element and use the child combinator (li:hover > span) to only change the styling of the child element.

Background Options / Light Mode

If you don’t want the extra details in the background, you can replace the first two CSS rules with one of the following alternatives.

No scrollbar or left-side pointer mark:

COMPOSURE – There they both are — two identical shoes, both *copiously* green and *indiscriminately* snake-skin. Reunited on your feet!

CONCEPTUALIZATION [Medium: Success] – Like two baby crocodiles.

YOU – Wait, these do not look like normal cop shoes...

COMPOSURE – It's pretty clear a *normal cop* is not what you are.


#workskin { 
  background-color: #222222;
  color: #cfd5bf;
  background-image: repeating-linear-gradient(180deg, #939593 0, #939593 1.25em, transparent 0, transparent 1.75cm), repeating-linear-gradient(180deg, #5d6163 0, #545758 2px, transparent 0, transparent .5cm), linear-gradient(90deg, #616364 0, #616364 .75em, transparent .75em), linear-gradient(270deg, #616364 0, #616364 .75em, transparent .75em), repeating-linear-gradient(180deg, #393734 0, #393734 2px, transparent 0, transparent 2.5cm), repeating-linear-gradient(180deg, #393734 0, #393734 2px, transparent 0, transparent .5cm);
  background-position: 100% 0, 0 20px, 0 0, 0 0, 0 10px, 0 10px;
  background-size: .2em 100%, .3em 100%, 100% 100%, 100% 100%, 2.25em 100%, 1.2em 100%;
  background-repeat: no-repeat;
}

#workskin #chapters div.userstuff,
#workskin .userstuff.module {
  padding: 0 2.6em;
  width: auto;
}

Gray sidebars only:

COMPOSURE – There they both are — two identical shoes, both *copiously* green and *indiscriminately* snake-skin. Reunited on your feet!

CONCEPTUALIZATION [Medium: Success] – Like two baby crocodiles.

YOU – Wait, these do not look like normal cop shoes...

COMPOSURE – It's pretty clear a *normal cop* is not what you are.


#workskin { 
  background-color: #222222;
  color: #cfd5bf;
  background-image:linear-gradient(90deg, #616364 0, #616364 .75em, transparent .75em), linear-gradient(270deg, #616364 0, #616364 .75em, transparent .75em);
  background-position: 0 0, 0 0;
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

#workskin #chapters div.userstuff,
#workskin .userstuff.module {
  padding: 0 2.6em;
  width: auto;
}

Just the dark background, no extra details:

COMPOSURE – There they both are — two identical shoes, both *copiously* green and *indiscriminately* snake-skin. Reunited on your feet!

CONCEPTUALIZATION [Medium: Success] – Like two baby crocodiles.

YOU – Wait, these do not look like normal cop shoes...

COMPOSURE – It's pretty clear a *normal cop* is not what you are.


#workskin { 
  background-color: #222222;
  color: #cfd5bf;
}

#workskin #chapters div.userstuff,
#workskin .userstuff.module {
  padding: 0 2.6em;
  width: auto;
}

If the dark background isn’t your style at all, you can delete the first five CSS rules entirely (see the comment in the CSS code). Most of the selectors show up reasonably well on a light background:

INTELLECT / PSYCHE / PHYSIQUE / MOTORICS / YOU / NEUTRAL

[check]  / dialogue / dialogue-fin /  task

[whitecheck] / [whitecheck-locked] / [redcheck]

To change the colors of the numbers on dialogue options from white to black, you will want to find the rules targeting ::marker and ::before and change them to the following:

#workskin li.dialogue::marker, 
#workskin li.dialogue-fin::marker {
  color: #000000;
}

#workskin li.dialogue::before,
#workskin li.dialogue-fin::before {
  content: '-\000a0';
  color: #000000;
}

The redcheck and whitecheck hovers are still readable, but if you want to turn off specifically the dialogue/dialogue-fin hovers for contrast reasons, delete the comma and the selector #workskin li:hover from the final CSS rule so it appears like so:

#workskin .redcheck:hover {
  color: #fefbf4;
}

For a more subtle but higher-contrast version of intellect, psyche, physique, motorics, you, task and check, the hex codes for the “grayed-out” versions work well. They’ll show up like this:

INTELLECT / PSYCHE / PHYSIQUE / MOTORICS / YOU / [check] / task

Replace some or all of their CSS rules with the following:

#workskin .you {
  color: #737d83;
}

#workskin .int,
#workskin .intellect {
  color: #258ba1;
}

#workskin .psy,
#workskin .psyche {
  color: #463578;
}

#workskin .fys,
#workskin .physique {
  color: #762d40;
}

#workskin .mot, 
#workskin .motorics {
  color: #ba8b00;
}

#workskin .check {
  color: #514d44;
}

#workskin .task {
  color: #6d8663;
}

Serif Font Options

I chose not to make the typeface a serif by default because AO3’s default typeface is easier to read than most of the good substitutes for Sina Nova, and I don’t think the serif is a crucial part of the aesthetic. However, if you’re committed, I have a serviceable font stack for you. (Also, you can get Sina Nova yourself legally for free here at FontSquirrel.) Add the following two lines to the first CSS rule:

  font-family: "Sina Nova", "Libre Baskerville", Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Bookman Old Style", "Times New Roman", serif; 
  font-size: 1.1em;

And this is what it will look like on your machine:

YOU – What’s in the west?

SHIVERS – More winding coastline lined with abandoned buildings. Crumbling piers, salt water lapping at their dark piles. Grey and red, forgotten city blocks. What remains of the pre-revolutionary effort to gentrify the coast.

YOU – And beyond that?

font-size: 1.1em; is a compromise between Sina Nova being an oddly small typeface and the other fonts in the stack (which people are more likely to have installed) being larger. Feel free to bump it up if it’s still too small for you; 1.3em is about as high as I’d go, keeping in mind that 2em is title-size.

Final note: if you like the little dividers I threw in here and used in la bibliothéconomie, tack this onto the end of the workskin. I didn’t put them in by default because they’re my invention & not exactly in the spirit of “replicate the Disco Elysium text precisely”, but they’re cute. I like that ◵ / U+25F5 looks a bit like the device on Kim’s jacket.

#workskin hr {
  border: none;
  margin: 2.625em auto 3.0025em auto;
}

#workskin hr:before {
  content: "⎯⎯⎯ ◵ ⎯⎯⎯";
  display: block;
  text-align: center;
  font-size: 1.1em;
}