From c0b176ae142624d6a6daa0f65ea6fead448b8b47 Mon Sep 17 00:00:00 2001 From: polo Date: Fri, 3 Mar 2023 23:44:43 +0100 Subject: inversion de positions --- public/css/main.css | 555 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 555 insertions(+) create mode 100644 public/css/main.css (limited to 'public/css/main.css') diff --git a/public/css/main.css b/public/css/main.css new file mode 100644 index 0000000..77ab7ff --- /dev/null +++ b/public/css/main.css @@ -0,0 +1,555 @@ +/* public/main.css */ + +/*@font-face +{ + font-family: "you_are_loved"; + src: url('../fonts/you_are_loved.ttf') format('truetype'), + url('../fonts/you_are_loved.eot'), + url('../fonts/you_are_loved.eot?#iefix') format('embedded-opentype'), + url('../fonts/you_are_loved.woff2') format('woff2'), + url('../fonts/you_are_loved.woff') format('woff'); +}*/ + +@font-face /* pour .police_titre */ +{ + font-family: "IMPACTED"; + src: url('../fonts/IMPACTED.TTF') format('truetype'); +} + +.no_underline +{ + text-decoration: none; +} + +body +{ + margin: 0px; + background-color: #326892; +} + +#bloc_page +{ + max-width: 700px; + margin: auto; + background-color: #FFFFFF; + font-family: Sans-serif; + font-size: 100%; +} + +nav +{ + position: fixed; + z-index: 2; + background-color: white; +} + +/* agir sur ul et li directement affecte le ckeditor */ +#ul_menu +{ + margin: 0px; + padding: 5px; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +#ul_menu li +{ + list-style-type: none; + white-space: nowrap; +} + +li a +{ + text-decoration: none; + color: #666; +} + +.police_titre +{ + font-family: IMPACTED, Arial, sans; + color: #ddc97a; +} + +a:hover:not(.police_titre) /* :not() = sauf */ +{ + color: #000000; +} + +#actuelle +{ + color: #463c3c; + font-weight: bold; +} + +img +{ + vertical-align: bottom; +} + +.boutonArticle span +{ + padding: 2px; + border: 4px black groove; +} +.boutonSubmitEditeur +{ + margin-top: 5px; +} + +.boutonAnnuler:hover +{ + border: none; +} + +h3 +{ + margin: 5px; +} +.conteneur_article +{ + margin: 3px; +} + +article +{ + font-size: 90%; + margin: 5px 0; +} +/* Eviter la superposition d’une entête fixe sur une ancre */ +article:target +{ + padding-top: 71px; + margin-top: -71px; +} +.articleAvecEditeur +{ + background-color: #a8b3d9; + padding: 2px 0px; + margin-bottom: 15px; +} + +form +{ + padding-bottom: 14px; + /*border-bottom: 1px black solid;*/ +} + +#courriel +{ + /*padding-top: 30px;*/ + font-size: 90%; +} + +#courriel * +{ + max-width: 220px; + color: black; + text-decoration: none; +} + +#courriel>button /* bouton pour remonter */ +{ + float: right; +} + +#courrielJS +{ + display: inline; + margin: 2px; +} + +.zoneVideAdmin +{ + padding-top: 10px; +} + +#modeAdmin +{ + background-color: orange; + position: fixed; + bottom: 0px; + width: 700px; + z-index: 2; + padding-top: 2px; + font-size: 90%; +} + +#modeAdmin p +{ + text-align: center; + margin: 0px; + padding: 2px; +} +#modeAdmin>p a +{ + text-decoration: none; + color: initial; +} + +#lienModeAdmin +{ + font-size: 90%; + margin-top: 10px; + margin-right: 30px; + text-align: right; + /* enlever la bande bleue en dessous du bloc_page */ + /*margin-bottom: 0;*/ + padding-bottom: 8px; +} + +#lienModeAdmin a +{ + text-decoration: none; + color: black; +} + +.connexionTitre +{ + margin-top: 0px; + text-align: center; +} +.connexionP +{ + margin: 20px; + text-align: center; +} +.avertissement +{ + color: red; + font-size: 90%; + text-align: center; + padding-bottom: 10px; +} + +.connexionFormulaire +{ + margin: 30px; +} + +.connexionFooter +{ + text-align: right; + padding: 5px; +} + +.connexionFooter a +{ + color: #666; +} + +.boutonBackup +{ + /*font-size: initial;*/ /* corrigé par normalize.css */ + margin: 2px; +} +.boutonBackup a +{ + text-decoration: none; + color: initial; +} + +button +{ + padding: 1px; +} + +/* options au survol */ +#options +{ + /*display: none;*/ + display: flex; +} + + +/* PC, y compris vieux écrans 800x600 */ +@media screen and (min-width: 700px) +{ + .police_titre + { + max-width: 550px; + font-size: 250%; + margin-left: 30px; + padding-top: 20px; + } + + /* compensation des cibles de liens # + superposées au "nav" hors flux */ + .articleSansEditeur:target + { + padding-top: 70px; + margin-top: -70px; + } + + nav + { + border-bottom: 1px black solid; + margin: 0px 35px; + max-width: 630px; + } + + li + { + margin: 6px 15px; + } + + header + { + margin: 0px 35px; + padding-top: 92px; + } + + #bienvenue + { + background-image: url("../accueil/bienvenue.png"); + width: 630px; + height: 596px; + } + + #contenu + { + width: 630px; + margin: auto; + padding-bottom: 40px; + } + + #courriel + { + margin: 0px 35px; + } + + .zoneVideAdmin, #modeAdmin + { + /*height: 30px;*/ + height: 76px; + } + + /*#modeAdmin:hover + { + height: 76px; + }*/ +} + +/* "tablettes" et vieux écrans 640x480 */ +@media screen and (max-width: 699px) +{ + #bloc_page + { + max-width: 540px; + font-size: 90%; + } + + .police_titre + { + font-size: 200%; + margin-left: 25px; + } + .police_titre:not(.police_titre_header) + { + padding-top: 20px; + } + + #bienvenue .police_titre + { + font-size: 250%; + top: 0px; + left: 65px; + } + + .articleSansEditeur:target + { + padding-top: 59px; + margin-top: -59px; + } + + nav + { + margin: 0px 30px; + max-width: 480px; + } + + li + { + margin: 4px 10px; + } + + header + { + margin: 0px 30px; + padding-top: 61px; + } + + #bienvenue + { + background-image: url("../accueil/bienvenue_petit.png"); + width: 480px; + height: 463px; + margin: auto; + } + + #contenu + { + width: 480px; + margin: auto; + padding-bottom: 30px; + } + + #courriel + { + margin: 0px 30px; + } + + .zoneVideAdmin, #modeAdmin + { + height: 71px; + } + + #modeAdmin + { + max-width: 540px; + } +} + + /* on grignote les colonnes autour du texte */ +@media screen and (max-width: 539px) +{ + #modeAdmin div + { + max-width: 480px; + margin: 0px; + border: none; + } + #modeAdmin + { + font-size: 90%; + } + .zoneVideAdmin, #modeAdmin + { + height: 66px; + } +} + +@media screen and (max-width: 479px) +{ + #bloc_page + { + max-width: 380px; + font-size: 85%; + } + + .police_titre + { + font-size: 150%; + margin-left: 15px; + } + .police_titre:not(.police_titre_header) + { + /*padding-top: 10px;*/ + } + + #bienvenue .police_titre + { + font-size: 200%; + top: 0px; + left: 25px; + } + + .articleSansEditeur:target + { + padding-top: 56px; + margin-top: -56px; + } + + nav + { + margin: 0px 30px; + max-width: 320px; + } + + li + { + margin: 0px 10px; + } + + header + { + padding-top: 60px; + } + + #bienvenue + { + background-image: url("../accueil/bienvenue_mini.png"); + width: 320px; + height: 316px; + } + + #contenu + { + width: 320px; + margin: auto; + } + + #courriel + { + margin: 0px 20px; + } + + #courriel * + { + max-width: 180px; + } + + #lienModeAdmin + { + margin-right: 20px; + } + + .zoneVideAdmin, #modeAdmin + { + height: 61px; + } + + #modeAdmin + { + max-width: 380px; + } +} + +/* spécialement pour les petits smartphones*/ +@media screen and (max-width: 379px) +{ + .zoneVideAdmin, #modeAdmin + { + height: 76px; + } + + #modeAdmin + { + /*font-size: 95%;*/ + padding: 0px; + } + #modeAdmin>p + { + /*font-size: 90%;*/ + /*margin: 1px;*/ + text-align: left; + } + + #modeAdmin div + { + max-width: 320px; + } + #modeAdmin>div p + { + /*margin: 0px 5px;*/ + } +} + +/* spécial */ +@media screen and (max-width: 320px) +{ + nav + { + margin: auto; + } +} \ No newline at end of file -- cgit v1.2.3