helldivers-theme 1.3.0 → 1.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ef9bcafbe4a33ebd2c37dae783b384aac9544d37e8a860f5ad21454f19ad9628
-  data.tar.gz: fc9b4d7014ce7ba2ad1cae32201dd23a16050062b9f527f10f44b87b6e5b75ed
+  metadata.gz: 5b5bda554e152f29f47be7aea6d2a941964831975adf96c27639e6d4371872c6
+  data.tar.gz: f73c87d6373f08b18ba26dd66709b372374d01b09b6a4fb850d23b89768f7adf
 SHA512:
-  metadata.gz: 210ac1d24abe43601df9802ebc697c2a89ce29a720b6f1337232ecbd916102b331497dd19b56934702b4d25b167218b5bbaf56c2cb0ac19abc29950e11d1fbce
-  data.tar.gz: b48aa79fbb784e68a79e9e33cd1d96f72f483fc841ce39e578b3121da6c19e85385bc70bf8abd943ae112255b910bd8fa4b0d2b49172ac2a75e74f7f374b417c
+  metadata.gz: 7619f455b07e1df748a5e85eba6b49f9b64808f97bca9ce1de1e5c7de531a9c4dbb70ca8dc47ffe090dae9c600c82a04b76396946d10074b98f69f7b6996e41d
+  data.tar.gz: 0053a94320a1a7e50383dbcb7bf9f642cc705e5c4b856cef546ea9c117bb165fe2fec3e2e8776f16ac3583fd8d91daf5ca0465b5038ca4cd5c277214431b51d3

data/_sass/_components.scss

@@ -362,17 +362,36 @@
   }
 
   .medal-badge {
-    background: linear-gradient(135deg, var(--hd-gold), #b8860b);
-    color: #000;
-    font-family: var(--font-head);
-    font-size: 0.65rem;
-    padding: 3px 6px;
-    border-radius: 2px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    box-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
-    border: 1px solid #fff;
-  }
+  display: inline-block;
+  
+  // TEXT STYLING
+  color: #000; // Black text for readability on gold
+  font-family: var(--font-head); // Your sci-fi header font
+  font-size: 0.75rem;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  text-align: center;
+  background: linear-gradient(135deg, $hd-gold, #b8860b); // Gold gradient
+  padding: 6px 10px;
+  margin: 4px;
+  border-radius: 2px;
+  
+  // BORDER & GLOW
+  border: 1px solid #fff; // White border as requested
+  box-shadow: 0 0 8px rgba(255, 215, 0, 0.5); // Gold glow
+  
+  // SCI-FI SHAPE (Optional angled corners)
+  clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
+  
+  // HOVER EFFECT
+  transition: all 0.3s ease;
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
+        filter: brightness(1.1);
+      }
+   }
 }
 
 .modal-footer {
@@ -572,6 +591,62 @@
   &:hover { transform: none; background: #2a2a2a; box-shadow: none; border-color: #444; }
 }
 
+// =========================================
+// HUB PAGE & HONEYCOMB GRID
+// =========================================
+
+.hub-container {
+  width: 100%; max-width: 1000px; margin: 0 auto;
+  display: flex; flex-direction: column; align-items: center; padding: 20px;
+}
+
+.honeycomb-grid {
+  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
+  justify-items: center; align-items: center; margin-top: 40px;
+  @media (max-width: 768px) { grid-template-columns: 1fr; gap: 40px; }
+}
+
+.hub-node {
+  cursor: pointer; transition: transform 0.3s ease;
+  &:hover { transform: scale(1.05); .hub-octagon { box-shadow: 0 0 25px var(--hd-cyan); border-color: var(--hd-cyan); } }
+  @media (min-width: 769px) {
+    &:nth-child(1) { transform: translateY(40px); }
+    &:nth-child(2) { transform: translateY(-20px); z-index: 2; }
+    &:nth-child(3) { transform: translateY(40px); }
+  }
+}
+
+.hub-octagon {
+  width: 180px; height: 180px; position: relative;
+  border: 3px solid var(--hd-gold); background: rgba(0,0,0,0.6);
+  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
+  overflow: hidden; transition: all 0.3s ease;
+  img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(40%); transition: 0.3s; }
+  &:hover img { filter: grayscale(0%); }
+  .hub-overlay {
+    position: absolute; bottom: 0; left: 0; width: 100%;
+    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
+    padding: 10px; text-align: center;
+    .hub-label { font-family: var(--font-head); font-size: 0.8rem; color: var(--hd-cyan); text-transform: uppercase; }
+  }
+}
+
+.launch-pad-section {
+  margin-top: 25px; padding: 20px;
+  background: rgba(0, 240, 255, 0.03); border: 1px dashed rgba(0, 240, 255, 0.3);
+  text-align: center;
+}
+
+.launch-btn {
+  display: flex; justify-content: center; align-items: center; gap: 10px;
+  width: 100%; padding: 15px; background: #000; color: #fff;
+  text-decoration: none; text-transform: uppercase; font-family: var(--font-head);
+  clip-path: polygon(5% 0, 100% 0, 100% 70%, 95% 100%, 0 100%, 0 30%);
+  border: 2px solid #333; transition: 0.3s;
+  &:hover { background: #111; transform: translateY(-3px); filter: brightness(1.2); }
+  .btn-icon { font-size: 1.4rem; }
+}
+
 // =========================================
 // 3. INTEL PAGE STYLES (DASHBOARD LAYOUT)
 // =========================================
@@ -1097,4 +1172,4 @@
     resize: vertical;
     min-height: 120px;
   }
-}
+}

data/_sass/_layout.scss

@@ -1,5 +1,3 @@
-// _sass/_layout.scss
-
 // =========================================
 // 1. MAIN WRAPPER & HEADER
 // =========================================
@@ -176,17 +174,19 @@
   &:has(> .enlist-container),
   &:has(> .intel-container),
   &:has(> .comms-container),
-  &:has(> .watch-container) {
+  &:has(> .watch-container),
+  &:has(> .hub-container) {
     grid-template-columns: 1fr;
     justify-items: center;
   }
 }
 
 // Force specific containers to span full width
-.enlist-container, 
-.intel-container, 
-.comms-container, 
-.watch-container {
+.enlist-container,
+.intel-container,
+.comms-container,
+.watch-container,
+.hub-container {
   grid-column: 1 / -1;
   width: 100%;
   max-width: 1200px;
@@ -225,35 +225,52 @@
   }
 }
 
+// =========================================
+// MOBILE FIX: HOME PAGE SPECIFIC
+// =========================================
+
 @media (max-width: 768px) {
-  // 1. FORCE SINGLE COLUMN GRID FOR HOME PAGE
+
+  // 1. Force the Main Grid to Single Column
   .terminal-card {
-    display: grid !important; // Keep as Grid, just change columns
-    grid-template-columns: 1fr !important; // Stack sidebar on top of content
-    gap: 20px;
-    padding: 15px;
+    display: flex !important;       // Switch from Grid to Flex for better stacking
+    flex-direction: column !important;
+    width: 100% !important;
+    padding: 15px !important;
   }
 
-  // 2. SIDEBAR FULL WIDTH
+  // 2. CRITICAL: Force Sidebar to Full Width
   .sidebar {
-    width: 100%;
-    margin-bottom: 25px;
-    // Optional: Add a bottom border to separate from content on mobile
-    border-bottom: 1px solid rgba($hd-cyan, 0.3);
+    width: 100% !important;         // Override any fixed pixel widths
+    max-width: 100% !important;     // Prevent stretching
+    float: none !important;         // Remove floating
+    margin-bottom: 25px;            // Add space before content area
+    border-bottom: 1px solid rgba(0, 240, 255, 0.2); // Optional visual separator
     padding-bottom: 20px;
   }
 
-  // 3. CONTENT AREA FULL WIDTH
+  // 3. CRITICAL: Force Content Area to Full Width
   .content-area {
-    width: 100%;
+    width: 100% !important;
+    max-width: 100% !important;
+    float: none !important;
+  }
+
+  // 4. Fix Internal Panels (RSS, Alerts, Strategems)
+  // Ensure nothing inside sidebar/content exceeds screen width
+  .panel-box, .alert-marquee, .stratagem-list {
+    width: 100% !important;
+    max-width: 100% !important;
+    box-sizing: border-box; // Ensures padding doesn't break width
+    overflow-x: hidden;     // Hide anything sticking out
   }
 
-  // 4. FIX MARQUEE
+  // Fix Marquee specifically so it doesn't push width
   .alert-marquee {
-    width: 100%;
-    overflow: hidden;
+    height: 40px; // Fixed height prevents expansion
   }
 
+
   // 5. FIX LEADER CARDS
   .command-grid {
     display: flex;
@@ -286,7 +303,7 @@
   .modal-stats-grid {
     grid-template-columns: 1fr !important; // Stack stats
   }
-  
+
   .modal-image-top {
     width: 120px;
     height: 120px;

data/assets/js/profile-modal.js

@@ -11,18 +11,17 @@ document.addEventListener('DOMContentLoaded', () => {
   let squadData = [];
 
   try {
-    // Parse the JSON from the hidden div
     squadData = JSON.parse(dataElement.textContent.trim());
     console.log("✅ Leader data loaded:", squadData);
   } catch (error) {
     console.error("❌ CRITICAL ERROR: Failed to parse leader data.");
     console.error("Raw content causing error:", dataElement.textContent);
     console.error("Error details:", error);
-    alert("Error loading profile data. Check browser console (F12).");
+    // Do not alert here if it's annoying, just log it. 
+    // If this triggers, the JSON in index.html is broken.
     return;
   }
 
-  // Define Open Function
   window.openLeaderProfile = function(name) {
     console.log("🔍 Searching for:", name);
     const data = squadData.find(l => l.name === name);
@@ -35,79 +34,99 @@ document.addEventListener('DOMContentLoaded', () => {
     console.log("✅ Found data:", data);
 
     // --- 1. Populate Basic Fields ---
-    document.getElementById('modal-name').innerText = data.name;
-    document.getElementById('modal-role').innerText = data.role;
-    document.getElementById('modal-img').src = data.image;
-    document.getElementById('modal-primary').innerText = data.primary || "Unknown";
-    document.getElementById('modal-stratagem').innerText = data.stratagem || "Unknown";
-    document.getElementById('modal-missions').innerText = data.missions || "0";
-    document.getElementById('modal-kd').innerText = data.kd || "0.0";
-    document.getElementById('modal-specialty').innerText = data.specialty || "None";
-
-    // --- 2. Populate Bio (NEW) ---
-    const bioElement = document.getElementById('modal-bio');
-    if (bioElement) {
-      bioElement.innerText = data.bio || "No service record available.";
+    const nameEl = document.getElementById('modal-name');
+    const roleEl = document.getElementById('modal-role');
+    const imgEl = document.getElementById('modal-img');
+    
+    if(nameEl) nameEl.innerText = data.name;
+    if(roleEl) roleEl.innerText = data.role;
+    if(imgEl) {
+        imgEl.src = data.image;
+        imgEl.onerror = () => console.error("❌ Image load failed:", data.image);
     }
-
-    // --- 3. Populate Medals (NEW) ---
-    const medalsContainer = document.getElementById('modal-medals');
-    if (medalsContainer && data.medals) {
-      medalsContainer.innerHTML = ''; // Clear old content
-      data.medals.forEach(medal => {
-        const badge = document.createElement('span');
-        badge.className = 'medal-badge';
-        badge.innerText = medal;
-        medalsContainer.appendChild(badge);
-      });
-    } else if (medalsContainer) {
-      medalsContainer.innerHTML = '<span style="color:#666; font-style:italic;">No decorations recorded.</span>';
+    
+    // --- 2. Populate Stats ---
+    const fields = {
+        'modal-primary': data.primary,
+        'modal-stratagem': data.stratagem,
+        'modal-missions': data.missions,
+        'modal-kd': data.kd,
+        'modal-specialty': data.specialty,
+        'modal-specialty-planet': data.specialty_planet
+    };
+
+    for (const [id, value] of Object.entries(fields)) {
+        const el = document.getElementById(id);
+        if(el) el.innerText = value || "--";
     }
 
-    // --- 4. Show Modal Animation ---
-    const modal = document.getElementById('leader-modal');
-    modal.style.display = 'flex';
+    // --- 3. Populate Bio (Single Definition) ---
+    const bioEl = document.getElementById('modal-bio');
+    if (bioEl) {
+        if (data.bio && data.bio.trim() !== "") {
+            bioEl.innerText = data.bio;
+            console.log("✅ Bio loaded");
+        } else {
+            bioEl.innerText = "No service record available.";
+        }
+    }
 
-    // Force browser reflow to ensure transition triggers
-    void modal.offsetWidth;
+    // --- 4. Populate Quote ---
+    const quoteEl = document.getElementById('modal-quote');
+    if(quoteEl) {
+        quoteEl.innerText = data.quote ? `"${data.quote}"` : "No recorded statement.";
+    }
 
-    modal.style.opacity = '1';
-    modal.querySelector('.modal-terminal').style.transform = 'scale(1)';
-    if (typeof SFX !== 'undefined') SFX.playOpen();
+    // --- 5. Populate Medals ---
+    const medalsContainer = document.getElementById('modal-medals');
+    if(medalsContainer) {
+        medalsContainer.innerHTML = ''; 
+        if(data.medals && Array.isArray(data.medals) && data.medals.length > 0) {
+            data.medals.forEach(medal => {
+                const badge = document.createElement('span');
+                badge.className = 'medal-badge';
+                badge.innerText = medal;
+                medalsContainer.appendChild(badge);
+            });
+        } else {
+            medalsContainer.innerHTML = '<span style="color:#666; font-style:italic;">No decorations.</span>';
+        }
+    }
 
-    // Prevent background scrolling
-    document.body.style.overflow = 'hidden';
+    // --- 6. Show Modal ---
+    const modal = document.getElementById('leader-modal');
+    if(modal) {
+        modal.style.display = 'flex';
+        void modal.offsetWidth; 
+        modal.style.opacity = '1';
+        modal.querySelector('.modal-terminal').style.transform = 'scale(1)';
+        if (typeof SFX !== 'undefined') SFX.playOpen();
+        document.body.style.overflow = 'hidden';
+    }
   };
 
-  // Define Close Function
   window.closeLeaderProfile = function(event) {
-    // Only close if clicking the overlay background or the X button
     if (event.target.id === 'leader-modal' || event.target.classList.contains('modal-close')) {
       const modal = document.getElementById('leader-modal');
+      if(!modal) return;
 
-      // Fade out
       modal.style.opacity = '0';
       modal.querySelector('.modal-terminal').style.transform = 'scale(0.9)';
       if (typeof SFX !== 'undefined') SFX.playClose();
 
-
-      // Wait for transition to finish before hiding display
       setTimeout(() => {
         modal.style.display = 'none';
-        document.body.style.overflow = 'auto'; // Restore scrolling
-        console.log("✅ Modal closed, clicks restored.");
-      }, 300); // Must match CSS transition time
+        document.body.style.overflow = 'auto';
+      }, 300);
     }
   };
 
-  // Escape Key Listener
   document.addEventListener('keydown', (e) => {
     if (e.key === "Escape") {
       const modal = document.getElementById('leader-modal');
-      if (modal.style.display === 'flex') {
-        // Simulate a click on the overlay to trigger close logic
+      if (modal && modal.style.display === 'flex') {
         window.closeLeaderProfile({ target: { id: 'leader-modal' } });
       }
     }
   });
-});
+});

data/index.html

@@ -4,7 +4,7 @@ title: Home
 ---
 
 <aside class="sidebar">
-    
+
     <!-- PANEL 1: BROADCAST -->
     <div class="panel-box">
         <h3>// EMERGENCY BROADCAST</h3>
@@ -49,7 +49,6 @@ title: Home
         {% for leader in site.data.squad.leaders %}
         <div class="leader-card">
             <div class="octagon-mask">
-                <!-- Checks if image exists, otherwise uses a placeholder -->
                 {% if leader.image contains 'http' %}
                     <img src="{{ leader.image }}" alt="{{ leader.name }}">
                 {% else %}
@@ -57,10 +56,117 @@ title: Home
                 {% endif %}
             </div>
             <div class="leader-info">
-                <h4>{{ leader.name }}</h4>
+                <!-- Added onclick and style for cursor -->
+                <h4 onclick="openLeaderProfile('{{ leader.name | escape }}')"
+                    style="cursor: pointer; transition: color 0.3s;"
+                    onmouseover="this.style.color='var(--hd-gold)'"
+                    onmouseout="this.style.color='var(--hd-white)'">
+                    {{ leader.name }}
+                </h4>
                 <span>{{ leader.role }}</span>
             </div>
         </div>
         {% endfor %}
     </div>
-</section>
+
+    <!-- HIDDEN DATA STORE FOR JAVASCRIPT -->
+    <div id="leader-data-json" style="display: none;">
+    [
+    {% for leader in site.data.squad.leaders %}
+    {
+        "name": "{{ leader.name | escape }}",
+        "role": "{{ leader.role | escape }}",
+        "image": "{% if leader.image contains 'http' %}{{ leader.image }}{% else %}{{ '/assets/img/leaders/' | append: leader.image | relative_url }}{% endif %}",
+        "primary": "{{ leader.profile.favorite_primary | escape }}",
+        "stratagem": "{{ leader.profile.favorite_stratagem | escape }}",
+        "missions": "{{ leader.profile.missions_led | escape }}",
+        "kd": "{{ leader.profile.k_d_ratio | escape }}",
+        "specialty": "{{ leader.profile.specialty | escape }}",
+        "specialty_planet": "{{ leader.profile.specialty_planet | escape }}",
+        "bio": "{{ leader.profile.bio | escape }}",
+        "quote": "{{ leader.profile.quote | escape }}",
+        "medals": {{ leader.profile.medals | jsonify }}
+    }{% unless forloop.last %},{% endunless %}
+    {% endfor %}
+    ]
+    </div>
+
+    <!-- LEADER PROFILE MODAL -->
+    <div id="leader-modal" class="modal-overlay" onclick="closeLeaderProfile(event)">
+    <div class="modal-terminal">
+        <button class="modal-close" onclick="closeLeaderProfile(event)">✕</button>
+
+        <!-- FIXED HEADER -->
+        <div class="modal-fixed-header">
+            <div class="modal-image-top">
+                <img id="modal-img" src="" alt="Leader Portrait">
+                <div class="image-glow"></div>
+            </div>
+            <div class="modal-header">
+                <h2 id="modal-name">COMMANDER NAME</h2>
+                <span id="modal-role" class="modal-role">ROLE</span>
+            </div>
+        </div>
+
+        <!-- SCROLLABLE BODY -->
+        <div class="modal-body">
+            <div class="modal-stats-grid">
+                <div class="stat-box">
+                    <span class="stat-label">PRIMARY WEAPON</span>
+                    <span class="stat-value" id="modal-primary">--</span>
+                </div>
+                <div class="stat-box">
+                    <span class="stat-label">FAVORITE STRATAGEM</span>
+                    <span class="stat-value" id="modal-stratagem">--</span>
+                </div>
+                <div class="stat-box">
+                    <span class="stat-label">MISSIONS LED</span>
+                    <span class="stat-value" id="modal-missions">--</span>
+                </div>
+                <div class="stat-box">
+                    <span class="stat-label">K/D RATIO</span>
+                    <span class="stat-value" id="modal-kd">--</span>
+                </div>
+                <div class="stat-box">
+                    <span class="stat-label">SPECIALTY</span>
+                    <span class="stat-value" id="modal-specialty">--</span>
+                </div>
+                <!-- NEW: SPECIALTY PLANET -->
+                <div class="stat-box">
+                    <span class="stat-label">OPERATIONS</span>
+                    <span class="stat-value" id="modal-specialty-planet" style="color: var(--hd-cyan);">--</span>
+                </div>
+            </div>
+
+            <!-- BIO SECTION -->
+            <div class="modal-bio-section">
+                <span class="stat-label">// SERVICE NOTES</span>
+                <p id="modal-bio" class="bio-text">Loading...</p>
+            </div>
+
+            <!-- NEW: QUOTE SECTION -->
+            <div style="margin-top: 20px; padding: 15px; background: rgba(255, 215, 0, 0.05); border-left: 3px solid var(--hd-gold); text-align: center;">
+                <span class="stat-label" style="display:block; margin-bottom: 8px;">// COMMANDER'S QUOTE</span>
+                <p id="modal-quote" style="font-family: var(--font-head); font-size: 1.2rem; color: var(--hd-gold); font-style: italic; margin: 0; text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);">
+                    "..."
+                </p>
+            </div>
+
+            <!-- MEDALS SECTION -->
+            <div class="modal-medals-section">
+                <span class="stat-label">// DECORATIONS</span>
+                <div id="modal-medals" class="medals-row">
+                    <!-- Medals injected here -->
+                </div>
+            </div>
+
+            <div class="modal-footer">
+                // END OF FILE // CLEARANCE LEVEL 5
+            </div>
+        </div>
+        <!-- END SCROLLABLE BODY -->
+
+    </div>
+</div>
+
+</section>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: helldivers-theme
 version: !ruby/object:Gem::Version
-  version: 1.3.0
+  version: 1.3.1
 platform: ruby
 authors:
 - DAR
@@ -86,6 +86,10 @@ files:
 - about.md
 - assets/css/style.scss
 - assets/img/bg/space-deck.jpg
+- assets/img/hubs/space-deck.jpg
+- assets/img/leaders/daggeractual.jpg
+- assets/img/logos/space-deck.jpg
+- assets/img/stratagems/space-deck.jpg
 - assets/js/main.js
 - assets/js/particles.js
 - assets/js/profile-modal.js