Day 3.

tfrommen · tfrommen · commit 9594a72aa643 · 2017-01-02T17:21:05.000+01:00
diff --git a/03 - CSS Variables/index.html b/03 - CSS Variables/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Scoped CSS Variables and JS</title>
+	<link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<h2>Update CSS Variables with <span class="hl">JS</span></h2>
+
+<div class="controls">
+	<label for="spacing">Spacing:</label>
+	<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
+
+	<label for="blur">Blur:</label>
+	<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
+
+	<label for="base">Base Color</label>
+	<input id="base" type="color" name="base" value="#ffc600">
+</div>
+
+<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
+
+<script>
+	const body = document.body;
+
+	function updateVariable() {
+		body.style.setProperty( `--${this.getAttribute( 'name' )}`, this.value + ( this.dataset.sizing || '' ) );
+	}
+
+	document.querySelectorAll( '.controls input' ).forEach( ( el ) => {
+		updateVariable.call( el );
+		el.addEventListener( 'input', updateVariable );
+	} );
+</script>
+
+</body>
+</html>
diff --git a/03 - CSS Variables/style.css b/03 - CSS Variables/style.css
@@ -0,0 +1,32 @@
+:root {
+	--base: #ffc600;
+	--blur: 10px;
+	--spacing: 10px;
+}
+
+body {
+	background: #193549;
+	color: white;
+	font-family: 'helvetica neue', sans-serif;
+	font-size: 50px;
+	font-weight: 100;
+	text-align: center;
+}
+
+.hl {
+	color: var(--base);
+}
+
+.controls {
+	margin-bottom: 50px;
+}
+
+input {
+	width: 100px;
+}
+
+img {
+	padding: var(--spacing);
+	background: var(--base);
+	filter: blur(var(--blur));
+}
