[css-color-5] Add hover effect on swatch, move to separate stylesheet

Author: LeaVerou

css-color-5/Overview.bs

@@ -19,18 +19,7 @@ Repository: w3c/csswg-drafts
 spec:css-color-4; type:dfn; text:colorspace
 spec:css-color-4; type:dfn; text:gamut
 </pre>
-
-<style>
-	.swatch {
-		display: inline-block;
-		vertical-align: calc(-.1em - 3px);
-		padding: .6em;
-		background-color: var(--color);
-		border: 3px solid white;
-		border-radius: 3px;
-		box-shadow: 1px 1px 1px rgba(0,0,0,.15)
-	}
-</style>
+<link rel="stylesheet" href="style.css" />
 
 Introduction {#intro}
 =====================

css-color-5/style.css

@@ -0,0 +1,17 @@
+.swatch {
+	position: relative;
+	z-index: 1;
+	display: inline-block;
+	vertical-align: calc(-.1em - 3px);
+	padding: .6em;
+	background-color: var(--color);
+	border: 3px solid white;
+	border-radius: 3px;
+	box-shadow: 1px 1px 1px rgba(0,0,0,.15)
+}
+
+.swatch:hover {
+	transform: scale(3);
+	border-radius: 2px;
+	transition: .4s;
+}