From f19db76cc3b21785619ffd24bfb34692a3aaa66a Mon Sep 17 00:00:00 2001 From: polo Date: Thu, 24 Feb 2022 02:29:14 +0100 Subject: recursiveIterator --- public/css/accueil.css | 506 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 506 insertions(+) create mode 100644 public/css/accueil.css (limited to 'public/css/accueil.css') diff --git a/public/css/accueil.css b/public/css/accueil.css new file mode 100644 index 0000000..622ce1f --- /dev/null +++ b/public/css/accueil.css @@ -0,0 +1,506 @@ +/* public/accueil.css */ + +@font-face /* pour .police_titre */ +{ + 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'); +} + +.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; +} + +a:hover:not(.police_titre) /* :not() = sauf */ +{ + color: #000000; +} + +#actuelle +{ + color: #463c3c; + font-weight: bold; +} + +img +{ + vertical-align: bottom; +} + +.boutonSubmitEditeur +{ + margin-top: 5px; +} + +.boutonAnnuler:hover +{ + /*text-decoration: none;*/ + border: none; +} + +h3 +{ + margin: 5px; +} +.conteneur_article +{ + margin: 3px; +} + +.articleAvecEditeur +{ + background-color: #a8b3d9; + padding: 2px 0px; +} + +form +{ + padding-bottom: 14px; + border-bottom: 1px black solid; +} + +#courriel +{ + padding-top: 30px; + font-size: 85%; +} + +#courriel * +{ + max-width: 220px; + color: black; + text-decoration: none; +} + +#courriel a:hover +{ + /*border: 1px blue solid;*/ + padding: 5px; +} + +#courrielJS +{ + display: inline; + margin: 2px; +} + +.zoneVideAdmin +{ + padding-top: 20px; +} + +#modeAdmin +{ + background-color: orange; + position: fixed; + bottom: 0px; + width: 700px; + z-index: 2; + padding-top: 5px; + text-align: center; +} + +#modeAdmin p +{ + text-align: center; + margin: 0px; + padding: 2px; +} +#modeAdmin>div p +{ + /*border: 1px black solid;*/ + margin: 5px; + padding: 0px; +} +#modeAdmin>p a +{ + padding: 2px; +} + +#modeAdmin div +{ + display: flex; + justify-content: space-around; + + margin: 0px; + font-size: 85%; +} + +#lienModeAdmin +{ + margin: 0px 20px; + padding-bottom: 20px; +} + +#lienModeAdmin p +{ + text-align: right; +} + +#lienModeAdmin p a +{ + color: #666; + font-weight: bold; + padding: 2px; +} + +#lienModeAdmin p a:hover +{ + color: black; +} + +.connexionTitre +{ + margin-top: 0px; + text-align: center; +} +.avertissement +{ + color: red; + font-size: 90%; + text-align: center; +} + +.connexionFormulaire +{ + margin: 30px; +} + +.connexionFooter +{ + text-align: right; + padding: 5px; +} + +.connexionFooter a +{ + color: #666; +} + + +/* PC, y compris vieux écrans 800x600 */ +@media screen and (min-width: 700px) +{ + .police_titre + { + + font-family: you_are_loved, Arial, sans; + font-size: 250%; + color: #ddc97a; + position: relative; + top: 30px; + left: 40px; + } + + /* compensation des cibles de liens # superposées au "nav" hors flux */ + :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, footer + { + width: 630px; + margin: auto; + } + + #courriel + { + margin: 0px 35px; + } + + .zoneVideAdmin, #modeAdmin + { + height: 70px; + } +} + +/* "tablettes" et vieux écrans 640x480 */ +@media screen and (max-width: 699px) +{ + #bloc_page + { + max-width: 540px; + font-size: 90%; + } + + .police_titre + { + + font-family: you_are_loved, Arial, sans; + font-size: 200%; + color: #ddc97a; + + position: relative; + top: 20px; + left: 30px; + } + + #bienvenue .police_titre + { + font-size: 250%; + top: 0px; + left: 65px; + } + + :target + { + padding-top: 59px; + margin-top: -59px; + } + + nav + { + margin: 0px 30px; + max-width: 480px; + } + + li + { + margin: 4px 10px; + } + + header + { + padding-top: 61px; + } + + #bienvenue + { + background-image: url("accueil/bienvenue_petit.png"); + width: 480px; + height: 463px; + margin: auto; + } + + #contenu, footer + { + width: 480px; + margin: auto; + } + + #courriel + { + margin: 0px 30px; + } + + .zoneVideAdmin, #modeAdmin + { + height: 75px; + } + + #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: 70px; + } +} + +@media screen and (max-width: 479px) +{ + #bloc_page + { + max-width: 380px; + font-size: 85%; + } + + .police_titre + { + + font-family: you_are_loved, Arial, sans; + font-size: 150%; + color: #ddc97a; + + position: relative; + top: 13px; + left: 18px; + } + + #bienvenue .police_titre + { + font-size: 200%; + top: 0px; + left: 25px; + } + + :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, footer + { + width: 320px; + margin: auto; + } + + #courriel + { + margin: 0px 20px; + } + + #courriel * + { + max-width: 180px; + } + + .zoneVideAdmin, #modeAdmin + { + height: 65px; + } + + #modeAdmin + { + max-width: 380px; + } + + #modeAdmin div + { + /*margin: 5px;*/ + } +} + +/* spécialement pour les petits smartphones*/ +@media screen and (max-width: 379px) +{ + .zoneVideAdmin, #modeAdmin + { + height: 80px; + } + + #modeAdmin + { + font-size: 95%; + padding: 0px; + } + #modeAdmin>p + { + font-size: 90%; + margin: 3px; + } + + #modeAdmin div + { + max-width: 320px; + } + #modeAdmin>div p + { + margin: 0px 5px; + } +} -- cgit v1.2.3