fix(styles): changes to accommodate mobile

This includes changes to the header, the main section of the homepage,
and the jumbotron section in order to better accommodate mobile browsers

static/css/tokio.css

@@ -11,7 +11,11 @@ table, td {
 }
 
 td {
-    padding: 4px
+    padding: 4px;
+}
+
+img {
+  max-width: 100%;
 }
 
 /*
@@ -67,10 +71,20 @@ td {
  * ===== Navbar =====
  *
  */
+.navbar-nav .nav-item,
+.navbar-brand {
+  float: none;
+}
+
+.navbar-brand {
+  margin-right: 0;
+}
+
+.navbar-nav .nav-item + .nav-item {
+  margin-left: 0;
+}
 
 .navbar-nav li {
-  margin-left:30px;
-  margin-right:30px;
   line-height: 60px;
   height: 60px;
   padding-top: 0;
@@ -82,7 +96,8 @@ td {
 }
 
 .navbar ul {
-    display: inline-block;
+  display: block;
+  margin: 0 auto;
 }
 
 .leftnav li {
@@ -139,20 +154,18 @@ td {
 
 .jumbotron {
   border-radius: 0;
-  padding: 4rem;
+  padding: 4rem 1rem;
 }
 
 .tk-jumbotron {
   margin-left: auto;
   margin-right: auto;
-  width: 700px;
-  max-width: 100%;
+  max-width: 700px;
   text-align: center;
 }
 
 .jumbotron .tk-logo {
-  width: auto;
-  height: 10rem;
+  max-height: 10rem;
 }
 
 .jumbotron .lead {
@@ -210,7 +223,8 @@ td {
 
 .tk-home {
   margin: 0 auto;
-  width: 900px;
+  width: auto;
+  max-width: 900px;
 }
 
 .tk-features {
@@ -375,3 +389,28 @@ h4:hover a,
 h5:hover a {
     text-decoration: none;
 }
+
+@media (min-width:480px) {
+  .navbar ul {
+    padding: 0 1rem;
+  }
+
+  .navbar-nav .nav-item,
+  .navbar-brand {
+    float: left;
+  }
+
+  .navbar-nav .nav-item + .nav-item {
+    margin-left: 1rem;
+  }
+}
+
+@media (min-width:520px) {
+  .jumbotron {
+    padding: 4rem;
+  }
+
+  .navbar-nav .nav-item + .nav-item {
+    margin-left: 2rem;
+  }
+}