Improve mobile compatibility to please Google

_data/content.yml

@@ -2,7 +2,7 @@ home:
   title: "Rico's cheatsheets"
   tagline: |
     Hey! I'm <a href='https://ricostacruz.com'>@rstacruz</a> and this is a modest collection of cheatsheets I've written.
-    <br>(This used to be ricostacruz.com/cheatsheets but now we have a shorter URL!)
+    (This used to be ricostacruz.com/cheatsheets but now we have a shorter URL!)
 
 top_nav:
   title: Devhints.io

_sass/2017/base/base.scss

@@ -59,3 +59,13 @@ a:hover {
 [aria-hidden]:not(.line-highlight) {
   display: none !important;
 }
+
+// No tooltips on mobile
+@media (max-width: 580px) {
+  .hint--bottom {
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+}

_sass/2017/components/page-actions.scss

@@ -99,6 +99,13 @@
     }
   }
 
+  // Space them out in mobile
+  @media (max-width: 768px) {
+    & > .link {
+      margin-left: 16px;
+    }
+  }
+
   // Collapse
   & > .link:first-child > a {
     margin-left: 0;

_sass/2017/components/pages-list.scss

@@ -50,6 +50,12 @@
     opacity: 0;
   }
 
+  @media (max-width: 768px) {
+    & > .info > .title {
+      display: none;
+    }
+  }
+
   &:hover,
   &:focus {
     & {

_sass/2017/components/search-box.scss

@@ -48,6 +48,18 @@
     margin: 0 8px;
   }
 
+  // Hide prefix in mobiel
+  @media (max-width: 768px) {
+    & > .prefix,
+    & > .sep {
+      display: none;
+    }
+
+    & > input {
+      padding-left: 16px;
+    }
+  }
+
   // Icon
   &::before {
     @include ion-icon('md-search');