#CACHE{24*3600,cache-client} #HTTP_HEADER{Content-Type: text/css; charset=iso-8859-15} #HTTP_HEADER{Vary: Accept-Encoding} #SET{LargeurContaineur,(#CONFIG{soyezcreateurs_layout/largeurconteneur,960})} #SET{LargeurMenuGauche,(#CONFIG{soyezcreateurs_layout/largeurmenugauche,180})} #SET{LargeurMenuDroit,(#CONFIG{soyezcreateurs_layout/largeurmenudroit,180})} #SET{layoutmoderne,(#CONFIG{soyezcreateurs_layout/layoutmoderne,fixe})} [(#CONFIG{soyezcreateurs/mode_affichage,communiquant}|=={portailcognac}|oui)#SET{layoutmoderne,moderne}] /* http://blog.html.it/layoutgala/index.html */ /* Mode mobile ici sans media queries */ #extra { display: grid; } /* Mode Tablette définition des grilles CSS */ @media screen and (min-width: 768px) { #shadow { display: grid; grid-template-areas: "header" "maincontent" "footer"; } #mainheader { grid-area: header; } #maincontent { grid-area: maincontent; display: grid; } #miettesdepain{ grid-area: ariane; } #heading{ grid-area: titre; display: grid; } #contenu{ grid-area: content; display: grid; } #navigation { grid-area: navigation; } #extra { grid-area: extra; } #footer { grid-area: footer; } /* un switch avec 2 types de cas pour ipad */ [(#ENV{layoutgala}|in_any{#LISTE{1,3,5,7,9,11,13,15,18,19,20,21,22,23,24,25,26,27,29,30,31,32,33,34,35,36,37,38,39}}|oui) #maincontent { grid-template-areas: "ariane ariane" "titre titre" "content content" "navigation extra"; grid-template-columns: 1fr 1fr; } ] [(#ENV{layoutgala}|in_any{#LISTE{2,4,6,8,10,12,14,16,17,28,40}}|oui) #maincontent { grid-template-areas: "ariane ariane" "titre titre" "content content" "extra navigation"; grid-template-columns: 1fr 1fr; } ] } @media screen and (min-width: [(#GET{LargeurContaineur})]px) { [(#GET{layoutmoderne}|=={moderne}|oui) [(#CONFIG{soyezcreateurs_layout/logorubriquenavigation,content}|=={header}|oui) [(#CONFIG{soyezcreateurs_layout/logoarticlenavigation,content}|=={header}|oui)[ #maincontent { margin-top: -(#CONFIG{soyezcreateurs_layout/decalageverticalcontenu,0})px; position: relative; } ]]]] /* ce switch pour desktop */ [(#ENV{layoutgala}|in_any{#LISTE{7,8,9,10,11,12,33,34,35,36,37,38,39,40}}|oui) #shadow { grid-template-areas: "[(#GET{layoutmoderne}|=={moderne}|?{'header','.'})] header [(#GET{layoutmoderne}|=={moderne}|?{'header','.'})]" ". maincontent ." "[(#GET{layoutmoderne}|=={moderne}|?{'footer','.'})] footer [(#GET{layoutmoderne}|=={moderne}|?{'footer','.'})]"; grid-template-columns: 1fr 1160px 1fr; } ] [(#ENV{layoutgala}|in_any{#LISTE{23,24,25,26,33,34}}|oui) #maincontent { grid-template-rows: max-content max-content max-content 1fr; } ] [(#ENV{layoutgala}|=={1}|oui) #maincontent { grid-template-areas: "ariane ariane ariane" "titre titre titre" "navigation content extra"; grid-template-columns: 1fr 2fr 1fr; } ] [(#ENV{layoutgala}|=={2}|oui) #maincontent { grid-template-areas: "ariane ariane ariane" "titre titre titre" "extra content navigation"; grid-template-columns: 1fr 2fr 1fr; } ] [(#ENV{layoutgala}|=={3}|oui) #maincontent { grid-template-areas: "ariane ariane ariane" "titre titre titre" "content navigation extra"; grid-template-columns: 2fr 1fr 1fr; } ] [(#ENV{layoutgala}|=={4}|oui) #maincontent { grid-template-areas: "ariane ariane ariane" "titre titre titre" "content extra navigation"; grid-template-columns: 2fr 1fr 1fr; } ] [(#ENV{layoutgala}|=={5}|oui) #maincontent { grid-template-areas: "ariane ariane ariane" "titre titre titre" "navigation extra content"; grid-template-columns: 1fr 1fr 2fr; } ] [(#ENV{layoutgala}|=={6}|oui) #maincontent { grid-template-areas: "ariane ariane ariane" "titre titre titre" "extra navigation content"; grid-template-columns: 1fr 1fr 2fr; } ] [(#ENV{layoutgala}|=={7}|oui) #maincontent { grid-template-areas: "ariane ariane ariane" "titre titre titre" "navigation content extra"; grid-template-columns: #GET{LargeurMenuGauche}px 1fr #GET{LargeurMenuDroit}px; } ] [(#ENV{layoutgala}|=={8}|oui) #maincontent { grid-template-areas: "ariane ariane ariane" "titre titre titre" "extra content navigation"; grid-template-columns: #GET{LargeurMenuDroit}px 1fr #GET{LargeurMenuGauche}px; } ] [(#ENV{layoutgala}|=={9}|oui) #maincontent { grid-template-areas: "ariane ariane ariane" "titre titre titre" "content navigation extra"; grid-template-columns: 1fr #GET{LargeurMenuGauche}px #GET{LargeurMenuDroit}px; } ] [(#ENV{layoutgala}|=={10}|oui) #maincontent { grid-template-areas: "ariane ariane ariane" "titre titre titre" "content extra navigation"; grid-template-columns: 1fr #GET{LargeurMenuDroit}px #GET{LargeurMenuGauche}px; } ] [(#ENV{layoutgala}|=={11}|oui) #maincontent { grid-template-areas: "ariane ariane ariane" "titre titre titre" "navigation extra content"; grid-template-columns: #GET{LargeurMenuGauche}px #GET{LargeurMenuDroit}px 1fr; } ] [(#ENV{layoutgala}|=={12}|oui) #maincontent { grid-template-areas: "ariane ariane ariane" "titre titre titre" "extra navigation content"; grid-template-columns: #GET{LargeurMenuDroit}px #GET{LargeurMenuGauche}px 1fr; } ] [(#ENV{layoutgala}|=={13}|oui) #maincontent { grid-template-areas: "ariane ariane ariane" "titre titre titre" "navigation content extra"; grid-template-columns: #GET{LargeurMenuGauche}px 1fr #GET{LargeurMenuDroit}px; } ] [(#ENV{layoutgala}|=={14}|oui) #maincontent { grid-template-areas: "ariane ariane ariane" "titre titre titre" "extra content navigation"; grid-template-columns: #GET{LargeurMenuDroit}px 1fr #GET{LargeurMenuGauche}px; } ] [(#ENV{layoutgala}|=={15}|oui) #maincontent { grid-template-areas: "ariane ariane ariane" "titre titre titre" "content navigation extra"; grid-template-columns: 1fr #GET{LargeurMenuGauche}px #GET{LargeurMenuDroit}px; } ] [(#ENV{layoutgala}|=={16}|oui) #maincontent { grid-template-areas: "ariane ariane ariane" "titre titre titre" "content extra navigation"; grid-template-columns: 1fr #GET{LargeurMenuDroit}px #GET{LargeurMenuGauche}px; } ] [(#ENV{layoutgala}|=={17}|oui) #maincontent { grid-template-areas: "ariane ariane ariane" "titre titre titre" "extra navigation content"; grid-template-columns: #GET{LargeurMenuDroit}px #GET{LargeurMenuGauche}px 1fr; } ] [(#ENV{layoutgala}|=={18}|oui) #maincontent { grid-template-areas: "ariane ariane ariane" "titre titre titre" "navigation extra content"; grid-template-columns: #GET{LargeurMenuGauche}px #GET{LargeurMenuDroit}px 1fr; } ] [(#ENV{layoutgala}|=={19}|oui) #maincontent { grid-template-areas: "ariane ariane ariane" "titre titre titre" "navigation content extra"; grid-template-columns: #GET{LargeurMenuGauche}px 2fr 1fr; } ] [(#ENV{layoutgala}|=={20}|oui) #maincontent { grid-template-areas: "ariane ariane ariane" "titre titre titre" "navigation content extra"; grid-template-columns: 1fr 2fr #GET{LargeurMenuDroit}px; } ] [(#ENV{layoutgala}|=={21}|oui) #maincontent { grid-template-areas: "ariane ariane ariane" "titre titre titre" "content navigation extra"; grid-template-columns: 2fr #GET{LargeurMenuGauche}px 1fr; } ] [(#ENV{layoutgala}|=={22}|oui) #maincontent { grid-template-areas: "ariane ariane ariane" "titre titre titre" "content navigation extra"; grid-template-columns: 2fr 1fr #GET{LargeurMenuDroit}px; } ] [(#ENV{layoutgala}|=={23}|oui) #maincontent { grid-template-areas: "ariane ariane" "titre titre" "content navigation" "content extra"; grid-template-columns: 1fr 240px; grid-template-columns: 1fr #GET{LargeurMenuGauche}px; } ] [(#ENV{layoutgala}|=={24}|oui) #maincontent { grid-template-areas: "ariane ariane" "titre titre" "navigation content" "extra content"; grid-template-columns: #GET{LargeurMenuGauche}px 1fr; } ] [(#ENV{layoutgala}|=={25}|oui) #maincontent { grid-template-areas: "ariane ariane" "titre titre" "content navigation" "content extra"; grid-template-columns: 2fr 1fr; } ] [(#ENV{layoutgala}|=={26}|oui) #maincontent { grid-template-areas: "ariane ariane" "titre titre" "navigation content" "extra content"; grid-template-columns: 1fr 2fr; } ] [(#ENV{layoutgala}|=={29}|oui) #maincontent { grid-template-areas: "ariane ariane" "titre titre" "navigation content" "extra extra"; grid-template-columns: 1fr 2fr; } ] [(#ENV{layoutgala}|=={30}|oui) #maincontent { grid-template-areas: "ariane ariane" "titre titre" "content navigation" "extra extra"; grid-template-columns: 2fr 1fr; } ] [(#ENV{layoutgala}|=={31}|oui) #maincontent { grid-template-areas: "ariane ariane" "titre titre" "navigation content" "extra extra"; grid-template-columns: #GET{LargeurMenuGauche}px 1fr; } ] [(#ENV{layoutgala}|=={32}|oui) #maincontent { grid-template-areas: "ariane ariane" "titre titre" "content navigation" "extra extra"; grid-template-columns: 1fr #GET{LargeurMenuGauche}px; } ] [(#ENV{layoutgala}|=={33}|oui) #maincontent { grid-template-areas: "ariane ariane" "titre titre" "content navigation" "content extra"; grid-template-columns: 1fr #GET{LargeurMenuGauche}px; } ] [(#ENV{layoutgala}|=={34}|oui) #maincontent { grid-template-areas: "ariane ariane" "titre titre" "navigation content" "extra content"; grid-template-columns: #GET{LargeurMenuGauche}px 1fr; } ] [(#ENV{layoutgala}|=={35}|oui) #maincontent { grid-template-areas: "ariane ariane" "titre titre" "content navigation" "extra navigation"; grid-template-columns: 1fr #GET{LargeurMenuGauche}px; } ] [(#ENV{layoutgala}|=={36}|oui) #maincontent { grid-template-areas: "ariane ariane" "titre titre" "navigation content" "navigation extra"; grid-template-columns: #GET{LargeurMenuGauche}px 1fr; } ] [(#ENV{layoutgala}|=={37}|oui) #maincontent { grid-template-areas: "ariane ariane" "titre titre" "content navigation" "extra extra"; grid-template-columns: 1fr #GET{LargeurMenuGauche}px; } ] [(#ENV{layoutgala}|=={38}|oui) #maincontent { grid-template-areas: "ariane ariane" "titre titre" "navigation content" "extra extra"; grid-template-columns: #GET{LargeurMenuGauche}px 1fr; } ] }