fix: hamburger menu bug

Improved Mobile Navbar - Issue #40 (Revamped Navbar with Mobile-First Design)

.gitignore

@@ -24,4 +24,4 @@ Thumbs.db
 # Ignore by editors/IDEs
 .vscode/
 .idea/
-*.iml
+*.iml

Gemfile

@@ -1,2 +1,3 @@
-source "https://rubygems.org"
+source 'http://rubygems.org'
-gem "github-pages", group: :jekyll_plugins
+
+gem 'github-pages', group: :jekyll_plugins

Gemfile.lock

@@ -1,5 +1,5 @@
 GEM
-  remote: https://rubygems.org/
+  remote: http://rubygems.org/
   specs:
     activesupport (7.2.2.1)
       base64

README.md

@@ -0,0 +1,115 @@
+# WONA GitHub Website
+
+A Jekyll-based static website for Watch Out News Agency.
+
+## Project Structure
+
+### Root Files
+- `_config.yml` - Jekyll configuration file with site settings, plugins, and build options
+- `index.html` - Homepage template
+- `404.html` - Custom 404 error page
+- `Gemfile` - Ruby dependencies specification
+- `Gemfile.lock` - Locked dependency versions
+- `sitemap.xml` - XML sitemap for search engines
+- `atom.xml` - RSS/Atom feed for content syndication
+- `favicon.ico` - Website favicon
+- `CNAME` - Custom domain configuration for GitHub Pages
+
+### Directories
+
+#### `_includes/`
+Reusable HTML components that can be included in layouts and pages:
+- `cat_header.html` - Category page header
+- `footer.html` - Site footer
+- `google_analytics.html` - Google Analytics tracking code
+- `head.html` - HTML head section with meta tags and stylesheets
+- `header.html` - Site header and navigation
+- `horizontal_post.html` - Horizontal post layout component
+- `navbar.html` - Navigation bar component
+
+#### `_layouts/`
+Page templates that define the structure for different content types:
+- `category.html` - Template for category archive pages
+- `layout.html` - Base layout template
+- `post.html` - Individual blog post template
+
+#### `_posts/`
+Markdown files containing blog posts and articles (follows Jekyll naming convention: `YYYY-MM-DD-title.md`)
+
+#### `_sass/`
+SCSS stylesheets organized by component:
+- `bootstrap/` - Bootstrap framework styles
+- `_bootstrap.scss` - Bootstrap imports
+- `css/` - Custom stylesheets
+  - `base.scss` - Base styles and variables
+  - `fontawesome.min.css` - Font Awesome icons
+  - `mobile.css` - Mobile-responsive styles
+  - `posts.css` - Post-specific styling
+  - `pure.css` - Pure CSS framework
+  - `pygments.css` - Syntax highlighting styles
+  - `table.css` - Table styling
+
+#### Content Directories
+- `edc/` - EDC (Editorial Development Cell) related content
+- `fonts/` - Custom web fonts
+- `getinvolved/` - Pages about getting involved with WONA
+- `guide/` - User guides and documentation
+- `images/` - Static images and media files
+- `js/` - JavaScript files
+- `news/` - News articles and posts
+- `team/` - Team member profiles and information
+
+#### Styling
+- `table.css` - Standalone CSS file for table styling
+
+## Installation
+
+### Prerequisites
+- [Docker](https://www.docker.com/get-started) installed on your system
+- Git (to clone the repository)
+
+### Setup Steps
+
+1. **Clone the repository**
+   ```bash
+   git clone https://github.com/WatchOutNewsAgency/wona.github.com.git
+   cd wona.github.com
+   ```
+
+2. **Run with Docker**
+   ```bash
+   docker run --rm -it \
+     -v "${PWD}:/srv/jekyll" \
+     -p 4000:4000 \
+     jekyll/jekyll:4 \
+     jekyll serve --host 0.0.0.0
+   ```
+   - If you might face error in dockerization use this instead:  jekyll/jekyll:3
+   - This command will start a Jekyll server, serving your site at 4000 port
+   - If any other error, all the best debugging
+3. **Access the site**
+   - Open your browser and navigate to `http://localhost:4000`
+   - The site will automatically rebuild when you make changes to files
+
+### Docker Command Explanation
+- `--rm` - Automatically remove the container when it exits
+- `-it` - Interactive terminal mode
+- `-v "${PWD}:/srv/jekyll"` - Mount current directory to Jekyll's working directory in container
+- `-p 4000:4000` - Map port 4000 from container to host
+- `jekyll/jekyll:4` - Use Jekyll Docker image version 4
+- `jekyll serve --host 0.0.0.0` - Start Jekyll development server accessible from all network interfaces
+
+### Development Notes
+- Changes to `_config.yml` require a server restart
+- New posts in `_posts/` will be automatically detected
+- CSS/SCSS changes will trigger automatic regeneration
+- Press `Ctrl+C` to stop the development server
+
+### Troubleshooting
+- If port 4000 is already in use, change `-p 4000:4000` to `-p 4001:4000` and access via `http://localhost:4001`
+- On Windows, use PowerShell or Command Prompt
+- Ensure Docker Desktop is running before executing the command
+
+## Repository
+
+[https://github.com/WatchOutNewsAgency/wona.github.com](https://github.com/WatchOutNewsAgency/wona.github.com)

_includes/footer.html

@@ -7,7 +7,7 @@
         <div class="desc">Student Media<br>Body of IITR</div>
       </div>
     </div>
-    <div class="social pull-right">
+    <div class="social pull-right hidden-xs">
       <!--      <a href="/team">Team</a> -->
       <a href="/about">About</a>
       <a href="/guide">Guide</a>

_includes/google_analytics.html

@@ -1,15 +1,9 @@
+<!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-0DKSQSXFTB"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
 
-<!-- Google Analytics -->
+  gtag('config', 'G-0DKSQSXFTB');
- 	<script type="text/javascript">
+</script>
-
-      var _gaq = _gaq || [];
-      _gaq.push(['_setAccount', 'UA-35663579-1']);
-      _gaq.push(['_trackPageview']);
-
-      (function() {
-        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-      })();
-
-    </script>

_includes/head.html

@@ -55,4 +55,4 @@
   <script type="text/javascript" src="/js/bootstrap.min.js"></script>
   <script type="text/javascript" src="/js/masonry.min.js"></script>
   <script type="text/javascript" src="/js/application.js"></script>
-</head>
+</head>

_includes/horizontal_post.html

@@ -1,5 +1,5 @@
 {% assign post = include.post %}
-<div class="row article article-horiozntal">
+<div class="row article article-horizontal">
   <div class="col-md-4 center-fill-container img-container">
     <img src="/images/posts/{{post.image}}" alt=""  class="img-center-fill center-both {% if post.image == null %}hidden{% endif %}">
   </div>

_includes/navbar.html

@@ -10,14 +10,14 @@
   </a>
   
   <!-- Mobile toggle button -->
-  <button type="button" class="navbar-toggle" id="mobile-menu-toggle">
+  <button type="button" class="navbar-toggle visible-xs" id="mobile-menu-toggle">
     <span class="sr-only">Toggle navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
   </button>
   
-  <div class="social pull-right">
+  <div class="social pull-right hidden-xs">
     <a href="/about">About</a>
     <a href="/guide">Guide</a>
     <a href="/getinvolved">Get Involved</a>
@@ -25,31 +25,49 @@
     <a href="https://www.youtube.com/channel/UCthZ7tKOzy4EJpuVxtdcp1A"><img src="/images/youtube-play.svg"></a>
     <a href="mailto:watchout@iitr.ac.in"><img src="/images/email.png" width="16px"></a>
   </div>
+</div>
+
+<!-- Mobile navigation overlay -->
+<div class="mobile-nav-overlay visible-xs" id="mobile-nav-overlay"></div>
+
+<!-- Mobile navigation slider -->
+<div class="mobile-nav visible-xs" id="mobile-nav">
+  <div class="mobile-nav-header">
+    <span class="mobile-nav-title">Menu</span>
+    <button class="mobile-nav-close" id="mobile-nav-close">&times;</button>
+  </div>
   
-  <!-- Mobile navigation menu -->
+  <ul class="nav">
-  <div class="mobile-nav" id="mobile-nav">
+    {% for cat in site.data.categories %}
-    <ul class="nav">
+    {% if cat.subcategories != nil %}
-      {% for cat in site.data.categories %}
+    <li class="dropdown">
-      {% if cat.subcategories != nil %}
+      <a href="#" class="dropdown-toggle" data-category="{{ cat.name }}">{{ cat.title }}</a>
-      <li class="dropdown">
+      <ul class="dropdown-menu">
-        <a href="#" class="dropdown-toggle" data-category="{{ cat.name }}">{{ cat.title }}</a>
+        {% for subcat in cat.subcategories %}
-        <ul class="dropdown-menu">
+        {% if site.categories[subcat.name] != nil %}
-          {% for subcat in cat.subcategories %}
+        <li><a href="/category/{{ subcat.name }}/">{{ subcat.title }}</a></li>
-          {% if site.categories[subcat.name] != nil %}
+        {% endif %}
-          <li><a href="/category/{{ subcat.name }}/">{{ subcat.title }}</a></li>
+        {% endfor %}
-          {% endif %}
+      </ul>
-          {% endfor %}
+    </li>
-        </ul>
+    {% elsif site.categories[cat.name] != nil%}
-      </li>
+    <li><a href="/category/{{ cat.name }}/">{{ cat.title }}</a></li>
-      {% elsif site.categories[cat.name] != nil%}
+    {% endif %}
-      <li><a href="/category/{{ cat.name }}/">{{ cat.title }}</a></li>
+    {% endfor %}
-      {% endif %}
+  </ul>
-      {% endfor %}
+  
-    </ul>
+  <div class="mobile-nav-social">
+    <a href="/about">About</a>
+    <a href="/guide">Guide</a>
+    <a href="/getinvolved">Get Involved</a>
+    <br><br>
+    <a href="http://fb.com/watchoutiitr"><img src="/images/fb-logo.svg" alt="Facebook"></a>
+    <a href="https://www.youtube.com/channel/UCthZ7tKOzy4EJpuVxtdcp1A"><img src="/images/youtube-play.svg" alt="YouTube"></a>
+    <a href="mailto:watchout@iitr.ac.in"><img src="/images/email.png" width="20px" alt="Email"></a>
   </div>
 </div>
 
-<nav class="navbar navbar-default" data-spy="affix" data-offset-top="110">
+<nav class="navbar navbar-default hidden-xs" data-spy="affix" data-offset-top="110">
   <div class="container">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
@@ -59,15 +77,13 @@
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
-      <!-- <a class="navbar-brand" href="/">Watch Out!</a> -->
     </div>
     <div id="navbar" class="navbar-collapse collapse">
       <ul class="nav navbar-nav navbar-right hacky-css">
         {% for cat in site.data.categories %}
         {% if cat.subcategories != nil %}
         <li class="dropdown">
-          <a class="hover-underline" href="#" class="dropdown-toggle" data-toggle="dropdown">{{ cat.title }} <span
+          <a class="hover-underline dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ cat.title }} <span class="caret"></span></a>
-              class="caret"></span></a>
           <ul class="dropdown-menu">
             {% for subcat in cat.subcategories %}
             {% if site.categories[subcat.name] != nil %}
@@ -82,20 +98,96 @@
         {% endfor %}
       </ul>
     </div>
-    <!--/.nav-collapse -->
   </div>
 </nav>
 
-<!-- Mobile Navigation JavaScript -->
+
 <script>
 document.addEventListener('DOMContentLoaded', function() {
-    // Mobile menu toggle functio
+    // Mobile menu elements
-    const mobileToggle = document.getElementById('mobile-menu-toggle');
+  
     const mobileNav = document.getElementById('mobile-nav');
+    const mobileNavOverlay = document.getElementById('mobile-nav-overlay');
+    const mobileNavClose = document.getElementById('mobile-nav-close');
+    const mobileToggle = document.getElementById('mobile-menu-toggle');
+    // Function to open mobile menu
+    function openMobileMenu() {
+        if (mobileNav && mobileNavOverlay) {
+            mobileNav.classList.add('show');
+            mobileNavOverlay.classList.add('show');
+            const toggle = document.getElementById('mobile-menu-toggle');
+            if (toggle) {
+                toggle.parentElement.removeChild(toggle);
+            }
+            document.body.style.overflow = 'hidden'; // Prevent body scroll
+        }
+    }
     
-    if (mobileToggle && mobileNav) {
+    // Function to close mobile menu
-        mobileToggle.addEventListener('click', function() {
+    function closeMobileMenu() {
-            mobileNav.classList.toggle('show');
+        if (mobileNav && mobileNavOverlay) {
+            mobileNav.classList.remove('show');
+            mobileNavOverlay.classList.remove('show');
+            document.body.style.overflow = ''; // Restore body scroll
+            if (!document.getElementById('mobile-menu-toggle')) {
+              const newToggle = document.createElement('button');
+              newToggle.type = 'button';
+              newToggle.id = 'mobile-menu-toggle';
+              newToggle.className = 'navbar-toggle visible-xs position-fixed top-0 end-0 m-3 z-1030';
+              newToggle.innerHTML = `
+                  <span class="sr-only">Toggle navigation</span>
+                  <span class="icon-bar"></span>
+                  <span class="icon-bar"></span>
+                  <span class="icon-bar"></span>
+              `;
+
+              const container = document.querySelector('.pre-nav');
+              if (container) container.appendChild(newToggle);
+
+              newToggle.addEventListener('click', function(e) {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  openMobileMenu();
+              });
+            }
+
+            // Close all open dropdowns
+            const openDropdowns = document.querySelectorAll('.mobile-nav .dropdown.open');
+            openDropdowns.forEach(function(dropdown) {
+                dropdown.classList.remove('open');
+            });
+        }
+    }
+    
+    // Mobile menu toggle functionality
+    if (mobileToggle) {
+        mobileToggle.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            
+            if (mobileNav.classList.contains('show')) {
+                closeMobileMenu();
+            } else {
+                openMobileMenu();
+            }
+        });
+    }
+    
+    // Close button functionality
+    if (mobileNavClose) {
+        mobileNavClose.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            closeMobileMenu();
+        });
+    }
+    
+    // Overlay click to close
+    if (mobileNavOverlay) {
+        mobileNavOverlay.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            closeMobileMenu();
         });
     }
 
@@ -104,9 +196,10 @@ document.addEventListener('DOMContentLoaded', function() {
     dropdownToggles.forEach(function(toggleBtn) {
         toggleBtn.addEventListener('click', function(e) {
             e.preventDefault();
+            e.stopPropagation();
             const dropdown = this.parentElement;
             
-            // Close other open dropdowns jab some other dropdown is clicked
+            // Close other open dropdowns
             const otherDropdowns = document.querySelectorAll('.mobile-nav .dropdown.open');
             otherDropdowns.forEach(function(otherDropdown) {
                 if (otherDropdown !== dropdown) {
@@ -118,11 +211,26 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     });
     
-    // Close mobile menu when clicking outside
+    // Close mobile menu when window is resized to desktop
-    document.addEventListener('click', function(e) {
+    window.addEventListener('resize', function() {
-        if (mobileNav && !mobileNav.contains(e.target) && !mobileToggle.contains(e.target)) {
+        if (window.innerWidth > 768) {
-            mobileNav.classList.remove('show');
+            closeMobileMenu();
         }
     });
+    
+    // Handle navigation clicks (close menu after navigation)
+    const mobileNavLinks = document.querySelectorAll('.mobile-nav a[href^="/"]');
+    mobileNavLinks.forEach(function(link) {
+        link.addEventListener('click', function() {///delaye
+            setTimeout(closeMobileMenu, 100);
+        });
+    });
+    
+    // Prevent menu from closing when clicking inside the nav
+    if (mobileNav) {
+        mobileNav.addEventListener('click', function(e) {
+            e.stopPropagation();
+        });
+    }
 });
-</script>
+</script>

css/base.scss

@@ -26,10 +26,6 @@ $article-cover-img-height: 190px;
 $carousel-bg-color: #333;
 $carousel-height: 625px;
 
-// Mobile breakpoints
-$mobile-breakpoint: 768px;
-$small-mobile-breakpoint: 480px;
-
 // =============== /VARS ===============//
 
 @import "bootstrap";
@@ -60,17 +56,6 @@ $small-mobile-breakpoint: 480px;
 	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 ============== //
 
@@ -95,12 +80,6 @@ $small-mobile-breakpoint: 480px;
   src: local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v7/IQHow_FEYlDC4Gzy_m8fcoWiMMZ7xLd792ULpGE4W_Y.woff2) format('woff2');
   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;
@@ -108,49 +87,21 @@ body {
 	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 {
@@ -158,11 +109,6 @@ body {
     position: relative;
     margin-left: 2em;
     line-height: 1;
-    
-    @include mobile {
-      margin-left: 1em;
-      height: auto;
-    }
 
     .name {
       position: absolute;
@@ -170,15 +116,6 @@ body {
       width: 7em;
       font-size: 18px;
       color: $navbar-default-brand-color;
-      
-      @include mobile {
-        position: static;
-        font-size: 16px;
-      }
-      
-      @include small-mobile {
-        font-size: 14px;
-      }
     }
 
     .desc {
@@ -187,26 +124,12 @@ 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 {
@@ -218,19 +141,9 @@ body {
 
     > * {
       margin-left: 1em;
-      
-      @include mobile {
-        margin: 0 5px;
-      }
-    }
-    
-    @include mobile {
-      float: none;
-      display: block;
-      padding: 10px 0;
-      margin-top: 10px;
     }
   }
+
 }
 
 nav {
@@ -246,10 +159,6 @@ nav {
     width: 100%;
     position: relative;
     left: -15px;
-    
-    @include mobile {
-      left: 0;
-    }
   }
 
   &.affix {
@@ -280,28 +189,14 @@ 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;
@@ -311,23 +206,6 @@ 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 ================//
@@ -336,10 +214,6 @@ nav {
 
 #header {
   font-size: 12px;
-  
-  @include mobile {
-    margin-bottom: 20px;
-  }
 
   .header-row {
     position: relative;
@@ -349,14 +223,7 @@ nav {
     overflow: hidden;
     color: white;
     box-shadow: $home-header-shadow;
-    
+
-    @include mobile {
-      height: auto;
-      min-height: 250px;
-      border-radius: 0;
-      display: flex;
-      flex-direction: column;
-    }
   }
 
   .row {
@@ -365,20 +232,10 @@ 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 {
@@ -393,10 +250,6 @@ nav {
   .cover-title-label {
     font-size: 14px;
     font-weight: bold;
-    
-    @include mobile {
-      font-size: 12px;
-    }
   }
 
   .title {
@@ -404,15 +257,6 @@ nav {
     font-weight: bold;
     margin-top: 0;
     margin-bottom: 20px;
-    
-    @include mobile {
-      font-size: 20px;
-      margin-bottom: 15px;
-    }
-    
-    @include small-mobile {
-      font-size: 18px;
-    }
   }
 }
 
@@ -421,12 +265,6 @@ nav {
 
   .cover-image {
     border-radius: 10px;
-    
-    @include mobile {
-      height: 150px;
-      margin-bottom: 15px;
-      border-radius: 0;
-    }
   }
 
   .title {
@@ -449,11 +287,6 @@ nav {
 
 .cover-excerpt {
   margin-top: 12px;
-  
-  @include mobile {
-    font-size: 13px;
-    line-height: 1.4;
-  }
 }
 // ============= /HOME-HEADER ============= //
 
@@ -462,10 +295,6 @@ nav {
   color: white;
   margin-bottom: 60px;
   position: relative;
-  
-  @include mobile {
-    margin-bottom: 30px;
-  }
 
   .container-title {
     position: absolute;
@@ -613,7 +442,7 @@ nav {
 
 }
 
-.article-horiozntal {
+.article-horizontal {
   height: 10em;
   margin-bottom: 3.5em;
   margin-left: 0;
@@ -991,4 +820,4 @@ footer {
    }
 
   font-size: 1.2em;
-}
+}

css/table.css

@@ -1,105 +1,19 @@
 .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;
-  }
 }

index.html

@@ -17,8 +17,16 @@ title: "Watch Out, IIT Roorkee"
       {% endfor %}
       {% endfor %}
     </div>
+    <!-- Replace the Facebook widget section in your index.html with this: -->
+
     <div class="col-md-4">
-      <div class="fb-page" data-href="https://www.facebook.com/watchoutiitr/" data-tabs="timeline" data-width="330" data-height="540" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/watchoutiitr/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/watchoutiitr/">Watch Out! News Agency</a></blockquote></div>
+      <div class="facebook-widget-container">
+        <div class="fb-page" data-href="https://www.facebook.com/watchoutiitr/" data-tabs="timeline" data-width="330" data-height="540" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
+          <blockquote cite="https://www.facebook.com/watchoutiitr/" class="fb-xfbml-parse-ignore">
+            <a href="https://www.facebook.com/watchoutiitr/">Watch Out! News Agency</a>
+          </blockquote>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -32,10 +40,11 @@ title: "Watch Out, IIT Roorkee"
         <div class="embed-responsive embed-responsive-16by9">
           <iframe class="youtube-video" id="youtube-video-{{ video.id }}" data-id="{{ video.id }}" src="https://www.youtube.com/embed/{{ video.id }}?enablejsapi=1&showinfo=0" allowfullscreen></iframe>
         </div>
+        <div class="video-caption" id="youtube-title-{{ video.id }}" data-id="{{ video.id }}">
+          <h2 class="caption">{{ video.title }}</h2>
+        </div>
       </div>
-      <div class="video-caption" id="youtube-title-{{ video.id }}" data-id="{{ video.id }}">
+      
-        <h2 class="caption">{{ video.title }}</h2>
-      </div>
     </div> <!-- col-md-8 -->
     <ul class="col-md-4 video-list">
       {% for video in site.data.youtube offset: 1 limit: 4 %}