Sponsors: Significant page layout improvement

FTCTeam10298 · Sep 29, 2023 · e9bf36a · e9bf36a
1 parent a6b99c6
commit e9bf36a
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 26 deletions.
diff --git a/sponsors/index.html b/sponsors/index.html
@@ -19,7 +19,7 @@
     <div class="content">
 
         <!-- text -->
-        <div class="text">
+        <div class="text sponsors-page">
 
             <div id="markdown-content"></div>
             <script src="../markdown.js"></script>
@@ -31,34 +31,37 @@ <h2>Giga-Brain Sponsors</h2>
             <br>
             <div class="sponsors">
                 <a href="https://www.fathomwerx.com"><img src="images/fathomwerx.png"></a>
-                <br>
                 <a href="https://www.matterlabs.co"><img src="images/matterLabs.png"></a>
             </div>
             <hr>
 
             <h2>Big Brain Sponsors</h2>
             <br>
             <div class="sponsors">
-                <a href="https://ghaasfoundation.org"><img src="images/GHF_WebsiteHeaderLogo.svg"></a>
-                <br>
-                <a href="http://www.thesirosgroup.com"><img src="images/unnamed.jpg" style="width: 10em"></a>
-                <br>
-                <a href="https://www.tlcforsmiles.com"><img src="images/TLC_exact_text_exported.svg" style="width: 20em"></a>
-                <br>
-                <a href="https://www.holler.fyi"><img src="images/hollerLogo.png" style="padding: .5em; background-color: #008ECE"></a>
-                <br>
-                <a href="http://www.portercivil.com/HOME.html"><img src="images/porterAssociatesLogo.png" style="width: 20em"></a>
-                <br>
-                <a href="https://www.postageone.com"><img src="../images/postageOne.jpg"></a>
+                <a href="https://ghaasfoundation.org">
+                    <img src="images/GHF_WebsiteHeaderLogo.svg"></a>
+                <a href="https://www.thesirosgroup.com" style="width: 50%;">
+                    <img src="images/unnamed.jpg"></a>
+                <a href="https://www.tlcforsmiles.com">
+                    <img src="images/TLC_exact_text_exported.svg"></a>
+            </div>
+            <div class="sponsors">
+                <a href="https://www.holler.fyi">
+                    <img src="images/hollerLogo.png" style="padding: .5em; background-color: #008ECE"></a>
+                <a href="http://www.portercivil.com/HOME.html">
+                    <img src="images/porterAssociatesLogo.png"></a>
+                <a href="https://www.postageone.com">
+                    <img src="../images/postageOne.jpg"></a>
             </div>
             <hr>
 
             <h2>Large Brain Sponsors</h2>
             <br>
             <div class="sponsors">
-                <a href="https://www.harborfreight.com"><img src="images/harborfreight-logo.svg"></a>
-                <br>
-                <a href="https://www.revrobotics.com"><img src="../images/rev_logo.png"></a>
+                <a href="https://www.harborfreight.com" style="width: 30%;">
+                    <img src="images/harborfreight-logo.svg"></a>
+                <a href="https://www.revrobotics.com" style="width: 30%;">
+                    <img src="../images/rev_logo.png"></a>
             </div>
 
 
@@ -67,15 +70,6 @@ <h2>Large Brain Sponsors</h2>
                     max-width: 100%;
                     overflow-x: hidden;
                 }
-                .sponsors {
-                    display: block;
-                }
-                .sponsors>a {
-                }
-                .sponsors>a>img {
-                    margin-bottom: 1em;
-                    width: 15em;
-                }
             </style>
 
         </div>

diff --git a/style.css b/style.css
@@ -146,8 +146,23 @@ td>img {
     object-fit: contain;
 }
 
+.sponsors-page>h2 {
+    text-align: center;
+}
+
+.sponsors {
+    display:flex;
+    justify-content:center;
+    align-items:center;
+}
+
 .sponsors>a {
-    margin-right: 100%
+    width: 100%;
+    margin: 2em 3em;
+}
+
+.sponsors>a>img {
+    width: 100%
 }
 
 .bigB>a>img {