Homepage and nav cleanup

Author: bradfrost

packages/docs/src/scss/abstracts/_mixins.scss

@@ -102,6 +102,12 @@
 		z-index: -5;
 		display: block;
 		text-shadow: none;
+
+		@media all and (max-width: $bp-large) {
+			left: 2px;
+			top: 2px;
+			background-size: 2px 2px;
+		}
 	}
 }
 

packages/docs/src/scss/abstracts/_variables.scss

@@ -48,6 +48,7 @@ $color-brand-green: #7ec699;
 $color-brand-green-dark: #376548;
 $color-brand-green-light: #f4fdf6;
 $color-brand-orange: #eeb31b;
+$color-brand-orange-dark: #966d04;
 $color-brand-orange-light: #fef8ea;
 
 /**

packages/docs/src/scss/components/_tile.scss

@@ -22,12 +22,12 @@
 	}
 
 	.c-tile--orange & {
-		color: $color-brand-orange;
+		color: $color-brand-orange-dark;
 		background: $color-brand-orange-light;
 	}
 
 	.c-tile--purple & {
-		color: $color-brand-purple;
+		color: $color-brand-purple-dark;
 		background: $color-brand-purple-light;
 	}
 }
@@ -59,6 +59,7 @@
 
 	&:hover,
 	&:focus {
+		color: inherit;
 		text-decoration: underline;
 	}
 }

packages/docs/src/scss/components/_tree-nav.scss

@@ -10,80 +10,86 @@
 }
 
 .c-tree-nav__link {
-  display: flex;
-  align-items: center;
-  margin-bottom: 1.2rem;
-  color: inherit;
-  font-weight: $font-weight-bold;
-  transition: color 0.2s ease;
-
-  &:hover,
-  &.is-active {
-    color: $color-white;
-  }
-
-  &:focus {
-    color: $color-white;
-    @include focusInverted();
-  }
+	display: flex;
+	align-items: center;
+	margin-bottom: 1.2rem;
+	color: inherit;
+	font-weight: $font-weight-bold;
+	transition: color 0.2s ease;
+
+	&:hover,
+	&.is-active {
+		color: $color-white;
+	}
+
+	&:focus {
+		color: $color-white;
+		@include focusInverted();
+	}
 }
 
 .c-tree-nav__link--is-active {
-  color: $color-white;
-  font-weight: bold;
+	color: $color-white;
+	font-weight: bold;
 }
 
 /**
  * Subnav 
  */
 .c-tree-nav__subnav {
-  padding-left: 1rem;
-  border-left: 1px solid $color-gray-73;
-  margin-bottom: 1rem;
-  font-size: $font-size-med;
-  display: none;
-
-  .c-tree-nav__item.is-active & {
-    display: block;
-  }
+	padding-left: 1rem;
+	border-left: 1px solid $color-gray-73;
+	margin-bottom: 1rem;
+	font-size: $font-size-med;
+	display: none;
+
+	.c-tree-nav__item.is-active & {
+		display: block;
+	}
 }
 
 .c-tree-nav__icon {
-  transition: transform $anim-fade-quick $anim-ease;
+	transition: transform $anim-fade-quick $anim-ease;
+
+	.c-tree-nav__item.is-active & {
+		transform: rotate(180deg);
+	}
+}
 
-  .c-tree-nav__item.is-active & {
-    transform: rotate(180deg);
-  }
+.c-tree-nav__subnav-title {
+	font-weight: bold;
+	display: block;
+	margin-bottom: 1rem;
 }
 
 .c-tree-nav__subnav-link {
-  color: inherit;
-  display: block;
-  margin-bottom: 1rem;
-
-  &:hover,
-  &:focus,
-  &.is-active {
-    color: $color-white;
-  }
-
-  &:focus {
-    @include focusInverted();
-  }
+	color: inherit;
+	display: block;
+	margin-bottom: 1rem;
+
+	&:hover,
+	&:focus,
+	&.is-active {
+		color: $color-white;
+	}
+
+	&:focus {
+		@include focusInverted();
+	}
 }
 
 .c-tree-nav__link--btn {
-  background: transparent;
-  border: 0;
-  padding: 0;
-  font-size: inherit;
-
-  svg {
-    fill: currentColor;
-  }
+	background: transparent;
+	border: 0;
+	padding: 0;
+	font-size: inherit;
+
+	svg {
+		fill: currentColor;
+	}
 }
 
 .c-tree-nav__subnav-link--heading {
-  font-weight: bold;
-  color: $color-white;
+	font-weight: bold;
+	color: $color-white;
 }