feat: mobile view and navbar

_includes/head.html

@@ -13,7 +13,7 @@
 
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
   <title>
     {{ title }}
@@ -43,14 +43,13 @@
 
   <meta name="author" content="{{ site.name }}" />
   <meta name="description" content="{{ desc }}" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <link rel="alternate" type="application/rss+xml" href="/atom.xml" />
 
   <link rel="stylesheet" href="{{ '/css/base.css' | relative_url }}">
-
   <link rel="stylesheet" href="/css/base.css" type="text/css" media="screen, projection" />
   <link rel="stylesheet" href="/css/table.css" type="text/css" media="screen, projection" />
   <link rel="stylesheet" href="/css/posts.css" type="text/css" media="screen, projection" />
+  <link rel="stylesheet" href="/css/mobile.css" type="text/css" media="screen and (max-width: 768px)" />
 
   <script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript" src="/js/bootstrap.min.js"></script>

css/base.scss

@@ -26,6 +26,10 @@ $article-cover-img-height: 190px;
 $carousel-bg-color: #333;
 $carousel-height: 625px;
 
+// Mobile breakpoints
+$mobile-breakpoint: 768px;
+$small-mobile-breakpoint: 480px;
+
 // =============== /VARS ===============//
 
 @import "bootstrap";
@@ -56,6 +60,17 @@ $carousel-height: 625px;
 	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);
 }
 
+@mixin mobile {
+  @media (max-width: #{$mobile-breakpoint}) {
+    @content;
+  }
+}
+
+@mixin small-mobile {
+  @media (max-width: #{$small-mobile-breakpoint}) {
+    @content;
+  }
+}
 
 // ============== /MIXINS ============== //
 
@@ -81,27 +96,61 @@ $carousel-height: 625px;
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
  
+// Base styles with mobile-first approach (very impotant)
+html {
+  overflow-x: hidden;
+  max-width: 100%;
+}
+
 body {
 	font-size: 13px;
 	color: $font-color;
 	background: #fff;
 	font-family: Lato, Merriweather, Open Sans, sans-serif;
 	@include box-sizing();
+  overflow-x: hidden;
+  max-width: 100%;
+  
+  @include mobile {
+    font-size: 14px;
+  }
+  
+  @include small-mobile {
+    font-size: 13px;
+  }
 }
 
 *{
 	font-family: Lato, Merriweather, Open Sans, sans-serif;
+  box-sizing: border-box;
 }
 
+// Ensure all containers don't overflow
+.container, .container-fluid {
+  max-width: 100%;
+  overflow-x: hidden;
+}
 
 // ================ NAV ================//
 .pre-nav, .pre-footer  {
   height: $pre-nav-logo-height * 1.6;
   border-bottom: 1px solid #f3f3f3;
 
+  @include mobile {
+    height: auto;
+    padding: 15px 0;
+    text-align: center;
+  }
+
   .brand {
     height: 100%;
     padding: $pre-nav-logo-height * .3 0;
+    
+    @include mobile {
+      float: none;
+      display: block;
+      padding: 10px 0;
+    }
   }
 
   .name-container {
@@ -110,12 +159,26 @@ body {
     margin-left: 2em;
     line-height: 1;
     
+    @include mobile {
+      margin-left: 1em;
+      height: auto;
+    }
+
     .name {
       position: absolute;
       top: 0;
       width: 7em;
       font-size: 18px;
       color: $navbar-default-brand-color;
+      
+      @include mobile {
+        position: static;
+        font-size: 16px;
+      }
+      
+      @include small-mobile {
+        font-size: 14px;
+      }
     }
 
     .desc {
@@ -124,12 +187,26 @@ body {
       position: absolute;
       bottom: 0;
       color: #ababab;
+      
+      @include mobile {
+        position: static;
+        font-size: 12px;
+        margin-top: 5px;
+      }
+      
+      @include small-mobile {
+        font-size: 11px;
+      }
     }
   }
 
   .logo {
     height: $pre-nav-logo-height;
     float: left;
+    
+    @include mobile {
+      height: 50px;
+    }
   }
 
   .social {
@@ -141,9 +218,19 @@ body {
 
     > * {
       margin-left: 1em;
+      
+      @include mobile {
+        margin: 0 5px;
+      }
+    }
+    
+    @include mobile {
+      float: none;
+      display: block;
+      padding: 10px 0;
+      margin-top: 10px;
     }
   }
-
 }
 
 nav {
@@ -159,6 +246,10 @@ nav {
     width: 100%;
     position: relative;
     left: -15px;
+    
+    @include mobile {
+      left: 0;
+    }
   }
 
   &.affix {
@@ -189,14 +280,28 @@ nav {
   float: none;
   margin-bottom: -100%; // Hack to fix the spacing between header and navbar
 
+  @include mobile {
+    display: block;
+    margin-bottom: 0;
+  }
+
   &:first-of-type a {
     padding-left: 0;
+    
+    @include mobile {
+      padding-left: 15px;
+    }
   }
 
   &:last-of-type a {
     padding-right: 0;
+    
+    @include mobile {
+      padding-right: 15px;
+    }
   }
 }
+
 .navbar-nav {
 	font-size: 16px;
   text-align: justify;
@@ -206,6 +311,23 @@ nav {
     width: 100%; /* Ensures justification for single lines */
     display: inline-block;
   }
+  
+  @include mobile {
+    font-size: 14px;
+    text-align: left;
+    
+    > li > a {
+      padding: 10px 15px;
+    }
+  }
+}
+
+.navbar-collapse {
+  @include mobile {
+    border-top: 1px solid #e5e5e5;
+    margin-top: 10px;
+    padding-top: 10px;
+  }
 }
 
 // ================ /NAV ================//
@@ -215,6 +337,10 @@ nav {
 #header {
   font-size: 12px;
   
+  @include mobile {
+    margin-bottom: 20px;
+  }
+
   .header-row {
     position: relative;
     height: $home-header-height;
@@ -224,6 +350,13 @@ nav {
     color: white;
     box-shadow: $home-header-shadow;
     
+    @include mobile {
+      height: auto;
+      min-height: 250px;
+      border-radius: 0;
+      display: flex;
+      flex-direction: column;
+    }
   }
 
   .row {
@@ -232,10 +365,20 @@ nav {
 
   .cover-image {
     height: $home-header-height;
+    
+    @include mobile {
+      height: 200px;
+      order: 1;
+    }
   }
 
   .cover-details {
     padding: 2em 1.5em;
+    
+    @include mobile {
+      order: 2;
+      padding: 20px 15px;
+    }
   }
 
   .cover-link {
@@ -250,6 +393,10 @@ nav {
   .cover-title-label {
     font-size: 14px;
     font-weight: bold;
+    
+    @include mobile {
+      font-size: 12px;
+    }
   }
 
   .title {
@@ -257,6 +404,15 @@ nav {
     font-weight: bold;
     margin-top: 0;
     margin-bottom: 20px;
+    
+    @include mobile {
+      font-size: 20px;
+      margin-bottom: 15px;
+    }
+    
+    @include small-mobile {
+      font-size: 18px;
+    }
   }
 }
 
@@ -265,6 +421,12 @@ nav {
 
   .cover-image {
     border-radius: 10px;
+    
+    @include mobile {
+      height: 150px;
+      margin-bottom: 15px;
+      border-radius: 0;
+    }
   }
 
   .title {
@@ -287,6 +449,11 @@ nav {
 
 .cover-excerpt {
   margin-top: 12px;
+  
+  @include mobile {
+    font-size: 13px;
+    line-height: 1.4;
+  }
 }
 // ============= /HOME-HEADER ============= //
 
@@ -296,6 +463,10 @@ nav {
   margin-bottom: 60px;
   position: relative;
   
+  @include mobile {
+    margin-bottom: 30px;
+  }
+
   .container-title {
     position: absolute;
     top: -2.25em;

css/mobile.css

@@ -1,30 +1,377 @@
-.sidebar {
+/* Mobile view  - Apppplied at 768px and below */
-  position: inherit;
+@media (max-width: 768px) {
-  width: inherit;
-  margin: 0;
-  padding: 25px; }
-  .sidebar img {
-    display: none; }
-  .sidebar .name {
-    display: inline; }
-    .sidebar .name #fname, .sidebar .name #lname {
-      font-size: 25px; }
-  .sidebar .meta {
-    display: none; }
-  .sidebar ul {
-    padding: 25px; }
-  .sidebar li {
-    display: inline; }
-  .sidebar .sections {
-    margin: 0; }
-    .sidebar .sections a {
-      font-size: 16px;
-      margin: 0 20px 0 0;
-      padding: 5px 10px; }
   
-.content {
+  /* Base Mobile Settings */
-  margin: 0;
+  body {
-  padding: 5px 25px;
+    font-size: 14px;
-  width: inherit; }
+    overflow-x: hidden;
-  .content h1 {
+  }
-    margin: 0 0 5px 0; }
+  
+  .container {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+  
+  /* Pre-nav and Navigation */
+  .pre-nav, .pre-footer {
+    height: auto;
+    padding: 15px 0;
+  }
+  
+  .pre-nav .brand,
+  .pre-footer .brand {
+    display: block;
+    float: none;
+    text-align: center;
+    padding: 10px 0;
+  }
+  
+  .pre-nav .social,
+  .pre-footer .social {
+    display: block;
+    float: none;
+    text-align: center;
+    padding: 10px 0;
+    margin-top: 10px;
+  }
+  
+  .pre-nav .social > *,
+  .pre-footer .social > * {
+    margin: 0 5px;
+  }
+  
+  .pre-nav .name-container .name {
+    font-size: 16px;
+  }
+  
+  .pre-nav .name-container .desc {
+    font-size: 12px;
+  }
+  
+  .pre-nav .logo {
+    height: 50px;
+  }
+  
+  /* Navbr */
+  .navbar-nav {
+    margin: 0;
+    font-size: 14px;
+  }
+  
+  .navbar-nav > li {
+    display: block;
+    float: none;
+    margin-bottom: 0;
+  }
+  
+  .navbar-nav > li > a {
+    padding: 10px 15px;
+    text-align: left;
+  }
+  
+  .navbar-collapse {
+    border-top: 1px solid #e5e5e5;
+    margin-top: 10px;
+    padding-top: 10px;
+  }
+  
+  /* Header Styles */
+  #header {
+    margin-bottom: 20px;
+  }
+  
+  #header .header-row {
+    height: auto;
+    min-height: 250px;
+    border-radius: 0;
+  }
+  
+  #header .cover-image {
+    height: 200px;
+    order: 1;
+  }
+  
+  #header .cover-details {
+    order: 2;
+    padding: 20px 15px;
+  }
+  
+  #header .title {
+    font-size: 20px;
+    margin-bottom: 15px;
+  }
+  
+  #header .cover-title-label {
+    font-size: 12px;
+  }
+  
+  #header .cover-excerpt {
+    font-size: 13px;
+    line-height: 1.4;
+  }
+  
+  /* Category Header */
+  #header.category-header .cover-image {
+    height: 150px;
+    margin-bottom: 15px;
+  }
+  
+  /* New Articles Section */
+  #new-articles {
+    margin-bottom: 30px;
+  }
+  
+  #new-articles .container-title {
+    position: static;
+    font-size: 18px;
+    margin-bottom: 15px;
+    padding: 10px 15px;
+    text-align: center;
+  }
+  
+  #new-articles .article-col {
+    padding: 5px 0;
+    margin-bottom: 15px;
+  }
+  
+  #new-articles .article {
+    height: 250px;
+    margin-top: 0;
+  }
+  
+  #new-articles .details {
+    padding: 15px;
+  }
+  
+  #new-articles .details .title {
+    font-size: 16px;
+    line-height: 1.3;
+  }
+  
+  #new-articles .details .date {
+    position: static;
+    margin-top: 5px;
+    font-size: 11px;
+  }
+  
+  /* Article Horizontal Layout */
+  .article-horiozntal {
+    height: auto;
+    margin-bottom: 25px;
+  }
+  
+  .article-horiozntal .img-container {
+    height: 150px;
+    margin-bottom: 10px;
+  }
+  
+  .article-horiozntal .details-container {
+    padding-left: 0;
+  }
+  
+  .article-horiozntal .title {
+    font-size: 16px;
+    line-height: 1.4;
+  }
+  
+  .article-horiozntal .excerpt {
+    font-size: 13px;
+    line-height: 1.4;
+    margin-top: 10px;
+  }
+  
+  /* Post Styles */
+  .post {
+    font-size: 16px;
+    line-height: 1.6;
+  }
+  
+  .post .header {
+    padding-bottom: 20px;
+  }
+  
+  .post .body {
+    padding-top: 20px;
+  }
+  
+  .post .cover-img {
+    height: 200px;
+    margin-bottom: 20px;
+  }
+  
+  .post .header .title {
+    font-size: 20px;
+    line-height: 1.3;
+  }
+  
+  .post .header .tag {
+    font-size: 14px;
+  }
+  
+  .post .fb-content {
+    margin-top: 25px;
+  }
+  
+  /* More Articles */
+  #more-articles-container {
+    margin-top: 25px;
+    margin-bottom: 30px;
+  }
+  
+  #more-articles .article {
+    height: 120px;
+    margin-bottom: 15px;
+  }
+  
+  #more-articles .details {
+    padding: 10px;
+  }
+  
+  #more-articles .title {
+    font-size: 14px;
+    line-height: 1.3;
+  }
+  
+  /* Category Posts */
+  .category-posts {
+    margin-top: 15px;
+  }
+  
+  .category-posts .article-horiozntal {
+    margin-bottom: 20px;
+  }
+  
+  /* Bootstrap Grid Fixes */
+  .col-md-4, .col-md-8, .col-sm-3, .col-sm-6 {
+    width: 100%;
+    padding-left: 0;
+    padding-right: 0;
+  }
+  
+  /* Facebook Plugin Responsiveness */
+  .fb-page {
+    width: 100% !important;
+    margin-top: 20px;
+  }
+  
+  .fb-comments {
+    width: 100% !important;
+  }
+  
+  /* Hide Facebook sidebar on mobile */
+  .post .col-md-4 {
+    display: none;
+  }
+  
+  .category-posts .col-md-4 {
+    display: none;
+  }
+  
+  /* Make content full width on mobile */
+  .post .col-md-8,
+  .category-posts .col-md-8 {
+    width: 100%;
+  }
+  
+  /* Images Responsiveness */
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+  
+  .img-center-fill {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  
+  /* Footer */
+  footer {
+    margin-top: 30px;
+    padding-top: 20px;
+  }
+  
+  .copyright {
+    text-align: center;
+    font-size: 12px;
+  }
+  
+  /* Utility Classes */
+  .hidden-mobile {
+    display: none !important;
+  }
+  
+  .visible-mobile {
+    display: block !important;
+  }
+  
+  /* Text adjustments */
+  h1 { font-size: 24px; }
+  h2 { font-size: 20px; }
+  h3 { font-size: 18px; }
+  h4 { font-size: 16px; }
+  h5 { font-size: 14px; }
+  h6 { font-size: 13px; }
+  
+  
+  .row {
+    margin-left: 0;
+    margin-right: 0;
+  }
+  
+  .outer-row {
+    margin-left: -5px;
+    margin-right: -5px;
+  }
+  
+  /* Ensure no horizontal scroll */
+  html, body {
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+}
+
+/* Extra Small Devices (phones, less than 480px) */
+@media (max-width: 480px) {
+  
+  body {
+    font-size: 13px;
+  }
+  
+  .container {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  
+  #header .title {
+    font-size: 18px;
+  }
+  
+  #new-articles .details .title {
+    font-size: 14px;
+  }
+  
+  .post .header .title {
+    font-size: 18px;
+  }
+  
+  .post {
+    font-size: 15px;
+  }
+  
+  #new-articles .container-title {
+    font-size: 16px;
+  }
+  
+  .container-title {
+    font-size: 20px;
+  }
+  
+  .pre-nav .name-container .name {
+    font-size: 14px;
+  }
+  
+  .pre-nav .name-container .desc {
+    font-size: 11px;
+  }
+}

css/table.css

@@ -1,19 +1,105 @@
 .mbtablestyle {
   border-collapse: collapse;
   margin-top: 5rem;
+  width: 100%;
+  max-width: 100%;
 }
 
 .mdtablestyle {
   border-collapse: collapse;
   margin: 2rem 0;
+  width: 100%;
+  max-width: 100%;
 }
 
 .mbtablestyle td,
 .mbtablestyle th,
 .mdtablestyle td,
 .mdtablestyle th {
-	border: 1px solid black;
+  border: 1px solid black;
   padding: 0.5rem 1.5rem;
   padding-bottom: 2rem;
   vertical-align: top;
+  word-wrap: break-word;
+}
+
+/* Mobile table styles for the articles and stuff */
+@media (max-width: 768px) {
+  .mbtablestyle,
+  .mdtablestyle {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    font-size: 12px;
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  .mbtablestyle td,
+  .mbtablestyle th,
+  .mdtablestyle td,
+  .mdtablestyle th {
+    padding: 0.25rem 0.75rem;
+    padding-bottom: 1rem;
+    min-width: 100px;
+  }
+  
+  /* Alternative responsive table approach - stacked layout */
+  .responsive-table {
+    display: block;
+    width: 100%;
+  }
+  
+  .responsive-table thead {
+    display: none;
+  }
+  
+  .responsive-table tbody,
+  .responsive-table tr,
+  .responsive-table td {
+    display: block;
+    width: 100%;
+  }
+  
+  .responsive-table tr {
+    border: 1px solid #ccc;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+  
+  .responsive-table td {
+    border: none;
+    position: relative;
+    padding-left: 50% !important;
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+  
+  .responsive-table td:before {
+    content: attr(data-label) ": ";
+    position: absolute;
+    left: 6px;
+    width: 45%;
+    font-weight: bold;
+    white-space: nowrap;
+  }
+}
+
+@media (max-width: 480px) {
+  .mbtablestyle,
+  .mdtablestyle {
+    font-size: 11px;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+  
+  .mbtablestyle td,
+  .mbtablestyle th,
+  .mdtablestyle td,
+  .mdtablestyle th {
+    padding: 0.2rem 0.5rem;
+    padding-bottom: 0.5rem;
+    min-width: 80px;
+  }
 }