petites améliorations smartphones, logo et fond de header et footer gérés dans NodeData

3 files changed, 93 insertions, 6 deletions

diff --git a/public/css/body.css b/public/css/body.css
index c3f518a..a03510f 100644
--- a/public/css/body.css
+++ b/public/css/body.css
@@ -67,8 +67,12 @@ section > h3
         grid-template-columns: repeat(2, 1fr);
     }
 }
-@media screen and (max-width: 550px)
+@media screen and (max-width: 600px)
 {
+    article
+    {
+        /*margin: 5px;*/
+    }
     .grid_columns
     {
         display: block;
diff --git a/public/css/head.css b/public/css/head.css
index a55449a..be938bb 100644
--- a/public/css/head.css
+++ b/public/css/head.css
@@ -3,7 +3,6 @@ header
         text-align: center;
         /*padding-top: 5px;*/
         /*padding-bottom: 10px;*/
-        background-image: url('../assets/fond-piscine.jpg');
         background-size: cover; /* largeur du bloc_page  */
 }
 #nav_zone
@@ -14,14 +13,35 @@ header
         /*align-items: center;*/ /* conflit possible avec .social align-self */
         justify-content: center;
 }
+.nav_button{
+        display: none;
+}
 
 .header-content
 {
         padding: 20px 0;
         display: grid;
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: 1fr 1fr 1fr;
         align-items: end;
 }
+@media screen and (max-width: 1000px){
+        .header-content{
+                padding: 18px 0;
+        }
+}
+@media screen and (max-width: 450px){
+        .header-content
+        {
+                /*grid-template-columns: 1fr 2fr 1fr;*/
+                display: block;
+                padding: 18px;
+        }
+        .head_logo
+        {
+                display: none;
+        }
+}
+
 .site_title
 {
         background-color: #ffffff7f;
@@ -37,6 +57,12 @@ header h2
         font-size: medium; /* défaut = x-large */
         margin: 10px;
 }
+@media screen and (max-width: 1000px){
+        header h1, header h2
+        {
+                margin: 8px;
+        }
+}
 header img
 {
         vertical-align: bottom; /* supprime espace sous l'image */
@@ -50,7 +76,8 @@ header a
 }
 .social
 {
-        align-self: end;
+        /*align-self: end;*/
+        /*padding: 4px;*/
 }
 .social img
 {
diff --git a/public/css/nav.css b/public/css/nav.css
index 3ccdb1f..17b30c9 100644
--- a/public/css/nav.css
+++ b/public/css/nav.css
@@ -1,7 +1,8 @@
 /*-- menu principal --*/
 #nav_zone
 {
-        height: 33px;
+        /*height: 33px;*/
+        /*width: 100%;*/
 }
 .nav_main
 {
@@ -121,11 +122,13 @@ li:not(.current){
 nav > ul > li > ul
 {
         position: absolute; /* retire du flux, positionnement par rapport à la fenêtre */
+        margin-left: -7px; /* annuler le déplacement dû au padding: 7px; dans ".nav_main li" */
+        margin-top: 7px;
 }
 /* élément du menu survolé, le positionnement relatif en fait la référence du positionnement suivant */
 .drop-right
 {
-        position: relative;
+        /*position: relative;*/
 }
 .drop-right .sub-menu
 {
@@ -133,3 +136,56 @@ nav > ul > li > ul
         left: 100%;
         top: -3px; /* la bordure bleue fait 3px */
 }
+
+@media screen and (max-width: 1000px){
+        #nav_zone
+        {
+                /*height: 29px;*/
+        }
+        .nav_main li
+        {
+                padding: 5px;
+        }
+        .nav_main p
+        {
+                /*font-size: smaller;*/
+                font-size: 90%;
+        }
+        nav > ul > li > ul
+        {
+                margin-left: -5px;
+                margin-top: 5px;
+        }
+}
+@media screen and (max-width: 450px){
+        .nav_button
+        {
+                /*display: block;*/
+        }
+        #nav_zone
+        {
+                /*position: fixed;
+                justify-content: left;*/
+        }
+        .nav_main
+        {
+                /*top: 0px;*/
+        }
+        .nav_main > ul
+        {
+                /*flex-direction: column;*/
+        }
+        .nav_main li
+        {
+                /**/
+        }
+        .sub-menu p
+        {
+                font-size: smaller;
+        }
+        .drop-down > .sub-menu
+        {
+                /*flex-direction: row;*/
+                /*position: static;*/
+        }
+}
\ No newline at end of file