c0.1.131 Awards Box Refactor

static/style.css

@@ -575,13 +575,15 @@ b {
 .awards-box {
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: center;
+  align-items: center;
+  align-content: center;
   border-style: solid;
   border-radius: 10px;
   border-width: 2px;
   padding: 5px;
   padding-bottom: 0px;
+  margin-bottom: 20px;
 }
 
 /* --------------------------------------------------------------------------- */

wiki/pages/awards.html

@@ -8,33 +8,48 @@
     class="reveal-on-scroll">
 
 <br>
-<p class="display-4">Gold medal 🥇</p>
-
-<h1>Nominations</h1>
 
+<h1>Medals</h1>
 <div class="awards-box reveal-on-scroll">
-    <img src="/static/assets/awards/track-foodandnutrition.svg" alt="Track Prize" width="50px">
-    <h2 class="reveal-on-scroll">Best Track Prize | Food and Nutrition</h2>
+    <p class="display-4">Gold medal 🥇</p>
 </div>
 
+<h1>Track Awards</h1>
 <div class="awards-box reveal-on-scroll">
-    <img src="/static/assets/awards/software-tool.svg" alt="Track Prize" width="50px">
-    <h2 class="reveal-on-scroll">Best Software Tool</h2>
-</div>
+    <img src="/static/assets/awards/track-foodandnutrition.svg" alt="Track Prize" width="70px">
+    <h2 class="reveal-on-scroll">Best Track Prize | Food and Nutrition</h2>
 
-<div class="awards-box reveal-on-scroll">
-    <img src="/static/assets/awards/education.svg" alt="Track Prize" width="50px">
-    <h2 class="reveal-on-scroll">Best Education</h2>
 </div>
 
-<div class="awards-box reveal-on-scroll">
-    <img src="/static/assets/awards/presentation.svg" alt="Track Prize" width="50px">
-    <h2 class="reveal-on-scroll">Best Presentation</h2>
-</div>
+<h1>Nominations</h1>
 
-<div class="awards-box reveal-on-scroll">
-    <img src="/static/assets/awards/wiki.svg" alt="Track Prize" width="50px">
-    <h2 class="reveal-on-scroll">Best Wiki</h2>
+<div class="row">
+    <div class="col">
+        <div class="awards-box reveal-on-scroll">
+            <img src="/static/assets/awards/software-tool.svg" alt="Best Software Tool" width="70px">
+            <h2 class="reveal-on-scroll">Best Software Tool</h2>
+        </div>
+    </div>
+    <div class="col">
+        <div class="awards-box reveal-on-scroll">
+            <img src="/static/assets/awards/education.svg" alt="Best Education" width="70px">
+            <h2 class="reveal-on-scroll">Best Education</h2>
+        </div>
+    </div>
+</div>
+<div class="row">
+    <div class="col">
+        <div class="awards-box reveal-on-scroll">
+            <img src="/static/assets/awards/presentation.svg" alt="Best Presentation" width="70px">
+            <h2 class="reveal-on-scroll">Best Presentation</h2>
+        </div>
+    </div>
+    <div class="col">
+        <div class="awards-box reveal-on-scroll">
+            <img src="/static/assets/awards/wiki.svg" alt="Best Wiki" width="70px">
+            <h2 class="reveal-on-scroll">Best Wiki</h2>
+        </div>
+    </div>
 </div>
 
 {% endblock %}
\ No newline at end of file