the alignment on the alumni buttons was irking me - think i fixed it (#…

…61) * testing * sda * new leadership pics minus NCV * updated instr. for vs code & pic reqs. * fixed weird spacing in chapter_leadership.html * changed the alumni buttons to use the flexbox sys --------- Co-authored-by: cmatulen <[email protected]>
purduekkpsi · Jan 30, 2024 · 5856280 · 5856280
1 parent 9b842ec
commit 5856280
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 18 deletions.
diff --git a/alumni.html b/alumni.html
@@ -18,23 +18,23 @@ <h1 class="blue">Gamma Pi Alumni</h1>
 
             <div class="w3-container w3-padding-32 w3-center" id="darts" style="background-color: #DFDFDF;  border-top: 2px solid #09268a; border-bottom: 2px solid #09268a;">
                 <div class="dart-bgrid">
-                    <button class="w3-button w3-section dart-button" onclick="current()" style="grid-column: 1 / 2; grid-row: 1 / 2">
+                    <button class="w3-button w3-col dart-button" onclick="current()" >
                         <i class="fa-solid fa-file-lines"></i>&ensp; Current Dart Issue
                     </button>
 
-                    <button class="w3-button w3-section dart-button" onclick="archives()"style="grid-column: 2 / 3; grid-row: 1 / 2">
+                    <button class="w3-button w3-col dart-button" onclick="archives()">
                         <i class="fa-solid fa-folder-open"></i>&ensp; Dart Archives
                     </button>
 
-                    <button class="w3-button w3-section dart-button" onclick="arrow()" style="grid-column: 1 / 2; grid-row: 2 / 3">
+                    <button class="w3-button w3-col dart-button" onclick="arrow()" >
                         <i class="fa-solid fa-arrow-right"></i>&ensp; Current Arrow Issue
                     </button>
 
-                    <button class="w3-button w3-section dart-button" onclick="ararchives()" style="grid-column: 2 / 3; grid-row: 2 / 3">
+                    <button class="w3-button w3-col dart-button" onclick="ararchives()" >
                         <i class="fa-solid fa-arrow-left"></i>&ensp; Arrow Archives
                     </button>
 
-                    <button class="w3-button w3-section gpaa-button" onclick="parent.open('https://www.gammapialumni.org/');">
+                    <button class="w3-button w3-col gpaa-button" onclick="parent.open('https://www.gammapialumni.org/');">
                         <i class="fa-solid fa-globe"></i>&ensp; GPAA Website
                     </button>
                 </div>

diff --git a/static/stylesheet.css b/static/stylesheet.css
@@ -319,52 +319,53 @@ article p {
 }
 
 .dart-bgrid{
-    display: grid;
+    display: flex;
     justify-content: center;
-    grid-auto-columns: min(33%, 400px);
+    flex-wrap: wrap;
     gap: 10px;
     padding-right: 5%;
     padding-left: 5%;
 
 }
 
 .dart-button {
-    font-size: min(20px, max(8.5px, 2vw));
+    font-size: min(20px, max(8.5px, 4vw));
     height: 75px;
+    width: max(300px, 25vw);
     background-color: #09268a;
     color: white;
+
 }
 
 .gpaa-button {
-    grid-column: 3 / 4;
-    grid-row: 1 / 2;
-    font-size: min(20px, max(8.5px, 2vw));
+    font-size: min(20px, max(8.5px, 4vw));
     height: 75px;
+    width: max(300px, 25vw);
     background-color: #09268a;
     color: white;
 }
 
 @media only screen and (max-width:600px) {
     .dart-bgrid{
-      display: grid;
+      display: flex;
       justify-content: center;
-      grid-auto-columns: min(50%, 400px);
+      flex-wrap: wrap;
       gap: 10px;
       padding-right: 5%;
       padding-left: 5%;
     }
     .gpaa-button {
-        grid-column: 1 / 3;
-        grid-row: 3 / 4;
-        font-size: min(20px, max(8.5px, 2vw));
+        font-size: min(20px, max(8.5px, 4vw));
         height: 50px;
+        width: max(200, 10vw);
         background-color: #09268a;
         color: white;
     }
 
     .dart-button {
-        font-size: min(20px, max(8.5px, 2vw));
+        font-size: min(20px, max(8.5px, 4vw));
         height: 50px;
+        width: max(300px, 25vw);
         background-color: #09268a;
         color: white;
     }
@@ -376,6 +377,7 @@ article p {
     max-width: 840px;
     height: 600px;
     margin: auto;
+    margin-top: 16px;
 }
 
 .footer-section {
@@ -441,4 +443,4 @@ body{
         margin-top:250px;
     }
 }
-*/
+*/