Archive of Our Own ^beta

hi hi !! i’ve been working on getting better at html/css recently and i have a few other workskins that i’m working on polishing up before i share them, but this one was super easy so i can share it now :D

i don’t know how much use other people will get out of it, i figure it’s good for if you just wanna include a fun little interactive element in a fic, or you wanna make something mildly educational about a piece of media you like or something

basically, if you input this:

<div class="questionbox">This is a <b>question!</b>
 <div class="answerbox"><details>
    <summary>Answer</summary>
  <p>This is an <b>answer!</b></p>
    </div>
</div>

you get this:

you can also customise the box by editing the css! in this example i just changed the colours.

the css for the basic grey box is here:

#workskin .questionbox {
  background: #bfbfbf;
  padding: 2% 1%;
  text-align: center;
  max-width: 35%;
  margin: auto;
  border-radius: 10px;
  border: #000 solid 2px;
  font-family: courier, consolas, monospace;
}

#workskin .answerbox {
  background: #fff;
  max-width: 75%;
  margin: auto;
  padding: 2% 1%;
  border-radius: 10px;
  margin-top: 5%;
}

the answer box is the same for both question boxes, but it can easily be edited too. the background of the pink box was changed to a gradient by changing the background element to background: linear-gradient(#ffe6f0,#ff66a3); and the border colour was changed from #000 to #ff66a3

and uuh, if anyone has any problems lmk i guess? idk this isn’t exactly super complicated so i can’t imagine there being any issues