add media links

dist/index.html

@@ -87,6 +87,23 @@ <h3 class="white">Rapid Prototyping</h3>
 	</div>
 </div>
 
+<div class="bg-grey1 pt-s pb-xl">
+	<div class="row ta-c">
+		<h3 class="blue">Featured In</h3>
+	</div>
+	<div class="row ta-c feature-row">
+		<a href="http://alistapart.com/blog/post/style-guide-generator-roundup" target="_blank">
+			<img src="/assets/toolkit/images/alistapart.png" alt="A List Apart">
+		</a>
+		<a href="http://www.smashingmagazine.com/2015/04/an-in-depth-overview-of-living-style-guide-tools/" target="_blank">
+			<img src="/assets/toolkit/images/smashing-magazine.png" alt="Smashing Magazine">
+		</a>
+		<a href="https://twitter.com/barrymcgee/status/618807894138601472" target="_blank">
+			<img src="/assets/toolkit/images/net-magazine.png" alt="Net Magazine">
+		</a>
+	</div>
+</div>
+
 <div class="row pb-xl">
 	<div class="ta-c">
 		<h2>Quick Start</h2>

package.json

@@ -33,7 +33,7 @@
     "gulp-if": "^1.2.5",
     "gulp-imagemin": "^2.2.1",
     "gulp-rename": "^1.2.2",
-    "gulp-sass": "^1.3.3",
+    "gulp-sass": "^2.1.0",
     "gulp-streamify": "0.0.5",
     "gulp-uglify": "^1.1.0",
     "gulp-util": "^3.0.4",

src/assets/toolkit/styles/base/_layout.scss

@@ -9,3 +9,42 @@ img {
 		text-align: right;
 	}
 }
+
+.feature-row {
+
+	@include breakpoint ($bp-m) {
+		display: flex;
+		align-items: center;
+	}
+
+
+	a {
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+		margin-bottom: 2em;
+		max-width: 10em;
+		opacity: 0.4;
+
+		@include breakpoint($bp-m) {
+			width: percentage(1/3);
+			max-width: 100%;
+			padding: 0 5%;
+			margin-bottom: 0;
+			margin-left: 0;
+			margin-right: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		&:not(:last-child) {
+			margin-top: 1em;
+		}
+
+		img {
+			width: 100%;
+		}
+	}
+}

src/assets/toolkit/styles/utils/_bg.scss

@@ -5,3 +5,11 @@
 		color: color(white);
 	}
 }
+
+.bg-grey1 {
+	background-color: color(grey, 1);
+
+	a {
+		color: color(black);
+	}
+}

src/assets/toolkit/styles/variables/_colors.scss

@@ -32,3 +32,11 @@ $colors: (
 @function color($color, $tone: 0) {
 	@return map-get(map-get($colors, $color), $tone);
 }
+
+.blue {
+	color: color(blue);
+}
+
+.black {
+	color: color(black);
+}

src/views/index.html

@@ -29,6 +29,23 @@ <h3 class="white">Rapid Prototyping</h3>
 	</div>
 </div>
 
+<div class="bg-grey1 pt-s pb-xl">
+	<div class="row ta-c">
+		<h3 class="blue">Featured In</h3>
+	</div>
+	<div class="row ta-c feature-row">
+		<a href="http://alistapart.com/blog/post/style-guide-generator-roundup" target="_blank">
+			<img src="{{baseurl}}/assets/toolkit/images/alistapart.png" alt="A List Apart">
+		</a>
+		<a href="http://www.smashingmagazine.com/2015/04/an-in-depth-overview-of-living-style-guide-tools/" target="_blank">
+			<img src="{{baseurl}}/assets/toolkit/images/smashing-magazine.png" alt="Smashing Magazine">
+		</a>
+		<a href="https://twitter.com/barrymcgee/status/618807894138601472" target="_blank">
+			<img src="{{baseurl}}/assets/toolkit/images/net-magazine.png" alt="Net Magazine">
+		</a>
+	</div>
+</div>
+
 <div class="row pb-xl">
 	<div class="ta-c">
 		<h2>Quick Start</h2>