Update

_sass/2017/components/pages-list.scss

@@ -66,56 +66,3 @@
   color: $base-b;
   flex: 0 0 100%;
 }
-
-.top-sheet.top-sheet {
-  padding: 4px;
-  text-decoration: none;
-
-  & > .info {
-    display: block;
-    background: darken($base-a, 8%);
-    color: white;
-    text-align: left;
-    padding: 16px;
-    width: auto;
-    border-radius: 3px;
-    box-shadow: $shadow2;
-  }
-
-  &:nth-of-type(3n + 1) {
-    & > .info {
-      background: darken($base-a, 8%);
-    }
-
-    &:hover > .info,
-    &:focus > .info {
-      background: darken($base-a, 16%);
-    }
-  }
-
-  &:nth-of-type(3n + 2) {
-    & > .info {
-      background: darken($base-b, 8%);
-    }
-
-    &:hover > .info,
-    &:focus > .info {
-      background: darken($base-b, 16%);
-    }
-  }
-
-  &:nth-of-type(3n + 3) {
-    & > .info {
-      background: darken($base-c, 8%);
-    }
-
-    &:hover > .info,
-    &:focus > .info {
-      background: darken($base-c, 16%);
-    }
-  }
-
-  & > .info > .title {
-    display: none;
-  }
-}

_sass/2017/components/top-sheet.scss

@@ -0,0 +1,66 @@
+.top-sheet.top-sheet {
+  padding: 4px;
+  text-decoration: none;
+
+  & > .info {
+    display: block;
+    background: darken($base-a, 0%);
+    color: white;
+    text-align: left;
+    padding: 16px;
+    width: auto;
+    border-radius: 3px;
+    box-shadow: $shadow2;
+  }
+
+  &:hover > .info,
+  &:focus > .info {
+    box-shadow: $shadow3;
+  }
+
+  &:nth-of-type(3n + 1) {
+    & > .info {
+      background: linear-gradient(
+        15deg,
+        $base-a,
+        adjust-color($base-a, $lightness: 4%, $hue: 20deg));
+    }
+
+    &:hover > .info,
+    &:focus > .info {
+      background: darken($base-a, 8%);
+    }
+  }
+
+  &:nth-of-type(3n + 2) {
+    & > .info {
+      background: linear-gradient(
+        15deg,
+        $base-mute,
+        adjust-color($base-mute, $lightness: 4%, $hue: -10deg));
+    }
+
+    &:hover > .info,
+    &:focus > .info {
+      background: darken($base-mute, 8%);
+    }
+  }
+
+  &:nth-of-type(3n + 3) {
+    & > .info {
+      background: linear-gradient(
+        15deg,
+        $base-c,
+        adjust-color($base-c, $lightness: 2%, $hue: 6deg));
+    }
+
+    &:hover > .info,
+    &:focus > .info {
+      background: darken($base-c, 8%);
+    }
+  }
+
+  & > .info > .title {
+    display: none;
+  }
+}

_sass/2017/style.scss

@@ -26,3 +26,4 @@
 @import './components/side-ad';
 @import './components/site-header';
 @import './components/top-nav';
+@import './components/top-sheet';

react-router.md

@@ -2,7 +2,6 @@
 title: React-router
 category: React
 layout: default-ad
-tags: [Featured]
 ---
 
 {% raw %}

sass.md

@@ -2,6 +2,7 @@
 title: Sass
 category: CSS
 layout: 2017/sheet
+tags: [Featured]
 ---
 
 ## Basics