From b55a029a5b4867349a172873d20a6ffd91c20e23 Mon Sep 17 00:00:00 2001 From: polo Date: Fri, 18 Jul 2025 15:57:57 +0200 Subject: =?UTF-8?q?petites=20am=C3=A9liorations=20smartphones,=20logo=20et?= =?UTF-8?q?=20fond=20de=20header=20et=20footer=20g=C3=A9r=C3=A9s=20dans=20?= =?UTF-8?q?NodeData?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/css/body.css | 6 ++++- public/css/head.css | 33 ++++++++++++++++++++++++--- public/css/nav.css | 60 +++++++++++++++++++++++++++++++++++++++++++++++-- public/js/main.js | 65 +++++++++++++++++++++++++++++++---------------------- 4 files changed, 131 insertions(+), 33 deletions(-) (limited to 'public') 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 diff --git a/public/js/main.js b/public/js/main.js index 6eb0162..2ffd33b 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -8,33 +8,6 @@ function newPassword(page, id = ''){ }, 0); } -// ouvrir/fermer les sous-menus avec écran tactile -document.addEventListener('DOMContentLoaded', () => { // sinon on ne trouve pas les boutons - document.querySelectorAll('.sub-menu-toggle').forEach(button => { - button.addEventListener('click', e => { - e.preventDefault(); - const li = button.parentElement; //
  • - - // fermer les autres sous-menus de même niveau - // :scope pour pouvoir utiliser > pour restreindre aux frères directs - li.parentElement.querySelectorAll(':scope > .drop-down, :scope > .drop-right').forEach(sibling => { - if(sibling !== li){ - sibling.classList.remove('open'); // fermer sous-menus frères - sibling.querySelectorAll('.drop-right').forEach(desc => { - desc.classList.remove('open'); // fermer sous-menus neveux - }); - } - }); - - if(!li.classList.toggle('open')){ // fermer sous-menu - li.querySelectorAll('.drop-right').forEach(desc => { - desc.classList.remove('open'); // fermer sous-menus enfants - }); - } - }); - }); -}); - function copyInClipBoard(link){ // une balise avec des attributs var element = document.createElement("input"); @@ -64,6 +37,44 @@ function toastNotify(message) { } +document.addEventListener('DOMContentLoaded', () => { // pour pouvoir attraper les balises + // ouvrir/fermer les sous-menus avec écran tactile + document.querySelectorAll('.sub-menu-toggle').forEach(button => { + button.addEventListener('click', e => { + e.preventDefault(); + const li = button.parentElement; //
  • + + // fermer les autres sous-menus de même niveau + // :scope pour pouvoir utiliser > pour restreindre aux frères directs + li.parentElement.querySelectorAll(':scope > .drop-down, :scope > .drop-right').forEach(sibling => { + if(sibling !== li){ + sibling.classList.remove('open'); // fermer sous-menus frères + sibling.querySelectorAll('.drop-right').forEach(desc => { + desc.classList.remove('open'); // fermer sous-menus neveux + }); + } + }); + + if(!li.classList.toggle('open')){ // fermer sous-menu + li.querySelectorAll('.drop-right').forEach(desc => { + desc.classList.remove('open'); // fermer sous-menus enfants + }); + } + }); + }); + + // hauteur de