Fix grants tables (#411)

Author: JoelMarcey

grants.njk

@@ -51,29 +51,41 @@ The 2023 Fellowship application is now open through June 30!
   box-sizing: border-box;
 }
 
-.box {
-  display: table-cell;
+/* Create three equal columns that floats next to each other */
+.statement {
+  float: left;
   width: 33.33%;
-  padding: 50px;
+  padding: 10px;
 }
 
-.clearfix::mission {
+/* Clear floats after the columns */
+.mission:after {
   content: "";
-  clear: both;
   display: table;
+  clear: both;
+}
+
+/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
+@media screen and (max-width: 600px) {
+  .statement {
+    width: 100%;
+  }
 }
 
 </style>
 
 <div class="mission">
-  <div class="box" style="background-color:#F5D7C5">
-  <center><p><u>SUPPORT THE MAINTAINERS OF RUST.</u></center></p><p><i>We know that many people have volunteered significant time to help make Rust what it is today. We hope that our funding will go some way in acknowledging their efforts and rewarding their future contributions.</i></p>
+  <div class="statement">
+  <h3>SUPPORT THE MAINTAINERS OF RUST.</h3>
+  <p><i>We know that many people have volunteered significant time to help make Rust what it is today. We hope that our funding will go some way in acknowledging their efforts and rewarding their future contributions.</i></p>
   </div>
-  <div class="box" style="background-color:#EAA681">
-  <center><p><u>NURTURE THE COMMUNITY OF RUST USERS.</u></center></p><p><i>By supporting contributors across the world, we hope to support the diversity and health of the Rust community and create more opportunities for contributors of all backgrounds.</p></i>
+  <div class="statement">
+  <h3>NURTURE THE COMMUNITY OF RUST USERS.</h3>
+  <p><i>By supporting contributors across the world, we hope to support the diversity and health of the Rust community and create more opportunities for contributors of all backgrounds.</p></i>
   </div>
-  <div class="box" style="background-color:#F5D7C5">
-  <center><p><u>ENABLE THE FURTHER INNOVATION OF RUST.</center></p></u><p><i>By rewarding and supporting Rust community members' innovative ideas, our grants serve as a strategic investment in the long-term growth and advancement of the Rust ecosystem.</p></i>
+  <div class="statement">
+  <h3>ENABLE THE FURTHER INNOVATION OF RUST.</h3>
+  <p><i>By rewarding and supporting Rust community members' innovative ideas, our grants serve as a strategic investment in the long-term growth and advancement of the Rust ecosystem.</p></i>
   </div>
   <p>&nbsp;</p>
 <hr>
@@ -131,7 +143,7 @@ The 2023 Fellowship application is now open through June 30!
 
 <center><style>
   .bordered2 {
-    margin: 10px; 
+    margin: 10px;
     width: 600px;
     max-width: 100%;
     text-align: left;
@@ -152,7 +164,7 @@ The 2023 Fellowship application is now open through June 30!
 
 <center><style>
   .bordered3 {
-    margin: 10px; 
+    margin: 10px;
     width: 600px;
     max-width: 100%;
     text-align: left;
@@ -173,7 +185,7 @@ The 2023 Fellowship application is now open through June 30!
 
 <center><style>
   .bordered4 {
-    margin: 10px; 
+    margin: 10px;
     width: 600px;
     max-width: 100%;
     text-align: left;

grants/fellowships.md

@@ -65,30 +65,42 @@ tags:
   box-sizing: border-box;
 }
 
-.box9 {
-  display: table-cell;
+/* Create three equal columns that floats next to each other */
+.benefit {
+  float: left;
   width: 33.33%;
-  padding: 50px;
+  padding: 10px;
 }
 
-.clearfix::benefits {
+/* Clear floats after the columns */
+.benefits:after {
   content: "";
-  clear: both;
   display: table;
+  clear: both;
+}
+
+/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
+@media screen and (max-width: 600px) {
+  .benefit {
+    width: 100%;
+  }
 }
 </style>
 
 <div class="benefits">
-  <div class="box9" style="background-color:#F5D7C5">
-  <center><p> A monthly stipend of $1,000 USD per month for 12 months.</p>
-  </div>
-  <div class="box9" style="background-color:#EAA681">
-  <center><p>An allowance of up to $2,000 to support travel to relevant Rust events.</p>
+  <div class="benefit">
+    <h3>Stipend</h3>
+    <p>A monthly stipend of $1,000 USD per month for 12 months.</p>
   </div>
-  <div class="box9" style="background-color:#F5D7C5">
-  <center><p>Up to $2,000 towards training and skills development.</p>
+  <div class="benefit">
+    <h3>Travel Budget</h3>
+    <p>An allowance of up to $2,000 to support travel to relevant Rust events.</p>
   </div>
+  <div class="benefit">
+    <h3>Training Allowance</h3>
+    <p>Up to $2,000 towards training and skills development.</p>
   </div>
+</div>
 <br>
 &nbsp;
 <br>
@@ -133,7 +145,7 @@ tags:
 
 <style>
   .bordered2 {
-    margin: 10px; 
+    margin: 10px;
     width: 100%;
     max-width: 100%;
     text-align: left;
@@ -152,7 +164,7 @@ The Security Fellow will have the opportunity to research and implement detectio
 
 <style>
   .bordered3 {
-    margin: 10px; 
+    margin: 10px;
     width: 100%;
     max-width: 100%;
     text-align: left;
@@ -171,7 +183,7 @@ The crates.io Fellow will have the opportunity to develop a comprehensive unders
 
 <style>
   .bordered4 {
-    margin: 10px; 
+    margin: 10px;
     width: 100%;
     max-width: 100%;
     text-align: left;
@@ -190,7 +202,7 @@ The Infrastructure Fellow will be responsible for developing a comprehensive und
 
 <style>
   .bordered5 {
-    margin: 10px; 
+    margin: 10px;
     width: 100%;
     max-width: 100%;
     text-align: left;
@@ -249,13 +261,13 @@ The Compiler Fellow will develop a comprehensive understanding of the Rust compi
   text-align: left;
   margin: 100px;
   }
-  
+
 .details p {
   margin-bottom: 1em;
   line-height: normal;
 }
     </style>
-    
+
   <div class="details">
   <details>
   <summary>How long does the program last?</summary>
@@ -397,4 +409,4 @@ The Compiler Fellow will develop a comprehensive understanding of the Rust compi
 
 <center><p>... and by the companies and individuals who contribute through our <a href="https://github.com/sponsors/rustfoundation">GitHub Sponsors</a> page.</p></center>
 
-<center><p><i>If your organization is interested in supporting the future of Rust’s talent and innovation through the Community Grants Program, please email us at <a href="mailto:[email protected]">[email protected]</a>. Donations in any amount are greatly appreciated.</i></p></center>
+<center><p><i>If your organization is interested in supporting the future of Rust’s talent and innovation through the Community Grants Program, please email us at <a href="mailto:[email protected]">[email protected]</a>. Donations in any amount are greatly appreciated.</i></p></center>