CSS Chnges

Author: simplearyan

src/components/AutoSubjectGrid.astro

@@ -152,24 +152,42 @@ const gridTitle = isLessonLevel ? "Course Lessons" : "Course Subjects";
                 <h2 class="grid-title">Course Books & Resources</h2>
                 <div class="book-grid">
                     {textbooks.map((book) => {
-                        let coverColor = "#3b82f6"; // Default Blue
+                        const isMaths =
+                            book.slug.includes("maths-2") ||
+                            book.data.title.includes("Linear Algebra");
+                        const isStats =
+                            book.slug.includes("stats-2") ||
+                            book.data.title.includes("Probability");
+
                         let pattern = "circles";
+                        let fontStyle = "serif";
+                        let layoutStyle = "classic";
+                        let coverColor = book.data.cardColor || "#3b82f6";
 
-                        if (book.data.title.includes("Stats")) {
-                            coverColor = "#ec4899"; // Pink/Rose
+                        if (isMaths) {
                             pattern = "grid";
-                        } else if (book.data.title.includes("Calculus")) {
-                            coverColor = "#8b5cf6"; // Violet
+                            fontStyle = "sans";
+                            layoutStyle = "modern";
+                            coverColor = "#3b82f6"; // Ensure consistent blue
+                        } else if (isStats) {
                             pattern = "waves";
+                            fontStyle = "serif";
+                            layoutStyle = "classic";
+                            // coverColor usually handled by book.data.cardColor but fallback:
+                            if (!book.data.cardColor) coverColor = "#ec4899";
                         }
 
                         return (
                             <BookCard
-                                title={book.data.title}
+                                title={book.data.title
+                                    .replace("Book:", "")
+                                    .trim()}
                                 subtitle={book.data.description}
                                 href={`/education/${book.slug}`}
                                 coverColor={coverColor}
                                 pattern={pattern as any}
+                                fontStyle={fontStyle as any}
+                                layoutStyle={layoutStyle as any}
                             />
                         );
                     })}
@@ -219,12 +237,11 @@ const gridTitle = isLessonLevel ? "Course Lessons" : "Course Subjects";
     }
 
     .book-grid {
-        display: grid;
-        gap: 2rem;
-        /* Uniform grid with fixed minimum width to prevent squashed cards */
-        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 3rem;
         padding-top: 1rem;
-        justify-items: center; /* Center cards in their cells */
     }
 
     @media (max-width: 480px) {

src/components/BlogCard.astro

@@ -67,12 +67,12 @@ const cardStyle = lightColor
     /* Dark mode override */
     :global([data-theme="dark"]) .blog-card {
         background: var(--card-bg-dark, var(--color-surface));
-        border-color: rgba(
+        /* border-color: rgba(
             255,
             255,
             255,
             0.05
-        ); /* Subtle border on dark pastel */
+        ); Subtle border on dark pastel */
     }
 
     .blog-card:hover {
@@ -147,6 +147,7 @@ const cardStyle = lightColor
         flex-direction: column;
         flex-grow: 1;
         gap: 0.75rem;
+        background-color: var(--color-bg);
     }
 
     .meta {

src/components/EducationCard.astro

@@ -52,24 +52,19 @@ const isNew =
     data-tags={tags.join(",")}
     style={`--category-color: ${finalColor};`}
 >
-    {isNew && <span class="new-sticker">NEW</span>}
-    <span class="recently-opened-label">Opened Recently</span>
+    <!-- Top Accent Line is handled by CSS ::before -->
+
     <div class="card-header">
         <div class="institution-badge">
             <span class="institution">{institution}</span>
-
-            <span class="course-type" style={`color: ${finalColor}`}
-                >{courseType}</span
-            >
+            <span class="course-type">{courseType}</span>
         </div>
+        {isNew && <span class="new-indicator">NEW</span>}
     </div>
 
     <div class="card-body">
         <h3 class="title">{title}</h3>
-        <!-- <p class="description">{description}</p> -->
-<!-- 
-        <div class="tags">
-            {tags.slice(0, 3).map((tag) => <span class="tag">{tag}</span>)}
-        </div> -->
     </div>
+
+    <!-- Hover overlay handled by CSS ::after -->
 </a>

src/components/ads/InArticleAd.astro

@@ -15,9 +15,6 @@
         data-ad-format="fluid"
         data-ad-client="ca-pub-7993314093599705"
         data-ad-slot="8594941706"></ins>
-    <script is:inline>
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    </script>
 </div>
 
 <style>

src/pages/blog/[...slug].astro

@@ -313,8 +313,7 @@ const components = {
 
                 <script>
                     import { insertAd } from "../../scripts/insertAd";
-                    // Using requestAnimationFrame to ensure DOM is ready and layout is settled
-                     requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
                         insertAd('.prose', 'in-article-ad-source');
                     });
                 </script>

src/pages/index.astro

@@ -560,7 +560,7 @@ const posts = (await getCollection("blog"))
 		/* font-family: "Montserrat", sans-serif; */
 		/* font-family: "Playfair Display", serif; */
 		/* font-family: "Inter", sans-serif; */
-		font-family: var(--font-barlow);	
+		font-family: var(--font-barlow);
 		font-size: 0.9rem;
 		color: var(--color-primary);
 		font-weight: 700;
@@ -620,10 +620,10 @@ const posts = (await getCollection("blog"))
 	}
 
 	.books-grid {
-		display: grid;
-		grid-template-columns: repeat(4, 150px);
+		display: flex;
+		flex-wrap: wrap;
 		justify-content: center;
-		gap: 2rem;
+		gap: 3rem;
 	}
 
 	@media (max-width: 480px) {

src/scripts/insertAd.ts

@@ -8,22 +8,84 @@ export function insertAd(proseSelector: string, adContainerId: string) {
     if (!prose || !adPlaceholder || !adContent) return;
 
     const headings = prose.querySelectorAll('h2');
+    let primaryAdUsed = false;
 
-    // Rule 1: Insert after 3rd h2
+    // Rule 1: Insert before 3rd h2
     if (headings.length >= 3) {
         headings[2].insertAdjacentElement('beforebegin', adContent);
-        return;
+        primaryAdUsed = true;
+        try {
+            ((window as any).adsbygoogle = (window as any).adsbygoogle || []).push({});
+        } catch (e) {
+            console.error("AdSense push failed", e);
+        }
     }
 
-    // Rule 2 & 3: Fallback to paragraphs
-    const paragraphs = prose.querySelectorAll('p');
+    // Rule 2: Insert before last h2 if > 4 headings
+    // "more than 4 headings" usually means 5 or more.
+    if (headings.length > 5) {
+        const lastHeading = headings[headings.length - 1];
 
-    // Insert after 3rd paragraph
-    if (paragraphs.length >= 3) {
-        paragraphs[2].insertAdjacentElement('afterend', adContent);
+        if (primaryAdUsed) {
+            // Clone the ad for the second slot
+            const adClone = adContent.cloneNode(true) as HTMLElement;
+
+            // Reset the 'ins' element in the clone to ensure a fresh ad request
+            const ins = adClone.querySelector('ins');
+            if (ins) {
+                ins.removeAttribute('data-adsbygoogle-status');
+                ins.removeAttribute('data-ad-status');
+                ins.innerHTML = ''; // Clear any existing content/iframe
+            }
+
+            lastHeading.insertAdjacentElement('beforebegin', adClone);
+
+            // Trigger ad load for the new slot
+            try {
+                ((window as any).adsbygoogle = (window as any).adsbygoogle || []).push({});
+            } catch (e) {
+                console.error("AdSense push failed", e);
+            }
+        } else {
+            // Capture this edge case if logic changes, though currently covered by Rule 1
+            lastHeading.insertAdjacentElement('beforebegin', adContent);
+            primaryAdUsed = true;
+            try {
+                ((window as any).adsbygoogle = (window as any).adsbygoogle || []).push({});
+            } catch (e) {
+                console.error("AdSense push failed", e);
+            }
+        }
     }
-    // Fallback: Append to end if article is very short
-    else {
-        prose.appendChild(adContent);
+
+    // Fallback: Paragraphs (only if no ads inserted yet)
+    // The user said "also insert...". This implies the header rules function together.
+    // The paragraph rule is a fallback if "no heading tag is there" (from previous prompt).
+    // So if we inserted ANY ad in headers, we skip paragraphs.
+    if (!primaryAdUsed) {
+        const paragraphs = prose.querySelectorAll('p');
+
+        // Insert after 3rd paragraph
+        if (paragraphs.length >= 3) {
+            // Previous prompt said "after above 3rd paragraph" -> interpreted as after 3rd. 
+            // Wait, "after above 3rd paragraph" is ambiguous. "insert after above 3rd paragraph" -> maybe "insert after the paragraph that is above the 3rd one" (i.e. 2nd)? 
+            // Or "insert above 3rd paragraph" (before 3rd)?
+            // Code in Step 153 used `afterend` on paragraphs[2] (after 3rd).
+            // Let's stick to "After 3rd paragraph" as a reasonable default unless clarified.
+            // Actually, let's use 'beforebegin' on the 3rd to match the "above" sentiment of header rule?
+            // "if no heading tag is there then insert after above 3rd paragraph"
+            // "after above 3rd paragraph" -> literally could mean "after the 3rd paragraph". 
+            // Let's stick to paragraphs[2].afterend (after 3rd).
+            paragraphs[2].insertAdjacentElement('afterend', adContent);
+        }
+        // Fallback: Append to end
+        else {
+            prose.appendChild(adContent);
+        }
+        try {
+            ((window as any).adsbygoogle = (window as any).adsbygoogle || []).push({});
+        } catch (e) {
+            console.error("AdSense push failed", e);
+        }
     }
 }