standard ao3 workskin
this is just the workskin i made that i use for ~pretty much all my fics these days. i wrote it from scratch, originally bc i needed some way to differentiate <dfn> elements from the surrounding text in same old laotong.
it should look good regardless of whether someone is using a non-default site skin, on a mobile device, and when used correctly, should leave the original work perfectly readable when users turn it off.
this css will be ordered a little funny or unintuitively bc i actually write my stylesheets in sass, and i'm just copy-pasting the compiled output
#workskin,
#workskin * {
box-sizing: border-box; /* i just do this for everything tbh */
}
#workskin * {
max-width: 100%;
}
#workskin .letter {
padding: 1em 1.5em;
border-top: 0.8px solid;
border-right: 1.5px solid;
border-left: 1.5px solid;
box-shadow: 2px 2px 4px 2px rgba(150, 150, 150, 0.5); /* none of these are given colors in order to keep it looking nice when other site skins are being utilized */
}
#workskin .flashback i:after {
content: "";
margin-left: 0.15em;
}
/*** GAPS ***/
#workskin .full-gap {
min-height: 100vh;
}
#workskin .half-gap {
min-height: 50vh;
}
#workskin .quarter-gap {
min-height: 25vh;
}
#workskin dfn {
-webkit-text-decoration: dotted underline;
text-decoration: dotted underline;
}
#workskin [align] {
max-width: 70%;
}
#workskin [align]:has(img) {
max-width: 100%;
}
#workskin [align~=center], #workskin [align~=justify] {
margin: inherit auto;
}
#workskin [align~=right] {
margin-left: 30%;
}
#workskin [align~=left] {
margin-right: 30%;
}
/* i've known for. A While Now that using strings of pretty-looking characters as line breaks will be Annoying for screen readers, but i have been very attached to my '~***~' line breaks for ages as well, so i just styled <hr /> elements to look like them.
#workskin [role~=article] hr {
text-align: center;
border: none;
}
#workskin [role~=article] hr:after {
content: "~***~";
}
/*** TEXTING STYLING ***/
/* rn since this is only used in zenith, it's default styled to look like a line app lol */
#workskin .texting {
background-color: #7292C1;
padding: 0.5em;
display: flex;
flex-direction: column;
max-width: 800px;
}
/* turns each <code> element into its own little chat bubble */
#workskin .texting code {
margin: 0.25em 0;
padding: 0.5em 1em;
width: 70%;
display: block;
border-radius: 2em;
width: -moz-max-content;
width: max-content;
max-width: 100%;
color: black;
}
#workskin .texting code > b:first-child {
display: block; /* turns the bolded "[name]:" label in the unskinned version into its own block */
font-size: 0.5em;
}
/* outgoing messages */
#workskin .to {
align-items: flex-end;
text-align: right;
}
#workskin .to code {
background-color: #71DD54;
}
/* incoming messages */
#workskin .from code {
background-color: #FFFFFF;
}
/*** NOTES BOX STYLING ***/
#workskin .notes details > summary:after {
text-align: center;
content: " - [[Read More]]";
font-size: 0.9em;
font-weight: bold;
}
#workskin .notes details > summary:hover, #workskin .notes details > summary:focus {
-webkit-text-decoration: solid underline;
text-decoration: solid underline;
}
#workskin .notes details[open] > summary:after {
content: " - [[Show Less]] "; /* turns the "read more" into a "show less" when the <details> element is open */
}
/* the "not" is necessary for keeping the [show less] from looking weird if, for whatever reason, there's nothing In the details. */
#workskin .notes details[open] > :last-child:not(summary):after {
display: table;
clear: both;
content: " "; /* this is necessary to, like, actually show the "after" block lol */
width: 100%;
margin: 0 auto;
padding-bottom: 1em;
border-bottom: 1px dashed;
}
#workskin .notes p[align=center]:has(a):last-of-type, #workskin .notes p.links {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
max-width: 100%;
}
#workskin .notes p[align=center]:has(a):last-of-type a, #workskin .notes p.links a {
margin: 0.5em; /* helps keep it readable on mobile by giving the links a bit of margin */
}
#workskin .notes p.links {
width: 100%;
margin: inherit 0;
justify-content: center; /* this keeps it looking nicer when spread across multiple lines (like if there's a bunch of links lol) */
}