feat: revamp a little

src/App.css

@@ -7,6 +7,7 @@ body {
   position: relative;
   z-index: 0;
   color: black;
+  text-align: center;
   overflow-wrap: anywhere;
   height: 100%;
 }
@@ -19,7 +20,6 @@ footer {
   max-width: 1280px;
   margin: 0 auto;
   padding: 8px;
-  text-align: center;
 }
 
 .grey {
@@ -29,7 +29,7 @@ footer {
 .hint {
   position: absolute;
   font-size: 80%;
-  padding: 4px;
+  padding: 8px;
   top: auto;
   left: 4px;
   bottom: auto;
@@ -42,14 +42,13 @@ h2,
 h3 {
   margin-top: 0px;
   margin-bottom: 0px;
-  padding: 4px 16px;
+  padding: 8px 16px;
 }
 
 .container {
   display: flex;
   flex-wrap: nowrap;
-  justify-content: space-evenly;
-  min-width: 737px;
+  width: min(96vw, 900px);
 }
 
 .dragbox {
@@ -59,6 +58,19 @@ h3 {
   height: 92%;
 }
 
+.box {
+  position: relative;
+  flex: 1;
+  &.one {
+    max-width: min(96%, 768px);
+    margin: 4px auto;
+  }
+  padding: 4px;
+  margin: 4px 0.5%;
+  border-style: solid;
+  border-color: black;
+}
+
 .reservoir {
   flex-direction: unset;
   flex-wrap: wrap;
@@ -66,28 +78,9 @@ h3 {
   width: 100%;
 }
 
-.box {
-  position: relative;
-  &.one {
-    max-width: min(80vw, 500px);
-  }
-  &.two {
-    min-width: 43%;
-    max-width: 20vw;
-  }
-  &.three {
-    min-width: 27%;
-    max-width: 10vw;
-  }
-  padding: 4px;
-  margin: 4px auto;
-  border-style: solid;
-  border-color: black;
-}
-
 .user {
-  max-width: 400px;
-  min-width: 200px;
+  max-width: 240px;
+  min-width: 100px;
   margin: 4px auto;
   .item {
     font-weight: bold;
@@ -106,27 +99,19 @@ h3 {
 
 .extra-margin {
   padding: 0px 8px;
+  margin: auto;
 }
 
 button {
   font-weight: bold;
   font-size: large;
-  color: ghostwhite;
+  color: aliceblue;
   background-color: black;
   border-radius: 1.2em;
   z-index: 1;
-  &:focus {
-    outline: black;
-  }
-  &:hover {
-    border-color: black;
-  }
 }
 
 @media only screen and (max-width: 768px) {
-  .container {
-    min-width: 96vw;
-  }
   .submit_text {
     display: none;
   }
@@ -156,18 +141,21 @@ button {
 .tablink {
   color: white;
   cursor: pointer;
-  padding: 8px 16px;
-  width: 48%;
+  flex: 1;
+  margin: 4px auto;
 }
 
 .navbar {
   button {
+    font-size: medium;
+    margin: 4px 0.5%;
+    padding-top: 4px;
+    padding-bottom: 4px;
     opacity: 50%;
     &:hover {
       opacity: 75%;
     }
   }
-  padding: 16px;
 }
 
 /* Style the tab content (and add height:100% for full page content) */
@@ -188,8 +176,7 @@ button {
 .logo {
   position: relative;
   text-align: center;
-  height: 196px;
-  margin: auto;
+  height: 160px;
   img {
     display: block;
     margin: auto;

src/Rankings.tsx

@@ -314,21 +314,21 @@ export default function Rankings() {
       {user.length === 1 && (
         <>
           <div className="container navbar">
-            <button
-              className="tablink"
-              id="ChemistryButton"
-              onClick={() => openPage("Chemistry", "aliceblue")}
-            >
-              🧪 Chemistry
-            </button>
-            <button
-              className="tablink"
-              id="MVPButton"
-              onClick={() => openPage("MVP", "aliceblue")}
-            >
-              🏆 MVP
-            </button>
-          </div>
+              <button
+                className="tablink"
+                id="ChemistryButton"
+                onClick={() => openPage("Chemistry", "aliceblue")}
+              >
+                🧪 Chemistry
+              </button>
+              <button
+                className="tablink"
+                id="MVPButton"
+                onClick={() => openPage("MVP", "aliceblue")}
+              >
+                🏆 MVP
+              </button>
+            </div>
 
           <div id="Chemistry" className="tabcontent">
             <Chemistry {...{ user, players }} />