make css more better

the fabled "right way" i mentioned in this css file like six years ago was probably flexbox all along

maybe the real screen width is the friends we made along the way

docker-compose.yml

@@ -0,0 +1,9 @@
+# quick easy php for testing
+services:
+  cesiumone:
+    image: trafex/php-nginx
+    volumes:
+      - .:/var/www/html
+    ports:
+      - 8080:8080
+

index.php

@@ -20,6 +20,8 @@
                 buildContact("GitHub", "#494949", "CesiumCs", "https://github.com/CesiumCs");
                 buildContact("YouTube", "#674141", "Cesium", "https://www.youtube.com/channel/UCXPFpgA9G9_wtlyDeT7QAig");
                 buildContact("Telegram", "#006699", "unfunnycesium", "https://t.me/unfunnycesium");
+                buildContact("Fluxer", "#464478", "cesium#3691", false);
+                buildContact("Stoat", "#5a477d", "cesium#9904", false);
             ?>
         </div> <div style="clear: left;"></div>
 

styles.css

@@ -33,21 +33,18 @@ a {
 * { /* unfucks some stuff */
     box-sizing: border-box;
   }
-.contacts {
-  width: 550px;
-  margin:auto;
-  display: grid;
-  grid-template-areas: /* i know how to do it this way,    */
-    'one two three';   /* so shut up about the "right way" */
-  grid-gap: 10px;
-  padding: 10px;
-  grid-auto-columns: 1fr;
-  grid-auto-rows: 1fr;
 
+.contacts {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 580px;
+  margin: auto;
+  padding: 10px;
 }
 .contact {
-    float: left;
     width: 170px;
+    margin: 5px;
     padding: 15px;
     background-color: #232629;
     border-radius: 10px;
@@ -56,6 +53,7 @@ a {
     position: relative;
     transition: opacity .25s;
 }
+
   /* some hacky shit to make <div class=contact>s clickable. basically just makes
   an <a> in a <div class=contact> take up the full div */
 .contact a {
@@ -67,55 +65,31 @@ a {
   opacity: 0;
   position: absolute;
 }
+
 div.contact:hover {
   opacity: 1;
 }
-.apps {
-  width: 550px;
-  margin:auto;
-  display: grid;
-  grid-template-areas:
-    'one two three';
-  grid-gap: 10px;
-  padding: 10px;
-  grid-auto-columns: 1fr;
-  grid-auto-rows: 1fr;
 
-}
+@media screen and (max-width:900px) {
-.app {
-    float: left;
-    width: 170px;
-    padding: 15px;
-    background-color: #232629;
-    border-radius: 10px;
-    text-align: center;
-    opacity: .9;
-    position: relative;
-    transition: opacity .25s;
-}
-.app a {
-  z-index: 10;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  position: absolute;
-}
-div.app:hover {
-  opacity: 1;
-}
-@media screen and (max-width:500px) {
   .contacts {
-    width: 100%;
+    width: 580px;
-    grid-template-areas: 'one two';
-  }
-  .apps {
-    width: 100%;
-    grid-template-areas: 'one two';
   }
   :root {
-    width: 95%;
+    width: 90%;
+  }
+}
+@media screen and (max-width:700px) {
+  .contacts {
+    width: 380px;
+  }
+}
+@media screen and (max-width:450px) {
+  :root {
+    width: 100%;
+  }
+}
+@media screen and (max-width:390px) {
+  .contacts {
+    width: 200px;
   }
 }
-