contents and homepage
parent
9874147d28
commit
bfbac93c06
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"liveServer.settings.port": 5501
|
||||||
|
}
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
:root {
|
||||||
|
--purple: #7d50ff;
|
||||||
|
--purple-bg: #cec6ff;
|
||||||
|
--orange: #ff5416;
|
||||||
|
--orange-bg: #ffb58d;
|
||||||
|
|
||||||
|
--color: white;
|
||||||
|
--background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 28px;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: var(--color);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 96px;
|
||||||
|
line-height: 1.1;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: "SI17";
|
||||||
|
width: 8ch;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
-webkit-text-fill: white;
|
||||||
|
-webkit-text-stroke: 1.5px var(--color);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
max-width: 60ch;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index li {
|
||||||
|
margin: 0 4px;
|
||||||
|
display: inline-block;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index li::first-letter {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: "SI17";
|
||||||
|
}
|
||||||
|
|
||||||
|
.index a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.purple,
|
||||||
|
a.orange {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
margin: 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.purple {
|
||||||
|
background-color: var(--purple);
|
||||||
|
}
|
||||||
|
a.orange {
|
||||||
|
background-color: var(--orange);
|
||||||
|
}
|
||||||
@ -0,0 +1,138 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>This loot box found you for a reason</title>
|
||||||
|
<link rel="stylesheet" href="font/font.css" />
|
||||||
|
<link rel="stylesheet" href="css/style.css" />
|
||||||
|
<script src="js/color.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>
|
||||||
|
This <br />box <br />found <br />you <br />for a<br />
|
||||||
|
reason
|
||||||
|
</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h2>Intro</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Video games features are making us more, not less, productive. Life and work are
|
||||||
|
gamified through social media, dating apps, and fitness apps designed to increase
|
||||||
|
motivation and productivity. Gamification blurs the lines between play, leisure and
|
||||||
|
labour, to release our collective dopamine for profit.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Games in themselves often perform a reproductive role, presenting capitalism as a
|
||||||
|
system of natural laws, exemplified by in-game predatory monetisation schemes. On
|
||||||
|
the other hand, games provide necessary down time and relaxation, helping people
|
||||||
|
function in a largely dysfunctional economy and society. Yet leisure remains a
|
||||||
|
contested space which is still unequally distributed, between genders, ethnicities
|
||||||
|
and abilities.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<img src="img/boxes.jpg" />
|
||||||
|
|
||||||
|
<h2>Index</h2>
|
||||||
|
<ul class="index">
|
||||||
|
<li>What is a loot box?</li>
|
||||||
|
<li>Crossword imaginary grid game</li>
|
||||||
|
<li>One-sentence game ideas</li>
|
||||||
|
<li>Nim fanfic</li>
|
||||||
|
<li>The murderous history of loot boxes</li>
|
||||||
|
<li><a href="unfinished-thoughts" target="_blank">Unfinished thoughts</a></li>
|
||||||
|
<li>The leader</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://pzwiki.wdka.nl/mediadesign/Connect-less" target="_blank">
|
||||||
|
Connect[less]
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://hub.xpub.nl/soupboat/xquisite/" target="_blank">
|
||||||
|
Xquisite Branch
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="katamari" target="_blank">Katamari Fanfic</a></li>
|
||||||
|
<li>Life hacks</li>
|
||||||
|
<li>Can gaming make a better world?</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
Download → <a href="pdf/si17-purple.pdf" class="purple" target="_blank"></a
|
||||||
|
><a href="pdf/si17-orange.pdf" class="orange" target="_blank"></a>
|
||||||
|
|
||||||
|
<h2>Digital Contents</h2>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><a href="unfinished-thoughts" target="_blank">Unfinished thoughts</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="https://pzwiki.wdka.nl/mediadesign/Connect-less" target="_blank">
|
||||||
|
Connect[less]
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://hub.xpub.nl/soupboat/xquisite/" target="_blank">
|
||||||
|
Xquisite Branch
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="katamari" target="_blank">Katamari Fanfic</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Fage Not Pound</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Fage not Pound was a temporary bar where visitors were invited to actively reflect
|
||||||
|
upon the blurred boundary between leisure and labour. Fage Not Pound was itself
|
||||||
|
hosted by Page not Found, an art book shop in Den Haag (The Netherlands).
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Fage not Pound opened on the 25th of March 2022 from 18:00 to 21:00 but its
|
||||||
|
existence lasted much longer in AccAcc (FNP's local time unit). Fage not Pound was
|
||||||
|
imagined to host the official launch of This Box Found You For A Reason (Special
|
||||||
|
Issue #17) a publication by XPUB.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>Colophon</h2>
|
||||||
|
|
||||||
|
<h3>Makers:</h3>
|
||||||
|
<p>
|
||||||
|
Ål Nik (Alexandra Nikolova), Carmen Gray, Chaeyoung Kim, Emma Prato, Erica
|
||||||
|
Gargaglione, Francesco Luzzana, Gersande Schellinx, Jian Haake, Kimberley Cosmilla,
|
||||||
|
Miriam Schöb, Mitsa Chaida, Supisara Burapachaisri
|
||||||
|
</p>
|
||||||
|
<h3>Co-published by:</h3>
|
||||||
|
<p>
|
||||||
|
Page Not Found and the Master Experimental Publishing (XPUB) at the Piet Zwart
|
||||||
|
Institute, Willem de Kooning Academy, Hogeschool Rotterdam [logo PNF]
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Typeface:</h3>
|
||||||
|
<p>Special Issue 17 by Supisara Burapachaisri and Jian Haake</p>
|
||||||
|
|
||||||
|
<h3>Thanks to:</h3>
|
||||||
|
<p>
|
||||||
|
Lídia Pereira (ed.), Michael Murtaugh, Manetta Berends, Steve Rushton, Aymeric
|
||||||
|
Mansoux, Leslie Robbins, Sébastien Tien, Ola Vasiljeva, Dagmar Bosma, Paolo
|
||||||
|
Pedercini, Shira Chess, Cory Arcangel, Sepp Eckenhaussen & Koen Bartijn (Platform
|
||||||
|
BK) March 2022 Rotterdam (The Netherlands)
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>License:</h3>
|
||||||
|
<p>
|
||||||
|
This Box Found You For A Reason <br />
|
||||||
|
2022 XPUB Special Issue 17 <br />
|
||||||
|
Copyleft attitude with a difference: <br />
|
||||||
|
you are invited to share the publication or parts of it with others under the terms
|
||||||
|
of the
|
||||||
|
<a href="https://constantvzw.org/wefts/cc4r.en.html" target="_blank"
|
||||||
|
>CC4r license</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 342 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 422 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,231 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Object Oriented Katamari</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<script src="roll.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>A Katamari Damacy FAN FICTIOUS</h1>
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/frog.png" alt="3d Frog mugshot" />
|
||||||
|
<h2 class="character">Frog</h2>
|
||||||
|
<p class="text">
|
||||||
|
hello im the frog today im here on my lily pad ehe slurp a fly gnam ate it
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/prince.jpg" alt="The prince mugshot" />
|
||||||
|
<h2 class="character">Prince</h2>
|
||||||
|
<p class="text">roll rooooollllll papa should be proud of me vrooom vroooom</p>
|
||||||
|
<p class="text">ohh papa can be so scary</p>
|
||||||
|
<p class="text">he is looking me from the above all the time</p>
|
||||||
|
<p class="text">everytime papa is sad my whole universe collapses</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/katamari-ball-1.jpg" alt="Katamari ball mugshot" />
|
||||||
|
<h2 class="character">Katamari Ball</h2>
|
||||||
|
<p class="text">
|
||||||
|
hello frog hello giraffe hello lipstick hello rubber hello beaver hello flower hello
|
||||||
|
candy hello treasure hello television hello window hello chair hello fire
|
||||||
|
extinguisher hello carpet hello grass hello cigarette hello mouse hello mice hello
|
||||||
|
nietche hello beach hello whale hello waves hello
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/giraffe.png" alt="Giraffe mugshot" />
|
||||||
|
<h2 class="character">Giraffe</h2>
|
||||||
|
<p class="text">hello katamari ball</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/king.png" alt="King mugshot" />
|
||||||
|
<h2 class="character">King of all Cosmos</h2>
|
||||||
|
<p class="text">PRINCEEEEEEEEEEEEEEEEE</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/prince.jpg" alt="Prince mugshot" />
|
||||||
|
<h2 class="character">Prince</h2>
|
||||||
|
<p class="text">OMG I cannot fail the king of all Cosmos</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/frog.png" alt="mugshot" />
|
||||||
|
<h2 class="character">Frog</h2>
|
||||||
|
<p class="text">What do they do a giraffe and a kettle together?</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/cigarette.jpeg" alt="mugshot" />
|
||||||
|
<h2 class="character">Cigarette</h2>
|
||||||
|
<p class="text">they roll a katamari</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/joint.jpg" alt="mugshot" />
|
||||||
|
<h2 class="character">Joint</h2>
|
||||||
|
<p class="text">🙄</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/carpet.webp" alt="mugshot" />
|
||||||
|
<h2 class="character">Carpet</h2>
|
||||||
|
<p class="text">this house is sooooo messy</p>
|
||||||
|
<p class="text">full of random things lying around</p>
|
||||||
|
<p class="text">bless the king of all Cosmos that takes care of all this chaos</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/king-pantheon.jpg" alt="mugshot" />
|
||||||
|
<h2 class="character">King of all Cosmos</h2>
|
||||||
|
<p class="text">YOU HEAR THAT PRINCE?? BLESS ME</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/carpet.webp" alt="mugshot" />
|
||||||
|
<h2 class="character">Carpet</h2>
|
||||||
|
<p class="text">NO BLESS ME</p>
|
||||||
|
</div>
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/gersande panteon.jpg" alt="mugshot" />
|
||||||
|
<h2 class="character">XPUB1</h2>
|
||||||
|
<p class="text">NO BLESS ME</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/katamari-ball-2.jpg" alt="mugshot" />
|
||||||
|
<h2 class="character">Katamari Ball</h2>
|
||||||
|
<p class="text">
|
||||||
|
hello book hello shelves hello supermarket hello street hello car hello ceo of the
|
||||||
|
city public transportation system hello playstation hello carpet hello giraffe hello
|
||||||
|
frog hello ball hello dust hello microbs hello crown hello corona hello clown hello
|
||||||
|
mine hello mineral hello anti men mine hello gun hello killer hello kinder hello
|
||||||
|
children hello *rolling up all of them*
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/pantheon_rome.jpg" alt="mugshot" />
|
||||||
|
<h2 class="character">King of all Cosmos</h2>
|
||||||
|
<p class="text">I'm the SUN, I'm the BOSS, I'm the HOLE of the PANTHEON</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/prince-junk.jpg" alt="mugshot" />
|
||||||
|
<h2 class="character">Prince</h2>
|
||||||
|
<p class="text">aaaaaaah more things more things more things more things</p>
|
||||||
|
<p class="text">a stample, a tampon, a rat, a frog ,</p>
|
||||||
|
<p class="text">ohhh a pile of cardsss let's take them all</p>
|
||||||
|
<p class="text">I am the prince and I'll restore</p>
|
||||||
|
<p class="text">sassy king's mess, my papa's faults</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/moon.webp" alt="mugshot" />
|
||||||
|
<h2 class="character">Moon</h2>
|
||||||
|
<p class="text">
|
||||||
|
I feel personally attacked by this katamari ball getting bigger and rounder
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/earth.webp" alt="mugshot" />
|
||||||
|
<h2 class="character">Earth</h2>
|
||||||
|
<p class="text">It's not like it seems i can explain</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/katamari-ball-3.jpg" alt="mugshot" />
|
||||||
|
<h2 class="character">Katamari Ball</h2>
|
||||||
|
<p class="text">
|
||||||
|
hello moon hello earth hello rings of saturn hello orbital elements hello fixed
|
||||||
|
stars hello milky way hello popping stars hello shooting stars hello soundtrack
|
||||||
|
hello marimba hello calimba hello mazinga
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/queen.webp" alt="mugshot" />
|
||||||
|
<h2 class="character">The intellectual katamari meta queen</h2>
|
||||||
|
<p class="text">
|
||||||
|
ah this is interesting bc the prince never talks. so then it could be that he's a
|
||||||
|
ventriloque and the katamari speaks for him ahhh yes he talks through the katamari,
|
||||||
|
wow so meta!
|
||||||
|
</p>
|
||||||
|
<p class="text">
|
||||||
|
yes like the katamari has one hidden face and sometimes it's autonomous, other times
|
||||||
|
it's the prince
|
||||||
|
</p>
|
||||||
|
<p class="text">
|
||||||
|
*the intellectual katamari queen is in reality the interface on which you can see
|
||||||
|
the prince from the front in the bottom right*
|
||||||
|
</p>
|
||||||
|
<p class="text">
|
||||||
|
But what consistence has the katamari ? is it crunchy or ?? yes crunchy and porous,
|
||||||
|
so it can attract the grainy items on earth like pieces of sauce
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/king.png" alt="mugshot" />
|
||||||
|
<h2 class="character">King of all Cosmos</h2>
|
||||||
|
<p class="text">
|
||||||
|
ARE WE MAKING A PHILOSOPHICAL CLUB OR WHAT????? ROOOLLL ROOOOLLLL ROOOOLLLLLLLLLL
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/queen.webp" alt="mugshot" />
|
||||||
|
<h2 class="character">The intellectual katamari meta queen</h2>
|
||||||
|
<div class="text">
|
||||||
|
nono. B🤍U🤍T maybe we can start one A💥N💥D I'm probably gonna be rolled up by
|
||||||
|
katamari as I can see it coming here. ciao.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/katamari-ball-4.jpg" alt="mugshot" />
|
||||||
|
<h2 class="character">Katamari Ball</h2>
|
||||||
|
<p class="text">hello king hello queen hello prince hello</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/king-horror.jpg" alt="mugshot" />
|
||||||
|
<h2 class="character">King of all Cosmos</h2>
|
||||||
|
<p class="text">STOPP STOOOOPP DONT YOU ROLL ON US</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/katamari-ball-5.jpg" alt="mugshot" />
|
||||||
|
<h2 class="character">Katamari Ball</h2>
|
||||||
|
<p class="text">Vroooooooooooom vroooooooooooooooooom</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/prince.jpg" alt="mugshot" />
|
||||||
|
<h2 class="character">Prince</h2>
|
||||||
|
<p class="text">
|
||||||
|
Papaaaaaaa I cannot control the katamariiiiiii (or maybe I can?) Oh nooooooooooooooo
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baloon">
|
||||||
|
<img class="mugshoot" src="assets/blibli.jpg" alt="mugshot" />
|
||||||
|
<h2 class="character">blibli</h2>
|
||||||
|
<p class="text">
|
||||||
|
Meow I want a philosophical club *blibli starts a federici reading group*
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Credits</h2>
|
||||||
|
A rolling fan faction written by Mitsa Erica and Kamo in the context of SI17: Productive
|
||||||
|
Play, with Lidia. It was fun fuction!
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
const baloons = document.getElementsByClassName("baloon");
|
||||||
|
|
||||||
|
// Threshold Callback
|
||||||
|
|
||||||
|
let threshold = [];
|
||||||
|
for (let i = 0; i <= 1.0; i += 0.01) {
|
||||||
|
threshold.push(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
let callback = (entries) => {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add("roll");
|
||||||
|
observer.unobserve(entry.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
let observer = new IntersectionObserver(callback, {
|
||||||
|
rootMargin: "0% 0% -100% 0%",
|
||||||
|
threshold: threshold,
|
||||||
|
});
|
||||||
|
|
||||||
|
Array.from(baloons).forEach((baloon) => {
|
||||||
|
observer.observe(baloon);
|
||||||
|
});
|
||||||
@ -0,0 +1,85 @@
|
|||||||
|
body {
|
||||||
|
padding: 32px;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0;
|
||||||
|
background-color: antiquewhite;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.baloon {
|
||||||
|
position: relative;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
border-radius: 128px;
|
||||||
|
min-height: 150px;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 32px;
|
||||||
|
max-width: 80ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.baloon + .baloon {
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.baloon:last-of-type {
|
||||||
|
margin-bottom: 75vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mugshoot {
|
||||||
|
position: absolute;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 75px;
|
||||||
|
background-color: lightsalmon;
|
||||||
|
}
|
||||||
|
|
||||||
|
.character {
|
||||||
|
margin: 0;
|
||||||
|
margin-left: 182px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
margin: 0;
|
||||||
|
margin-left: 182px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes rotating /* Safari and Chrome */ {
|
||||||
|
from {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
-o-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
-o-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes rotating {
|
||||||
|
from {
|
||||||
|
-ms-transform: rotate(0deg);
|
||||||
|
-moz-transform: rotate(0deg);
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
-o-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-ms-transform: rotate(360deg);
|
||||||
|
-moz-transform: rotate(360deg);
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
-o-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.roll {
|
||||||
|
-webkit-animation: rotating 2s linear infinite;
|
||||||
|
-moz-animation: rotating 2s linear infinite;
|
||||||
|
-ms-animation: rotating 2s linear infinite;
|
||||||
|
-o-animation: rotating 2s linear infinite;
|
||||||
|
animation: rotating 2s linear infinite;
|
||||||
|
/* background-color: springgreen; */
|
||||||
|
position: sticky;
|
||||||
|
top: 32px;
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue