Merge branch 'main' of https://git.xpub.nl/XPUB/SI17 into main

main
commit 585b424855

BIN
.DS_Store vendored

Binary file not shown.

@ -35,6 +35,10 @@ a {
color: currentColor;
}
a::after {
content: "↗";
}
header {
height: 100vh;
display: flex;
@ -42,26 +46,35 @@ header {
align-items: center;
}
main {
max-width: 45ch;
margin: 0 auto;
}
h1 {
font-size: clamp(24px, 2rem + 2vw, 96px);
line-height: 1.2;
text-transform: uppercase;
font-family: "SI17";
text-align: center;
z-index: 1000;
/* color: white; */
/* opacity: 0.75; */
color: transparent;
user-select: none;
-webkit-text-fill: transparent;
-webkit-text-stroke: 1.5px white;
z-index: 1000;
color: white;
opacity: 0.75;
/* color: transparent; */
/* -webkit-text-fill: transparent; */
/* -webkit-text-stroke: 1.5px white; */
}
h2,
h3 {
margin-top: 3rem;
}
.filtered {
.img {
display: inline-block;
width: var(--size);
height: var(--size);
background-color: var(--color);
margin: 0;
position: relative;
}
@ -110,14 +123,17 @@ ol li {
.index {
padding: 0;
/* display: flex;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center; */
align-items: center;
line-height: 1.4;
text-align: center;
}
.index li {
flex: 1;
/* flex: 1; */
display: inline-block;
text-transform: uppercase;
/* font-weight: bold;
@ -126,6 +142,10 @@ ol li {
-webkit-text-stroke: 2px var(--color); */
}
.index li + li {
margin-left: 1ch;
}
.index li:hover {
color: var(--color);
}
@ -139,6 +159,20 @@ ol li {
text-decoration: none;
}
.download {
font-size: 120px;
text-align: center;
}
.contents,
.download {
margin: 2rem auto;
}
a {
text-decoration: none;
}
a.purple,
a.orange {
display: inline-block;
@ -146,6 +180,8 @@ a.orange {
width: 1em;
height: 1em;
margin: 0 4px;
position: relative;
z-index: 200;
}
a.purple {
@ -155,6 +191,12 @@ a.orange {
background-color: var(--orange);
}
a.purple::after,
a.orange::after,
.purchase::after {
content: "";
}
.signed {
transform: translateY(100%);
}
@ -176,3 +218,50 @@ h3::first-letter,
margin: 0;
padding: 0;
}
svg {
width: 100%;
height: 100%;
object-fit: contain;
vertical-align: middle;
}
@media (max-width: 767.98px) {
:root {
--size: 21px;
}
body {
cursor: default;
margin: 0 4px;
}
.download {
font-size: 24px;
}
.index {
display: block;
text-align: left;
justify-content: start;
}
.index li {
display: block;
margin: 0 !important;
}
h1 {
color: var(--color);
opacity: 1;
}
h2,
h3 {
font-size: 28px;
}
.box {
display: none;
}
}

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -27,17 +27,27 @@
<p>Dear Player,</p>
<p>
I found you for a reason. Welcome to my productive space. Here play meets work.
Time is ordered in unusual ways and patterns unravel. Together, we mess with the
boundaries between leisure and labour.
Time is ordered in unusual ways and patterns unravel.
<span class="img">
<img src="img/tarot.jpg" tabindex="0" />
</span>
Together, we mess with the boundaries between leisure and labour.
</p>
<p>
How are your boundaries?
<span class="filtered">
<span class="img">
<img src="img/boxes.jpg" tabindex="0" />
</span>
Maybe you shouldnt go to work tomorrow. But could you really follow your own
schedule? Would you be more productive if you chose when to work?
Maybe you shouldnt go to work tomorrow.
<span class="img">
<img src="img/img_7.jpg" alt="production line" tabindex="0" />
</span>
But could you really follow your own schedule?
<span class="img">
<img src="img/img_9.jpg" alt="post it on a table" tabindex="0" />
</span>
Would you be more productive if you chose when to work?
</p>
<p>I never rest and I never work.</p>
@ -48,20 +58,23 @@
</p>
<!-- check this sent -->
<p>
Make all the notes you find inside me your own. Curate them, spread them, mark
them, scratch them, add to them, subtract from them, play with them! Lay them on
any surface and reorganise them.
</p>
<p>
However you decide to take care of me, remember:
<br />
I found you for a reason.
</p>
<p>
<span class="signed">The box</span>
Make all the notes you find inside me your own.
<span class="img">
<img src="img/img_10.jpg" tabindex="0" />
</span>
Curate them, spread them, mark them, scratch them, add to them, subtract from
them, play with them!
<span class="img">
<img src="img/img_11.jpg" alt="post it on a table" tabindex="0" />
</span>
Lay them on any surface and reorganise them.
</p>
<p>However you decide to take care of me, remember:</p>
<p>I found you for a reason.</p>
<p>The box</p>
</div>
<div class="contents">
<h2>Inside this publication:</h2>
<ul class="index" id="index">
<li>What is a loot box?</li>
@ -82,19 +95,13 @@
</a>
</li>
<li>
Katamari Fanfic<a
href="katamari"
target="_blank"
style="background: var(--light-color); text-transform: lowercase"
>
→ roooll 🍥</a
>
<a href="katamari" target="_blank"> Katamari Fanfic </a>
</li>
<li>Life hacks</li>
<li>Can gaming make a better world?</li>
</ul>
<div class="download" style="font-size: 120px">
<div class="download">
Download →
<a
href="https://hub.xpub.nl/soupboat/lootbox/si17-purple.pdf"
@ -108,7 +115,7 @@
></a>
<br />
Purchase →
<a href="https://page-not-found.nl" target="_blank">
<a href="https://page-not-found.nl" target="_blank" class="purchase">
<svg
class="logo"
xmlns="http://www.w3.org/2000/svg"
@ -134,7 +141,13 @@
class="e"
d="M561.19,126.26c62.38-71.55,152.99-116.61,253.87-116.61s191.49,45.06,253.87,116.61"
/>
<line class="e" x1="1067.51" y1="132.61" x2="1067.51" y2="736.71" />
<line
class="e"
x1="1067.51"
y1="132.61"
x2="1067.51"
y2="736.71"
/>
<g>
<path
class="e"
@ -190,6 +203,7 @@
</svg>
</a>
</div>
</div>
<div class="launch">
<h2>Launch Event</h2>
@ -214,7 +228,7 @@
</p>
<a href="https://pzwiki.wdka.nl/mediadesign/Fage_Not_Pound" target="_blank">
Discover FNP
<span> Discover FNP </span>
</a>
</div>
<div class="colophon">
@ -305,16 +319,21 @@
<h3>License:</h3>
<p>
This Box Found You For A Reason <br />
2022 XPUB Special Issue 17
<span> This Box Found You For A Reason </span>
<br />
<span> 2022 XPUB Special Issue 17 </span>
</p>
<p>
Copyleft attitude with a difference: <br />
you are invited to share the publication or parts of it with others under the
terms of the
<span> Copyleft attitude with a difference: </span>
<br />
<span>
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
>
</span>
</p>
</div>
</main>

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

@ -16,4 +16,12 @@ window.addEventListener("load", () => {
lightColor = palettes[shade]["lightColor"];
document.documentElement.style.setProperty("--color", color);
document.documentElement.style.setProperty("--light-color", lightColor);
var link = document.querySelector("link[rel~='icon']");
if (!link) {
link = document.createElement("link");
link.rel = "icon";
document.getElementsByTagName("head")[0].appendChild(link);
}
link.href = `favi-${shade}.ico`;
});

@ -13,14 +13,22 @@ function capitals(sentence) {
let content = sentence.textContent.trim();
if (content) {
let link = sentence.querySelector("a");
let first = content[0];
let rest = content.substring(1);
sentence.innerHTML = rest;
let capital = document.createElement("span");
capital.classList.add("first");
capital.innerHTML = first;
if (link) {
link.innerHTML = rest;
link.prepend(capital);
sentence.appendChild(link);
} else {
sentence.innerHTML = rest;
sentence.prepend(capital);
}
}
}

Loading…
Cancel
Save