Actions
Work Header
Inside, Outside, Upside-down
𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Chapter 6: No escape but graduate!
Summary:
Ehh... the bug bit me again, barely 11.5 hours after the initial upload (thank you, my Muse), so... I figured let's give this one more little twist... 😅
So this one has literally no escape built into it for an easy out in order to be able to click anything (is there an extra [hidden] “Hide creator's style” button lying around? Maybe there is, and maybe there isn't — that's just it, nobody knows [to paraphrase Stimpy to Ren, re. The History Erase Button ], but I'm not telling. There certainly could be, but I could simply be messing with your head there.): there are at least two workarounds (well, 1.5 of them, I guess?) that pop into my head (and I don't mean the back-button [though that might be necessary to kudos or comment, if you can't get around this chapter's layer of fun] — though using that might give you a clue as to how to... ahem, address the problem 😉).
What's your solution?
Huge props to everyone named in Targeting specific AO3 work sections (not site) with CSS effects for their material giving me crucial insights and sparking the drive, but also to the many other CSS authors whose works I've perused over the years.
Notes:
![]()
Well, I learned something here: be careful with your
left:value; all of the positional declaration properties can be a little finicky (and one must check multiple devices!), but man, that one turned out not to be a good idea to set to-200em, because even though I gave it a width of-200vw(notice the change there?), it didn't block out the screen on my iPhone or my Android, even though everything was hunky dory on my desktop's Chrome, Firefox, Opera, Edge, and Tor.Me, I'd go with ?style=disable, but that's not everyone's cup of tea, granted; the other was a new tab and enabling a site skin that automatically disables creators' styles (or targets this work specifically, or/or/or) and then refreshing this page, though of course simply viewing the page source would let you see things before they happen, and inspecting the elements would let you — ahem! — see the invisible — AHEM! — (but where's the fun in that, I ask you, without first puzzling things out?). 😉 I would say more... hmm... oh wait, I do believe that I did... now where in the world could that be...
...and then there are those who just love to complicate things.... (if you can read this, comment “Jedi”! 🤣)
Hax the w0rld, man! ❤️
NB: 2 hours and 23 minutes after I uploaded this chapter, I finally got the notification, so if any of my subscribers are wondering why I was seemingly an hour and more late with this morning's chapters in everything (and last week's chapter in the latest Peach/Zelda & Sonic fic.), then heads-up: it was the same thing then, too. 🤔 I will presumably upload next week's second chapter of The Futa Plague at my usual Sunday 10:30 CDT (15:30 UTC), but I make no guarantees as to when (or if...) you'll get the notification.
BELATED EDIT FOR SPECIAL NOTE: When doing some OTT work like this, just as always, but in this case more than ever... check your results on multiple browsers with multiple aspect ratios, then check it across multiple devices (and on 'phones, turn them sideways for portrait vs. landscape), and scroll top-to-bottom AND side-to-side, and then do all of this again in Low Vision Site Skin because it completely alters the height of things such as the screen top position and just how far down the bottom banner really is, and then maybe try it all again-again in Reversi and all other site skins if you have any special colors involved — and don't be surprised when you do find out that you messed something up somewhere as viewed in some skin on some browser with some device at some ratio... and find out again that something else is now wrong due to fixing the first dozen things, and then again, half a dozen more times (and since I haven't tested this on a big-screen TV as a display... I can guarantee that some of you have breezed right through this and wondered what my apparently-empty braggadocio was about — well, you can be my guinea pig: go try it again with your browser shrunken to anything like a normal monitor size or smaller, and lemme know if there's a difference).
...ask me how I know... 🙄
I'll let you in on a little secret, if you promise not to tell anyone else: half of the crazy numbers that you see in my work skin? Sure, some are conscious design, but most are forced to be enormous due to the ridiculous layout changes named above THAT YOU NEED TO CHECK. And I guaran-damn-tee you that that's exactly what drives many other works' crazy-looking choices.
OOH! I flaked, and didn't add this here a few weeks ago when I tumbled to it, instead only using it in some fic.s that really needed it and adding it to the Targeting tutorial. Different site skins (open that in a new tab and test them all vs. this chapter) dick with even some of AO3's official classes' bg and font color, but the <div class="caution"><div class="draft">combo [caution OUTSIDE of draft, not inside] seems to be safe against the official skins anyway</div></div>!
(See the end of the chapter for more notes.)
Notes:
Also, when I uploaded The Futa Plague 's 1st chapter, and all of this CSS demo.'s chapters and the 2nd chapter of that Peach/Zelda & Sonic fic. with Tails's super-science SuSy [supersymmetry particles] “flashdark” toys all on the same Sunday morning in one hour increments... I had been rushing through things still half-asleep, Alt-Tabbing like a madman in order to re-upload and re-format that second chapter due to having accidentally hit a few wrong buttons (it had to do with Add Chapter instead of Next Chapter, Alt-Left-Arrow, and a short-circuiting brain). It turned out that the delayed notifications were a Godsend in the end, because one of the many extra browser tabs still contained an un-deleted version of that chapter as I had originally worded and formatted it, and that delay permitted me to copy-and-paste the original stuff before the notifications went out (i.e.: when I received it, it showed the corrected version, not the rush-job version), but the lesson there was that I should have enabled this Site Skin that I had already bumped into before that: 0_0_MLM's Anti-Disaster Site Skin (Accessibility); it hides the buttons for “Orphaning works (all together or individually), Clearing history, Deleting bookmarks, chapters, works, skins, or account, Deleting messages or random Marked for Later works on your homepage” and includes a rule that you can add in to hide your Log Out button... needless to say, I grabbed it in a heartbeat... and then promptly forgot to enable the skin 'til a few days later.... 🙄
Anyway, heads-up there, and rock on! 🙂
Notes:
Always remember, folks:
TROGDOR BURNINATES!Also in this series
- Part 1 — How to AO3
(general info. for newb.s, tips and information that years-long veterans often miss)- Part 2 — How to make and fix a series on AO3
(+tips re. Wayback, spaces and dashes, TTS problems)- Part 3 — Analyzing AO3 reader traffic flow
(one's own fics' reader traffic)- Part 4 — A year-long AO3 overall traffic analysis
(when do people upload, read, comment, kudos, bookmark across all of AO3? )- Part 5 — Fonts, and colors, and work skins, oh my!
(change letters, color, see others' work skins)- Part 6 — Chess puzzle extravaganza
(256 randomly selected preconfigured chess puzzles, a new one with every refresh
[secret message-reveal from BBEG, because of course];
no JS: just HTML and some CSS)- Part 7 — Bubble-pop! game
(More RNG fun;
playable bubble-popping;
no offsite JS: just CSS and some HTML;
caution re. volume;
full code included.)- Part 8 — Targeting specific AO3 work sections (not site) with CSS effects
(color your CSS-verboten summary, images below series link, style comments section? 😉)- Part 9 — Inside, Outside, Upside-down
(a showpiece of fun that one can have with CSS — a challenge puzzle, rather than a tutorial;
incl. CSS on a single paragraph within the work summary, among other things;
try to navigate it, work out its little puzzles, and work out how it was all done;
caution re. volume in ch. 1, and flashing lights on:hoverin ch. 2;
NB: must be in single-chapter view, not entire-work)- Part 10 — Green Rain font, from The Matrix
(several ways to drop Green Rain into your background, simulating the digital rain effect)- Part 11 — Building ConLangs, with a concrete example
(going about constructing one's own invented language: words, grammar, writing, etc.)
NB: If the work skin [for this piece or any other] was stripped by downloading, so that you can't see any red ink or yellow highlighting or any other special effect, then please see my fonts tutorial's sub-section on re-inserting rules.Or spin through ►my other works in collections◄ to see what grabs you (I've set them into thematic collections for comedy, zombies, romance, dice-RPGs, food-porn, sci-fi, etc. for readers' ease of browsing), or ►my “Works” page ◄ (everything simply listed in order of most recently updated), or just ►subscribe to my author's page ◄ in order to get constant updates on all of my work!
Series this work belongs to:
- ← Previous Work Part 9 of How to Next Work →
Actions
Kudos
hng_mnh7908, masochistfork, QuailofSnowandCopper, feind, sleepy__pqnda, 404_vocabulary_not_found, RollingKing, lowpolyfish, Fanbase_Universes, polyneedpilled, wyspier_kyssies, VoreDrake, TipToe_Tanpopo, vass, greenbean_paste, mystyrust, riocf, GumbaBunny, and Mewzebub as well as 5 guests left kudos on this work!
