Mobile friendly

fiches/static/fiches/css/annuaire.css

@@ -28,65 +28,21 @@
   font-weight: 400;
   src: local("Source Code Pro Regular"), local("SourceCodePro-Regular"), url("../fonts/source-code-pro/source-code-pro-v12-latin-regular.woff2") format("woff2"), url("../fonts/source-code-pro/source-code-pro-v12-latin-regular.woff") format("woff");
 }
-#main-menu a a, #account-area a, a {
+a, #main-menu a a, #account-area a {
   text-decoration: none;
   color: #FFDC00;
 }
 
-#main-menu a a:hover, #account-area a:hover, a:hover,
+a:hover, #main-menu a a:hover, #account-area a:hover,
+a:active,
 #main-menu a a:active,
 #account-area a:active,
-a:active,
+a:focus,
 #main-menu a a:focus,
-#account-area a:focus,
-a:focus {
+#account-area a:focus {
   color: #ffbb00;
 }
 
-* {
-  box-sizing: border-box;
-}
-
-body, html {
-  height: 100%;
-}
-
-body {
-  display: grid;
-  grid-template-columns: auto auto;
-  grid-template-areas: "aside main";
-  background-color: #301827;
-  color: #FFFFFF;
-  font-family: "Fira Sans", "Roboto", sans-serif;
-}
-
-#aside {
-  grid-area: aside;
-  padding: 0 0 0 10vw;
-  background-color: #1f0e19;
-  box-shadow: 4px 0 0 rgba(31, 14, 25, 0.3);
-  z-index: 10;
-}
-
-#main {
-  grid-area: main;
-  padding: 0 10vw 0 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  background-color: #301827;
-  z-index: 5;
-}
-
-@media only screen and (max-width: 1200px) {
-  #header {
-    margin: 0;
-  }
-
-  #main {
-    margin: 0;
-  }
-}
 #menu {
   display: grid;
   float: right;
@@ -545,4 +501,65 @@ body {
   text-align: center;
 }
 
+* {
+  box-sizing: border-box;
+}
+
+body, html {
+  height: 100%;
+}
+
+body {
+  display: grid;
+  grid-template-areas: "aside main";
+  background-color: #301827;
+  color: #FFFFFF;
+  font-family: "Fira Sans", "Roboto", sans-serif;
+}
+
+#aside {
+  grid-area: aside;
+  padding: 0 0 0 10vw;
+  background-color: #1f0e19;
+  box-shadow: 4px 0 0 rgba(31, 14, 25, 0.3);
+  z-index: 10;
+}
+
+#main {
+  grid-area: main;
+  padding: 0 10vw 0 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: #301827;
+  z-index: 5;
+}
+
+@media only screen and (max-width: 900px) {
+  body {
+    grid-template-areas: "aside" "main";
+  }
+
+  #aside,
+#main {
+    padding: 0;
+  }
+
+  #content-home,
+#content-birthdays,
+#content-view-profile,
+#content-edit-profile {
+    width: auto;
+  }
+
+  #menu {
+    width: auto;
+    float: none;
+  }
+
+  #search-area {
+    width: auto;
+  }
+}
+
 /*# sourceMappingURL=annuaire.css.map */

fiches/static/fiches/scss/_common.scss

@@ -15,7 +15,6 @@ body, html {
 
 body {
     display: grid;
-    grid-template-columns: auto auto;
     grid-template-areas:
         "aside main";
 
@@ -42,13 +41,33 @@ body {
     z-index: 5;
 }
 
-@media only screen and (max-width: 1200px) {
-    #header {
-        margin: 0;
-    }
+// Pour les vues mobile
+@media only screen and (max-width: 900px) {
+  body {
+    grid-template-areas:
+        "aside"
+        "main";
+  }
+
+  #aside,
+  #main {
+    padding: 0;
+  }
+
+  #content-home,
+  #content-birthdays,
+  #content-view-profile,
+  #content-edit-profile {
+    width: auto;
+  }
+
+  #menu {
+    width: auto;
+    float: none;
+  }
+
+  #search-area {
+    width: auto;
+  }
 
-    #main {
-        margin: 0;
-    }
 }
-

fiches/static/fiches/scss/annuaire.scss

@@ -1,4 +1,4 @@
-@use "common";
 @use "header";
 @use "content";
 @use "footer";
+@use "common";