From 11af75583d833e6c12aaca1cdad4a30688f386b5 Mon Sep 17 00:00:00 2001 From: officiallyutso Date: Fri, 27 Jun 2025 07:30:50 +0530 Subject: [PATCH 1/8] chore: update .gitignore to exclude temp and system files --- .gitignore | 29 ++++- Gemfile | 5 +- Gemfile.lock | 305 ++++++++++++++++++++++++-------------------- _includes/head.html | 2 + 4 files changed, 196 insertions(+), 145 deletions(-) diff --git a/.gitignore b/.gitignore index badbc02..fff45f2 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,27 @@ -_site -.sass-cache +_site/ +.sass-cache/ + +.jekyll-cache/ +.jekyll-metadata + +# Ignore dependencies +vendor/ +.bundle/ +node_modules/ +package-lock.json +yarn.lock + +# Ignore system files +.DS_Store +Thumbs.db + +# Ignore logs and temp files +*.log +*.tmp +*.swp +*.swo + +# Ignore by editors/IDEs +.vscode/ +.idea/ +*.iml \ No newline at end of file diff --git a/Gemfile b/Gemfile index ab14dad..75d9835 100644 --- a/Gemfile +++ b/Gemfile @@ -1,3 +1,2 @@ -source 'http://rubygems.org' - -gem 'github-pages', group: :jekyll_plugins +source "https://rubygems.org" +gem "github-pages", group: :jekyll_plugins diff --git a/Gemfile.lock b/Gemfile.lock index adbd7a0..f0fb915 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,97 +1,117 @@ GEM - remote: http://rubygems.org/ + remote: https://rubygems.org/ specs: - activesupport (6.0.6) - concurrent-ruby (~> 1.0, >= 1.0.2) - i18n (>= 0.7, < 2) - minitest (~> 5.1) - tzinfo (~> 1.1) - zeitwerk (~> 2.2, >= 2.2.2) - addressable (2.7.0) - public_suffix (>= 2.0.2, < 5.0) + activesupport (7.2.2.1) + base64 + benchmark (>= 0.3) + bigdecimal + concurrent-ruby (~> 1.0, >= 1.3.1) + connection_pool (>= 2.2.5) + drb + i18n (>= 1.6, < 2) + logger (>= 1.4.2) + minitest (>= 5.1) + securerandom (>= 0.3) + tzinfo (~> 2.0, >= 2.0.5) + addressable (2.8.7) + public_suffix (>= 2.0.2, < 7.0) + base64 (0.2.0) + benchmark (0.4.1) + bigdecimal (3.2.2) coffee-script (2.4.1) coffee-script-source execjs - coffee-script-source (1.11.1) + coffee-script-source (1.12.2) colorator (1.1.0) - commonmarker (0.17.13) - ruby-enum (~> 0.5) - concurrent-ruby (1.1.6) - dnsruby (1.61.3) - addressable (~> 2.5) - em-websocket (0.5.1) + commonmarker (0.23.11) + concurrent-ruby (1.3.5) + connection_pool (2.5.3) + csv (3.3.5) + dnsruby (1.72.4) + base64 (~> 0.2.0) + logger (~> 1.6.5) + simpleidn (~> 0.2.1) + drb (2.2.3) + em-websocket (0.5.3) eventmachine (>= 0.12.9) - http_parser.rb (~> 0.6.0) - ethon (0.12.0) - ffi (>= 1.3.0) + http_parser.rb (~> 0) + ethon (0.16.0) + ffi (>= 1.15.0) eventmachine (1.2.7) - execjs (2.7.0) - faraday (1.0.1) - multipart-post (>= 1.2, < 3) - ffi (1.13.1) + execjs (2.10.0) + faraday (2.13.1) + faraday-net_http (>= 2.0, < 3.5) + json + logger + faraday-net_http (3.4.1) + net-http (>= 0.5.0) + ffi (1.17.2-x86_64-linux-musl) forwardable-extended (2.6.0) - gemoji (3.0.1) - github-pages (207) - github-pages-health-check (= 1.16.1) - jekyll (= 3.9.0) - jekyll-avatar (= 0.7.0) - jekyll-coffeescript (= 1.1.1) - jekyll-commonmark-ghpages (= 0.1.6) - jekyll-default-layout (= 0.1.4) - jekyll-feed (= 0.13.0) + gemoji (4.1.0) + github-pages (232) + github-pages-health-check (= 1.18.2) + jekyll (= 3.10.0) + jekyll-avatar (= 0.8.0) + jekyll-coffeescript (= 1.2.2) + jekyll-commonmark-ghpages (= 0.5.1) + jekyll-default-layout (= 0.1.5) + jekyll-feed (= 0.17.0) jekyll-gist (= 1.5.0) - jekyll-github-metadata (= 2.13.0) - jekyll-mentions (= 1.5.1) + jekyll-github-metadata (= 2.16.1) + jekyll-include-cache (= 0.2.1) + jekyll-mentions (= 1.6.0) jekyll-optional-front-matter (= 0.3.2) jekyll-paginate (= 1.1.0) jekyll-readme-index (= 0.3.0) - jekyll-redirect-from (= 0.15.0) + jekyll-redirect-from (= 0.16.0) jekyll-relative-links (= 0.6.1) - jekyll-remote-theme (= 0.4.1) + jekyll-remote-theme (= 0.4.3) jekyll-sass-converter (= 1.5.2) - jekyll-seo-tag (= 2.6.1) + jekyll-seo-tag (= 2.8.0) jekyll-sitemap (= 1.4.0) jekyll-swiss (= 1.0.0) - jekyll-theme-architect (= 0.1.1) - jekyll-theme-cayman (= 0.1.1) - jekyll-theme-dinky (= 0.1.1) - jekyll-theme-hacker (= 0.1.1) - jekyll-theme-leap-day (= 0.1.1) - jekyll-theme-merlot (= 0.1.1) - jekyll-theme-midnight (= 0.1.1) - jekyll-theme-minimal (= 0.1.1) - jekyll-theme-modernist (= 0.1.1) - jekyll-theme-primer (= 0.5.4) - jekyll-theme-slate (= 0.1.1) - jekyll-theme-tactile (= 0.1.1) - jekyll-theme-time-machine (= 0.1.1) + jekyll-theme-architect (= 0.2.0) + jekyll-theme-cayman (= 0.2.0) + jekyll-theme-dinky (= 0.2.0) + jekyll-theme-hacker (= 0.2.0) + jekyll-theme-leap-day (= 0.2.0) + jekyll-theme-merlot (= 0.2.0) + jekyll-theme-midnight (= 0.2.0) + jekyll-theme-minimal (= 0.2.0) + jekyll-theme-modernist (= 0.2.0) + jekyll-theme-primer (= 0.6.0) + jekyll-theme-slate (= 0.2.0) + jekyll-theme-tactile (= 0.2.0) + jekyll-theme-time-machine (= 0.2.0) jekyll-titles-from-headings (= 0.5.3) - jemoji (= 0.11.1) - kramdown (= 2.3.0) + jemoji (= 0.13.0) + kramdown (= 2.4.0) kramdown-parser-gfm (= 1.1.0) - liquid (= 4.0.3) + liquid (= 4.0.4) mercenary (~> 0.3) minima (= 2.5.1) - nokogiri (>= 1.10.4, < 2.0) - rouge (= 3.19.0) + nokogiri (>= 1.16.2, < 2.0) + rouge (= 3.30.0) terminal-table (~> 1.4) - github-pages-health-check (1.16.1) + webrick (~> 1.8) + github-pages-health-check (1.18.2) addressable (~> 2.3) dnsruby (~> 1.60) - octokit (~> 4.0) - public_suffix (~> 3.0) + octokit (>= 4, < 8) + public_suffix (>= 3.0, < 6.0) typhoeus (~> 1.3) html-pipeline (2.14.3) activesupport (>= 2) nokogiri (>= 1.4) - http_parser.rb (0.6.0) - i18n (0.9.5) + http_parser.rb (0.8.0) + i18n (1.14.7) concurrent-ruby (~> 1.0) - jekyll (3.9.0) + jekyll (3.10.0) addressable (~> 2.4) colorator (~> 1.0) + csv (~> 3.0) em-websocket (~> 0.5) - i18n (~> 0.7) + i18n (>= 0.7, < 2) jekyll-sass-converter (~> 1.0) jekyll-watch (~> 2.0) kramdown (>= 1.17, < 3) @@ -100,28 +120,31 @@ GEM pathutil (~> 0.9) rouge (>= 1.7, < 4) safe_yaml (~> 1.0) - jekyll-avatar (0.7.0) + webrick (>= 1.0) + jekyll-avatar (0.8.0) jekyll (>= 3.0, < 5.0) - jekyll-coffeescript (1.1.1) + jekyll-coffeescript (1.2.2) coffee-script (~> 2.2) - coffee-script-source (~> 1.11.1) - jekyll-commonmark (1.3.1) - commonmarker (~> 0.14) - jekyll (>= 3.7, < 5.0) - jekyll-commonmark-ghpages (0.1.6) - commonmarker (~> 0.17.6) - jekyll-commonmark (~> 1.2) - rouge (>= 2.0, < 4.0) - jekyll-default-layout (0.1.4) - jekyll (~> 3.0) - jekyll-feed (0.13.0) + coffee-script-source (~> 1.12) + jekyll-commonmark (1.4.0) + commonmarker (~> 0.22) + jekyll-commonmark-ghpages (0.5.1) + commonmarker (>= 0.23.7, < 1.1.0) + jekyll (>= 3.9, < 4.0) + jekyll-commonmark (~> 1.4.0) + rouge (>= 2.0, < 5.0) + jekyll-default-layout (0.1.5) + jekyll (>= 3.0, < 5.0) + jekyll-feed (0.17.0) jekyll (>= 3.7, < 5.0) jekyll-gist (1.5.0) octokit (~> 4.2) - jekyll-github-metadata (2.13.0) + jekyll-github-metadata (2.16.1) jekyll (>= 3.4, < 5.0) - octokit (~> 4.0, != 4.4.0) - jekyll-mentions (1.5.1) + octokit (>= 4, < 7, != 4.4.0) + jekyll-include-cache (0.2.1) + jekyll (>= 3.7, < 5.0) + jekyll-mentions (1.6.0) html-pipeline (~> 2.3) jekyll (>= 3.7, < 5.0) jekyll-optional-front-matter (0.3.2) @@ -129,127 +152,129 @@ GEM jekyll-paginate (1.1.0) jekyll-readme-index (0.3.0) jekyll (>= 3.0, < 5.0) - jekyll-redirect-from (0.15.0) + jekyll-redirect-from (0.16.0) jekyll (>= 3.3, < 5.0) jekyll-relative-links (0.6.1) jekyll (>= 3.3, < 5.0) - jekyll-remote-theme (0.4.1) + jekyll-remote-theme (0.4.3) addressable (~> 2.0) jekyll (>= 3.5, < 5.0) - rubyzip (>= 1.3.0) + jekyll-sass-converter (>= 1.0, <= 3.0.0, != 2.0.0) + rubyzip (>= 1.3.0, < 3.0) jekyll-sass-converter (1.5.2) sass (~> 3.4) - jekyll-seo-tag (2.6.1) - jekyll (>= 3.3, < 5.0) + jekyll-seo-tag (2.8.0) + jekyll (>= 3.8, < 5.0) jekyll-sitemap (1.4.0) jekyll (>= 3.7, < 5.0) jekyll-swiss (1.0.0) - jekyll-theme-architect (0.1.1) - jekyll (~> 3.5) + jekyll-theme-architect (0.2.0) + jekyll (> 3.5, < 5.0) jekyll-seo-tag (~> 2.0) - jekyll-theme-cayman (0.1.1) - jekyll (~> 3.5) + jekyll-theme-cayman (0.2.0) + jekyll (> 3.5, < 5.0) jekyll-seo-tag (~> 2.0) - jekyll-theme-dinky (0.1.1) - jekyll (~> 3.5) + jekyll-theme-dinky (0.2.0) + jekyll (> 3.5, < 5.0) jekyll-seo-tag (~> 2.0) - jekyll-theme-hacker (0.1.1) - jekyll (~> 3.5) + jekyll-theme-hacker (0.2.0) + jekyll (> 3.5, < 5.0) jekyll-seo-tag (~> 2.0) - jekyll-theme-leap-day (0.1.1) - jekyll (~> 3.5) + jekyll-theme-leap-day (0.2.0) + jekyll (> 3.5, < 5.0) jekyll-seo-tag (~> 2.0) - jekyll-theme-merlot (0.1.1) - jekyll (~> 3.5) + jekyll-theme-merlot (0.2.0) + jekyll (> 3.5, < 5.0) jekyll-seo-tag (~> 2.0) - jekyll-theme-midnight (0.1.1) - jekyll (~> 3.5) + jekyll-theme-midnight (0.2.0) + jekyll (> 3.5, < 5.0) jekyll-seo-tag (~> 2.0) - jekyll-theme-minimal (0.1.1) - jekyll (~> 3.5) + jekyll-theme-minimal (0.2.0) + jekyll (> 3.5, < 5.0) jekyll-seo-tag (~> 2.0) - jekyll-theme-modernist (0.1.1) - jekyll (~> 3.5) + jekyll-theme-modernist (0.2.0) + jekyll (> 3.5, < 5.0) jekyll-seo-tag (~> 2.0) - jekyll-theme-primer (0.5.4) + jekyll-theme-primer (0.6.0) jekyll (> 3.5, < 5.0) jekyll-github-metadata (~> 2.9) jekyll-seo-tag (~> 2.0) - jekyll-theme-slate (0.1.1) - jekyll (~> 3.5) + jekyll-theme-slate (0.2.0) + jekyll (> 3.5, < 5.0) jekyll-seo-tag (~> 2.0) - jekyll-theme-tactile (0.1.1) - jekyll (~> 3.5) + jekyll-theme-tactile (0.2.0) + jekyll (> 3.5, < 5.0) jekyll-seo-tag (~> 2.0) - jekyll-theme-time-machine (0.1.1) - jekyll (~> 3.5) + jekyll-theme-time-machine (0.2.0) + jekyll (> 3.5, < 5.0) jekyll-seo-tag (~> 2.0) jekyll-titles-from-headings (0.5.3) jekyll (>= 3.3, < 5.0) jekyll-watch (2.2.1) listen (~> 3.0) - jemoji (0.11.1) - gemoji (~> 3.0) + jemoji (0.13.0) + gemoji (>= 3, < 5) html-pipeline (~> 2.2) jekyll (>= 3.0, < 5.0) - kramdown (2.3.0) + json (2.12.2) + kramdown (2.4.0) rexml kramdown-parser-gfm (1.1.0) kramdown (~> 2.0) - liquid (4.0.3) - listen (3.7.1) + liquid (4.0.4) + listen (3.9.0) rb-fsevent (~> 0.10, >= 0.10.3) rb-inotify (~> 0.9, >= 0.9.10) + logger (1.6.6) mercenary (0.3.6) - mini_portile2 (2.8.0) minima (2.5.1) jekyll (>= 3.5, < 5.0) jekyll-feed (~> 0.9) jekyll-seo-tag (~> 2.1) - minitest (5.16.3) - multipart-post (2.1.1) - nokogiri (1.13.10) - mini_portile2 (~> 2.8.0) + minitest (5.25.5) + net-http (0.6.0) + uri + nokogiri (1.18.8-x86_64-linux-musl) racc (~> 1.4) - octokit (4.18.0) - faraday (>= 0.9) - sawyer (~> 0.8.0, >= 0.5.3) + octokit (4.25.1) + faraday (>= 1, < 3) + sawyer (~> 0.9) pathutil (0.16.2) forwardable-extended (~> 2.6) - public_suffix (3.1.1) - racc (1.6.1) - rb-fsevent (0.10.4) - rb-inotify (0.10.1) + public_suffix (5.1.1) + racc (1.8.1) + rb-fsevent (0.11.2) + rb-inotify (0.11.1) ffi (~> 1.0) - rexml (3.2.5) - rouge (3.19.0) - ruby-enum (0.8.0) - i18n - rubyzip (2.3.2) + rexml (3.4.1) + rouge (3.30.0) + rubyzip (2.4.1) safe_yaml (1.0.5) sass (3.7.4) sass-listen (~> 4.0.0) sass-listen (4.0.0) rb-fsevent (~> 0.9, >= 0.9.4) rb-inotify (~> 0.9, >= 0.9.7) - sawyer (0.8.2) + sawyer (0.9.2) addressable (>= 2.3.5) - faraday (> 0.8, < 2.0) + faraday (>= 0.17.3, < 3) + securerandom (0.4.1) + simpleidn (0.2.3) terminal-table (1.8.0) unicode-display_width (~> 1.1, >= 1.1.1) - thread_safe (0.3.6) - typhoeus (1.4.0) + typhoeus (1.4.1) ethon (>= 0.9.0) - tzinfo (1.2.7) - thread_safe (~> 0.1) - unicode-display_width (1.7.0) - zeitwerk (2.6.6) + tzinfo (2.0.6) + concurrent-ruby (~> 1.0) + unicode-display_width (1.8.0) + uri (1.0.3) + webrick (1.9.1) PLATFORMS - ruby + x86_64-linux-musl DEPENDENCIES github-pages BUNDLED WITH - 2.3.26 + 2.3.25 diff --git a/_includes/head.html b/_includes/head.html index aede985..2fc3d8e 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -46,6 +46,8 @@ + + From c12e6c72c6fbbc9e314509564e1be0a90f16660f Mon Sep 17 00:00:00 2001 From: officiallyutso Date: Fri, 27 Jun 2025 08:10:21 +0530 Subject: [PATCH 2/8] feat: mobile view and navbar --- _includes/head.html | 7 +- css/base.scss | 175 ++++++++++++++++++- css/mobile.css | 405 ++++++++++++++++++++++++++++++++++++++++---- css/table.css | 88 +++++++++- 4 files changed, 639 insertions(+), 36 deletions(-) diff --git a/_includes/head.html b/_includes/head.html index 2fc3d8e..d502704 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -13,7 +13,7 @@ - + {{ title }} @@ -43,17 +43,16 @@ <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> <script type="text/javascript" src="/js/masonry.min.js"></script> <script type="text/javascript" src="/js/application.js"></script> -</head> +</head> \ No newline at end of file diff --git a/css/base.scss b/css/base.scss index 5e54615..0734003 100644 --- a/css/base.scss +++ b/css/base.scss @@ -26,6 +26,10 @@ $article-cover-img-height: 190px; $carousel-bg-color: #333; $carousel-height: 625px; +// Mobile breakpoints +$mobile-breakpoint: 768px; +$small-mobile-breakpoint: 480px; + // =============== /VARS ===============// @import "bootstrap"; @@ -56,6 +60,17 @@ $carousel-height: 625px; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1); } +@mixin mobile { + @media (max-width: #{$mobile-breakpoint}) { + @content; + } +} + +@mixin small-mobile { + @media (max-width: #{$small-mobile-breakpoint}) { + @content; + } +} // ============== /MIXINS ============== // @@ -80,6 +95,12 @@ $carousel-height: 625px; 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; @@ -87,21 +108,49 @@ 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 { @@ -109,6 +158,11 @@ body { position: relative; margin-left: 2em; line-height: 1; + + @include mobile { + margin-left: 1em; + height: auto; + } .name { position: absolute; @@ -116,6 +170,15 @@ 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 { @@ -124,12 +187,26 @@ body { position: absolute; bottom: 0; color: #ababab; + + @include mobile { + position: static; + font-size: 12px; + margin-top: 5px; + } + + @include small-mobile { + font-size: 11px; + } } } .logo { height: $pre-nav-logo-height; float: left; + + @include mobile { + height: 50px; + } } .social { @@ -141,9 +218,19 @@ body { > * { margin-left: 1em; + + @include mobile { + margin: 0 5px; + } + } + + @include mobile { + float: none; + display: block; + padding: 10px 0; + margin-top: 10px; } } - } nav { @@ -159,6 +246,10 @@ nav { width: 100%; position: relative; left: -15px; + + @include mobile { + left: 0; + } } &.affix { @@ -189,14 +280,28 @@ nav { float: none; margin-bottom: -100%; // Hack to fix the spacing between header and navbar + @include mobile { + display: block; + margin-bottom: 0; + } + &:first-of-type a { padding-left: 0; + + @include mobile { + padding-left: 15px; + } } &:last-of-type a { padding-right: 0; + + @include mobile { + padding-right: 15px; + } } } + .navbar-nav { font-size: 16px; text-align: justify; @@ -206,6 +311,23 @@ nav { width: 100%; /* Ensures justification for single lines */ display: inline-block; } + + @include mobile { + font-size: 14px; + text-align: left; + + > li > a { + padding: 10px 15px; + } + } +} + +.navbar-collapse { + @include mobile { + border-top: 1px solid #e5e5e5; + margin-top: 10px; + padding-top: 10px; + } } // ================ /NAV ================// @@ -214,6 +336,10 @@ nav { #header { font-size: 12px; + + @include mobile { + margin-bottom: 20px; + } .header-row { position: relative; @@ -223,7 +349,14 @@ 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 { @@ -232,10 +365,20 @@ nav { .cover-image { height: $home-header-height; + + @include mobile { + height: 200px; + order: 1; + } } .cover-details { padding: 2em 1.5em; + + @include mobile { + order: 2; + padding: 20px 15px; + } } .cover-link { @@ -250,6 +393,10 @@ nav { .cover-title-label { font-size: 14px; font-weight: bold; + + @include mobile { + font-size: 12px; + } } .title { @@ -257,6 +404,15 @@ nav { font-weight: bold; margin-top: 0; margin-bottom: 20px; + + @include mobile { + font-size: 20px; + margin-bottom: 15px; + } + + @include small-mobile { + font-size: 18px; + } } } @@ -265,6 +421,12 @@ nav { .cover-image { border-radius: 10px; + + @include mobile { + height: 150px; + margin-bottom: 15px; + border-radius: 0; + } } .title { @@ -287,6 +449,11 @@ nav { .cover-excerpt { margin-top: 12px; + + @include mobile { + font-size: 13px; + line-height: 1.4; + } } // ============= /HOME-HEADER ============= // @@ -295,6 +462,10 @@ nav { color: white; margin-bottom: 60px; position: relative; + + @include mobile { + margin-bottom: 30px; + } .container-title { position: absolute; diff --git a/css/mobile.css b/css/mobile.css index fab2aae..53f70ad 100644 --- a/css/mobile.css +++ b/css/mobile.css @@ -1,30 +1,377 @@ -.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; + } + + /* Pre-nav and Navigation */ + .pre-nav, .pre-footer { + height: auto; + padding: 15px 0; + } + + .pre-nav .brand, + .pre-footer .brand { + display: block; + float: none; + text-align: center; + padding: 10px 0; + } + + .pre-nav .social, + .pre-footer .social { + display: block; + float: none; + text-align: center; + padding: 10px 0; + margin-top: 10px; + } + + .pre-nav .social > *, + .pre-footer .social > * { + margin: 0 5px; + } + + .pre-nav .name-container .name { + font-size: 16px; + } + + .pre-nav .name-container .desc { + font-size: 12px; + } + + .pre-nav .logo { + height: 50px; + } + + /* Navbr */ + .navbar-nav { + margin: 0; + font-size: 14px; + } + + .navbar-nav > li { + display: block; + float: none; + margin-bottom: 0; + } + + .navbar-nav > li > a { + padding: 10px 15px; + text-align: left; + } + + .navbar-collapse { + border-top: 1px solid #e5e5e5; + margin-top: 10px; + padding-top: 10px; + } + + /* Header Styles */ + #header { + margin-bottom: 20px; + } + + #header .header-row { + height: auto; + min-height: 250px; + border-radius: 0; + } + + #header .cover-image { + height: 200px; + order: 1; + } + + #header .cover-details { + order: 2; + padding: 20px 15px; + } + + #header .title { + font-size: 20px; + margin-bottom: 15px; + } + + #header .cover-title-label { + font-size: 12px; + } + + #header .cover-excerpt { + font-size: 13px; + line-height: 1.4; + } + + /* Category Header */ + #header.category-header .cover-image { + height: 150px; + margin-bottom: 15px; + } + + /* New Articles Section */ + #new-articles { + margin-bottom: 30px; + } + + #new-articles .container-title { + position: static; + font-size: 18px; + margin-bottom: 15px; + padding: 10px 15px; + text-align: center; + } + + #new-articles .article-col { + padding: 5px 0; + margin-bottom: 15px; + } + + #new-articles .article { + height: 250px; + margin-top: 0; + } + + #new-articles .details { + padding: 15px; + } + + #new-articles .details .title { + font-size: 16px; + line-height: 1.3; + } + + #new-articles .details .date { + position: static; + margin-top: 5px; + font-size: 11px; + } + + /* Article Horizontal Layout */ + .article-horiozntal { + height: auto; + margin-bottom: 25px; + } + + .article-horiozntal .img-container { + height: 150px; + margin-bottom: 10px; + } + + .article-horiozntal .details-container { + padding-left: 0; + } + + .article-horiozntal .title { + font-size: 16px; + line-height: 1.4; + } + + .article-horiozntal .excerpt { + font-size: 13px; + line-height: 1.4; + margin-top: 10px; + } + + /* Post Styles */ + .post { + font-size: 16px; + line-height: 1.6; + } + + .post .header { + padding-bottom: 20px; + } + + .post .body { + padding-top: 20px; + } + + .post .cover-img { + height: 200px; + margin-bottom: 20px; + } + + .post .header .title { + font-size: 20px; + line-height: 1.3; + } + + .post .header .tag { + font-size: 14px; + } + + .post .fb-content { + margin-top: 25px; + } + + /* More Articles */ + #more-articles-container { + margin-top: 25px; + margin-bottom: 30px; + } + + #more-articles .article { + height: 120px; + margin-bottom: 15px; + } + + #more-articles .details { + padding: 10px; + } + + #more-articles .title { + font-size: 14px; + line-height: 1.3; + } + + /* Category Posts */ + .category-posts { + margin-top: 15px; + } + + .category-posts .article-horiozntal { + margin-bottom: 20px; + } + + /* Bootstrap Grid Fixes */ + .col-md-4, .col-md-8, .col-sm-3, .col-sm-6 { + width: 100%; + padding-left: 0; + padding-right: 0; + } + + /* Facebook Plugin Responsiveness */ + .fb-page { + width: 100% !important; + margin-top: 20px; + } + + .fb-comments { + width: 100% !important; + } + + /* Hide Facebook sidebar on mobile */ + .post .col-md-4 { + display: none; + } + + .category-posts .col-md-4 { + display: none; + } + + /* Make content full width on mobile */ + .post .col-md-8, + .category-posts .col-md-8 { + width: 100%; + } + + /* Images Responsiveness */ + img { + max-width: 100%; + height: auto; + } + + .img-center-fill { + width: 100%; + height: 100%; + object-fit: cover; + } + + /* Footer */ + footer { + margin-top: 30px; + padding-top: 20px; + } + + .copyright { + text-align: center; + font-size: 12px; + } + + /* Utility Classes */ + .hidden-mobile { + display: none !important; + } + + .visible-mobile { + display: block !important; + } + + /* Text adjustments */ + h1 { font-size: 24px; } + h2 { font-size: 20px; } + h3 { font-size: 18px; } + h4 { font-size: 16px; } + h5 { font-size: 14px; } + h6 { font-size: 13px; } + + + .row { + margin-left: 0; + margin-right: 0; + } + + .outer-row { + margin-left: -5px; + margin-right: -5px; + } + + /* Ensure no horizontal scroll */ + html, body { + max-width: 100%; + overflow-x: hidden; + } +} -.content { - margin: 0; - padding: 5px 25px; - width: inherit; } - .content h1 { - margin: 0 0 5px 0; } +/* Extra Small Devices (phones, less than 480px) */ +@media (max-width: 480px) { + + body { + font-size: 13px; + } + + .container { + padding-left: 10px; + padding-right: 10px; + } + + #header .title { + font-size: 18px; + } + + #new-articles .details .title { + font-size: 14px; + } + + .post .header .title { + font-size: 18px; + } + + .post { + font-size: 15px; + } + + #new-articles .container-title { + font-size: 16px; + } + + .container-title { + font-size: 20px; + } + + .pre-nav .name-container .name { + font-size: 14px; + } + + .pre-nav .name-container .desc { + font-size: 11px; + } +} \ No newline at end of file diff --git a/css/table.css b/css/table.css index 9de19b7..aeb60f8 100644 --- a/css/table.css +++ b/css/table.css @@ -1,19 +1,105 @@ .mbtablestyle { border-collapse: collapse; margin-top: 5rem; + width: 100%; + max-width: 100%; } .mdtablestyle { border-collapse: collapse; margin: 2rem 0; + width: 100%; + max-width: 100%; } .mbtablestyle td, .mbtablestyle th, .mdtablestyle td, .mdtablestyle th { - border: 1px solid black; + border: 1px solid black; padding: 0.5rem 1.5rem; padding-bottom: 2rem; vertical-align: top; + word-wrap: break-word; } + +/* Mobile table styles for the articles and stuff */ +@media (max-width: 768px) { + .mbtablestyle, + .mdtablestyle { + margin-top: 2rem; + margin-bottom: 2rem; + font-size: 12px; + display: block; + overflow-x: auto; + white-space: nowrap; + -webkit-overflow-scrolling: touch; + } + + .mbtablestyle td, + .mbtablestyle th, + .mdtablestyle td, + .mdtablestyle th { + padding: 0.25rem 0.75rem; + padding-bottom: 1rem; + min-width: 100px; + } + + /* Alternative responsive table approach - stacked layout */ + .responsive-table { + display: block; + width: 100%; + } + + .responsive-table thead { + display: none; + } + + .responsive-table tbody, + .responsive-table tr, + .responsive-table td { + display: block; + width: 100%; + } + + .responsive-table tr { + border: 1px solid #ccc; + margin-bottom: 10px; + padding: 10px; + } + + .responsive-table td { + border: none; + position: relative; + padding-left: 50% !important; + padding-top: 10px; + padding-bottom: 10px; + } + + .responsive-table td:before { + content: attr(data-label) ": "; + position: absolute; + left: 6px; + width: 45%; + font-weight: bold; + white-space: nowrap; + } +} + +@media (max-width: 480px) { + .mbtablestyle, + .mdtablestyle { + font-size: 11px; + margin-top: 1rem; + margin-bottom: 1rem; + } + + .mbtablestyle td, + .mbtablestyle th, + .mdtablestyle td, + .mdtablestyle th { + padding: 0.2rem 0.5rem; + padding-bottom: 0.5rem; + min-width: 80px; + } +} \ No newline at end of file From 263d34839d56a9f2402b228168fbe1a81ce5dcb9 Mon Sep 17 00:00:00 2001 From: officiallyutso <utsosarkar1@gmail.com> Date: Fri, 27 Jun 2025 08:42:30 +0530 Subject: [PATCH 3/8] fix(bug): navigation component position --- _includes/navbar.html | 72 ++++++++++++++++++++ css/mobile.css | 155 +++++++++++++++++++++++++++++++++++++++++- 2 files changed, 225 insertions(+), 2 deletions(-) diff --git a/_includes/navbar.html b/_includes/navbar.html index c512ab5..dc60ea6 100644 --- a/_includes/navbar.html +++ b/_includes/navbar.html @@ -8,6 +8,15 @@ </div> </div> </a> + + <!-- Mobile toggle button --> + <button type="button" class="navbar-toggle" 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"> <a href="/about">About</a> <a href="/guide">Guide</a> @@ -16,6 +25,28 @@ <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> + + <!-- 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> + </div> </div> <nav class="navbar navbar-default" data-spy="affix" data-offset-top="110"> @@ -54,3 +85,44 @@ <!--/.nav-collapse --> </div> </nav> + +<!-- Mobile Navigation JavaScript --> +<script> +document.addEventListener('DOMContentLoaded', function() { + // Mobile menu toggle functio + const mobileToggle = document.getElementById('mobile-menu-toggle'); + const mobileNav = document.getElementById('mobile-nav'); + + if (mobileToggle && mobileNav) { + mobileToggle.addEventListener('click', function() { + mobileNav.classList.toggle('show'); + }); + } + + // Mobile dropdown functionality + const dropdownToggles = document.querySelectorAll('.mobile-nav .dropdown-toggle'); + dropdownToggles.forEach(function(toggleBtn) { + toggleBtn.addEventListener('click', function(e) { + e.preventDefault(); + const dropdown = this.parentElement; + + // Close other open dropdowns jab some other dropdown is clicked + 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 clicking outside + document.addEventListener('click', function(e) { + if (mobileNav && !mobileNav.contains(e.target) && !mobileToggle.contains(e.target)) { + mobileNav.classList.remove('show'); + } + }); +}); +</script> \ No newline at end of file diff --git a/css/mobile.css b/css/mobile.css index 53f70ad..32fc243 100644 --- a/css/mobile.css +++ b/css/mobile.css @@ -15,7 +15,9 @@ /* Pre-nav and Navigation */ .pre-nav, .pre-footer { height: auto; + min-height: 80px; padding: 15px 0; + position: relative; } .pre-nav .brand, @@ -52,7 +54,133 @@ height: 50px; } - /* Navbr */ + /* Mobile Toggle Button Styles */ + .navbar-toggle { + position: absolute; + right: 15px; + top: 25px; + transform: translateY(-50%); + border: 1px solid #ddd; + background-color: transparent; + padding: 4px 6px; + border-radius: 4px; + cursor: pointer; + z-index: 1000; + } + + .navbar-toggle:hover, + .navbar-toggle:focus { + background-color: #f5f5f5; + border-color: #bbb; + } + + .navbar-toggle .icon-bar { + display: block; + width: 22px; + height: 2px; + background-color: #888; + border-radius: 1px; + margin: 4px 0; + transition: all 0.3s ease; + } + + /* Hide original navbar on mobile */ + .navbar { + display: none; + } + + /* Mobile Navigation Menu Styles */ + .mobile-nav { + display: none; + margin-top: 10px; + border-top: 1px solid #e5e5e5; + padding-top: 15px; + clear: both; + width: 100%; + } + + .mobile-nav.show { + display: block; + animation: slideDown 0.3s ease-out; + } + + @keyframes slideDown { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + + .mobile-nav ul { + list-style: none; + padding: 0; + margin: 0; + } + + .mobile-nav li { + margin-bottom: 0; + } + + .mobile-nav a { + display: block; + padding: 12px 15px; + text-decoration: none; + color: #333; + border-bottom: 1px solid #eee; + transition: background-color 0.2s ease; + } + + .mobile-nav a:hover { + background-color: #f5f5f5; + text-decoration: none; + color: #333; + } + + /* Mobile Dropdown Styles */ + .mobile-nav .dropdown-menu { + position: static; + display: none; + float: none; + width: auto; + margin-top: 0; + background-color: #f9f9f9; + border: none; + border-radius: 0; + box-shadow: none; + padding-left: 0; + } + + .mobile-nav .dropdown.open .dropdown-menu { + display: block; + } + + .mobile-nav .dropdown-menu a { + padding-left: 30px; + background-color: #f9f9f9; + font-size: 13px; + } + + .mobile-nav .dropdown-menu a:hover { + background-color: #f0f0f0; + } + + .mobile-nav .dropdown-toggle::after { + content: ' ▼'; + font-size: 10px; + float: right; + margin-top: 2px; + transition: transform 0.2s ease; + } + + .mobile-nav .dropdown.open .dropdown-toggle::after { + transform: rotate(180deg); + } + + /* Navbar */ .navbar-nav { margin: 0; font-size: 14px; @@ -313,7 +441,7 @@ h5 { font-size: 14px; } h6 { font-size: 13px; } - + /* Remove margins and padding that cause horizontal scroll */ .row { margin-left: 0; margin-right: 0; @@ -374,4 +502,27 @@ .pre-nav .name-container .desc { font-size: 11px; } + + /* Adjust togge button for smaller screens */ + .navbar-toggle { + right: 10px; + padding: 3px 5px; + } + + .navbar-toggle .icon-bar { + width: 18px; + height: 2px; + margin: 3px 0; + } + + /* Mobile nav adjustments for small screensss */ + .mobile-nav a { + padding: 10px 12px; + font-size: 14px; + } + + .mobile-nav .dropdown-menu a { + padding-left: 25px; + font-size: 12px; + } } \ No newline at end of file From f83be79e61c4f0c87e2c37eaa234fbd7013b914f Mon Sep 17 00:00:00 2001 From: officiallyutso <utsosarkar1@gmail.com> Date: Fri, 27 Jun 2025 08:50:35 +0530 Subject: [PATCH 4/8] fix(bug): dropdown center allignment --- css/mobile.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/mobile.css b/css/mobile.css index 32fc243..88c0f1a 100644 --- a/css/mobile.css +++ b/css/mobile.css @@ -160,8 +160,10 @@ .mobile-nav .dropdown-menu a { padding-left: 30px; + padding-right: 30px; background-color: #f9f9f9; font-size: 13px; + text-align: center; } .mobile-nav .dropdown-menu a:hover { @@ -523,6 +525,8 @@ .mobile-nav .dropdown-menu a { padding-left: 25px; + padding-right: 25px; font-size: 12px; + text-align: center; } } \ No newline at end of file From e01a4f3e6c4e24cf9d1c5efa1d8155ae0032a7d3 Mon Sep 17 00:00:00 2001 From: varun-r-mallya <varunrmallya@gmail.com> Date: Fri, 27 Jun 2025 13:05:32 +0530 Subject: [PATCH 5/8] fix: correct layout attribute in atom and sitemap files fix: update title field in config and fix link formatting in post fix build errors Signed-off-by: varun-r-mallya <varunrmallya@gmail.com> --- _config.yml | 4 ++-- _posts/2019-05-27-doggie-doggie-what-now.md | 2 +- atom.xml | 2 +- sitemap.xml | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/_config.yml b/_config.yml index 6de77ee..010173a 100644 --- a/_config.yml +++ b/_config.yml @@ -21,9 +21,9 @@ defaults: is_category_page: true layout: category -name: Watch Out, IIT Roorkee +title: Watch Out, IIT Roorkee url: http://watchout.iitr.ac.in -gems: [jekyll-paginate] +plugins: [jekyll-paginate] description: The official news magazine of IIT Roorkee. paginate: 10 paginate_path: "/page/:num" 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> ![pic](/images/posts/doggoz2.png){: 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/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"> From 1872f9bb288543250fa72260542af5bfb30d6361 Mon Sep 17 00:00:00 2001 From: officiallyutso <utsosarkar1@gmail.com> Date: Fri, 27 Jun 2025 22:05:52 +0530 Subject: [PATCH 6/8] fix: nav and article styling --- .gitignore | 2 +- Gemfile | 5 +- Gemfile.lock | 2 +- README.md | 115 +++++ _includes/footer.html | 2 +- _includes/head.html | 2 +- _includes/horizontal_post.html | 2 +- _includes/navbar.html | 161 +++++-- css/base.scss | 179 +------- css/mobile.css | 810 +++++++++++++++++++++++++++------ css/table.css | 88 +--- 11 files changed, 917 insertions(+), 451 deletions(-) create mode 100644 README.md diff --git a/.gitignore b/.gitignore index fff45f2..d440d88 100644 --- a/.gitignore +++ b/.gitignore @@ -24,4 +24,4 @@ Thumbs.db # Ignore by editors/IDEs .vscode/ .idea/ -*.iml \ No newline at end of file +*.iml diff --git a/Gemfile b/Gemfile index 75d9835..27775ab 100644 --- a/Gemfile +++ b/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 \ No newline at end of file diff --git a/Gemfile.lock b/Gemfile.lock index f0fb915..7cb1c19 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,5 +1,5 @@ GEM - remote: https://rubygems.org/ + remote: http://rubygems.org/ specs: activesupport (7.2.2.1) base64 diff --git a/README.md b/README.md new file mode 100644 index 0000000..6873223 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/_includes/footer.html b/_includes/footer.html index 145e504..92e7499 100644 --- a/_includes/footer.html +++ b/_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> diff --git a/_includes/head.html b/_includes/head.html index d502704..1f4bb32 100644 --- a/_includes/head.html +++ b/_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> \ No newline at end of file +</head> 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 dc60ea6..021a001 100644 --- a/_includes/navbar.html +++ b/_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">×</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> \ No newline at end of file +</script> diff --git a/css/base.scss b/css/base.scss index 0734003..1964e33 100644 --- a/css/base.scss +++ b/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; -} +} \ No newline at end of file diff --git a/css/mobile.css b/css/mobile.css index 88c0f1a..8136797 100644 --- a/css/mobile.css +++ b/css/mobile.css @@ -10,202 +10,348 @@ .container { padding-left: 15px; padding-right: 15px; + max-width: 100%; } - /* Pre-nav and Navigation */ + /* Pre-nav and Navigation - Fixed positioning with LEFT ALIGNMENT */ .pre-nav, .pre-footer { 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, .pre-footer .brand { - display: block; + display: flex; float: none; - text-align: center; + text-align: left; padding: 10px 0; + position: relative; + width: auto; + align-items: center; + flex-shrink: 0; } - .pre-nav .social, - .pre-footer .social { - display: block; - float: none; - text-align: center; - padding: 10px 0; - margin-top: 10px; + /* Logo and text container alignment */ + .pre-nav .brand .logo { + height: 50px; + margin-right: 15px; } - .pre-nav .social > *, - .pre-footer .social > * { - margin: 0 5px; + .pre-nav .name-container { + text-align: left; + padding-left: 10em; } .pre-nav .name-container .name { font-size: 16px; + margin: 0; } .pre-nav .name-container .desc { font-size: 12px; + margin: 0; } - .pre-nav .logo { - height: 50px; + .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; } - /* Mobile Toggle Button Styles */ .navbar-toggle { position: absolute; right: 15px; - top: 25px; + top: 50%; transform: translateY(-50%); border: 1px solid #ddd; - background-color: transparent; - padding: 4px 6px; + background-color: #fff; + padding: 8px 10px; border-radius: 4px; cursor: pointer; - z-index: 1000; + 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: #888; + background-color: #333; border-radius: 1px; margin: 4px 0; transition: all 0.3s ease; } - /* Hide original navbar on mobile */ - .navbar { - display: none; + /* Hamburger animation */ + .navbar-toggle.active .icon-bar:nth-child(2) { + opacity: 0; } - /* Mobile Navigation Menu Styles */ - .mobile-nav { - display: none; - margin-top: 10px; - border-top: 1px solid #e5e5e5; - padding-top: 15px; - clear: both; + .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 { - display: block; - animation: slideDown 0.3s ease-out; + right: 0; } - @keyframes slideDown { - from { - opacity: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - transform: translateY(0); - } - } - - .mobile-nav ul { - list-style: none; - padding: 0; - margin: 0; - } - - .mobile-nav li { - margin-bottom: 0; - } - - .mobile-nav a { - display: block; - padding: 12px 15px; - text-decoration: none; - color: #333; + .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 a:hover { - background-color: #f5f5f5; - text-decoration: none; - color: #333; + .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 Dropdown Styles */ .mobile-nav .dropdown-menu { position: static; display: none; float: none; - width: auto; - margin-top: 0; + width: 100%; + margin: 0; background-color: #f9f9f9; border: none; border-radius: 0; box-shadow: none; - padding-left: 0; + 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-left: 30px; - padding-right: 30px; + padding: 15px 30px; background-color: #f9f9f9; - font-size: 13px; - text-align: center; + font-size: 15px; + color: #666; + font-weight: normal; + display: block; + width: 100%; + box-sizing: border-box; } .mobile-nav .dropdown-menu a:hover { - background-color: #f0f0f0; + background-color: #e9ecef; + color: #333; + padding-left: 35px; + } + + .mobile-nav .dropdown-toggle { + position: relative; + display: block; + width: 100%; } .mobile-nav .dropdown-toggle::after { - content: ' ▼'; - font-size: 10px; - float: right; - margin-top: 2px; - transition: transform 0.2s ease; + 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: rotate(180deg); + transform: translateY(-50%) rotate(180deg); } - /* Navbar */ - .navbar-nav { - margin: 0; - font-size: 14px; - } - - .navbar-nav > li { - display: block; - float: none; - margin-bottom: 0; - } - - .navbar-nav > li > a { - padding: 10px 15px; + /* Social Links in Mobile Nav */ + .mobile-nav-social { + padding: 20px; + border-top: 1px solid #eee; text-align: left; + background: #f8f9fa; + flex-shrink: 0; } - .navbar-collapse { - border-top: 1px solid #e5e5e5; - margin-top: 10px; - padding-top: 10px; + .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; } - /* Header Styles */ + .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; } @@ -214,11 +360,14 @@ 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 { @@ -229,6 +378,7 @@ #header .title { font-size: 20px; margin-bottom: 15px; + line-height: 1.3; } #header .cover-title-label { @@ -238,6 +388,7 @@ #header .cover-excerpt { font-size: 13px; line-height: 1.4; + margin-top: 10px; } /* Category Header */ @@ -246,9 +397,10 @@ margin-bottom: 15px; } - /* New Articles Section */ + /* New Articles Section - Fixed positioning */ #new-articles { margin-bottom: 30px; + position: relative; } #new-articles .container-title { @@ -257,25 +409,39 @@ 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 { @@ -285,29 +451,35 @@ } /* Article Horizontal Layout */ - .article-horiozntal { + .article-horizontal { height: auto; margin-bottom: 25px; + display: flex; + flex-direction: column; } - .article-horiozntal .img-container { + .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-horiozntal .details-container { - padding-left: 0; - } - - .article-horiozntal .title { - font-size: 16px; - line-height: 1.4; - } - - .article-horiozntal .excerpt { + .article-horizontal .excerpt { font-size: 13px; line-height: 1.4; margin-top: 10px; + color: #666; } /* Post Styles */ @@ -327,6 +499,8 @@ .post .cover-img { height: 200px; margin-bottom: 20px; + width: 100%; + object-fit: cover; } .post .header .title { @@ -351,6 +525,8 @@ #more-articles .article { height: 120px; margin-bottom: 15px; + border-radius: 6px; + overflow: hidden; } #more-articles .details { @@ -367,15 +543,16 @@ margin-top: 15px; } - .category-posts .article-horiozntal { + .category-posts .article-horizontal { margin-bottom: 20px; } /* Bootstrap Grid Fixes */ - .col-md-4, .col-md-8, .col-sm-3, .col-sm-6 { + .col-md-4, .col-md-8, .col-sm-3, .col-sm-6, .col-lg-4, .col-lg-8 { width: 100%; - padding-left: 0; - padding-right: 0; + padding-left: 15px; + padding-right: 15px; + margin-bottom: 20px; } /* Facebook Plugin Responsiveness */ @@ -388,11 +565,8 @@ width: 100% !important; } - /* Hide Facebook sidebar on mobile */ - .post .col-md-4 { - display: none; - } - + /* Hide sidebars on mobile */ + .post .col-md-4, .category-posts .col-md-4 { display: none; } @@ -401,6 +575,8 @@ .post .col-md-8, .category-posts .col-md-8 { width: 100%; + padding-left: 15px; + padding-right: 15px; } /* Images Responsiveness */ @@ -418,12 +594,13 @@ /* Footer */ footer { margin-top: 30px; - padding-top: 20px; + padding: 20px 15px; } .copyright { text-align: center; font-size: 12px; + padding-top: 15px; } /* Utility Classes */ @@ -435,23 +612,31 @@ display: block !important; } + .hidden-xs { + display: none !important; + } + + .visible-xs { + display: block !important; + } + /* Text adjustments */ - h1 { font-size: 24px; } - h2 { font-size: 20px; } - h3 { font-size: 18px; } - h4 { font-size: 16px; } - h5 { font-size: 14px; } - h6 { font-size: 13px; } + 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: 0; - margin-right: 0; + margin-left: -15px; + margin-right: -15px; } .outer-row { - margin-left: -5px; - margin-right: -5px; + margin-left: 0; + margin-right: 0; } /* Ensure no horizontal scroll */ @@ -459,6 +644,11 @@ max-width: 100%; overflow-x: hidden; } + + /* Fix container overflow */ + .container { + overflow-x: hidden; + } } /* Extra Small Devices (phones, less than 480px) */ @@ -473,6 +663,16 @@ padding-right: 10px; } + .pre-nav { + padding: 10px 0; + min-height: 70px; + } + + .pre-nav .brand .logo { + height: 45px; + margin-right: 12px; + } + #header .title { font-size: 18px; } @@ -481,6 +681,11 @@ font-size: 14px; } + #new-articles .container-title { + font-size: 16px; + padding: 8px 12px; + } + .post .header .title { font-size: 18px; } @@ -489,12 +694,8 @@ font-size: 15px; } - #new-articles .container-title { - font-size: 16px; - } - .container-title { - font-size: 20px; + font-size: 18px; } .pre-nav .name-container .name { @@ -505,10 +706,10 @@ font-size: 11px; } - /* Adjust togge button for smaller screens */ + /* Adjust toggle button for smaller screens */ .navbar-toggle { right: 10px; - padding: 3px 5px; + padding: 6px 8px; } .navbar-toggle .icon-bar { @@ -517,16 +718,337 @@ margin: 3px 0; } - /* Mobile nav adjustments for small screensss */ - .mobile-nav a { - padding: 10px 12px; - font-size: 14px; + /* 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-left: 25px; - padding-right: 25px; - font-size: 12px; + 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 */ + #yt-videos-container .video-caption { + padding: 15px; + background: #fff; + border-radius: 0 0 8px 8px; + margin-top: -5px; + box-shadow: 0 2px 8px rgba(0,0,0,0.1); + } + + #yt-videos-container .video-caption .caption { + font-size: 16px; + line-height: 1.4; + margin: 0; + color: #333; + font-weight: 600; + } + + /* Video List - Mobile specific*/ + #yt-videos-container .video-list { + list-style: none; + padding: 0; + margin: 0; + width: 100%; + } + + #yt-videos-container .video-list .list-video { + margin: 0 0 20px 0; + padding: 0; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 2px 6px rgba(0,0,0,0.1); + background: #fff; + display: block; + } + + #yt-videos-container .video-list .list-video a { + display: block; + text-decoration: none; + color: inherit; + } + + #yt-videos-container .video-list .list-video .row { + margin: 0; + display: flex; + flex-direction: column; + } + + #yt-videos-container .video-list .list-video .col-md-6 { + padding: 0; + margin: 0; + width: 100%; + } + + + #yt-videos-container .video-list .list-video .img-container { + width: 100%; + height: 150px; + overflow: hidden; + position: relative; + } + + #yt-videos-container .video-list .list-video .img-container img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + } + + #yt-videos-container .video-list .list-video .caption { + padding: 15px; + width: 100%; + } + + #yt-videos-container .video-list .list-video .caption span { + font-size: 14px; + line-height: 1.4; + color: #333; + display: block; + font-weight: 500; + } + /* Hover effects for video list items */ + #yt-videos-container .video-list .list-video:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0,0,0,0.15); + transition: all 0.3s ease; + } + + /* Facebook widget in video section */ + #yt-videos-container .fb-page { + width: 100% !important; + margin-top: 20px; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 2px 8px rgba(0,0,0,0.1); + } + + /* Remove any conflicting styles base.scss is too jumbled to figure out the conflicts */ + #yt-videos-container .center-both, + #yt-videos-container .img-center-fill, + #yt-videos-container .center-vertical { + position: static; + transform: none; + top: auto; + left: auto; + right: auto; + bottom: auto; + } + + /* 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 { + width: 100px; + height: 70px; + } + + #yt-videos-container .video-list .list-video .caption { + padding: 12px; + } + + #yt-videos-container .video-list .list-video .caption span { + font-size: 13px; } } \ No newline at end of file diff --git a/css/table.css b/css/table.css index aeb60f8..4e56f6e 100644 --- a/css/table.css +++ b/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; - } } \ No newline at end of file From 3adb946a8bc0e285ac387171428f4604052db70e Mon Sep 17 00:00:00 2001 From: officiallyutso <utsosarkar1@gmail.com> Date: Fri, 27 Jun 2025 23:00:46 +0530 Subject: [PATCH 7/8] fix: video list --- css/mobile.css | 270 ++++++++++++++++++++++++++++--------------------- index.html | 7 +- 2 files changed, 159 insertions(+), 118 deletions(-) diff --git a/css/mobile.css b/css/mobile.css index 8136797..77eebc7 100644 --- a/css/mobile.css +++ b/css/mobile.css @@ -27,25 +27,29 @@ .pre-nav .brand, .pre-footer .brand { - display: flex; + display: flex; float: none; text-align: left; padding: 10px 0; position: relative; - width: auto; + width: auto; align-items: center; - flex-shrink: 0; + flex-shrink: 0; + gap: 0px; /* Add gap between logo and text */ } - - /* Logo and text container alignment */ + + /* Logo and text container alignment - FIXED */ .pre-nav .brand .logo { height: 50px; - margin-right: 15px; + padding-left: 50px; + margin-right: 0; /* Remove margin, using gap instead */ + flex-shrink: 0; /* Prevent logo from shrinking */ } - + .pre-nav .name-container { - text-align: left; - padding-left: 10em; + text-align: left; + padding-left: 0; /* Remove excessive padding */ + flex-grow: 0; /* Don't grow */ } .pre-nav .name-container .name { @@ -904,151 +908,187 @@ border: 0; } - /* Video Caption - Mobile */ + /* Video Caption - Mobile - Fixed spacing */ #yt-videos-container .video-caption { - padding: 15px; - background: #fff; - border-radius: 0 0 8px 8px; - margin-top: -5px; - box-shadow: 0 2px 8px rgba(0,0,0,0.1); + 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: 16px; - line-height: 1.4; - margin: 0; - color: #333; - font-weight: 600; + 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*/ + /* Video List - Mobile specific - FORCED LAYOUT FIX */ #yt-videos-container .video-list { - list-style: none; - padding: 0; - margin: 0; - width: 100%; + 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; - padding: 0; - border-radius: 8px; - overflow: hidden; - box-shadow: 0 2px 6px rgba(0,0,0,0.1); - background: #fff; - display: block; + 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; - text-decoration: none; - color: inherit; + 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; - display: flex; - flex-direction: column; + margin: 0 !important; + display: block !important; + width: 100% !important; } #yt-videos-container .video-list .list-video .col-md-6 { - padding: 0; - margin: 0; - width: 100%; + 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%; - height: 150px; - overflow: hidden; - position: relative; + 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%; - height: 100%; - object-fit: cover; - display: block; + 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; - width: 100%; + 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: 14px; - line-height: 1.4; - color: #333; - display: block; - font-weight: 500; + 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; } - /* Hover effects for video list items */ - #yt-videos-container .video-list .list-video:hover { - transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0,0,0,0.15); - transition: all 0.3s ease; + + /* Ensure the link text shows */ + #yt-videos-container .video-list .list-video a { + color: #333 !important; + text-decoration: none !important; } - - /* Facebook widget in video section */ - #yt-videos-container .fb-page { + + #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; - margin-top: 20px; - border-radius: 8px; - overflow: hidden; - box-shadow: 0 2px 8px rgba(0,0,0,0.1); + height: 100% !important; } - - /* Remove any conflicting styles base.scss is too jumbled to figure out the conflicts */ - #yt-videos-container .center-both, - #yt-videos-container .img-center-fill, - #yt-videos-container .center-vertical { - position: static; - transform: none; - top: auto; - left: auto; - right: auto; - bottom: auto; + + /* 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 { - width: 100px; - height: 70px; - } - - #yt-videos-container .video-list .list-video .caption { - padding: 12px; - } - - #yt-videos-container .video-list .list-video .caption span { - font-size: 13px; + /* 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; + } } } \ No newline at end of file diff --git a/index.html b/index.html index 779196b..30c89a3 100644 --- a/index.html +++ b/index.html @@ -32,10 +32,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 %} From 147064b359e2047d93b5a1b2146c9fbb870b1b6e Mon Sep 17 00:00:00 2001 From: officiallyutso <utsosarkar1@gmail.com> Date: Sat, 28 Jun 2025 00:34:05 +0530 Subject: [PATCH 8/8] fix: minor logo bugs --- css/mobile.css | 124 ++++++++++++++++++++++++++++++++++++------------- index.html | 10 +++- 2 files changed, 100 insertions(+), 34 deletions(-) diff --git a/css/mobile.css b/css/mobile.css index 77eebc7..7761071 100644 --- a/css/mobile.css +++ b/css/mobile.css @@ -13,8 +13,7 @@ max-width: 100%; } - /* Pre-nav and Navigation - Fixed positioning with LEFT ALIGNMENT */ - .pre-nav, .pre-footer { + .pre-nav { height: auto; min-height: 80px; padding: 15px 0; @@ -25,8 +24,7 @@ justify-content: flex-start; } - .pre-nav .brand, - .pre-footer .brand { + .pre-nav .brand { display: flex; float: none; text-align: left; @@ -35,31 +33,35 @@ width: auto; align-items: center; flex-shrink: 0; - gap: 0px; /* Add gap between logo and text */ + gap: 10px; /* Reduced gap between logo and text */ } - /* Logo and text container alignment - FIXED */ + /* Logo - FIXED: Removed excessive padding */ .pre-nav .brand .logo { height: 50px; - padding-left: 50px; - margin-right: 0; /* Remove margin, using gap instead */ - flex-shrink: 0; /* Prevent logo from shrinking */ + padding-left: 15px; /* Changed from 50px to 15px */ + margin-right: 0; + flex-shrink: 0; } .pre-nav .name-container { text-align: left; - padding-left: 0; /* Remove excessive padding */ - flex-grow: 0; /* Don't grow */ + padding-left: 0; + flex-grow: 0; + margin-left: 0; /* Ensure no extra margin */ } .pre-nav .name-container .name { font-size: 16px; - margin: 0; + margin: 0; + line-height: 1; /* Tighter line height */ } .pre-nav .name-container .desc { - font-size: 12px; - margin: 0; + font-size: 20px; + margin: 0; + line-height: 1.2; /* Tighter line height */ + margin-top: 4px; /* Small gap between name and desc */ } .pre-nav .social { @@ -557,6 +559,7 @@ padding-left: 15px; padding-right: 15px; margin-bottom: 20px; + } /* Facebook Plugin Responsiveness */ @@ -595,17 +598,7 @@ object-fit: cover; } - /* Footer */ - footer { - margin-top: 30px; - padding: 20px 15px; - } - .copyright { - text-align: center; - font-size: 12px; - padding-top: 15px; - } /* Utility Classes */ .hidden-mobile { @@ -674,7 +667,22 @@ .pre-nav .brand .logo { height: 45px; - margin-right: 12px; + 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 { @@ -702,14 +710,6 @@ font-size: 18px; } - .pre-nav .name-container .name { - font-size: 14px; - } - - .pre-nav .name-container .desc { - font-size: 11px; - } - /* Adjust toggle button for smaller screens */ .navbar-toggle { right: 10px; @@ -1091,4 +1091,62 @@ 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/index.html b/index.html index 30c89a3..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>