DIAGONAL SCROLLLLLLLL
This commit is contained in:
parent
8b3969b2d9
commit
49e49a7d65
GPG key ID:
42A5B952E6DD8D38
3 changed files with 38 additions and 57 deletions
|
|
@ -1,3 +0,0 @@
|
|||
# diagonal-scroll
|
||||
|
||||
CSS abuse
|
||||
92
index.html
92
index.html
|
|
@ -1,57 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Petroleum</title>
|
||||
<style>
|
||||
body {
|
||||
background-image: url('tibet.png');
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
background-position: center center;
|
||||
overflow: hidden;
|
||||
}
|
||||
div {
|
||||
width: 200vw;
|
||||
height: 200vmax;
|
||||
overflow: scroll;
|
||||
transform-origin: left top;
|
||||
transform: translateX(-100vw) rotate(-45deg);
|
||||
}
|
||||
p {
|
||||
background-color: #FFFFFFCC;
|
||||
padding: 3px;
|
||||
width: 30%;
|
||||
margin-bottom: 100px;
|
||||
transform-origin: left top;
|
||||
transform: rotate(45deg) translateX(100vw);
|
||||
}
|
||||
pre {
|
||||
margin-top: 175vmax;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>It's an important 21st-century skill to know how to respond in the event of finding a panda and giraffe committing tax fraud on your driveway.</p>
|
||||
<p>Meet Pema, an ordinary overcaffeinated kawaii kemonomimi hyrax objectified Tibetan teenage anime schoolgirl. Apparently 1) There are driveways in Tibet 2) There is a panda and giraffe on her driveway frauding their way through their tax forms.</p>
|
||||
<p>"I'm Mao Zedong II," the panda introduces himself, "A friendly genocidal Qinling panda. Call me II. And this is my buddy Aleq, a professional spammer giraffe with a penchant for portmanteaus."</p>
|
||||
<p>"Penchanteaus," Aleq adds.</p>
|
||||
<p>"Sounds cool, but why're y'all trespassing on my driveway?" Pema squeals.</p>
|
||||
<p>"We're trying to figure out how to report capital gains from time traveling on our tax returns," II explains.</p>
|
||||
<p>"WAIT, TIME TRAVEL???" Pema interjects.</p>
|
||||
<p>Aleq replies, "Yeah, we mugged a Sinopec employee last week and discovered secret docs about Sinopec's time machine that they're using to travel back to 66,000,000 BCE and bury more dinos. Sinosaurs. And you helped us storm the Sinopec lab and steal the time machine! The tichine! And where else to park our tichine than your driveway?"</p>
|
||||
<p>"Huh what? What the f? I never stole a time machine or tichine or whatever with you two weirdos."</p>
|
||||
<p>This puzzles II and Aleq until suddenly, II sreams, "AHA! YOUR FUTURE SELF DID! You're DESTINED to help us!" And with that, II shoves Pema into the time machine, which whisks her back to last week. The Sinopec time machine heist was actually super boring, so we'll just skip it. Pema then travels forward a week and discovers her driveway is now a smoldering mess, with the main attraction being Mao Zedong II's corpse. Aleq is standing horrified, his face contorted with fear.</p>
|
||||
<p>"OMG what happened???" Pema asks.</p>
|
||||
<p>"Maotroleum." Aleq replies, "His last words were "I'll get you, even if you fossilize me!"" Mao had been murdered by that Sinopec employee from earlier and would now partake in a totally humane experiment of having his remains sent to 66,000,000 BCE and turned into petroleum!</p>
|
||||
<p>"We have to go back in time to save II!" Pema says, determined.</p>
|
||||
<p>Aleq shook his neck, "The past is fixed. We can't change it, only be changed by it."</p>
|
||||
<p>"Surely there's something we can do?"</p>
|
||||
<p>"Well, how about crying?"</p>
|
||||
<p>"Wait... I know... we have to go back to the Sinopec lab. Aleq, do you have a flamethrower?"</p>
|
||||
<p>The two return to the lab and burn the whole thing to the ground, igniting all the experimentally-produced petroleum in sight.</p>
|
||||
<p>"Hey Aleq," Pema asks, "Do you realize what's in that petroleum? I never knew Mao Zedong II's dead body could be so useful!"</p>
|
||||
<pre></pre>
|
||||
</div>
|
||||
</body>
|
||||
<head>
|
||||
<title>CSS Abuse</title>
|
||||
<style>
|
||||
div {
|
||||
left: -500px;
|
||||
top: 0px;
|
||||
position: fixed;
|
||||
width: 1000px;
|
||||
height: min(100vh);
|
||||
overflow: scroll;
|
||||
transform-origin: top left;
|
||||
transform: skewX(45deg);
|
||||
font-family: DejaVu Sans, Noto Sans, Sans-Serif;
|
||||
}
|
||||
p {
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
width: 500px;
|
||||
transform-origin: top left;
|
||||
transform: skewX(-45deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>Oh, great. Another doe-eyed rebellious anime girl to add to the endless parade of generics that litter the media landscape. Ennui, huh? Well, isn't that just perfect.</p>
|
||||
<p>Ennui had a seething hatred for modern society, because honestly, who doesn't? She despised the endless monotonicity, er, I meant monotony, of her life and the only emotion she could feel nowadays was boredom. Endless, dull, tedious boredom!</p>
|
||||
<p>One day, Ennui had the brilliant idea of running away from home and going for a joyride on the Trans-Siberian Railway. Because, you know, nothing screams excitement quite like sitting in a cramped, musty train for days on end.</p>
|
||||
<p>After breaking multiple countries' multiple laws, the first five seconds aboard the train were a flurry of excitement, but boredom returned as quickly as it had departed. Suddenly, out of the corner of her eye, Ennui noticed a visibly troubled young man with an exceptionally bad haircut. Since she had nothing better to do, Ennui roasted his hairstyle, but the man took it as a compliment, and they struck up a slightly less boring conversation.</p>
|
||||
<p>He introduced himself as <a href="https://web.archive.org/web/20230526184241/https://en.wikipedia.org/wiki/Benjamin_Qi">Ben Qi</a>, a three-time International Olympiad in Informatics winner, as if anyone cares. Yeah, I'm sure Ennui was just thrilled to have met such an exciting and charming individual.</p>
|
||||
<p>But wait, it gets even better! Ennui nosily asked Ben Qi what was bothering him, because that's totally a question you ask a stranger you just met 30 seconds ago. Ben Qi just replied cryptically, "I have a secret. A deep, dark, beleaguering secret gnawing away at my soul. And I'll tell you what it is, if and only if, you become an IOI winner like me."</p>
|
||||
<p>So, because Ennui was so utterly bored with life, she immersed herself into IOI training, living and breathing Dijkstra's algorithm, AVX2-accelerated segment trees, and the Knuth-Yao DP speedup. Robert Tarjan soon started haunting her dreams.</p>
|
||||
<p>And then, surprise surprise, she actually won the IOI! Because, you know, that's totally realistic.</p>
|
||||
<p>Long at last, the moment had come. Ben Qi smiled proudly and said, "Congrats Ennui! You're now an IOI winner! And now I must fulfill my side of the biconditional. I'm going to reveal to you my secret."</p>
|
||||
<p>Ennui leaned forward eagerly, her heart pounding with anticipation. Finally! She had waited so long, sacrificed so much, suffered through so many Robert Tarjan nightmares! Finally!</p>
|
||||
<p>Ben Qi took a deep breath and ponderously whispered in a hushed tone--Oh wait, I must interrupt! You see, dear reader, I cannot reveal to you what Ben Qi's secret is. Why, you ask? Well, simply put, unlike Ennui, you are not an IOI winner.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
BIN
tibet.png
BIN
tibet.png
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 MiB |
Loading…
Reference in a new issue