Improve 'also see' section

_sass/2017/base/base.scss

@@ -3,11 +3,11 @@
  */
 
 html, body {
-  background: $body-bg;
+  background: $base-body;
   font-family: $body-font;
   font-size: 14px;
   line-height: 1.6;
-  color: $text-color;
+  color: $base-text;
 }
 
 body {
@@ -43,13 +43,13 @@ pre {
  */
 
 a {
-  color: $baseB;
+  color: $base-b;
 }
 
 a:visited {
-  color: $baseB7;
+  color: $base-b7;
 }
 
 a:hover {
-  color: $baseB3;
+  color: $base-b3;
 }

_sass/2017/components/h3-section.scss

@@ -88,13 +88,13 @@
     /* Links */
     & a,
     & a:visited {
-      color: $text-color;
+      color: $base-text;
       text-decoration: none;
       border-bottom: solid 1px $line-color;
     }
 
     & a:hover {
-      color: $baseB;
+      color: $base-b;
     }
   }
 
@@ -114,3 +114,38 @@
     box-shadow: $shadow6;
   }
 }
+
+ul.-also-see.-also-see.-also-see {
+  display: flex;
+  flex-wrap: wrap;
+  background: $gray-bg;
+
+  & > li {
+    flex: 1 0 20%;
+    padding: 24px;
+    border-top: solid 1px $dark-line-color;
+
+    & + li {
+      border-left: solid 1px $dark-line-color;
+    }
+  }
+
+  &,
+  & > li {
+    list-style-type: none;
+  }
+
+  & > li::before {
+    display: none;
+  }
+
+  & > li > a {
+    @include font-size(1);
+    display: block;
+  }
+
+  & > li > em {
+    @include font-size(-1);
+    display: block;
+  }
+}

_sass/2017/components/headline-ad.scss

@@ -73,7 +73,7 @@
 
   .carbon-text:hover,
   .carbon-poweredby:hover {
-    color: $baseA;
+    color: $base-a;
   }
 }
 

_sass/2017/components/top-nav.scss

@@ -16,11 +16,11 @@
 
     &,
     &:visited {
-      color: $text-color;
+      color: $base-text;
     }
 
     &:hover {
-      color: $baseA;
+      color: $base-a;
     }
   }
 

_sass/2017/markdown/code.scss

@@ -22,7 +22,7 @@
   }
 
   pre > code {
-    color: $text-color;
+    color: $base-text;
     max-height: auto;
     padding: 0;
     background: transparent;
@@ -34,8 +34,8 @@
   .line-highlight {
     background: linear-gradient(
       to right,
-      rgba($baseB, 0.05) 75%,
+      rgba($base-b, 0.05) 75%,
-      rgba($baseB, 0));
+      rgba($base-b, 0));
   }
 
   // Line highlight ranges
@@ -58,11 +58,11 @@
  */
 
 .token {
-  $cA: $baseB;
+  $cA: $base-b;
   $cA-3: adjust-color($cA, $lightness: 15%, $hue: -10deg);
   $cA-7: adjust-color($cA, $lightness: -15%, $hue: 10deg);
 
-  $cB: $baseC;
+  $cB: $base-c;
   $cB-3: adjust-color($cB, $lightness: 15%, $hue: -10deg);
 
   $cM: #aaa; // Mute

_sass/2017/markdown/headings.scss

@@ -18,13 +18,13 @@
   font-family: $heading-font;
   @include font-size(2);
   font-weight: 300;
-  color: $baseA;
+  color: $base-a;
 }
 
 .MarkdownBody {
   a,
   a:visited {
-    color: $baseB;
+    color: $base-b;
     text-decoration: none;
   }
 

_sass/2017/markdown/table.scss

@@ -62,6 +62,6 @@
     margin-right: 2px;
     letter-spacing: 0.2em;
     font-family: $body-font;
-    color: $text-color;
+    color: $base-text;
   }
 }

_sass/2017/variables.scss

@@ -19,40 +19,44 @@ $monospace-font: 'Fira Mono', Consolas, menlo, 'Andale Mono', 'Ubuntu Mono', mon
  * Base colors
  */
 
-$baseA: #8370bd; // indigo
+$base-body: #f1f3f5;
-$baseB: #2b72a2; // blue
+$base-panel: white;
-$baseC: #17c694; // teal
+$base-head: #111;
-$baseM: #667788; // gray
+$base-text: #345;
+$base-mute: #667788; // gray
 
-$baseB3: adjust-color($baseB, $lightness: 20%, $hue: -20deg);
+$base-a: #8370bd; // indigo
-$baseB7: adjust-color($baseB, $lightness: -20%, $hue: 20deg);
+$base-b: #2b72a2; // blue
-$baseM3: adjust-color($baseM, $lightness: -20%);
+$base-c: #17c694; // teal
-$baseM4: adjust-color($baseM, $lightness: -10%);
-$baseM6: adjust-color($baseM, $lightness: 10%);
-$baseM7: adjust-color($baseM, $lightness: 20%);
 
-$body-bg: #f1f3f5;
+$base-b3: adjust-color($base-b, $lightness: 16%, $hue: -20deg);
-$gray-bg: #fcfcfc;
+$base-b7: adjust-color($base-b, $lightness: -16%, $hue: 20deg);
-$gray-text: $baseM;
+$base-mute3: adjust-color($base-mute, $lightness: -16%);
-$text-color: #345;
+$base-mute4: adjust-color($base-mute, $lightness: -8%);
+$base-mute6: adjust-color($base-mute, $lightness: 8%);
+$base-mute7: adjust-color($base-mute, $lightness: 16%);
 
-$line-color: rgba(50, 80, 150, 0.05);
+$body-bg: $base-body;
-$dark-line-color: rgba(50, 80, 150, 0.14);
+$gray-bg: mix($base-body, $base-panel, 50%);
+$gray-text: $base-mute;
+
+$line-color: rgba($base-mute, 0.05);
+$dark-line-color: rgba($base-mute, 0.14);
 
 //
 // Shadows
 //
 
 $shadow2:
-  0 1px 1px rgba($baseM, 0.30);
+  0 1px 1px rgba($base-mute, 0.30);
 
 $shadow3:
-  0 6px 8px rgba($baseM, 0.02),
+  0 6px 8px rgba($base-mute, 0.02),
-  0 1px 2px rgba($baseM, 0.20);
+  0 1px 2px rgba($base-mute, 0.20);
 
 $shadow6:
-  0 8px 12px rgba($baseB3, 0.1),
+  0 8px 12px rgba($base-b3, 0.1),
-  0 2px 3px rgba($baseB, 0.18);
+  0 2px 3px rgba($base-b, 0.18);
 
 /*
  * Mod scale

react.md

@@ -482,9 +482,9 @@ Also see
 --------
 {: .-one-column}
 
-This reference was made for React v15.
+* This reference was made for React v15.
-
+* [React v0.12 cheatsheet](react@0.14.html) _Legacy version_
 * [React website](http://facebook.github.io/react) _(facebook.github.io)_
-* [Animations](http://facebook.github.io/react/docs/animation.html) _(facebook.github.io)_
+{:.-also-see}
 
 {%endraw%}

vim.md

@@ -256,10 +256,13 @@ Also see
 --------
 {: .-one-column}
 
- * [Digraphs](vim-digraphs.html)
+* [Digraphs](vim-digraphs.html)
- * [Help text](vim-help.html)
+* [Help text](vim-help.html)
- * [Vimscript](vimscript.html)
+* [Vimscript](vimscript.html)
- * [Vim-unite](vim-unite.html)
+* [Vim-unite](vim-unite.html)
- * [Vim-easyalign](vim-easyalign.html)
+* [Vim-easyalign](vim-easyalign.html)
- * [Vim-rails](vim-rails.html)
+* [Vim-rails](vim-rails.html)
+{: .-also-see}
+
+This reference was made for Vim 8.0.