Added responsiveness, many other refinements

Antrikshy · Jul 10, 2016 · 7b9c79b · 7b9c79b
1 parent d1c21b1
commit 7b9c79b
Show file tree

Hide file tree

Showing 4 changed files with 65,612 additions and 31 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -1,5 +1,6 @@
 body {
     font-family: -apple-system, "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+    font-size: 100%;
     color: #444;
     padding-bottom: 5rem;
 }
@@ -12,6 +13,18 @@ ul {
     list-style-type: none;
 }
 
+.loading-overlay {
+    position: fixed;
+    height: 100vh;
+    width: 100vw;
+    font-size: 10rem;
+    background-color: #fff;
+    color: #d11d0e;
+    opacity: 0.8;
+    text-align: right;
+    z-index: 100;
+}
+
 .brand-title {
     color: #fff;
 }
@@ -47,10 +60,14 @@ ul {
     padding: 0 5rem;
 }
 
+.small-screen-br {
+    display: none;
+}
+
 .bio-image {
-    height: 350px;
+    height: 20rem;
     position: absolute;
-    left: 5rem;
+    left: 10rem;
 }
 
 .media-type-label {
@@ -62,10 +79,12 @@ ul {
 footer {
     width: 99vw;
     color: #fff;
-    padding: 1rem 0 1rem 1vw;
+    padding: 5px;
+    padding-right: 1vw;
     background-color: #d11d0e;
     position: fixed;
     bottom: 0;
+    display: none;
 }
 
 img.footer-inline-logo {
@@ -75,6 +94,52 @@ img.footer-inline-logo {
 }
 
 
+@media only screen  
+  and (max-width: 820px) {
+
+    body {
+        font-size: 90%;
+    }
+
+    .loading-overlay {
+        font-size: 5rem;
+    }
+
+    .header {
+        padding: 1rem 1rem;
+    }
+
+    .bio {
+        padding: 0 2rem;
+    }
+
+    .bio-image {
+        position: static;
+    }
+
+    .small-screen-br {
+        display: inline;
+    }
+
+    .search-box,
+    .tt-menu {
+        width: 80vw !important;
+    }
+
+    footer {
+        padding: 2px;
+    }
+}
+
+@media only screen  
+  and (max-width: 360px) {
+
+    body {
+        font-size: 70%;
+    }
+}
+
+
 /* ============ TYPEAHEAD STYLING ============ */
 
 span.twitter-typeahead {
@@ -84,8 +149,7 @@ span.twitter-typeahead {
 .tt-input,
 .tt-hint {
     padding: 8px 12px;
-    font-size: 24px;
-    line-height: 30px;
+    font-size: 1.5rem;
     border: 2px solid #ccc;
     border-radius: 8px;
     outline: none;
@@ -96,7 +160,7 @@ span.twitter-typeahead {
 }
 
 .tt-menu {
-    width: 422px;
+    width: 40vw;
     margin-top: 12px;
     padding: 8px 0;
     background-color: #fff;
@@ -108,15 +172,17 @@ span.twitter-typeahead {
 
 .tt-suggestion {
     padding: 3px 20px;
-    font-size: 18px;
+    margin: 0;
+    font-size: 1rem;
     line-height: 24px;
 }
 
-.tt-suggestion.tt-is-under-cursor {
+.tt-suggestion.tt-cursor,
+.tt-suggestion:hover {
     color: #fff;
-    background-color: #0097cf;
+    background-color: #d11d0e !important;
 }
 
 .tt-suggestion p {
     margin: 0;
-}
+}
diff --git a/index.html b/index.html
@@ -1,30 +1,34 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <title>The MCU Index // MCUi</title>
+
     <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Marvel Cinematic Universe Cast Browser</title>
+    <meta name="description" content="Character browser for the Marvel Cinematic Universe. See if your favorite actors have appeared in the MCU!">
 
     <link rel="stylesheet" href="css/normalize.css" type="text/css">
     <link rel="stylesheet" href="css/styles.css" type="text/css">
     <link rel="stylesheet" href="css/typeaheadjs.css" type="text/css">
 
     <script src="lib/jquery-2.2.3.min.js"></script>
-    <!-- <script src="https://fb.me/react-15.0.2.js"></script> -->
-    <!-- <script src="https://fb.me/react-dom-15.0.2.js"></script> -->
     <script src="lib/react-15.0.1.min.js"></script>
     <script src="lib/react-dom-15.0.1.min.js"></script>
     <script src="lib/typeahead.bundle.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
+    <script src="lib/babel-core.js"></script>
 
     <script type="text/babel" src="ui.jsx"></script>
     <script src="data.js"></script>
   </head>
   <body>
 
+    <div class="loading-overlay">Loading&nbsp;</div>
     <div id="app-container"></div>
     <footer>
-        <small>Designed by <a href="http://antrikshy.com">Antriksh Yadav</a>. No affiliation with <img class="footer-inline-logo" src="media/marvel-logo.png">. Data from <a href="http://www.themoviedb.org/"><img class="footer-inline-logo" src="media/tmdb-logo.png"></a> API.</small>
+        <small>Designed by <a href="http://antrikshy.com">Antriksh Yadav</a>.
+        <br class="small-screen-br" /> No affiliation with <img class="footer-inline-logo" src="media/marvel-logo.png">.
+        <br class="small-screen-br" /> Data from <a href="http://www.themoviedb.org/"><img class="footer-inline-logo" src="media/tmdb-logo.png"></a>.</small>
     </footer>
 
   </body>