Randomness

"what is this BABY doing in space!???"

You wanna ship canonically aspec characters because “aro/ace people can still date/have sex”? Okay, then. LET’S DO IT.  I wanna see an aromantic character with an alloromantic love interest. I wanna see that confession of undying love and the moment when the aro character says they will never feel the same way—not romantically.

I wanna see the asexual character with their allosexual partner. I wanna see that moment when the ace characters tries sex with their partner for the first time because they want to make them happy only to realize that they are 100% sex repulsed.

I wanna see the two demiromantics who don’t even know if what they feel is romantic attraction, but they adore each other and just want to make healthy snacks together and destroy each other at Mario Kart.

I wanna see the two aces who love sensual affection and are figuring out what they define as sexual or not.

I wanna see the romance + sex neutral aroace who happily and consensually does whatever makes their partner happy…but their partner still struggles with feeling undesired. 

im forever in awe of your formatting for this fic with all the media stuff and i loved the translation boxes, they're such a good idea for eridian / english language barrier things (and also bloodymary language barrier, which i may be trying to write..) specifically how did you get the box to extend the screen Only when the relevant text is being hovered over, then revert back to a fixed position after? and not make the fic awkward to scroll through with it sliding to the extra space on the right unnecessarily?

sincerely, a humble ao3 writer who has no idea how html and coding works <3

Oh, of course! Okay, little HTML code crash course for pop-up text boxes (that work via hovering on pc and via tapping on mobile!)

So! You want to make a little textbox to help clarify details about certain words in your writing. Let's say you want to define a word for your audience. We can do that easily, like in the example below:

And hovering:

The code for this is, thankfully, relatively simple.

If you do not already, create a workskin that you can apply to your fic. Then, into that workskin, you are going to add the following css code (included as text below the 'read more' so you can just copy-paste from there):

For customization:

The underline beneath the word that can be hovered over is colored by 'border-bottom.' If you want to change the color, find the hexcode of the color that you want (just use google's color wheel) and replace #058fff with it.

The background of the textbox is determined by 'background-color' (currently #c5d2f0)

The gradient that I use is determined by 'background: linear-gradient.' The color the gradient starts as comes first (#bff0e3) and the one it ends as comes second (#cbb6fd)

The gradient will always overpower the plain background color, which I have in my code for redundancy. If you do not want a gradient and just want a solid background color, simply remove the gradient line of code.

The color of text within the textbox is determined by 'color' (currently #1e3a2f)

For a larger or smaller textbox, adjust 'width' (now 240px)

Once this is in your workskin, you can use it within your fic. This has to be done within the HTML editor of the fic, NOT the Rich Text editor.

Find the text that you want to be able to hover over and replace it with the following:

<span class="show">Hover This Word<span class="hide">This is the hidden text that pops up inside the box.</span></span>

Then insert the appropriate information (change 'Hover This Word' to the word you want showing, change the second part to what you want in the box).

Altogether in a paragraph within the HTML editor, it might look like this:

<p>This is regular text, but <span class="show">Hover This Word<span class="hide">This is the hidden text that pops up inside the box.</span></span> the rest of the sentence continues here.</p>

Keep in mind, I am not phenomenal at code. There are as many redundancies as I could manage within this, but occasionally there will be some cutoff at the edges of the page to ensure that there isn't overflow. Ao3 can't dynamically fix this because all screen sizes are different. However, this has all worked pretty well for me thus far.

I hope this is helpful, and that you are able to use it within your own fics! Let me know if you have any more questions as to how it works or how to use it, I would happy to answer to the best of my ability!

CSS Code for Workskin Below (for copy-pasting):

:33

i love space yaoi

and i love space yuri

space gays!!!

They probably found the dress on the ship somewhere and Rocky wanted to match

Also I like to think that whatever shenanigans Grace and Rocky get upto is reflected on the ships the same