From 633504c31ec77cf96c4d21a4f7d05bf10efb9d57 Mon Sep 17 00:00:00 2001
From: "kam (from the studio)" <luzzanafrancesco@gmail.com>
Date: Thu, 17 Mar 2022 19:01:16 +0100
Subject: [PATCH] temp landing page

---
 css/global.css                    |  48 +++++++++++++++++++++++++
 font/SpecialIssue17-Regular.woff  | Bin 0 -> 2348 bytes
 font/SpecialIssue17-Regular.woff2 | Bin 0 -> 1556 bytes
 font/font.css                     |   8 +++++
 index.html                        |  58 +++++++++++++++++++++++-------
 js/color.js                       |  19 ++++++++++
 6 files changed, 121 insertions(+), 12 deletions(-)
 create mode 100644 css/global.css
 create mode 100644 font/SpecialIssue17-Regular.woff
 create mode 100644 font/SpecialIssue17-Regular.woff2
 create mode 100644 font/font.css
 create mode 100644 js/color.js

diff --git a/css/global.css b/css/global.css
new file mode 100644
index 0000000..a20a60f
--- /dev/null
+++ b/css/global.css
@@ -0,0 +1,48 @@
+* {
+	box-sizing: border-box;
+}
+
+:root {
+	--color: #8f00ff;
+	--light-color: #e8cdfe;
+}
+
+html,
+body {
+	margin: 0;
+}
+
+body {
+	background-color: var(--light-color);
+}
+
+header {
+	width: 100%;
+	height: 100vh;
+	text-align: center;
+	color: var(--color);
+	font-family: Arial, Helvetica, sans-serif;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+h1 {
+	font-family: "SI17";
+	font-size: 64px;
+	text-transform: uppercase;
+	color: var(--color); /* Fallback color */
+	-webkit-text-fill-color: var(--light-color); /* Will override color (regardless of order) */
+	-webkit-text-stroke-width: 1.5px;
+	-webkit-text-stroke-color: var(--color);
+}
+
+.date {
+	font-size: 24px;
+}
+
+a {
+	color: currentColor;
+}
diff --git a/font/SpecialIssue17-Regular.woff b/font/SpecialIssue17-Regular.woff
new file mode 100644
index 0000000000000000000000000000000000000000..819ad44ca4fdaf3745737a5ece3a5d91110d7d67
GIT binary patch
literal 2348
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
SYt6t*I7$T2-TQ|)0Q>{kH4}>f

literal 0
HcmV?d00001

diff --git a/font/SpecialIssue17-Regular.woff2 b/font/SpecialIssue17-Regular.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..c460fc816b0a823baf5a2915e952ac6c63d8769c
GIT binary patch
literal 1556
zcmV+v2J88EPew8T0RR9100tBQ4FCWD020^$00q1N0RR9100000000000000000000
z0000#Mn+Uk92y=5U;u+Q5eN#BAdNE%feZivHUcCAf)oTG1&22Wfh-&Q4pEd)&cbA0
z7Vt#GNPp{=D|DPqtIn{2A!z!v$gIECO#g<e=h%3x8pmrqeC>UA?%n+_ZPTlzbYDtU
zQP9U@(HSJdk@2|hgD_YI#bCS5U;C}Mn8|*Z#t_94L-It3kTTqPY?ta;x#mW>6RKoi
zfuthdWb#Z_R;UVBi!QdPiTow<lgNyC=6^!F2{aRzhALb-qMJYe#{vBKx!rBU-uqGl
zB~401{1%B?D}+SJrV0PQwbv6j8zhCS1gQucq2sdmEztWgKQJ4jBFZU}ORHQhf=WFJ
zRag0K%eunUR>*2!?|bYw-vo6ptXLtQcstno?`6Ig0={l{eemsiXLs|i1sZ066vAmj
zMWW`fc<PZ`c>$NKhsLH=djUQ1@bHn|`Lm0kwM#la@8+VFFMc8*{^rISgo1)42)tDU
zmbkpelo+RKT~i+>Gi*(l{1<DQdPYbF3k!Y@`+0e|J3Hn3A&C8l(Scbxc?Cr!WfU5N
z#o-A=5}87!(HTrSg9*_QfJmfx%R#An(Dl(jFleX^kBt82q5%stvUkC@R&O+0?M}DX
z9}GuhOppMO{g<O?hUIuclw?KKbi>pQ6ZXiS_WQ)H5}W~S;WXqnWgLJ808$E3=xn}7
zW)#lV6G5)@V&M+l@zLs1ZLO<bTdQqiOeG?%3r7~=!uR@JF<9NTmKy7%DpUtOldFmT
zHs__n6<6p3liWxx@lFFQW0Wb1Ay|8d=a3X1NMSJ(-A<;^A-KAX#8dtn5(@;|uayW@
zWLpe0tRFx|3!jY;GJxq?M8=CVpIVAxMpBW{1p<x84TfGcC616g2(CGjVXm-A4!L&6
zhjrJv2Z^c}nTw<!1QrZ}BvZJ}AY$K~R6+E>9U_*Uj;Lt|cN295u`s28%4C+nQFa$I
zJi9nf0%W>F61c9b6X>VSHYrIieQFF)ZOUX`Mt*vIqFCE04fmArlU)=loocq{m#MhK
zirq)Frw*623OkP2KS3@ZV20I=M29GDto=fqe==z0VQBpwCa+ZPBttsc)X0-0SXLys
z*lJb205ejA&7rnd(@r+6MMOHtMsI8(<cVOcWQ-?RG%SEbL#}S=qN9sVK<gM&IoGC|
z*^_qXm|_h?Hnesef-hGBxi~o2(|hefTE;eLbZNH;d(=O38z|ZxiJkY731eZh%}%Z=
z{Vr*^vdqM$?ZgT4y=>0I!;zpg<!kITIh1-aoai!>NoHx8%9@B)d@9y$S-Jry>Z>fQ
zG6F{~?%EoClR_tegjpxg-d$x*Oqz#_WMU<l9a7C)LxC$}8SHHN$#*TlDBoNP-pMbt
z+oJOJcEyo~SwGjeuEpx>WBR{4^s2=_m%lvP4E+)W<%=LYpd19`f5B}$<4ML90A&TT
z@ykCQRevRC^miX}fc1}qa0YRLL<k%Qz=S^m*ketAFy<*h>a!z2vEC#Es<|E$pyzNu
z1nA7{903N*?3Dn`_;wUg2XGhM?y%<3okqOtE>8M)R|h-R-SeQA-JQLgHwFqeKZIsu
zZ=8}Vj4B~tph4cPp^<2`n!OR3X%#{>R$;`}vi=1o1&{z^(+u35m+$n?H=j0Zi?HU3
z$!;qy_@mZdEq^aFfLjWR6k-W7QLD8SLJ`2Tn)FiR-6;X!CdJoEbYXnM>7l?O7@1^C
zv0yoKX_LE**hR-U!J$8zgU1D|QIa?A@tEKYwY^vk@8sGiYfgNZvd6B4av3`GAlHz>
zWXEHS;=aTWy<#y1=<iVm%AgJIemo9G!h<Jyt?jz`kT?J41`9heMM}y;x36Q~cxq5Y
zV-E8iC-HE&PG>Kjy$j|taB0i}FOpl$+$Ory%u&XZ!((;6jm5v&`Gi0MyLX4hi8D_&
z{bZ`nkY?1FxTKV{%%iSfX+uj}M^{hZz|hDTMj#)Ny{Rdi!?m`twX=6{baHlab#wRd
G^aTJZ=GBM*

literal 0
HcmV?d00001

diff --git a/font/font.css b/font/font.css
new file mode 100644
index 0000000..bd9cc2a
--- /dev/null
+++ b/font/font.css
@@ -0,0 +1,8 @@
+@font-face {
+	font-family: "SI17";
+	src: url("SpecialIssue17-Regular.woff2") format("woff2"),
+		url("SpecialIssue17-Regular.woff") format("woff");
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap;
+}
diff --git a/index.html b/index.html
index 9e1a13e..710fc2a 100644
--- a/index.html
+++ b/index.html
@@ -1,16 +1,50 @@
 <!DOCTYPE html>
-<html>
-<head>
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<title></title>
-</head>
-<body>
+<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>SI17 - This box found you for a reason</title>
 
-<p style="font-size: large; text-align:center; margin-top: 2em">
-coming soon<br>
-launch event 25 mar 2022 18:00 @ <a href="https://page-not-found.nl">page not found</a>, the hague
-</p>
+		<!-- Primary Meta Tags -->
+		<title>SI17 - This box found you for a reason</title>
+		<meta name="title" content="SI17 - This box found you for a reason" />
+		<meta
+			name="description"
+			content="Gamification blurs the lines between play, leisure and labour, to release our collective dopamine for profit. Video games in themselves often perform a reproductive role, presenting capitalism as a system of natural laws, exemplified by in-game predatory monetisation schemes."
+		/>
 
-</body>
+		<!-- Open Graph / Facebook -->
+		<meta property="og:type" content="website" />
+		<meta property="og:url" content="https://issue.xpub.nl/17/" />
+		<meta property="og:title" content="SI17 - This box found you for a reason" />
+		<meta
+			property="og:description"
+			content="Gamification blurs the lines between play, leisure and labour, to release our collective dopamine for profit. Video games in themselves often perform a reproductive role, presenting capitalism as a system of natural laws, exemplified by in-game predatory monetisation schemes."
+		/>
+		<meta property="og:image" content="img/cover.jpg" />
+
+		<!-- Twitter -->
+		<meta property="twitter:card" content="summary_large_image" />
+		<meta property="twitter:url" content="https://issue.xpub.nl/17/" />
+		<meta property="twitter:title" content="SI17 - This box found you for a reason" />
+		<meta
+			property="twitter:description"
+			content="Gamification blurs the lines between play, leisure and labour, to release our collective dopamine for profit. Video games in themselves often perform a reproductive role, presenting capitalism as a system of natural laws, exemplified by in-game predatory monetisation schemes."
+		/>
+		<meta property="twitter:image" content="img/cover.jpg" />
+
+		<link rel="stylesheet" href="font/font.css" />
+		<link rel="stylesheet" href="css/global.css" />
+		<script src="js/color.js" defer></script>
+	</head>
+	<body>
+		<header>
+			<h1>This box <br />found you <br />for a reason</h1>
+			<div class="date">
+				launch event 25 mar 2022 18:00 <br />
+				@<a href="https://page-not-found.nl">page not found</a>, the hague
+			</div>
+		</header>
+	</body>
 </html>
diff --git a/js/color.js b/js/color.js
new file mode 100644
index 0000000..e239625
--- /dev/null
+++ b/js/color.js
@@ -0,0 +1,19 @@
+let palettes = {
+	purple: {
+		color: "#8f00ff",
+		lightColor: "#E8CDFE",
+	},
+
+	orange: {
+		color: "#FFF",
+		lightColor: "#FF6100",
+	},
+};
+
+window.addEventListener("load", () => {
+	let shade = Math.random() > 0.5 ? "purple" : "orange";
+	color = palettes[shade]["color"];
+	lightColor = palettes[shade]["lightColor"];
+	document.documentElement.style.setProperty("--color", color);
+	document.documentElement.style.setProperty("--light-color", lightColor);
+});