Actions

Work Header

Breaking Ao3 the Fun Way

Summary:

Work for testing ao3 elements.. or "How much can i break ao3?"

Click this to see summary testing
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⡠⠛⠋⠉⠉⠓⠻⢤⠀
⠀⠀⠀⠀⠀⡟⣠⣶⠖⣤⠀⣴⣯⣹⣷
⠀⣀⣀⣀⠀⣆⢹⣿⣿⡿⠀⠹⠿⠿⣉
⡞⠀⠀⠀⠀⠀⠓⠦⢄⡄⠩⠥⠔⠊⠁
⠙⡄⢠⣴⣶⣦⠀⢠⡄⣴⠀⣯⠀⠀⠀
⠀⠲⠖⠁⠉⠁⠧⠼⠁⠈⠓⠋⠀⠀⠀

h1

h2

h3

h4

h5
h6

Links work

Look to the right.

Made you look (align="right")

  1. bold
  2. italic
  3. underline
  4. strike
  • big
  • small
  • sup sub
onetwothreefourfive
ABCDE

ℂ𝕆𝔻𝔼 ℳ𝒪ℛℰ
████𓆉

Chapter 1: 30 hours and going :)

Notes:

chapter notes
css borders
css info easy copy paste

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣴⣶⠀⢀⣴⣶⡄⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣞⣿⢠⡟⣿⣿⠇⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣀⣀⣨⣿⣿⣼⣿⣟⠏⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢀⣀⣠⣤⣤⠶⠶⣿⣿⣿⢛⣿⣿⣿⣷⡟⠏⠿⡄⠀⠀⠀⠀
⠀⣀⣠⣤⣤⣼⣿⣟⢛⠠⡀⢄⡸⠄⣿⢿⣿⣇⣼⢿⣿⣟⠣⡘⠸⢿⠀⠀⠀⠀
⣸⣿⣿⣿⣿⣿⣿⣿⡌⠱⣈⠒⡄⢣⠘⠾⠟⡠⠘⠞⡿⢋⠔⢡⠃⣿⡆⠀⠀⠀
⣿⣿⣿⣿⣿⣿⣿⣿⡇⠡⠄⢃⠌⠄⢣⠘⠤⡁⢍⠒⡐⠌⣂⠦⣉⣿⡇⠀⠀⠀
⢿⣿⣿⣿⣿⣿⣿⣿⡇⢡⠊⠔⡨⠘⢄⠊⡔⢁⠊⡔⢁⠎⣐⠺⢅⣾⡇⠀⠀⠀
⠘⣿⣿⣿⣿⣿⣿⣿⠃⡐⠌⡂⠥⢑⡈⢒⠨⠄⡃⢄⢃⢎⡱⢃⠎⣾⠇⠀⠀⠀
⠀⠈⠛⢿⣿⣿⡿⠋⡐⢀⠢⢡⠘⡠⠘⡄⢃⣜⣠⣮⡿⠷⡂⢍⢂⣿⠀⠀⠀⠀
⠀⠀⠀⠀⠈⠙⠓⠶⠶⠤⢾⣄⠂⡱⣌⡜⣻⣋⣯⡕⡘⠤⡑⢪⡰⣿⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣶⣤⣔⣸⣨⣍⣍⣱⣬⣶⣽⣶⡿⠟⠢⡄⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡼⡷⠈⠙⠛⠿⠯⠽⠿⠿⠟⠛⠋⠉⣄⣇⠀⠹⡄⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰⢃⡇⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠀⠄⠀⣹⡄
⠀⠀⠀⠀⠀⠀⠀⠀⠀⢿⠻⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣶⣾⠃⠘⡇
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣆⣿⣄⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⣴⡏⠀⠀⠀⣼⠇
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢿⡉⠻⣿⣿⣿⣿⣿⣿⣿⣿⠿⠛⣷⣤⣀⣼⠏⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⡇⠀⠘⠿⢿⣿⣯⣽⣻⠟⠁⠐⢤⡯⢙⣿⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⠀⠀⠀⠀⠘⣿⠀⠀⠀⠀⠀⠀⠀⢸⣿⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⡆⠲⢶⣄⠀⢻⡆⠀⣤⣀⠀⠀⠀⢸⣿⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣽⡄⠀⠀⠀⠘⣿⠀⠈⠛⠃⠀⠀⢸⣿⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢣⠉⠛⠓⠒⠒⠻⡟⠒⠶⠦⠶⠶⠞⢿⡆⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡤⠬⣷⣶⢶⣦⣤⣄⣷⣄⣀⣄⣀⣀⣠⣾⠇⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡏⠀⡄⡀⠙⢾⣟⢯⣿⡿⠿⠿⢿⣿⣿⡿⣿⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠳⣤⣤⣤⣤⣼⣿⣿⡇⠈⠠⠄⠀⠙⣿⣿⡿⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠁⠁⠀⠀⠀⠘⠿⣭⣉⣉⣩⡵⠋⠀⠀⠀

Chapter Text

Oh my god that scared me Mew LMFAO WHAT!!!!! THATS SO COOL (ref: whatever the hell is at the bottom of the screen thats so cool)

IT DOESNT USE CSS???????? IT WHAT???? ITS JUST HTML???? holy.,., guacamoli... the urge to make a "html only but really cool fic with no css" is hitting hard again...,

WASuP THIS IS WHAT I WANTED TO SHOW U, POSITION: FIXED; AMIRIGHT? ANYWAYS, BTW I WILL REPLY TO THE COMMENTS IN THE IN MY INBOX JUST GIVE ME A DAY OR SOMETHING I NEED SLEEP

                                                                       '\      o     +                '      *                           
                '                    .                                 . \             *           *                                     
                                  *                                       *                                                          '   
                                                *               .           .:'             o       +               .                  '.
    +                                             +.                    _.::'     .                         o                            
                          .                '        .                  (_.'                      .                                       
               .                                   +                                                                                  +  
             |             '                                         '            .                                        +             
 .         - o -                                        *     .                 +     '                                                  
             |                                  '                                                              .                         
                                                                                                          '    +                         
    o                                o                          '    '          .        +        '                      .            .  
                                                            '                                                                            
   '                      o                    '   '      +                          .   |     +                                         
          .-. *  .                                         |                            -o-   +                                          
         ( (                                    .         -o-              o             |                           +                   
          `-'                                              |                                            .        '                       
           .           o                       .                                   \                  *                                  
    +                .                                                   .      '   \             '                                      
.                                                                                    *                .                                  

The current time is UTC gif UTC

wog?

  ,-.       _,---._ __  / \
 /  )    .-'       `./ /   \
(  (   ,'            `/    /|
 \  `-"             \'\   / |
  `.              ,  \ \ /  |
   /`.          ,'-`----Y   |
  (            ;        |   '
  |  ,-.    ,-'         |  /
  |  | (   |            | /
  )  |  \  `.___________|/
  `--'   `--'
camera

camera

hello world


interrogate guards

interrogate guards

ello word


talk to therapist

talked to therapist

hell worl


FINISH HIM

you completed it

ell word

  • is this a square
  • no
  • ao3 hates shapes ig
| ̄ ̄ ̄ ̄ ̄ ̄ ̄|
|⠀⠀⠀ BRUH⠀ ⠀⠀|
|_______|
(\__/) ||
(•ㅅ•) ||
/   づ
One
1 2 3
Two
4 5 6
pre-opened????

waIT WHAT

Celixsee-ly-ex the Wolf of Water

Hover over this to reveal the tooltip


Select a color to be:

red
blue
white

does this font WORK? 123 abcABC

does this font WORK? 123 abcABC

does this font WORK? 123 abcABC

wog wog wog wog

<p class="rainbowtext">Holy shit it works</p>

#workskin .rainbowtext {
  background-image: url(https://raw.githubusercontent.com/GumbaBunny/CodingStory/refs/heads/main/Images/rainbow_down.gif);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

I grabbed a random rainbow gif from google then slid it into github to host it somewhere, slapped the code above and this html and boom.

This is color changing, just slower, wog wog wog wog wog wog wog wog wog wog wog wog

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa what what why is this gif so weird why does it sway like that

What if I exploded into a million bits. Would ao3 care? Would it put me back together again piece by piece? No, it wouldn't. Thats why I put myself together and am now dissecting ao3 in and out. It will become my playground, if it isnt already. All of this, all of these months and hours researching and making things work, all of it just to make gay people on ao3. For me, at least. It was always about the gay people that infect my mind. It isn't a sickness, its the cure. These gay people I love, the gweebus' they are, have made me learn something just to make their stories more unique. A news article, wordsearch, invisible text, pin code password, and more.. all of it just for the reader to experience something beyond reading. They are apart of the story in ways not seen often. They are emmersed in new ways. A rain gif background, or a snowy landscape. A cyoa that looks like a menu screen or even text thats slightly different or off. What is the default font ao3 uses? Do you know it by heart? What if it changed ever so slightly? What if the size was just 1 point smaller or bigger, would someone point it out? Ill test that one day, I swear.. I just realized all of these test elements are all rainbow-esk. That was not on purpose but colors are so damn pretty okay?! It gives me whiplash when I code here/other works I have that are all super css/html heavy then I go "lets take a break and read my gay people!" and then stare at monochrome flat words. I took a 2 week break from coding and when I returned I knew so much less somehow. i suppose soaking in information from september to early march nonstop everyday made my brain break because i went from knowing virtually little to nothing about coding, let alone on ao3, to whatever the hell all of this is. like what do you MEAN ive made all of this slowly over 6+ months? wait. SIX+ MONTHS?>? ough.. goodbye sanity, hello css/html. and yes I am rambling bc i used too much lorem ipsum and want to see how this gif works with big and a lot of text. kinda hard to read i get that but alas, its probably just the gif. Ill text other gifs and even images and stuff later (which by the time you are reading this ive probably done? depending??) anyways thanks for even clicking on this work ive put a lot of effort into anything and everything i can think about under the sun. i literally have like, 15 works hidden where i test various things before it even goes into CE (coding encycloedia). love you big

#workskin .preface.group h2.title { background-image: URL(https://raw.githubusercontent.com/GumbaBunny/CodingStory/refs/heads/main/Images/yippeedance.gif); background-size: contain; background-repeat: no-repeat; background-position: center center; font-size: 0; height: 300px; } #workskin .byline.heading { font-size: 0; } #workskin .byline.heading::after { content: "This title is temporary"; font-size: 20px; padding: 5px; background: linear-gradient(to right, #ff0000, #FFA500, #FFFF00, #00FF00, #00FFFF, #4169E1, #8A2BE2, #511c75); color: black; }

<p class="rainbowstackthin" Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

<p class="rainbowstackthick" Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

stacked p not blockquote stacked p not blockquote stacked p not blockquote

stacked blockquote stacked blockquote stacked blockquote stacked blockquote

fade test Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

wog wog Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

the ever Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

so many of these Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

SHART SHART SHART Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Youre reading this!

People who think they know everything are a great annoyance to those of us who
do. Isaac Asimov

CSS

ough ignore this

#workskin Bomb Test ################################## {
color: INHERIT;
}

#workskin .bomb {
display: block;
visibility: visible;
transition-property: visibility;
transition-delay: 9999999999s;
}

#workskin .boom {
display: none;
}

#workskin .boom:has {
visibility: none;
transition-property: visibility;
transition-delay: 3s;
}

#workskin a.bomb:target {
color: inherit;
}