Improve site layout and center content across mobile and desktop views

Updates CSS to center content and icons on various pages (competitions, contact, contributors, sponsors) and adjusts horizontal rule styling. Modifies HTML structure in competitions.html for better content organization.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 5e584ab0-c340-4432-97ef-1972582b60e9
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 07c2b9b6-4a76-4da2-ad04-fcaacb16832a
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/5e584ab0-c340-4432-97ef-1972582b60e9/SuPUNrT

static/css/styles.css

@@ -428,8 +428,9 @@ hr {
     transform: translate(-50%, -50%);
     z-index: 2;
     max-width: 800px;
-    width: 90%;
+    width: 88%;
     text-align: center;
+    padding: 0 16px;
 }
 
 .hero-title {
@@ -477,7 +478,10 @@ hr {
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 16px;
     padding: 32px;
-    text-align: left;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .stats-icon {
@@ -486,7 +490,7 @@ hr {
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 16px;
+    margin: 0 auto 16px auto;
     color: var(--white);
 }
 

templates/competitions.html

@@ -18,6 +18,7 @@
                 <h1 class="heading" id="comp">Competition log</h1>
                 <hr id="comp-hr">
 
+                <div class="content-container">
                     {% for season, comps in competitions_by_season.items() %}
                 <h1 id="{{ season.replace(' ', '') }}" class="competition-year">{{ season }}</h1>
 
@@ -51,6 +52,7 @@
                     {% endfor %}
 
                     {% endfor %}
+                </div>
 
             </div>
         </div>

templates/contact.html

@@ -8,6 +8,8 @@
         <br>
         <h1 class="heading" id="spon"><span class="emoji contact">Contact</span></h1>
         <hr>
+        <div class="team-info">
+            <div class="content-container">
                 <p class="info">🌐 you can find us on several platforms! 🌐</p>
                 <div class="contact-container">
                     <div class="card-container">
@@ -29,5 +31,7 @@
                     </div>
                 </div>
             </div>
+        </div>
+    </div>
 
 {% endblock %}

templates/contributors.html

@@ -36,6 +36,8 @@
         <br>
         <h1 class="heading"><span class="emoji sponsors" id="team">Our mentors and coaches</span></h1>
         <hr>
+        <div class="team-info">
+            <div class="content-container">
                 <p class="info">❤️ meet our amazing coach and mentors! ❤️</p>
                 <div class="members-container">
             {% for mentor in mentors %}
@@ -48,8 +50,12 @@
                 </div>
                 {% endfor %}
                 </div>
+            </div>
+        </div>
         <h1 class="heading"><span class="emoji team" id="team">Our team</span></h1>
         <hr>
+        <div class="team-info">
+            <div class="content-container">
                 <p class="info">⭐ meet our amazing team! ⭐</p>
 
                 <div class="members-container">
@@ -63,6 +69,8 @@
                 </div>
                 {% endfor %}
                 </div>
+            </div>
+        </div>
 
     </div>
 

templates/sponsors.html

@@ -8,6 +8,8 @@
         <br>
         <h1 class="heading" id="spon"><span class="emoji sponsors">Sponsors</span></h1>
         <hr>
+        <div class="team-info">
+            <div class="content-container">
                 <p class="info">❤️ companies of various sizes sponsor our initiatives. ❤️</p>
                 
                 <div class="sponsors-container">
@@ -21,6 +23,8 @@
                     {% endfor %}
                     </div>
                 </div>
+            </div>
+        </div>
 
     </div>