feat: chandramouli-k-intern-cover image

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

Gemfile

@@ -1,2 +1,3 @@
-source "https://rubygems.org"
-gem "github-pages", group: :jekyll_plugins
+source 'http://rubygems.org'
+
+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)

_data/categories.yaml

@@ -63,3 +63,5 @@
       title: Summer 2021
     - name: summer2022
       title: Summer 2022
+    - name: summer2025
+      title: Summer 2025

_data/categories_name.yaml

@@ -23,5 +23,6 @@ summer2019: Summer 2019
 summer2020: Summer 2020
 summer2021: Summer 2021
 summer2022: Summer 2022
+summer2025: Summer 2025
 memoirs: Memoirs
 report: Report

_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 -->
- 	<script type="text/javascript">
-
-      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>
+  gtag('config', 'G-0DKSQSXFTB');
+</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 -->
-  <div class="mobile-nav" id="mobile-nav">
-    <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>
+  <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" 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
-              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 %}
@@ -82,20 +98,73 @@
         {% 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');
     
-    if (mobileToggle && mobileNav) {
-        mobileToggle.addEventListener('click', function() {
-            mobileNav.classList.toggle('show');
+    // 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();
         });
     }
 
@@ -104,9 +173,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 +188,26 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     });
     
-    // Close mobile menu when clicking outside
-    document.addEventListener('click', function(e) {
-        if (mobileNav && !mobileNav.contains(e.target) && !mobileToggle.contains(e.target)) {
-            mobileNav.classList.remove('show');
+    // 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>
+</script>

_posts/2025-07-05-wonadiary.md

@@ -0,0 +1,153 @@
+---
+layout: post
+title: "Fortune Faded"
+category: summer2025
+tags: [wona, column]
+author: "Chandramouli Koushik"
+image: chandramouli-k-intern-cover.png
+excerpt: "I didn’t have the strongest CGPA, wasn’t from a core intern-heavy branch, and wasn’t exactly a fan of coding. But I stayed consistent, showed up for every opportunity, and kept learning from each setback. In the end, it all came together. If there’s one thing I’d say to anyone going into intern or placement season, it’s this: prepare well, trust your effort, and don’t count yourself out too early"
+---
+
+## STATEMENT OF PURPOSE 
+
+I’m writing this not to inspire you but primarily to show you that anything’s possible, and
+you should be prepared enough to grab the opportunity when it arises. Read it like a
+story - maybe grab a vegan shake at CCD, put on some Red Hot Chili Peppers
+(shoutout to their biggest fan that I know - 19119031) and breeze through this (this is
+precisely what I was doing while typing this out).
+
+## SETTING THE STAGE
+
+I’m Chandramouli Koushik; as I’m typing this, I’m a senior from the Chemical
+Engineering department. I’ll set the stage a little for the semester before the intern
+season - my department isn’t known for fabulous intern seasons, which I realised after
+joining college (if someone doing JEE prep is reading this, I beseech you to research
+well about what companies hire from which branches across all the IITs, before taking a
+decision). My CGPA wasn’t great either; it was a touch above 7.4. I was recovering from
+a severe case of Pulmonary Tuberculosis. And I had little to no interest in coding. All I
+wanted to do was play basketball.
+
+I had dipped my toes into the usual coding stuff - Codeforces, CodeChef, Leetcode. But
+after the 4th sem, I decided to lock in a little, but I didn’t really have hopes of securing
+an on-campus internship offer. I won’t bore you with my preparation details (I think there
+are way better people out there to guide you, but I’m always open to helping people out,
+so you’re free to reach out to me anytime, and I’ll try my best to guide you in the right
+direction) and get to when the intern season started.
+
+
+
+## THE INTERN SEASON BEGINS
+
+Day 0 companies made nary an offer in Chemical Engineering, as I had expected.
+AmEx Analytics was the first company to extend an offer to someone from my branch. I
+was on the waitlist for that company, but they stopped calling people from the waitlist
+two names before me. But I just saw making it to the waitlist as a massive win in itself.
+This was repeated again with Tata AIG - they didn’t even make it to the waitlist.
+
+I vividly remember walking back from the Sprinklr coding round on 19th July at 11:50 pm
+thinking, damn, that was the biggest “he’s not him” performance I’ve ever given. I
+entered my room, and my friends were there with a cake and candles. July 20th was my
+birthday. But I just felt extremely low after that underwhelming coding round. By 12:10
+am, the cake was finished, and I sat back down to study more, while my friends
+continued chilling in my neighbor’s (and bestie, shoutout 21112013) room.
+Then came one rainy night, when I was out with a junior and another friend (shoutout to
+another bestie 21119034) in Rustic. Standard Chartered’s coding round was that night,
+and I was a hair’s width away from just giving up and not appearing for it. The rain only
+added to my laziness and despair. But, almost prophetically, the skies cleared up, and I
+thought, why not just give it? After some initial technical hitches, I was the second or
+third person to finish both the questions, even after starting a little later. I was pretty
+happy with how it went. I called a senior of mine (shoutout 19117075) and told him
+everything. He was highly confident I’d make it to the shortlist this time. I didn’t share
+the same enthusiasm, but two days later, my name was on the Noticeboard app under
+the shortlist. I was overjoyed.
+
+## THE INTERVIEWS - R1
+
+My interview readiness levels were mid, at best. I knew most of my projects from top to
+bottom and DSA pretty well, too. Why did I say I wasn’t too well prepared then? You’ll
+find out soon enough. In the first round, my interviewer was a fun late -30s man who
+worked in the analytics department, if I remember correctly. He constantly had a smile
+on his face and made a strong effort to make me feel comfortable throughout the
+interview. I had (still have a bit of) performance anxiety, which didn’t surface because of
+how nice he was. The round went wonderfully well, and my name was on top of the list
+of 10 people shortlisted for the second round. I assumed that was a good sign and was
+quite excited for the next one.
+
+## THE INTERVIEWS - R2
+
+Here’s the part of this read that’ll clarify why I know I was underprepared, looking back
+now. I completely blew over preparing for common HR questions because, for one, I
+never thought I’d make it that far, and two, I thought I’d be able to bullshit my way
+through it. But let me stress this, it is IMPERATIVE to know HOW to bullshit through it,
+and that requires SOME prep.
+
+My interviewer for this round was (no offense to him whatsoever) a little scary - no smile
+on his face, a mean mustache, and a very unnerving voice. He exposed my lack of
+knowledge in commonplace things about coding (for example, I couldn’t answer which
+programming languages use a compiler, which ones use an interpreter, and which ones
+use both. Stuff I’ve known since school, but I’d forgotten).
+Then he got to grilling me about the weak points in my resume (I was pretty proud of the
+rest of my resume, by the way, arranged and worded beautifully thanks to 19117109),
+and there was the prominent single glaring crater in it - my CGPA. He asked me to
+explain why it’s low. Now, there’s a way of answering this, which I did not know at the
+time because, well, I hadn’t done the slightest research on how to tackle these
+questions. I beat around the bush under-confidently, mainly talking about how I faced
+major health episodes in college (which I really did; I faced things no healthy 20 -
+something year old would even dream of). This answer fell flat on its face; the
+interviewer didn’t buy it.
+After what felt like being thrown into a food processor after being defended by prime
+2014 Kawhi Leonard for two hours, I got out of the round. I didn’t want to be seen; call
+me 2012 John Cena, the way I felt at rock bottom (someone please get all the
+references I threw in here, I know 19117016 will).
+
+
+## THE FALLOUT
+
+9 more people were left until I found out what would become of me after this round, and
+so began the strenuous 2-hour wait. 8 names came out after. Mine was not there.
+Heartbroken. Tired of the process. Despair. Agony (too dramatic, maybe?). I began the
+long walk back to my hostel. My mother, the real MVP, ever so supportive, told me it’s
+alright. I’ll get something else. I wasn’t too sure of it.
+But wait, I didn’t get an offer. Why am I writing this?
+
+## THE SURPRISE
+
+A few days passed. I had mostly gotten over the interview fiasco. But I had a lab course
+to deal with (torturous as usual). The professor had once yelled at me for sitting on the
+table while observing an experiment - I was told to go sit on the ceiling—trademark
+South Indian sarcasm. Almost made me laugh in nostalgia. I missed home so much.
+
+My phone was on silent that day, and when I checked it, I had three missed calls from
+an unknown number. A classmate of mine walked up to me and told me to call it back -
+it was a Placement Cell rep that had called me. I was pretty confused. I jogged out of
+the lab and called back. The rep told me I have my third round of interviews scheduled
+for the afternoon!? How? Why? I was obviously ecstatic, but I didn’t understand how this
+happened. The third round was just a formality round to give location and other
+preferences - it basically meant you had secured an offer.
+After that call was over, I was informed that I did actually get an offer from Standard
+Chartered. Seventh heaven. I remember running to my room and slamming the balcony
+door in happiness. I remember calling both my parents and informing them about this. I
+remember thinking “oh shit, I can hoop seriously again”. I remember taking 21322024
+(bestie 3) to Milk Bar for celebratory sweets. I remember story-ing a photo of the iconic
+Kevin Garnett “ANYTHING IS POSSIBLE” below (after the 2008 championship win) -
+because it really felt that way. This should explain the “SOP” of the article.
+Later, I found out how this actually went down. The students are to fill out a Google form
+giving their preferences for a particular interview day - one of the Standard Chartered
+selects had Jaguar higher on his priority list, and he ended up going there. That opened
+up a vacancy, and I was slotted in to fill that. A stroke of luck, finally, after all the
+setbacks.
+
+## THE CULMINATION
+
+Later, I was told that my office would be in Bangalore (which meant I could just stay
+home). I had a great 2 months at the organisation. I worked under an excellent
+manager. In those two months, I got my health and fitness to the best it had ever been.
+If I may sidetrack a little - I bought myself a pair of Ja 1s, a KD jersey, and a LeBron
+jersey (both city edition) as soon as my stipend hit. I even received a PPO from the
+company later, which spared me a lot of placement season stress.
+To anyone reading this with an upcoming intern/placement season, I’ll reiterate what I
+said at the beginning of this article - prepare. No matter your branch, your CGPA, or
+your interests, be prepared for the process. It will result in something great. As cliche as
+it sounds, take help from the people around you to define a goal and the means to attain
+it, hustle and trust the process (unless you’re a 76ers fan, in which case I’m sorry you
+read those words). You've got this.

category/summer2025/index.html

@@ -0,0 +1,3 @@
+---
+category: summer2025
+---

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 %}