layout and icon

css/style.css

@@ -35,6 +35,10 @@ a {
 	color: currentColor;
 }
 
+a::after {
+	content: "↗";
+}
+
 header {
 	height: 100vh;
 	display: flex;
@@ -57,11 +61,15 @@ h1 {
 	-webkit-text-stroke: 1.5px white;
 }
 
-.filtered {
+h2,
+h3 {
+	margin-top: 3rem;
+}
+
+.img {
 	display: inline-block;
 	width: var(--size);
 	height: var(--size);
-	background-color: var(--color);
 	margin: 0;
 	position: relative;
 }
@@ -110,14 +118,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 +137,10 @@ ol li {
 	-webkit-text-stroke: 2px var(--color); */
 }
 
+.index li + li {
+	margin-left: 1ch;
+}
+
 .index li:hover {
 	color: var(--color);
 }
@@ -139,6 +154,15 @@ ol li {
 	text-decoration: none;
 }
 
+.download {
+	font-size: 120px;
+	text-align: center;
+}
+
+.contents {
+	margin: 2rem auto;
+}
+
 a.purple,
 a.orange {
 	display: inline-block;
@@ -146,6 +170,8 @@ a.orange {
 	width: 1em;
 	height: 1em;
 	margin: 0 4px;
+	position: relative;
+	z-index: 200;
 }
 
 a.purple {
@@ -155,6 +181,12 @@ a.orange {
 	background-color: var(--orange);
 }
 
+a.purple::after,
+a.orange::after,
+.purchase::after {
+	content: "";
+}
+
 .signed {
 	transform: translateY(100%);
 }
@@ -176,3 +208,10 @@ h3::first-letter,
 	margin: 0;
 	padding: 0;
 }
+
+svg {
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+	vertical-align: middle;
+}

home.html

@@ -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
+					Time is ordered in unusual ways and patterns unravel.
-					boundaries between leisure and labour.
+					<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 shouldn’t go to work tomorrow. But could you really follow your own
+					Maybe you shouldn’t go to work tomorrow.
-					schedule? Would you be more productive if you chose when to work?
+					<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
+					Make all the notes you find inside me your own.
-					them, scratch them, add to them, subtract from them, play with them! Lay them on
+					<span class="img">
-					any surface and reorganise them.
+						<img src="img/img_10.jpg" tabindex="0" />
-				</p>
+					</span>
-				<p>
+					Curate them, spread them, mark them, scratch them, add to them, subtract from
-					However you decide to take care of me, remember:
+					them, play with them!
-					<br />
+					<span class="img">
-					I found you for a reason.
+						<img src="img/img_11.jpg" alt="post it on a table" tabindex="0" />
-				</p>
+					</span>
-				<p>
+					Lay them on any surface and reorganise them.
-					<span class="signed">The box</span>
 				</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
+						<a href="katamari" target="_blank"> Katamari Fanfic </a>
-						href="katamari"
-						target="_blank"
-						style="background: var(--light-color); text-transform: lowercase"
-					>
-						→ roooll 🍥</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 />
+					<span> This Box Found You For A Reason </span>
-					2022 XPUB Special Issue 17
+
+					<br />
+					<span> 2022 XPUB Special Issue 17 </span>
 				</p>
 				<p>
-					Copyleft attitude with a difference: <br />
+					<span> Copyleft attitude with a difference: </span>
-					you are invited to share the publication or parts of it with others under the
+					<br />
-					terms of the
+					<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>

js/color.js

@@ -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`;
 });