Chapter Text
Suddenly, an unseen spell struck [Mario’s] sternum, trapping him in rings in magic.
A strangled cry exited his mouth. “No—!”
Two Magikoopas soared onto the scene—one dressed in blue, the other in purple.
Mario grit his teeth.
“Ugh…! Kamek! Kammy!”
[ ♪ Peach’s Castle Stolen (Super Mario Galaxy) ]
“Mweh heh heh heh heh!” the hag-like witch laughed. “Trying to interfere, Mario? You’re still ever the stubborn one, I see.”
“Unfortunately for you,” Kamek continued, “we expected that you’d make it this far. His Ambitiousness has no room for your jumpy little exploits!”
“Let me go, you has-beens!” the struggling hero exclaimed. “You won’t get away with this!”
“Oh, I disagree,” the court wizard. “No one in this universe can stop us now. Now, then. So long…”
“…enjoy your flight!” the duo said together.
I got a request asking for the music track indicators I use in But the Fates Aren’t Done With Yet and Can You Feel Life, Movin’ Through Your Mind?. So, out of generosity, I decided to show you all how you can make them yourselves using CSS.
These were primarily inspired by the way the Super Smash Bros. series shows track names at the beginning of each match. It doesn’t exactly look the same, of course, but it still works pretty well. The track names are coded explicitly to use white text, so I would be wary of that if you’re a site skin with a white background (and/or your track has a decently long label).
For Reversi users like myself, I recommend against using black as the default background color; it makes it impossible to see when you’re looking at drafted chapters of a fic.
[ ♪ Stars in the Sky (Sonic the Hedgehog 2 (2022)) ]
Example HTML Code
<div class="music">
<p>
<span class="hide">[ ♪ </span><span class="note"></span>
<span class="name">
<a href="INSERT LINK">INSERT TRACK NAME</a>
<small><i>(INSERT TITLE)</i></small>
</span>
<span class="hide">]</span>
</p>
</div>
Base CSS Code
#workskin .music {
background-image: linear-gradient(90deg, rgba(200, 90, 64, 1.0) 50%, rgba(200, 90, 64, 0.0) 100%);
border-radius: 17px 0 0 17px;
margin: 20px auto;
padding: 5px;
}
#workskin .music::before {
content: '♪';
color: #ffffff;
display: inline-block;
float: left;
font-weight: bold;
padding: 2px 7px;
white-space: normal;
vertical-align: top;
}
#workskin .music p {
font-style: normal;
margin-block-start: 0em;
margin-block-end: 0em;
margin-left: 5px;
}
#workskin .music a {
color: #ffffff;
}
#workskin .music .name {
display: inline-block;
white-space: normal;
width: 90%;
}
#workskin .no-italics {
font-style: normal;
}
#workskin .hide {
display: none;
}
The indicators also work with track names that necessitate wrapping around the screen; the music note will stay in the top-left corner without moving to the middle or bottom of its column.
If you want different color variations taking the place of the base one, add a custom class in the CSS code and attach it to the <div class="music"> tag.
This is what it would look like, using the example class below: <div class="music sonic">.
#workskin .sonic {
background-image: linear-gradient(to right, rgba(25, 76, 165, 1.0) 50%, rgba(25, 76, 165, 0.0) 100%);
}
And that’s it! Pretty simple, huh?
I hope you guys manage to get some good use out of this. It’s always fun to imagine appropriate music during dramatic moments in fic, so taking it one step further is just the icing on the cake, really.
Next chapter will have the different color variants used in Can You Feel Life, Movin’ Through Your Mind?, if you’re interested.