Fixes #17:Make the site mobile friendly (#25)

Make the site mobile friendly

Author: arc9693

_includes/assets.html

@@ -4,4 +4,5 @@
 <!--Scripts-->
 <script type="text/javascript" src={{ "/js/jquery.min.js" | relative_url }}></script>
 <script type="text/javascript" src={{ "/js/materialize.min.js" | relative_url }}></script>
+<script type="text/javascript" src={{ "/js/main.js" | relative_url }}></script>
 <script src="https://use.fontawesome.com/d4f41d4038.js"></script>

_includes/footer.html

@@ -9,16 +9,16 @@
     padding-top: 1%;
     padding-bottom: 1%;
     margin: 0%;
-    font-size: 1.4rem;
+    font-size: 3vh;
   }
 
   footer .credits {
     margin: 0px;
-    font-size: 1.2rem;
+    font-size: 2.8vh;
   }
 
   footer .footer-copyright {
-    font-size: 1.2rem;
+    font-size: 2.8vh;
     font-weight: normal !important;
   }
 </style>

_includes/header.html

@@ -2,7 +2,7 @@
   <nav class="blue navbar">
     <div class="row nav-wrapper">
       <a href="{{ '/' | relative_url }}" class="brand-logo">{{ site.title | escape }}</a>
-      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="fa fa-bars"></i></a>
+      <a href="#" data-activates="mobile-demo" class="button-collapse menu-btn"><i class="fa fa-bars"></i></a>
       <ul id="nav-mobile" class="right hide-on-med-and-down">
         {% for page in site.pages %} {% if site.nav contains page.path %}
         <li><a href="{{ page.url | relative_url }}">{{ page.title | escape }}</a></li>

_layouts/home.html

@@ -19,8 +19,8 @@ <h1 class="title">NIT DGP Open Source</h1>
         <h2 class="description">{{site.description}}</h2>
       </div>
     </div>
-    <div class="page-content center-align">
-      <div class="main">{{ content }}</div>
+    <div class="page-content center-align container">
+      <div class="main col s12 l10">{{ content }}</div>
     </div>
   </main>
   {% include footer.html %}

css/styles.scss

@@ -46,20 +46,20 @@ html, body {
 }
 
 .page-content {
-  width: 70%;
   margin: auto;
   margin-bottom: 5%;
 
   img {
     display: block;
-    width: 75%;
+    width: 95%;
+    height:100%;
     padding: 2%;
     margin: auto;
   }
 
   a {
     color: limegreen;
-    font-weight: 700;
+    font-weight: 500;
     border-bottom: 2px solid transparent;
     transition: all 0.5s ease;
 
@@ -73,7 +73,7 @@ html, body {
   }
 
   p {
-    font-size: 22px;
+    font-size: 3.2vh;
     display: inline-block;
     margin-top: 10px;
   }
@@ -88,15 +88,15 @@ html, body {
     code {
       font-family: 'Roboto Mono', monospace;
       color: yellow;
-      font-size: 1.2rem;
+      font-size: 3.2vh;
     }
   }
 
   ul, ol {
     text-align: left;
 
     li {
-      font-size: 22px;
+      font-size: 3.2vh;
       width: 95%;
       margin: auto;
       margin-top: 10px;
@@ -107,3 +107,31 @@ html, body {
     }
   }
 }
+
+.navbar-fixed {
+  z-index: 998 !important;
+}
+
+h1 {
+  font-size: 3em;
+}
+
+h2 {
+  font-size: 2.5em;
+}
+
+h3 {
+  font-size: 2em;
+}
+
+h4 {
+  font-size: 1.5em;
+}
+
+h5 {
+  font-size: 1em;
+}
+
+h6 {
+  font-size: 0.8em;
+}

js/main.js

@@ -0,0 +1,11 @@
+(function($) {
+  $(function() {
+
+    $('.menu-btn').sideNav({
+      edge: 'left', // Choose the horizontal origin
+      closeOnClick: true, // Closes side-nav on <a> clicks
+      draggable: true // Choose whether you can drag to open on touch screens
+    });
+
+  }); // end of document ready
+})(jQuery); // end of jQuery name space