Add rotating atom logo

Author: bradfrost

packages/docs/src/scss/components/_logo.scss

@@ -6,51 +6,61 @@
  * Branding image or text of the site
  */
 .c-logo {
-	@media all and (min-width: $bp-med) {
-		margin-bottom: $spacing-large;
-	}
+  @media all and (min-width: $bp-med) {
+    margin-bottom: $spacing-large;
+  }
 }
 
 /**
  * Logo link
  */
 .c-logo__link {
-	display: flex;
-	align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 /**
  * Logo image
  */
 .c-logo__img {
-	display: block;
-	max-width: 3rem;
-	margin-right: 0.5rem;
+  display: block;
+  max-width: 3rem;
+  margin-right: 0.5rem;
+  animation: rotate 10s linear infinite;
 }
 
 /**
  * Logo body
  * 1) contains the logo text and meta info
  */
 .c-logo__body {
-	position: relative;
+  position: relative;
 }
 
 /**
  * Logo text
  */
 .c-logo__text {
-	text-transform: lowercase;
-	font-weight: bold;
-	color: $color-white;
+  text-transform: lowercase;
+  font-weight: bold;
+  color: $color-white;
 }
 
 .c-logo__meta {
-	display: block;
-	padding-top: 0.2rem;
-	font-size: $font-size-sm;
-	color: $color-gray-27;
-	font-weight: 500;
-	position: absolute;
-	top: 100%;
+  display: block;
+  padding-top: 0.2rem;
+  font-size: $font-size-sm;
+  color: $color-gray-27;
+  font-weight: 500;
+  position: absolute;
+  top: 100%;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }