web changes

site/css/responsive.css

@@ -108,7 +108,20 @@
     }
     
     .about-stats {
-        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        grid-template-columns: 1fr; /* Change to single column for vertical stacking */
+        gap: 25px; /* Increase gap for better separation */
+    }
+    
+    /* Fix the stat items to remove any rotation and ensure consistency */
+    .about-stats .stat-item {
+        max-width: 100%;
+        width: 100%;
+        margin: 0 auto;
+        transform: rotate(0deg) !important; /* Remove any rotation */
+    }
+    
+    .about-stats .stat-item:hover {
+        transform: scale(1.03) !important; /* Only scale on hover, no rotation */
     }
     
     .emoji-sticker {
@@ -139,6 +152,39 @@
         padding: 10px 10px 40px 10px;
         margin: 0 auto 20px;
     }
+    
+    /* Make hero elements stack vertically instead of horizontal scrolling */
+    .hero .flex-container {
+        flex-direction: column;
+        flex-wrap: wrap;
+        overflow-x: visible;
+        justify-content: center;
+        align-items: center;
+        gap: 25px;
+    }
+    
+    .hero .flex-container > div {
+        width: 100%;
+        max-width: 300px;
+        margin: 0 auto;
+    }
+    
+    /* Remove the horizontal scrollbar styling as it's no longer needed */
+    .hero .flex-container::-webkit-scrollbar {
+        display: initial;
+    }
+    
+    .hero .flex-container {
+        -ms-overflow-style: initial;
+        scrollbar-width: initial;
+    }
+    
+    /* Ensure post-its have consistent styling */
+    .hero .post-it {
+        width: 100% !important;
+        max-width: 100% !important;
+        box-sizing: border-box;
+    }
 }
 
 /* Small devices (landscape phones, 576px and up) */
@@ -198,7 +244,21 @@
     }
     
     .polaroid {
-        max-width: 180px;
-        padding: 8px 8px 35px 8px;
+        max-width: 220px;
+    }
+    
+    /* Adjust about stats spacing for smaller screens */
+    .about-stats {
+        gap: 20px; /* Slightly reduce gap on very small screens */
+    }
+    
+    .about-stats .stat-item {
+        padding: 15px; /* Reduce padding on very small screens */
+    }
+    
+    /* Further adjust sizes for smaller screens */
+    .hero .flex-container > div {
+        max-width: 100%;
+        width: 100%;
     }
 }

site/css/styles.css

@@ -393,6 +393,17 @@ section {
     border-radius: 2px;
 }
 
+/* Add base styles for the flex container */
+.hero .flex-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 40px;
+    width: 100%;
+    position: relative;
+}
+
 .hero p {
     font-size: 1.2rem;
     margin-bottom: 30px;

site/index.html

@@ -37,7 +37,7 @@
             <h1>The Bunker Operations</h1>
             <p>Community Strategy, Tactics, and Technology</p>
             
-            <div class="mt-12 flex flex-wrap justify-center gap-6" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 40px;">
+            <div class="mt-12 flex-container flex flex-wrap justify-center gap-6" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 40px;">
                 <!-- Polaroid-style logo moved to be in the same row -->
                 <div class="polaroid" style="margin: 0; max-width: 250px;">
                     <div class="polaroid-inner">
@@ -98,7 +98,7 @@
                         <li style="margin-bottom: 8px;"><span style="color: var(--primary-color); margin-right: 8px;">→</span>Corporation-free infrastructure</li>
                     </ul>
                     <div style="margin-top: 20px; text-align: left;">
-                        <a href="https://repo.bnkops.com/" style="display: inline-block;">View Project →</a>
+                        <a href="https://docs.bnkops.com/" style="display: inline-block;">View Project →</a>
                     </div>
                 </div>
                 <div class="service-card post-it post-it-white">
@@ -112,7 +112,7 @@
                         <li style="margin-bottom: 8px;"><span style="color: var(--primary-color); margin-right: 8px;">→</span>Save thousands in yearly bills</li>
                     </ul>
                     <div style="margin-top: 20px; text-align: left;">
-                        <a href="https://changemaker.bnkops.com/" style="display: inline-block;">View Project →</a>
+                        <a href="https://docs.bnkops.com/cm/" style="display: inline-block;">View Project →</a>
                     </div>
                 </div>
             </div>
@@ -157,7 +157,7 @@
                 </div>
             </div>
             <div style="margin-top: 40px; text-align: center;">
-                <a href="https://repo.bnkops.com/" class="btn btn-primary">Visit our repository</a>
+                <a href="https://docs.bnkops.com/" class="btn btn-primary">Visit our repository</a>
             </div>
         </div>
     </section>
@@ -180,9 +180,9 @@
                             <i class="fas fa-globe"></i>
                             changemaker.bnkops.com
                         </a>
-                        <a href="https://repo.bnkops.com/" style="display: flex; align-items: center; gap: 10px;">
+                        <a href="https://docs.bnkops.com/" style="display: flex; align-items: center; gap: 10px;">
                             <i class="fas fa-book"></i>
-                            repo.bnkops.com
+                            docs.bnkops.com
                         </a>
                     </div>