From eadec476ccf5ea7e7b80df2742ba5b6b8b08e840 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment?= <cpartiot@gmail.com>
Date: Wed, 12 Sep 2018 11:10:01 +0200
Subject: [PATCH] style: use grid

---
 src/scss/_members.scss | 106 ++++++++++++++++++++---------------------
 1 file changed, 51 insertions(+), 55 deletions(-)

diff --git a/src/scss/_members.scss b/src/scss/_members.scss
index 1df1e2b..d0d4e85 100644
--- a/src/scss/_members.scss
+++ b/src/scss/_members.scss
@@ -1,9 +1,13 @@
 #profiles-list {
   display: block;
   sib-form {
-    background-color: #f3f3f3;
+    display: block;
+    margin: 3em 0;
+    input[type=reset]{
+      display: none;
+    }
   }
-  div[name=header]{
+  div[name='header'] {
     border-top: 2em solid $col-alt-bg;
     border-bottom: 1px solid $col-alt-bg;
     padding-bottom: 1em;
@@ -11,64 +15,17 @@
     text-align: center;
   }
   > div {
-    display: flex;
-    flex-wrap: wrap;
-    label{
+    display: grid;
+    grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));
+    grid-gap: 1em;
+    label {
       display: none;
     }
     > sib-display {
-      flex: 1 1 220px;
-      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
       display: block;
-      margin-top: 40px;
-      margin: 0.5em;
-    }
-  }
-  sib-display-img {
-    display: block;
-    position: relative;
-    width: 80%;
-    height: 0;
-    padding-bottom: 80%;
-    margin: 10%;
-    img {
-      display: block;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      border-radius: 100%;
-      object-fit: cover;
-      object-position: center;
-    }
-  }
-
-  hdapp-userinfo{
-    display: block;
-    font-weight: bold;
-    margin: 0.5em;
-    ul,li{
-      display: block;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
-  }
-
-  div[name=pseudonym]{
-    color:grey;
-    font-size: 0.8em;
-    div{
-      display: inline;
-    }
-  }
-}
-
-@media (min-width: $md-with) {
-  #profiles-list {
-
-    sib-display {
-      cursor: pointer;
       position: relative;
+      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+      cursor: pointer;
 
       &::before,
       &::after {
@@ -82,6 +39,7 @@
         background: #eac1;
         content: '';
         pointer-events: none;
+        will-change: transform;
       }
 
       &::before {
@@ -103,4 +61,42 @@
       }
     }
   }
+  sib-display-img {
+    display: block;
+    position: relative;
+    width: 80%;
+    height: 0;
+    padding-bottom: 80%;
+    margin: 10%;
+    img {
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-radius: 100%;
+      object-fit: cover;
+      object-position: center;
+    }
+  }
+
+  hdapp-userinfo {
+    display: block;
+    font-weight: bold;
+    margin: 0.5em;
+    ul,
+    li {
+      display: block;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+  }
+
+  div[name='pseudonym'] {
+    color: grey;
+    font-size: 0.8em;
+    div {
+      display: inline;
+    }
+  }
 }