Responsive

An Phan · An Phan · commit e9707bbdde40 · 2016-06-23T11:11:04.000+08:00
diff --git a/app/site/index.html b/app/site/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <title>Awesome Vue</title>
     <meta name="description" content="A curated list of awesome things related to Vue.js">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
     <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'>
diff --git a/app/site/src/App.vue b/app/site/src/App.vue
@@ -32,6 +32,7 @@
             title="Contribute on GitHub"
             class="github">
             <i class="fa fa-github"></i>
+            <span class="sm">Contribute on GitHub</span>
           </a>
         </footer>
       </div>
@@ -229,14 +230,15 @@ code {
     background: #fcfcfc;
 
     hgroup {
+      margin-bottom: 2.4rem;
+
       h1 {
         font-size: 2.7rem;
         margin-bottom: 1.6rem;
       }
 
       h2 {
         font-size: 1.3rem;
-        margin-bottom: 2.4rem;
       }
     }
 
@@ -299,6 +301,39 @@ code {
         }
       }
     }
+
+    footer {
+      margin-top: 4rem;
+
+      .github {
+        color: #34495e;
+        font-size: 2rem;
+        width: 149px;
+        display: inline-block;
+        position: relative;
+
+        .sm {
+          display: none;
+        }
+
+        &::after {
+          content: "";
+          display: block;
+          width: 100%;
+          height: 27px;
+          background: url(./assets/look-here.png) no-repeat;
+          background-size: 149px;
+          position: absolute;
+          right: -5px;
+          transform: rotate(-4deg);
+          transform-origin: 100% 0;
+        }
+
+        &:hover::after {
+          animation: soho 1s ease-in-out infinite;
+        }
+      }
+    }
   }
 
   .right {
@@ -322,31 +357,73 @@ code {
   }
 }
 
-footer {
-  margin-top: 4rem;
+@media only screen and (max-width: 1023px) {
+  #app {
+    .left, .right {
+      padding: 24px 16px;
+    }
 
-  .github {
-    color: #34495e;
-    font-size: 2rem;
-    width: 149px;
-    display: inline-block;
-    position: relative;
+    .right {
+      overflow-y: scroll;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+}
 
-    &::after {
-      content: "";
-      display: block;
+@media only screen and (max-width: 735px) {
+  #app {
+    display: block;
+    overflow: auto;
+
+    .left, .right {
       width: 100%;
-      height: 27px;
-      background: url(./assets/look-here.png) no-repeat;
-      background-size: 149px;
-      position: absolute;
-      right: -5px;
-      transform: rotate(-4deg);
-      transform-origin: 100% 0;
+      display: block;
     }
 
-    &:hover::after {
-      animation: soho 1s ease-in-out infinite;
+    .left {
+      text-align: left;
+      border-right: 0;
+      border-bottom: 1px solid #ebebeb;
+
+      hgroup {
+        margin-bottom: 1.8rem;
+        .tagline {
+          display: none;
+        }
+      }
+
+      form {
+        label {
+          display: block;
+        }
+
+        input[type="search"] {
+          width: 100%;
+        }
+      }
+
+      footer {
+        margin-top: 2rem;
+
+        .github {
+          font-size: 1rem;
+          width: 100%;
+
+          .sm {
+            display: inline;
+          }
+
+          &::after {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .right {
+      .wrap {
+        max-width: 100%;
+      }
     }
   }
 }
diff --git a/app/site/src/components/Explore.vue b/app/site/src/components/Explore.vue
@@ -58,5 +58,20 @@ export default {
       display: none;
     }
   }
+
+  @media only screen and (max-width: 1023px) {
+    h1 {
+      display: inline;
+      font-size: 1rem;
+
+      &::after {
+        content: ":";
+      }
+    }
+
+    ul {
+      display: inline;
+    }
+  }
 }
 </style>
