fix mobile view

okdistribute · okdistribute · commit f64ebd00972e · 2016-10-15T14:49:29.000-07:00
diff --git a/scss/base.scss b/scss/base.scss
@@ -523,3 +523,27 @@ td, th {
   padding: 10px;
   border: 1px solid black;
 }
+
+/** mobile nav **/
+.slicknav_menu {
+	display:none;
+  background-color: white;
+}
+
+.slicknav_btn {
+  background-color: #293648;
+}
+
+@media screen and (max-width: 40em) {
+	/* #menu is the original menu */
+	#menu {
+		display:none;
+	}
+
+	.slicknav_menu {
+		display:block;
+  }
+  .header-logo {
+    font-size: 24px;
+  }
+}
diff --git a/scss/includes/headers.scss b/scss/includes/headers.scss
@@ -68,8 +68,6 @@
   background-position: 0 11px;
   margin-top: 2px;
   color: $header-link;
-  overflow: hidden;
-  max-width: 48px;
   &:hover, &:focus {
     color: $color-neutral--80;
     text-decoration: none;
diff --git a/templates/index.html b/templates/index.html
@@ -7,13 +7,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
   <link rel="icon" href="/static/favicon.ico">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/default.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.10/slicknav.min.css" media="screen">
   <link rel="stylesheet" href="/static/css/base.css" media="screen">
 </head>
 <body>
   <div class="header">
     <div class="header-nav container">
       <div class="header-nav-links">
-        <ul class="header-nav-list">
+        <ul class="header-nav-list" id="menu">
           <li><a href="/" class="header-nav-link">Home</a></li>
           <li><a href="/about" class="header-nav-link">About</a></li>
           <li><a href="/team" class="header-nav-link">Team</a></li>
@@ -51,6 +52,10 @@
   </div>
 
   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.10/jquery.slicknav.min.js"></script>
+
+
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@@ -60,6 +65,12 @@
     ga('create', 'UA-84719120-1', 'auto');
     ga('send', 'pageview');
 
+  	$(function(){
+  		$('#menu').slicknav({
+        label: ''
+      });
+  	});
+
   </script>
 </body>
 </html>
diff --git a/templates/splash.html b/templates/splash.html
@@ -52,17 +52,21 @@ <h1 class="jumbotron-title">Technology &amp; Data For Good</h1>
       <div class="content-sub-container margin-bottom-xl">
         <div class="col-md-6">
           <div class="content-box">
-            <img src="static/img/dat-data-v3.png">
-            <h3 class="content-card-title"><a href="http://dat-data.com/blog/">Dat Data</a></h3>
-            <div class="content-card-subtitle">Data sharing tools that make it easy to share datasets on the web.</div>
+            <a href="http://dat-data.com/">
+              <img src="static/img/dat-data-v3.png">
+              <h3 class="content-card-title">Dat Data</h3>
+              <div class="content-card-subtitle">Data sharing tools that make it easy to share datasets on the web.</div>
+            </a>
           </div>
         </div>
         <div class="col-md-6">
           <div class="content-box">
-            <img src="static/img/codeforscience.png">
-            
-            <h3 class="content-card-title"><a href="https://gitter.im/codeforscience/community">Code for Science Community</a></h3>
-            <div class="content-card-subtitle">Online community intersecting Science and Technology.</div>
+            <a href="https://gitter.im/codeforscience/community">
+              <img src="static/img/codeforscience.png">
+
+              <h3 class="content-card-title">Code for Science Community</h3>
+              <div class="content-card-subtitle">Online community intersecting Science and Technology.</div>
+            </a>
           </div>
         </div>
       </div>
