brexit changes

assets/css.css

@@ -1,157 +1,76 @@
-@import url(https://fonts.googleapis.com/css?family=Fredoka+One);
-
-body {
-	width: 100%;
-	height: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	position: absolute;
-	-webkit-font-smoothing: antialiased;
-}
-
-x-zero {
-	position: absolute;
-	background: #999 url(./zero-sugar.svg) no-repeat;
-	background-position: 50% 18%;
-	background-size: 60%;
-	top: 0;
-	left: 0;
-	right: 0;
-	height: 50%;
-}
-
-x-fanta {
-	width: 1000px;
-	height: 2000px;
-	display: block;
-	position: relative;
-	-webkit-mask: url(./can-mask.png) no-repeat center;
-	-webkit-mask-size: contain;
-	mask: url(./can-mask.png) no-repeat center;
-	mask-size: contain;
-	background-color: var(--bg-hero);
-	transform: rotate(var(--rotation));
+@font-face {
+	font-family: 'din';
+	src: url('./din.ttf');
 }
 
-x-fanta x-logo {
-	z-index: 50;
+:root {
+	--blue: #113561;
+	--red: #f60030;
 }
 
-x-fanta x-zero {
-	z-index: 49;
+* {
+	margin: 0;
+	padding: 0;
 }
 
-x-fanta:before {
-	background: url(./can.png) no-repeat center;
-	mix-blend-mode: color-dodge;
-	z-index: 98;
-}
-x-fanta:after {
-	background: url(./can-cap.png) no-repeat center;
-	z-index: 99;
-}
-
-x-fanta:after,
-x-fanta:before {
-	content: '';
+body {
+	font-family: sans-serif;
+	width: 1280px;
+	background: #fff;
+	height: 720px;
+	border-right: 2px solid red;
+	border-bottom: 2px solid red;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	width: 100%;
-	width: 100%;
-	background-size: contain;
-	pointer-events: none;
+	flex-direction: column;
+	-webkit-font-smoothing: antialiased;
 }
 
-x-logo > * {
-	position: absolute;
+h1 {
+	font-family: din;
+	font-size: 140px;
+	color: var(--blue);
+	letter-spacing: -0.03em;
 }
 
-x-logo {
-	width: 1000px;
-	height: 90%;
-	display: block;
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	margin: auto;
-	transform: rotate(-7deg) scale(1.2) translateX(-1%);
+h1 strong {
+	color: var(--red);
 }
 
-x-label {
-	color: white;
-	font-size: 75px;
+x-word {
 	text-transform: capitalize;
-	font-family: 'Fredoka One', sans-serif;
-	font-weight: 400;
-	text-align: center;
-	display: inline-block;
-	right: 40%;
-	left: 10%;
-	top: 60%;
-	line-height: 1.2;
-	z-index: 10;
-}
-
-x-label span {
-	background: #77b94c;
-	padding: 0em 0.5em;
-	display: inline-block;
-	margin-left: -0.25em;
-	margin-right: -0.225em;
-	margin-bottom: 0.1em;
-}
-
-x-fanta x-logo-holder {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	width: 100%;
-	height: 100%;
 }
 
-x-fanta x-logo-holder svg {
-	width: 100%;
-	height: 100%;
-}
-
-x-fanta x-logo-holder #roundel {
-	fill: var(--bg-roundel);
+x-arrow {
+	align-self: flex-start;
+	display: flex;
+	align-items: center;
+	margin-top: 2em;
 }
 
-x-fanta x-edibles {
-	position: absolute;
-	top: 56%;
-	left: 54%;
-	right: 0;
-	bottom: 0;
-	width: 36%;
-	height: 22%;
-	--offset: -15%;
+x-arrow {
+	color: var(--blue);
+	font-size: 30px;
+	font-weight: 600;
+	letter-spacing: -0.04em;
 }
 
-x-fanta x-edibles img {
-	width: 100%;
-	position: absolute;
+x-arrow img {
+	margin-right: 1em;
 }
 
-x-fanta x-edibles[data-length='2'] img {
-	position: absolute;
-	transform: scale(0.8);
+x-arrow x-word {
+	text-transform: capitalize;
 }
 
-x-fanta x-edibles[data-length='2'] img:last-child {
-	bottom: calc(var(--offset) * 1);
-	left: var(--offset);
+x-arrow strong {
+	font-weight: inherit;
+	color: var(--red);
+	border-bottom: 2px solid var(--red);
 }
 
-x-fanta x-edibles[data-length='2'] img:first-child {
-	right: var(--offset);
-	top: calc(var(--offset) * 1);
+x-arrow strong x-word {
+	text-transform: lowercase;
 }

assets/fetch.js

@@ -10,56 +10,19 @@ const fetchLogo = () => fetch('/logo.svg').then(res => res.text());
 
 const makeCssColor = color => `rgba(${color._rgb.map(Math.floor).join()})`;
 
-const buildUpFanta = async ($fanta, data) => {
-	const [$logoHolder, $label, $edibles] = [
-		'x-logo-holder',
-		'x-label',
-		'x-edibles',
-	].map(_ => $fanta.querySelector(_));
-
-	const cssVars = {
-		'bg-hero': makeCssColor(data.product.colors.hero),
-		'bg-roundel': makeCssColor(data.product.colors.roundel),
-		rotation: `${5 - Math.random() * 10}deg`,
-	};
-
-	Object.entries(cssVars).forEach(([key, value]) => {
-		$fanta.style.setProperty(`--${key}`, value);
+const buildUpFanta = data => {
+	[...document.querySelectorAll('x-word')].forEach(w => {
+		w.innerText = data.noun;
 	});
 
-	$label.innerHTML = data.product.name
-		.map(_ => _.split(' '))
-		.reduce((a, b) => a.concat(b), [])
-		.map(_ => `<span>${_}</span>`)
-		.join('');
-
-	$edibles.dataset.length = data.product.edibles.length;
-
-	data.product.edibles.forEach(edible => {
-		const $edible = document.createElement('img');
-		$edible.src = `/emoji/${edible}.svg`;
-		$edibles.appendChild($edible);
-	});
-
-	$logoHolder.innerHTML = await fetchLogo();
-
-	if (data.product.zero) {
-		const $zero = document.createElement('x-zero');
-		document.querySelector('x-fanta').appendChild($zero);
-	}
-
 	return true;
 };
 
 const go = async () => {
 	const $fanta = document.querySelector('x-fanta');
 	const data = await fetchData();
 
-	document.body.style.backgroundColor = makeCssColor(
-		data.product.colors.all[0]
-	);
-
-	await buildUpFanta($fanta, data);
+	await buildUpFanta(data);
 
 	console.log(JSON.stringify(data));
 };

assets/index.html

@@ -8,6 +8,14 @@
 </head>
 
 <body>
+	<h1>
+		Get <strong>ready</strong><br/>
+		for <x-word></x-word>
+	</h1>
+	<x-arrow>
+		<img src="./arrow.svg" />
+		Prepare for&nbsp;<x-word></x-word>&nbsp;at&nbsp;<strong>gov.uk/<x-word></x-word></strong>
+	</x-arrow>
 	<x-fanta>
 		<x-logo>
 			<x-logo-holder></x-logo-holder>