ultimate-jekyll-manager 0.0.204 → 0.0.206

package/CLAUDE.md

@@ -6,6 +6,8 @@ Ultimate Jekyll Manager is a template framework that consuming projects install
 
 **Important:** This is NOT a standalone project. You cannot run `npm start` or `npm run build` directly in this repository.
 
+**DO NOT run `npm start`, `npm run build`, or any dev server commands.** The user already has a development server running in a consuming project. Running these commands here would either fail or create duplicate servers unnecessarily.
+
 ## Project Structure
 
 ### Directory Organization
@@ -22,7 +24,7 @@ Ultimate Jekyll Manager is a template framework that consuming projects install
 
 ## Local Development
 
-The local development server URL is stored in `.temp/_config_browsersync.yml` in the consuming project's root directory. Read this file to determine the correct URL for browsing and testing.
+The local development server URL is stored in `.temp/_config_browsersync.yml` in the consuming project's root directory. Read this file to determine the correct URL for browsing and testing. By default, use "https://192.168.86.69:4000".
 
 ## Asset Organization
 
@@ -462,6 +464,26 @@ Ultimate Jekyll supports both light and dark modes. Use adaptive classes instead
 
 These classes automatically adapt to the current theme mode.
 
+### Cards Inside Colored Sections
+
+When placing cards inside sections with `bg-body-secondary` or `bg-body-tertiary`, cards will blend in because they share the same background color by default.
+
+**Solution:** Add `bg-body` to cards to create visual contrast:
+
+```html
+<!-- ❌ WRONG - Card blends with section background -->
+<section class="bg-body-secondary">
+  <div class="card">...</div>
+</section>
+
+<!-- ✅ CORRECT - Card stands out with contrasting background -->
+<section class="bg-body-secondary">
+  <div class="card bg-body">...</div>
+</section>
+```
+
+**Rule:** When a section uses `bg-body-secondary` or `bg-body-tertiary`, always add `bg-body` to child cards to ensure proper visual hierarchy.
+
 ## Page Loading Protection System
 
 Ultimate Jekyll prevents race conditions by disabling buttons during JavaScript initialization.

package/dist/assets/js/pages/pricing/index.js

@@ -325,6 +325,7 @@ function setupPromoCountdown() {
 function adjustNavbarOffset() {
   const $promoBanner = document.getElementById('pricing-promo-banner');
   const $navbarWrapper = document.querySelector('.navbar-wrapper');
+  const $firstSection = document.querySelector('main > section:first-of-type');
 
   if (!$promoBanner || !$navbarWrapper) {
     return;
@@ -334,5 +335,14 @@ function adjustNavbarOffset() {
   $promoBanner.removeAttribute('hidden');
 
   const bannerHeight = $promoBanner.offsetHeight;
-  $navbarWrapper.style.marginTop = `${bannerHeight - 10}px`;
+  const bannerOffset = bannerHeight - 10;
+
+  // Push navbar down to make room for banner
+  $navbarWrapper.style.marginTop = `${bannerOffset}px`;
+
+  // Also increase first section padding to account for banner
+  if ($firstSection) {
+    const currentPadding = parseFloat(getComputedStyle($firstSection).paddingTop);
+    $firstSection.style.paddingTop = `${currentPadding + bannerOffset}px`;
+  }
 }

package/dist/assets/themes/classy/css/layout/_general.scss

@@ -1,21 +1,11 @@
 // Classy General Layout
 // Standard spacing and layout rules
 
-// ============================================
-// Main Content Spacing
-// ============================================
-main {
-  padding-top: 6rem;
-  // padding-bottom: 2rem;
-
-  @media (min-width: 992px) {
-    padding-top: 3.5rem;
-  }
-}
-
 // ============================================
 // Section Spacing
 // ============================================
+// First section gets extra top padding to account for fixed navbar
+// This keeps section backgrounds flush with navbar (no gap/line)
 main {
   > section {
     padding-top: 4rem;
@@ -25,6 +15,16 @@ main {
       padding-top: 7rem;
       padding-bottom: 7rem;
     }
+
+    // First section: add navbar height to top padding
+    // Using :first-of-type so it works even if other elements (like banners) come before
+    &:first-of-type {
+      padding-top: 10rem; // 6rem navbar + 4rem section
+
+      @media (min-width: 992px) {
+        padding-top: 10.5rem; // 3.5rem navbar + 7rem section
+      }
+    }
   }
 }
 
@@ -129,11 +129,14 @@ main {
   }
 }
 
-// Vertical breakout - top (negative top margin to offset main padding of 6rem on mobile, 3.5rem on desktop)
+// Vertical breakout - top (pull section up behind navbar)
+// Use this when you want the section to extend behind the transparent navbar
 .section-breakout-top {
   margin-top: -6rem;
+  padding-top: 10rem !important; // 6rem navbar + 4rem section
 
   @media (min-width: 992px) {
     margin-top: -3.5rem;
+    padding-top: 10.5rem !important; // 3.5rem navbar + 7rem section
   }
 }

package/dist/defaults/dist/_layouts/themes/classy/frontend/pages/pricing.html

@@ -219,7 +219,7 @@ faqs:
 <!-- Promo Banner -->
 <div id="pricing-promo-banner" class="position-fixed top-0 start-0 w-100 text-light text-center bg-body animation-slide-down" style="z-index: 1050;" hidden>
   <div class="bg-primary-soft py-2 position-relative">
-    <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 mt-2 me-2" aria-label="Close" onclick="this.closest('#pricing-promo-banner').hidden=true;document.querySelector('.navbar-wrapper').style.marginTop=''"></button>
+    <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 mt-2 me-2" aria-label="Close" onclick="this.closest('#pricing-promo-banner').hidden=true;document.querySelector('.navbar-wrapper').style.marginTop='';document.querySelector('main > section:first-of-type').style.paddingTop=''"></button>
     <div class="container-fluid">
       <div class="d-flex align-items-center justify-content-center gap-3 flex-wrap pe-4">
         <span id="pricing-promo-badge" class="badge bg-gradient-rainbow px-2 py-1 fs-6 animation-wiggle">
@@ -240,7 +240,7 @@ faqs:
 </div>
 
 <!-- Hero Section -->
-<section class="mt-4">
+<section>
   <div class="container">
     <div class="row justify-content-center text-center">
       <div class="col-lg-10">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultimate-jekyll-manager",
-  "version": "0.0.204",
+  "version": "0.0.206",
   "description": "Ultimate Jekyll dependency manager",
   "main": "dist/index.js",
   "exports": {