About
Guide
diff --git a/_includes/head.html b/_includes/head.html
index aede985..1f4bb32 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -13,7 +13,7 @@
-
+
{{ title }}
@@ -43,12 +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>
diff --git a/_includes/horizontal_post.html b/_includes/horizontal_post.html
index 658117e..2d447b2 100644
--- a/_includes/horizontal_post.html
+++ b/_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>
diff --git a/_includes/navbar.html b/_includes/navbar.html
index c512ab5..021a001 100644
--- a/_includes/navbar.html
+++ b/_includes/navbar.html
@@ -8,7 +8,16 @@
</div>
</div>
</a>
- <div class="social pull-right">
+
+ <!-- Mobile toggle button -->
+ <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 hidden-xs">
<a href="/about">About</a>
<a href="/guide">Guide</a>
<a href="/getinvolved">Get Involved</a>
@@ -18,7 +27,47 @@
</div>
</div>
-<nav class="navbar navbar-default" data-spy="affix" data-offset-top="110">
+<!-- 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">×</button>
+ </div>
+
+ <ul class="nav">
+ {% for cat in site.data.categories %}
+ {% if cat.subcategories != nil %}
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-category="{{ cat.name }}">{{ cat.title }}</a>
+ <ul class="dropdown-menu">
+ {% for subcat in cat.subcategories %}
+ {% if site.categories[subcat.name] != nil %}
+ <li><a href="/category/{{ subcat.name }}/">{{ subcat.title }}</a></li>
+ {% endif %}
+ {% endfor %}
+ </ul>
+ </li>
+ {% elsif site.categories[cat.name] != nil%}
+ <li><a href="/category/{{ cat.name }}/">{{ cat.title }}</a></li>
+ {% endif %}
+ {% 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 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"
@@ -28,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
- class="caret"></span></a>
+ <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>
<ul class="dropdown-menu">
{% for subcat in cat.subcategories %}
{% if site.categories[subcat.name] != nil %}
@@ -51,6 +98,116 @@
{% endfor %}
</ul>
</div>
- <!--/.nav-collapse -->
</div>
</nav>
+
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+ // 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');
+
+ // Function to open mobile menu
+ function openMobileMenu() {
+ if (mobileNav && mobileNavOverlay) {
+ mobileNav.classList.add('show');
+ mobileNavOverlay.classList.add('show');
+ mobileToggle.classList.add('active');
+ document.body.style.overflow = 'hidden'; // Prevent body scroll
+ }
+ }
+
+ // Function to close mobile menu
+ function closeMobileMenu() {
+ if (mobileNav && mobileNavOverlay) {
+ mobileNav.classList.remove('show');
+ mobileNavOverlay.classList.remove('show');
+ mobileToggle.classList.remove('active');
+ document.body.style.overflow = ''; // Restore body scroll
+
+ // 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();
+ });
+ }
+
+ // Mobile dropdown functionality
+ const dropdownToggles = document.querySelectorAll('.mobile-nav .dropdown-toggle');
+ dropdownToggles.forEach(function(toggleBtn) {
+ toggleBtn.addEventListener('click', function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ const dropdown = this.parentElement;
+
+ // Close other open dropdowns
+ const otherDropdowns = document.querySelectorAll('.mobile-nav .dropdown.open');
+ otherDropdowns.forEach(function(otherDropdown) {
+ if (otherDropdown !== dropdown) {
+ otherDropdown.classList.remove('open');
+ }
+ });
+
+ dropdown.classList.toggle('open');
+ });
+ });
+
+ // Close mobile menu when window is resized to desktop
+ window.addEventListener('resize', function() {
+ if (window.innerWidth > 768) {
+ 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>
diff --git a/_posts/2019-05-27-doggie-doggie-what-now.md b/_posts/2019-05-27-doggie-doggie-what-now.md
index 93c4366..9fb5ffb 100644
--- a/_posts/2019-05-27-doggie-doggie-what-now.md
+++ b/_posts/2019-05-27-doggie-doggie-what-now.md
@@ -74,6 +74,6 @@ This issue can be dealt with if the dogs are treated properly. The campus has a
The Dog Menace Committee meets every month, so any rule/initiatives which may have loopholes are expected to be revamped. Roorkee’s pup fiction will need an active contribution from the campus junta to have a happy and warm ending.
-<span style="text-decoration:underline">[Minutes of Meeting of the Dog Menace Committee Meeting, 15 th April 2019 (PDF)]({{ site.url }}/{{ https://drive.google.com/file/d/1Ro59qPApmDfeWm5k_YyI3-p5jzWroQFa/view?usp=sharing }})</span>
+<span style="text-decoration:underline">[Minutes of Meeting of the Dog Menace Committee, 15th April 2019 (PDF)](https://drive.google.com/file/d/1Ro59qPApmDfeWm5k_YyI3-p5jzWroQFa/view?usp=sharing)</span>
{: style="width:70%;height:auto"}
diff --git a/atom.xml b/atom.xml
index 1e8eac2..b6c3ea7 100644
--- a/atom.xml
+++ b/atom.xml
@@ -1,5 +1,5 @@
---
-layout: nil
+layout: none
---
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
diff --git a/css/base.scss b/css/base.scss
index 5e54615..1964e33 100644
--- a/css/base.scss
+++ b/css/base.scss
@@ -442,7 +442,7 @@ nav {
}
-.article-horiozntal {
+.article-horizontal {
height: 10em;
margin-bottom: 3.5em;
margin-left: 0;
@@ -820,4 +820,4 @@ footer {
}
font-size: 1.2em;
-}
+}
\ No newline at end of file
diff --git a/css/mobile.css b/css/mobile.css
index fab2aae..7761071 100644
--- a/css/mobile.css
+++ b/css/mobile.css
@@ -1,30 +1,1152 @@
-.sidebar {
- position: inherit;
- 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; }
+/* Mobile view - Apppplied at 768px and below */
+@media (max-width: 768px) {
+
+ /* Base Mobile Settings */
+ body {
+ font-size: 14px;
+ overflow-x: hidden;
+ }
+
+ .container {
+ padding-left: 15px;
+ padding-right: 15px;
+ max-width: 100%;
+ }
+
+ .pre-nav {
+ height: auto;
+ min-height: 80px;
+ padding: 15px 0;
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-start;
+ }
+
+ .pre-nav .brand {
+ display: flex;
+ float: none;
+ text-align: left;
+ padding: 10px 0;
+ position: relative;
+ width: auto;
+ align-items: center;
+ flex-shrink: 0;
+ gap: 10px; /* Reduced gap between logo and text */
+ }
-.content {
- margin: 0;
- padding: 5px 25px;
- width: inherit; }
- .content h1 {
- margin: 0 0 5px 0; }
+ /* Logo - FIXED: Removed excessive padding */
+ .pre-nav .brand .logo {
+ height: 50px;
+ padding-left: 15px; /* Changed from 50px to 15px */
+ margin-right: 0;
+ flex-shrink: 0;
+ }
+
+ .pre-nav .name-container {
+ text-align: left;
+ padding-left: 0;
+ flex-grow: 0;
+ margin-left: 0; /* Ensure no extra margin */
+ }
+
+ .pre-nav .name-container .name {
+ font-size: 16px;
+ margin: 0;
+ line-height: 1; /* Tighter line height */
+ }
+
+ .pre-nav .name-container .desc {
+ font-size: 20px;
+ margin: 0;
+ line-height: 1.2; /* Tighter line height */
+ margin-top: 4px; /* Small gap between name and desc */
+ }
+
+ .pre-nav .social {
+ display: none;
+ }
+
+ .mobile-social {
+ display: block;
+ text-align: center;
+ padding: 10px 0;
+ margin-top: 10px;
+ border-top: 1px solid #eee;
+ width: 100%;
+ }
+
+ .mobile-social > * {
+ margin: 0 5px;
+ display: inline-block;
+ }
+
+ .navbar-toggle {
+ position: absolute;
+ right: 15px;
+ top: 50%;
+ transform: translateY(-50%);
+ border: 1px solid #ddd;
+ background-color: #fff;
+ padding: 8px 10px;
+ border-radius: 4px;
+ cursor: pointer;
+ z-index: 1002;
+ transition: all 0.3s ease;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ }
+
+ .navbar-toggle:hover,
+ .navbar-toggle:focus {
+ background-color: #f5f5f5;
+ border-color: #bbb;
+ outline: none;
+ }
+
+ .navbar-toggle .icon-bar {
+ display: block;
+ width: 22px;
+ height: 2px;
+ background-color: #333;
+ border-radius: 1px;
+ margin: 4px 0;
+ transition: all 0.3s ease;
+ }
+
+ /* Hamburger animation */
+ .navbar-toggle.active .icon-bar:nth-child(2) {
+ opacity: 0;
+ }
+
+ .navbar-toggle.active .icon-bar:nth-child(3) {
+ transform: rotate(45deg) translate(5px, 5px);
+ }
+
+ .navbar-toggle.active .icon-bar:nth-child(4) {
+ transform: rotate(-45deg) translate(7px, -6px);
+ }
+
+ /* Hide desktop navbar completely on mobile */
+ .navbar.navbar-default {
+ display: none !important;
+ }
+
+ /* Mobile Navigation Overlay */
+ .mobile-nav-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5);
+ z-index: 1000;
+ opacity: 0;
+ visibility: hidden;
+ transition: all 0.3s ease;
+ }
+
+ .mobile-nav-overlay.show {
+ opacity: 1;
+ visibility: visible;
+ }
+
+ /* Mobile Navigation Slider */
+ .mobile-nav {
+ position: fixed;
+ top: 0;
+ right: -320px;
+ width: 320px;
+ height: 100%;
+ background: #fff;
+ z-index: 1001;
+ overflow-y: auto;
+ transition: right 0.3s ease;
+ box-shadow: -2px 0 10px rgba(0,0,0,0.1);
+ display: flex;
+ flex-direction: column;
+ }
+
+ .mobile-nav.show {
+ right: 0;
+ }
+
+ .mobile-nav-header {
+ padding: 20px;
+ border-bottom: 1px solid #eee;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: #f8f9fa;
+ flex-shrink: 0;
+ }
+
+ .mobile-nav-title {
+ font-size: 18px;
+ font-weight: 600;
+ color: #333;
+ }
+
+ .mobile-nav-close {
+ background: none;
+ border: none;
+ font-size: 24px;
+ color: #666;
+ cursor: pointer;
+ padding: 5px;
+ border-radius: 50%;
+ transition: background-color 0.2s ease;
+ }
+
+ .mobile-nav-close:hover {
+ background-color: #e9ecef;
+ }
+
+ .mobile-nav .nav {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .mobile-nav .nav > li {
+ margin: 0;
+ border-bottom: 1px solid #eee;
+ display: block;
+ width: 100%;
+ }
+
+ .mobile-nav .nav > li:last-child {
+ border-bottom: none;
+ }
+
+ .mobile-nav .nav a {
+ display: block;
+ padding: 18px 20px;
+ text-decoration: none;
+ color: #333;
+ transition: all 0.2s ease;
+ font-weight: 500;
+ font-size: 16px;
+ width: 100%;
+ box-sizing: border-box;
+ }
+
+ .mobile-nav .nav a:hover {
+ background-color: #f8f9fa;
+ text-decoration: none;
+ color: #007bff;
+ padding-left: 25px;
+ }
+
+ /* Mobile Dropdown Stylesas */
+ .mobile-nav .dropdown {
+ position: relative;
+ display: block;
+ width: 100%;
+ }
+
+ .mobile-nav .dropdown-menu {
+ position: static;
+ display: none;
+ float: none;
+ width: 100%;
+ margin: 0;
+ background-color: #f9f9f9;
+ border: none;
+ border-radius: 0;
+ box-shadow: none;
+ padding: 0;
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.3s ease;
+ list-style: none;
+ }
+
+ .mobile-nav .dropdown.open .dropdown-menu {
+ display: block;
+ max-height: 300px;
+ }
+
+ .mobile-nav .dropdown-menu li {
+ border-bottom: 1px solid #e9ecef;
+ margin: 0;
+ display: block;
+ width: 100%;
+ }
+
+ .mobile-nav .dropdown-menu li:last-child {
+ border-bottom: none;
+ }
+
+ .mobile-nav .dropdown-menu a {
+ padding: 15px 30px;
+ background-color: #f9f9f9;
+ font-size: 15px;
+ color: #666;
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ box-sizing: border-box;
+ }
+
+ .mobile-nav .dropdown-menu a:hover {
+ background-color: #e9ecef;
+ color: #333;
+ padding-left: 35px;
+ }
+
+ .mobile-nav .dropdown-toggle {
+ position: relative;
+ display: block;
+ width: 100%;
+ }
+
+ .mobile-nav .dropdown-toggle::after {
+ content: '▼';
+ position: absolute;
+ right: 20px;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 12px;
+ transition: transform 0.3s ease;
+ }
+
+ .mobile-nav .dropdown.open .dropdown-toggle::after {
+ transform: translateY(-50%) rotate(180deg);
+ }
+
+ /* Social Links in Mobile Nav */
+ .mobile-nav-social {
+ padding: 20px;
+ border-top: 1px solid #eee;
+ text-align: left;
+ background: #f8f9fa;
+ flex-shrink: 0;
+ }
+
+ .mobile-nav-social a {
+ display: inline-block;
+ margin: 5px 10px 5px 0;
+ padding: 8px;
+ text-decoration: none;
+ color: #333;
+ font-size: 14px;
+ /* padding: 14em;
+ text-decoration: none;
+ color: #333;
+ font-size: 26em; */
+ transition: color 0.2s ease;
+ }
+
+ .mobile-nav-social a:hover {
+ color: #007bff;
+ }
+
+ .mobile-nav-social img {
+ width: 20px;
+ height: 20px;
+ vertical-align: middle;
+ margin-left: 5px;
+ }
+
+ .mobile-nav-social br {
+ display: block;
+ margin: 10px 0;
+ }
+
+ /* Header Style */
+ #header {
+ margin-bottom: 20px;
+ }
+
+ #header .header-row {
+ height: auto;
+ min-height: 250px;
+ border-radius: 0;
+ display: flex;
+ flex-direction: column;
+ }
+
+ #header .cover-image {
+ height: 200px;
+ order: 1;
+ width: 100%;
+ }
+
+ #header .cover-details {
+ order: 2;
+ padding: 20px 15px;
+ }
+
+ #header .title {
+ font-size: 20px;
+ margin-bottom: 15px;
+ line-height: 1.3;
+ }
+
+ #header .cover-title-label {
+ font-size: 12px;
+ }
+
+ #header .cover-excerpt {
+ font-size: 13px;
+ line-height: 1.4;
+ margin-top: 10px;
+ }
+
+ /* Category Header */
+ #header.category-header .cover-image {
+ height: 150px;
+ margin-bottom: 15px;
+ }
+
+ /* New Articles Section - Fixed positioning */
+ #new-articles {
+ margin-bottom: 30px;
+ position: relative;
+ }
+
+ #new-articles .container-title {
+ position: static;
+ font-size: 18px;
+ margin-bottom: 15px;
+ padding: 10px 15px;
+ text-align: center;
+ background: #fafafa;
+ border-radius: 4px;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ }
+
+ #new-articles .article-col {
+ padding: 5px 0;
+ margin-bottom: 15px;
+ width: 100%;
+ }
+
+ #new-articles .article {
+ height: 250px;
+ margin-top: 0;
+ position: relative;
+ border-radius: 8px;
+ overflow: hidden;
+ }
+
+ #new-articles .details {
+ padding: 15px;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: linear-gradient(transparent, rgba(0,0,0,0.7));
+ color: white;
+ }
+
+ #new-articles .details .title {
+ font-size: 16px;
+ line-height: 1.3;
+ margin-bottom: 5px;
+ }
+
+ #new-articles .details .date {
+ position: static;
+ margin-top: 5px;
+ font-size: 11px;
+ }
+
+ /* Article Horizontal Layout */
+ .article-horizontal {
+ height: auto;
+ margin-bottom: 25px;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .article-horizontal .img-container {
+ height: 150px;
+ margin-bottom: 15px;
+ width: 100%;
+ }
+
+ .article-horizontal .details-container {
+ padding-left: 0;
+ flex: 1;
+ }
+
+ .article-horizontal .title {
+ font-size: 16px;
+ line-height: 1.4;
+ margin-bottom: 10px;
+ }
+
+ .article-horizontal .excerpt {
+ font-size: 13px;
+ line-height: 1.4;
+ margin-top: 10px;
+ color: #666;
+ }
+
+ /* 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;
+ width: 100%;
+ object-fit: cover;
+ }
+
+ .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;
+ border-radius: 6px;
+ overflow: hidden;
+ }
+
+ #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-horizontal {
+ margin-bottom: 20px;
+ }
+
+ /* Bootstrap Grid Fixes */
+ .col-md-4, .col-md-8, .col-sm-3, .col-sm-6, .col-lg-4, .col-lg-8 {
+ width: 100%;
+ padding-left: 15px;
+ padding-right: 15px;
+ margin-bottom: 20px;
+
+ }
+
+ /* Facebook Plugin Responsiveness */
+ .fb-page {
+ width: 100% !important;
+ margin-top: 20px;
+ }
+
+ .fb-comments {
+ width: 100% !important;
+ }
+
+ /* Hide sidebars on mobile */
+ .post .col-md-4,
+ .category-posts .col-md-4 {
+ display: none;
+ }
+
+ /* Make content full width on mobile */
+ .post .col-md-8,
+ .category-posts .col-md-8 {
+ width: 100%;
+ padding-left: 15px;
+ padding-right: 15px;
+ }
+
+ /* Images Responsiveness */
+ img {
+ max-width: 100%;
+ height: auto;
+ }
+
+ .img-center-fill {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+
+
+ /* Utility Classes */
+ .hidden-mobile {
+ display: none !important;
+ }
+
+ .visible-mobile {
+ display: block !important;
+ }
+
+ .hidden-xs {
+ display: none !important;
+ }
+
+ .visible-xs {
+ display: block !important;
+ }
+
+ /* Text adjustments */
+ h1 { font-size: 24px; line-height: 1.2; }
+ h2 { font-size: 20px; line-height: 1.3; }
+ h3 { font-size: 18px; line-height: 1.3; }
+ h4 { font-size: 16px; line-height: 1.4; }
+ h5 { font-size: 14px; line-height: 1.4; }
+ h6 { font-size: 13px; line-height: 1.4; }
+
+ /* Remove margins and padding that cause horizontal scroll */
+ .row {
+ margin-left: -15px;
+ margin-right: -15px;
+ }
+
+ .outer-row {
+ margin-left: 0;
+ margin-right: 0;
+ }
+
+ /* Ensure no horizontal scroll */
+ html, body {
+ max-width: 100%;
+ overflow-x: hidden;
+ }
+
+ /* Fix container overflow */
+ .container {
+ 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;
+ }
+
+ .pre-nav {
+ padding: 10px 0;
+ min-height: 70px;
+ }
+
+ .pre-nav .brand .logo {
+ height: 45px;
+ padding-left: 10px; /* Even less padding for small screens */
+ }
+
+ .pre-nav .brand {
+ gap: 8px; /* Smaller gap on very small screens */
+ }
+
+ .pre-nav .name-container .name {
+ font-size: 14px;
+ line-height: 1;
+ }
+
+ .pre-nav .name-container .desc {
+ font-size: 19px;
+ line-height: 1.2; /* FIXED: Better readability on small screens */
+ margin-top: 3px; /* FIXED: Adjusted spacing for smaller screens */
+ }
+
+ #header .title {
+ font-size: 18px;
+ }
+
+ #new-articles .details .title {
+ font-size: 14px;
+ }
+
+ #new-articles .container-title {
+ font-size: 16px;
+ padding: 8px 12px;
+ }
+
+ .post .header .title {
+ font-size: 18px;
+ }
+
+ .post {
+ font-size: 15px;
+ }
+
+ .container-title {
+ font-size: 18px;
+ }
+
+ /* Adjust toggle button for smaller screens */
+ .navbar-toggle {
+ right: 10px;
+ padding: 6px 8px;
+ }
+
+ .navbar-toggle .icon-bar {
+ width: 18px;
+ height: 2px;
+ margin: 3px 0;
+ }
+
+ /* Mobile nav adjustments for small screens */
+ .mobile-nav {
+ width: 280px;
+ right: -280px;
+ }
+
+ .mobile-nav .nav a {
+ padding: 15px 18px;
+ font-size: 15px;
+ }
+
+ .mobile-nav .dropdown-menu a {
+ padding: 12px 25px;
+ font-size: 14px;
+ }
+
+ /* Smaller article cards */
+ #new-articles .article {
+ height: 220px;
+ }
+
+ .article-horizontal .img-container {
+ height: 130px;
+ }
+}
+
+/* Fix desktop dropdown z-index issues */
+@media (min-width: 769px) {
+ .navbar .dropdown-menu {
+ z-index: 1050;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ display: none;
+ background-color: #fff;
+ border: 1px solid rgba(0,0,0,.15);
+ border-radius: 4px;
+ box-shadow: 0 6px 12px rgba(0,0,0,.175);
+ }
+
+ .navbar .dropdown.open .dropdown-menu {
+ display: block;
+ }
+
+ /* Ensure proper stacking context */
+ .navbar {
+ z-index: 1000;
+ }
+
+ /* Fix the "New Articles" positioning */
+ #new-articles .container-title {
+ position: absolute;
+ top: -2.25em;
+ left: -0.5em;
+ z-index: 10;
+ }
+}
+
+@media (max-width: 768px) {
+
+ /* Featured Articles Container - Mobile specific */
+ #featured-articles-container {
+ margin-bottom: 30px;
+ }
+
+ #featured-articles-container .container-title {
+ font-size: 18px;
+ margin-bottom: 20px;
+ padding: 10px 15px;
+ text-align: center;
+ background: #fafafa;
+ border-radius: 4px;
+ }
+
+ #featured-articles-container .col-md-8,
+ #featured-articles-container .col-md-4 {
+ width: 100%;
+ padding: 0 15px;
+ margin-bottom: 20px;
+ }
+
+ /* Featured Articles - Prevent conflicts with other articles */
+ #featured-articles .article-horizontal {
+ margin-bottom: 20px;
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+ }
+
+ #featured-articles .article-horizontal .col-md-4 {
+ width: 100%;
+ height: 180px;
+ margin-bottom: 0;
+ padding: 0;
+ }
+
+ #featured-articles .article-horizontal .col-md-8 {
+ width: 100%;
+ padding: 15px;
+ margin-bottom: 0;
+ }
+
+ #featured-articles .article-horizontal .details .title {
+ font-size: 16px;
+ line-height: 1.4;
+ margin-bottom: 8px;
+ }
+
+ #featured-articles .article-horizontal .details .tag {
+ font-size: 12px;
+ margin-bottom: 5px;
+ }
+
+ #featured-articles .article-horizontal .details .date {
+ font-size: 11px;
+ color: #666;
+ margin-bottom: 8px;
+ }
+
+ #featured-articles .article-horizontal .details .excerpt {
+ font-size: 13px;
+ line-height: 1.4;
+ color: #666;
+ }
+
+ /* Video Container - Mobile specific styling */
+ #yt-videos-container {
+ margin-bottom: 30px;
+ padding: 0 15px;
+ }
+
+ #yt-videos-container .container-title {
+ font-size: 18px;
+ margin-bottom: 20px;
+ padding: 10px 15px;
+ text-align: center;
+ background: #fafafa;
+ border-radius: 4px;
+ }
+
+ #yt-videos-container .row {
+ margin: 0;
+ }
+
+ #yt-videos-container .col-md-8 {
+ width: 100%;
+ padding: 0;
+ margin-bottom: 20px;
+ }
+
+ #yt-videos-container .col-md-4 {
+ width: 100%;
+ padding: 0;
+ }
+
+ /* Main Video Player - Mobile */
+ #yt-videos-container .video-container {
+ margin-bottom: 15px;
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+ }
+
+ #yt-videos-container .embed-responsive {
+ position: relative;
+ display: block;
+ width: 100%;
+ padding: 0;
+ overflow: hidden;
+ }
+
+ #yt-videos-container .embed-responsive-16by9 {
+ padding-bottom: 56.25%; /* 16:9 aspect ratio */
+ }
+
+ #yt-videos-container .embed-responsive iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ border: 0;
+ }
+
+ /* Video Caption - Mobile - Fixed spacing */
+ #yt-videos-container .video-caption {
+ padding: 20px 15px !important;
+ background: transparent !important;
+ border-radius: 0 !important;
+ margin-top: 10px !important;
+ box-shadow: none !important;
+ }
+
+ #yt-videos-container .video-caption .caption {
+ font-size: 18px !important;
+ line-height: 1.4 !important;
+ margin: 0 !important;
+ color: #333 !important;
+ font-weight: 600 !important;
+ text-align: center !important;
+ }
+
+ /* Video List - Mobile specific - FORCED LAYOUT FIX */
+ #yt-videos-container .video-list {
+ list-style: none !important;
+ padding: 0 !important;
+ margin: 0 !important;
+ width: 100% !important;
+ }
+
+ #yt-videos-container .video-list .list-video {
+ margin: 0 0 20px 0 !important;
+ padding: 0 !important;
+ border-radius: 8px !important;
+ overflow: hidden !important;
+ box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
+ background: #fff !important;
+ display: block !important;
+ width: 100% !important;
+ }
+
+ #yt-videos-container .video-list .list-video a {
+ display: block !important;
+ text-decoration: none !important;
+ color: inherit !important;
+ width: 100% !important;
+ }
+
+ /* FORCE VERTICAL LAYOUT - Override all conflicting styles */
+ #yt-videos-container .video-list .list-video .row {
+ margin: 0 !important;
+ display: block !important;
+ width: 100% !important;
+ }
+
+ #yt-videos-container .video-list .list-video .col-md-6 {
+ padding: 0 !important;
+ margin: 0 !important;
+ width: 100% !important;
+ float: none !important;
+ display: block !important;
+ position: relative !important;
+ }
+
+ /* Video List Image Container - FULL WIDTH FORCED */
+ #yt-videos-container .video-list .list-video .img-container {
+ width: 100% !important;
+ height: 160px !important;
+ overflow: hidden !important;
+ position: relative !important;
+ margin-bottom: 0 !important;
+ display: block !important;
+ }
+
+ #yt-videos-container .video-list .list-video .img-container img {
+ width: 100% !important;
+ height: 100% !important;
+ object-fit: cover !important;
+ display: block !important;
+ }
+
+ /* Video List Caption - BELOW IMAGE FORCED */
+ #yt-videos-container .video-list .list-video .caption {
+ padding: 15px !important;
+ width: 100% !important;
+ text-align: center !important;
+ display: block !important;
+ position: relative !important;
+ top: auto !important;
+ left: auto !important;
+ right: auto !important;
+ bottom: auto !important;
+ transform: none !important;
+ background: #fff !important;
+ min-height: 60px !important;
+ }
+
+ #yt-videos-container .video-list .list-video .caption span {
+ font-size: 15px !important;
+ line-height: 1.4 !important;
+ color: #333 !important;
+ display: block !important;
+ font-weight: 600 !important;
+ position: relative !important;
+ top: auto !important;
+ left: auto !important;
+ right: auto !important;
+ bottom: auto !important;
+ transform: none !important;
+ text-align: center !important;
+ word-wrap: break-word !important;
+ overflow-wrap: break-word !important;
+ }
+
+ /* Ensure the link text shows */
+ #yt-videos-container .video-list .list-video a {
+ color: #333 !important;
+ text-decoration: none !important;
+ }
+
+ #yt-videos-container .video-list .list-video a:hover {
+ color: #007bff !important;
+ text-decoration: none !important;
+ }
+
+ /* Remove any center-both, center-vertical classes that might be interfering */
+ #yt-videos-container .video-list .center-both,
+ #yt-videos-container .video-list .center-vertical,
+ #yt-videos-container .video-list .img-center-fill {
+ position: static !important;
+ transform: none !important;
+ top: auto !important;
+ left: auto !important;
+ right: auto !important;
+ bottom: auto !important;
+ width: 100% !important;
+ height: 100% !important;
+ }
+
+ /* FIX 1: Center-align the main video caption */
+ #yt-videos-container .video-caption .caption {
+ font-size: 18px !important;
+ line-height: 1.4 !important;
+ margin: 0 !important;
+ color: #333 !important;
+ font-weight: 600 !important;
+ text-align: center !important;
+ }
+
+ /* Ensure proper spacing between sections */
+ #featured-articles-container + #yt-videos-container {
+ margin-top: 40px;
+ }
+
+ /* Extra small devices adjustments */
+ @media (max-width: 480px) {
+
+ #yt-videos-container .container-title,
+ #featured-articles-container .container-title {
+ font-size: 16px;
+ padding: 8px 12px;
+ }
+
+ #yt-videos-container .video-caption .caption {
+ font-size: 15px;
+ }
+
+ #featured-articles .article-horizontal .details .title {
+ font-size: 15px;
+ }
+
+ #featured-articles .article-horizontal .details .excerpt {
+ font-size: 12px;
+ }
+
+ #yt-videos-container .video-list .list-video .img-container {
+ height: 140px;
+ }
+
+ #yt-videos-container .video-list .list-video .caption {
+ padding: 12px;
+ }
+
+ #yt-videos-container .video-list .list-video .caption span {
+ font-size: 13px;
+ }
+ }
+}
+
+
+.facebook-widget-container {
+ display: flex !important;
+ justify-content: center !important;
+ align-items: flex-start !important;
+ width: 100% !important;
+ padding: 0 15px !important;
+ text-align: center !important;
+}
+
+.facebook-widget-container .fb-page {
+ margin: 0 auto !important;
+ display: block !important;
+ text-align: center !important;
+}
+
+
+
+/* Mobile specific centering - FORCED */
+@media (max-width: 768px) {
+ .facebook-widget-container {
+ padding: 0 !important;
+ margin-top: 20px !important;
+ justify-content: center !important;
+ display: flex !important;
+ text-align: center !important;
+ width: 100% !important;
+ }
+
+ .facebook-widget-container .fb-page {
+ width: 100% !important;
+ max-width: 100% !important;
+ margin: 0 auto !important;
+ text-align: center !important;
+ }
+}
+
+/* For smaller screens - FORCED */
+@media (max-width: 480px) {
+ .facebook-widget-container {
+ padding: 0 10px !important;
+ display: flex !important;
+ justify-content: center !important;
+ text-align: center !important;
+ width: 100% !important;
+ }
+}
+
+
+/* Specific override for the featured articles container */
+#featured-articles-container .col-md-4 {
+ display: flex !important;
+ justify-content: center !important;
+ align-items: flex-start !important;
+ text-align: center !important;
+ width: 100% !important;
+}
\ No newline at end of file
diff --git a/css/table.css b/css/table.css
index 9de19b7..4e56f6e 100644
--- a/css/table.css
+++ b/css/table.css
@@ -16,4 +16,4 @@
padding: 0.5rem 1.5rem;
padding-bottom: 2rem;
vertical-align: top;
-}
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 779196b..a5b27c8 100644
--- a/index.html
+++ b/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 %}
diff --git a/sitemap.xml b/sitemap.xml
index 7045cf9..a365078 100644
--- a/sitemap.xml
+++ b/sitemap.xml
@@ -1,5 +1,5 @@
---
-layout: nil
+layout: none
---
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">