Docs: make tools/plugins on "Setup" page a bit more visible

Author: MoOx

docs/content/setup.md

@@ -51,22 +51,14 @@ as a [PostCSS](https://github.com/postcss/postcss) plugin
 or through others tools below:
 
 <p class="cssnext-Tools">
-  <a href="https://github.com/cssnext/cssnext-loader">webpack</a>
-  ,
-  <a href="https://github.com/cssnext/cssnextify">browserify</a>
-  ,
-  <a href="https://github.com/cssnext/gulp-cssnext">gulp</a>
-  ,
-  <a href="https://github.com/cssnext/grunt-cssnext">grunt</a>
-  ,
-  <a href="https://github.com/cssnext/cssnext-brunch">brunch</a>
-  ,
-  <a href="https://github.com/cssnext/broccoli-cssnext">broccoli</a>
-  ,
-  <a href="https://github.com/cssnext/fly-cssnext">fly</a>
-  ,
-  <a href="https://github.com/cssnext/cssnext-connect">connect</a>
-  ,
+  <a href="https://github.com/cssnext/cssnext-loader">webpack</a>,
+  <a href="https://github.com/cssnext/cssnextify">browserify</a>,
+  <a href="https://github.com/cssnext/gulp-cssnext">gulp</a>,
+  <a href="https://github.com/cssnext/grunt-cssnext">grunt</a>,
+  <a href="https://github.com/cssnext/cssnext-brunch">brunch</a>,
+  <a href="https://github.com/cssnext/broccoli-cssnext">broccoli</a>,
+  <a href="https://github.com/cssnext/fly-cssnext">fly</a>,
+  <a href="https://github.com/cssnext/cssnext-connect">connect</a>,
   <a href="https://github.com/cssnext/duo-cssnext">duo</a>
   or in
   <a href="https://prepros.io/">Prepros</a>

docs/src/index.css

@@ -369,6 +369,24 @@ h6 {
   line-height: calc(var(--r-h3-lineHeight)*2);
   font-weight: 300;
 }
+  @media (--r-minM) {
+    .cssnext-Tools {
+      width: 75%;
+      margin: auto;
+    }
+  }
+
+  .cssnext-Tools a {
+    font-weight: 400;
+  }
+
+  .cssnext-Tools a:nth-child(2n+1) {
+    color: var(--cssnext-Color-blue);
+  }
+
+  .cssnext-Tools a:nth-child(2n) {
+    color: var(--cssnext-Color-purple);
+  }
 
 .cssnext-INeedSpace {
   margin-top: calc(var(--r-lineHeight) * 2);