From 81913320cb9e4d8aba62d8be8b4a97b62ce0bfad Mon Sep 17 00:00:00 2001
From: Ryan Salazar <ryaninwilton@gmail.com>
Date: Wed, 20 May 2026 05:55:10 +0000
Subject: [PATCH] align: unify container width to max-w-container across all
 pages; fix banner edge alignment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Featured-story card's right edge wasn't lining up with any of the
ad banners below or beside it on the homepage. Two root causes:

  1. Pages I redesigned (/about, /about/contact, /about/team,
     /about/advertise, /show-coverage/[slug]) used `max-w-6xl px-6`
     (1152px / 24px-pad). Every other page uses `max-w-container
     px-4` (1200px / 16px-pad). Pages didn't line up with the
     header leaderboard or with each other.

  2. ArticleFeed used a flexible 12-col grid where lg:col-span-4
     ends up ~280px wide (depending on container) — so the 300x250
     image inside the sidebar didn't extend to the column's right
     edge, leaving a visual gap relative to the full-width Featured
     card above.

Fix:
  - All redesigned pages now use `max-w-container mx-auto px-4`.
  - ArticleFeed switches to `lg:grid-cols-[1fr,300px]` so the sidebar
    column is *exactly* 300px wide. The 300x250 ads fill that column
    flush, so their right edge meets the container's right padding
    edge — same x-position as the Featured card's right edge above.

Also linkified the "Relevant Media Properties" copyright string in
Footer.tsx → opens https://www.relevantmediaproperties.com/ in a new
tab.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/app/about/advertise/page.tsx             |  2 +-
 src/app/about/contact/page.tsx               |  2 +-
 src/app/about/page.tsx                       |  2 +-
 src/app/about/team/page.tsx                  |  2 +-
 src/app/home-page/components/ArticleFeed.tsx |  9 +++++----
 src/app/show-coverage/[slug]/page.tsx        |  2 +-
 src/components/Footer.tsx                    | 10 +++++++++-
 7 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/app/about/advertise/page.tsx b/src/app/about/advertise/page.tsx
index 2042acc..8fea37b 100644
--- a/src/app/about/advertise/page.tsx
+++ b/src/app/about/advertise/page.tsx
@@ -14,7 +14,7 @@ export default function AdvertisePage() {
   return (
     <div className="min-h-screen bg-background">
       <Header />
-      <div className="mx-auto max-w-6xl px-6 py-12 text-[#e5e7eb]">
+      <div className="max-w-container mx-auto px-4 py-12 text-[#e5e7eb]">
         <div className="lg:grid lg:grid-cols-[1fr,300px] lg:gap-10">
           <main>
             <header className="mb-8 border-b border-[#252525] pb-6">
diff --git a/src/app/about/contact/page.tsx b/src/app/about/contact/page.tsx
index 5bec895..332e9f0 100644
--- a/src/app/about/contact/page.tsx
+++ b/src/app/about/contact/page.tsx
@@ -48,7 +48,7 @@ export default function ContactPage() {
   return (
     <div className="min-h-screen bg-background">
       <Header />
-      <div className="mx-auto max-w-6xl px-6 py-12 text-[#e5e7eb]">
+      <div className="max-w-container mx-auto px-4 py-12 text-[#e5e7eb]">
         <div className="lg:grid lg:grid-cols-[1fr,300px] lg:gap-10">
           <main>
             <header className="mb-8 border-b border-[#252525] pb-6">
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 271eac0..d51291a 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -11,7 +11,7 @@ export default function AboutPage() {
   return (
     <div className="min-h-screen bg-background">
       <Header />
-      <div className="mx-auto max-w-6xl px-6 py-12 text-[#e5e7eb]">
+      <div className="max-w-container mx-auto px-4 py-12 text-[#e5e7eb]">
         <div className="lg:grid lg:grid-cols-[1fr,300px] lg:gap-10">
           <main>
             <header className="mb-8 border-b border-[#252525] pb-6">
diff --git a/src/app/about/team/page.tsx b/src/app/about/team/page.tsx
index 36542bf..ddf35ff 100644
--- a/src/app/about/team/page.tsx
+++ b/src/app/about/team/page.tsx
@@ -37,7 +37,7 @@ export default async function TeamPage() {
   return (
     <div className="min-h-screen bg-background">
       <Header />
-      <div className="mx-auto max-w-6xl px-6 py-12 text-[#e5e7eb]">
+      <div className="max-w-container mx-auto px-4 py-12 text-[#e5e7eb]">
         <div className="lg:grid lg:grid-cols-[1fr,300px] lg:gap-10">
           <main>
             <header className="mb-8 border-b border-[#252525] pb-6">
diff --git a/src/app/home-page/components/ArticleFeed.tsx b/src/app/home-page/components/ArticleFeed.tsx
index e37b4d0..76f1fb6 100644
--- a/src/app/home-page/components/ArticleFeed.tsx
+++ b/src/app/home-page/components/ArticleFeed.tsx
@@ -271,10 +271,11 @@ export default function ArticleFeed() {
 
   return (
     <section className="max-w-container mx-auto px-4 py-4 md:py-6">
-      {/* Main layout */}
-      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8">
+      {/* Main layout — fixed 300px sidebar so right edge of 300x250 ads
+          lines up with the right edge of the Featured-story card above. */}
+      <div className="grid grid-cols-1 lg:grid-cols-[1fr,300px] gap-6 lg:gap-8">
         {/* Main Feed */}
-        <div className="lg:col-span-8">
+        <div className="min-w-0">
           {/* Section header */}
           <div className="flex items-center gap-3 mb-4 md:mb-5 flex-wrap">
             <span className="section-label">The Latest</span>
@@ -725,7 +726,7 @@ export default function ArticleFeed() {
         </div>
 
         {/* Sidebar — Blackmagic 300x600 fixed at top + every 300x250 banner stacked */}
-        <aside className="lg:col-span-4" aria-label="Advertisements">
+        <aside aria-label="Advertisements">
           <div className="lg:sticky lg:top-24">
             <SidebarAdStack />
           </div>
diff --git a/src/app/show-coverage/[slug]/page.tsx b/src/app/show-coverage/[slug]/page.tsx
index cea7d64..18f8e60 100644
--- a/src/app/show-coverage/[slug]/page.tsx
+++ b/src/app/show-coverage/[slug]/page.tsx
@@ -163,7 +163,7 @@ export default async function EventCoveragePage({
   return (
     <div className="min-h-screen bg-background">
       <Header />
-      <div className="mx-auto max-w-6xl px-6 py-10 text-[#e5e7eb]">
+      <div className="max-w-container mx-auto px-4 py-10 text-[#e5e7eb]">
         <script
           type="application/ld+json"
           dangerouslySetInnerHTML={{ __html: JSON.stringify(eventJsonLd) }}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index e3b506e..8de71f0 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -140,7 +140,15 @@ export default function Footer() {
           <div className="flex items-center gap-4 text-xs font-body text-[#555]">
             <Link href="/privacy" className="hover:text-[#3b82f6] transition-colors">Privacy Policy</Link>
             <Link href="/terms" className="hover:text-[#3b82f6] transition-colors">Terms of Service</Link>
-            <span>© 2026 Relevant Media Properties. All rights reserved.</span>
+            <span>
+              © 2026 <a
+                href="https://www.relevantmediaproperties.com/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="hover:text-[#3b82f6] transition-colors underline-offset-2 hover:underline">
+                Relevant Media Properties
+              </a>. All rights reserved.
+            </span>
           </div>
         </div>