From dad198ea293537b2afc2041ead1d51e54604f2c7 Mon Sep 17 00:00:00 2001 From: Quentin Dufour Date: Tue, 17 Oct 2023 10:58:34 +0200 Subject: reformat css --- static/style-bon.css | 637 ++++++++++++++++++++++++--------------------------- 1 file changed, 305 insertions(+), 332 deletions(-) (limited to 'static/style-bon.css') diff --git a/static/style-bon.css b/static/style-bon.css index 6f77fd7..34e8ab5 100644 --- a/static/style-bon.css +++ b/static/style-bon.css @@ -11,7 +11,7 @@ --night-background: #242526;/*#3c3c39;*/ --txt-night: #ebebed;/*#c7c4d4;*/ color-scheme: light dark; -/* + /* --menu: pink; --jardin: darkseagreen; --infras: gold; @@ -29,7 +29,7 @@ --calendrier: darkkhaki; --footer: deeppink; --lightgrey: lightgrey;*/ - + } html, body, main{ @@ -106,7 +106,7 @@ pre.hide { } div#calendrier > pre.center{ -justify-content: right; + justify-content: right; } #calendrier #mois_actuel{ @@ -142,36 +142,36 @@ div#container{ display: grid; grid-template-columns: [main-col-start] repeat(12, calc(100% / 12) [main-col-sep]); grid-template-rows: - [main-row-debut] auto [main-row-fin] - var(--big_margin) - [footer-start] auto [footer-end] - ; + [main-row-debut] auto [main-row-fin] + var(--big_margin) + [footer-start] auto [footer-end] + ; } /*GESTION DE LA GRILLE DU MAIN*/ -main{ +main.home { + grid-area: main-row-debut / main-col-start / main-row-fin / main-col-sep 12; + display: grid; grid-template-columns: [col-start] repeat(12, calc(100% / 12) [col-sep]); grid-template-rows: - [row-start] var(--med_margin) [h1-start] auto [h1-end] auto [jardin-end] - repeat(3, - var(--big_margin) - [title-start] auto [title-end] - var(--med_margin) - [illu-start] auto [illu-end] auto [illu-extended-end] - var(--med_margin) - [txt-start] auto [txt-end]) - var(--big_margin) - [title-start-contact] auto [title-end-contact] - var(--med_margin) - [txt-start-contact] auto [txt-end-contact] auto [cal-end-contact] /* au lieu de mettre auto on pourrait mettre 100px ici pour avoir les 2 cadres de la même taille*/ - ; + [row-start] var(--med_margin) [h1-start] auto [h1-end] auto [jardin-end] + repeat(3, + var(--big_margin) + [title-start] auto [title-end] + var(--med_margin) + [illu-start] auto [illu-end] auto [illu-extended-end] + var(--med_margin) + [txt-start] auto [txt-end]) + var(--big_margin) + [title-start-contact] auto [title-end-contact] + var(--med_margin) + [txt-start-contact] auto [txt-end-contact] auto [cal-end-contact] /* au lieu de mettre auto on pourrait mettre 100px ici pour avoir les 2 cadres de la même taille*/ + ; } /*POSITIONNEMENT SUR LA GRILLE PRINCIPALE*/ nav#menu{ - /* - grid-area: row-start / col-sep 6 / end-nav / col-sep 12;*/ background-color: var(--day-background); display: flex; justify-content: flex-end; @@ -181,10 +181,6 @@ nav#menu{ right: 1rem; } -main{ - grid-area: main-row-debut / main-col-start / main-row-fin / main-col-sep 12; -} - .icone > pre{ padding-top: 1rem; color: black; @@ -358,15 +354,15 @@ section#liste_valeurs{ --valeurs_width: calc(50% - var(--demie-goutiere)); display: grid; grid-template-columns: - [col2-start] var(--valeurs_width) [col2-mid-left] /*bloc de gauche*/ - var(--small_margin) /*goutière*/ - [col2-mid-right] var(--valeurs_width) [col2-end]; /*bloc de droite*/ + [col2-start] var(--valeurs_width) [col2-mid-left] /*bloc de gauche*/ + var(--small_margin) /*goutière*/ + [col2-mid-right] var(--valeurs_width) [col2-end]; /*bloc de droite*/ grid-template-rows: - [line1-start] auto [line1-end] - var(--small_margin) - [line2-start] auto [line2-end] - var(--small_margin) - [suivre-start] auto [suivre-end]; + [line1-start] auto [line1-end] + var(--small_margin) + [line2-start] auto [line2-end] + var(--small_margin) + [suivre-start] auto [suivre-end]; } p#coop{ @@ -467,177 +463,154 @@ nav ul{ /*Tablettes et petits ordinateurs*/ @media (max-width: 1500px) and (min-width: 801px){ -h2, h1{ - font-size: 1rem; - font-weight: normal; - margin: 0px; - padding: 0px; -} - -h2, h1{ - text-transform: uppercase; - white-space:pre; - overflow: hidden; -} - -h1#deuxfleurs{ - grid-area: h1-start / col-sep 1 / h1-end / col-sep 12; -} + h2, h1{ + font-size: 1rem; + font-weight: normal; + margin: 0px; + padding: 0px; + } -h2#infras{ - grid-area: title-start 1 / col-sep 1 / title-end 1 / col-sep 12; -} + h2, h1{ + text-transform: uppercase; + white-space:pre; + overflow: hidden; + } -h2#outils{ - grid-area: title-start 2 / col-sep 1 / title-end 2 / col-sep 12; -} + h1#deuxfleurs{ + grid-area: h1-start / col-sep 1 / h1-end / col-sep 12; + } -h2#valeurs{ - grid-area: title-start 3 / col-sep 1 / title-end 3 / col-sep 12; -} + h2#infras{ + grid-area: title-start 1 / col-sep 1 / title-end 1 / col-sep 12; + } -h2#connaissance{ - grid-area: title-start-contact / col-sep 1 / title-end-contact / col-sep 12; -} + h2#outils{ + grid-area: title-start 2 / col-sep 1 / title-end 2 / col-sep 12; + } -div#rennes{ - grid-area: illu-start 1 / col-sep 2 / illu-end 1 / col-sep 6; - margin-right: 0.5rem; -} + h2#valeurs{ + grid-area: title-start 3 / col-sep 1 / title-end 3 / col-sep 12; + } -div#orsay{ - grid-area: illu-start 1 / col-sep 6 / illu-end 1 / col-sep 10; - margin-left: 0.5rem; -} + h2#connaissance{ + grid-area: title-start-contact / col-sep 1 / title-end-contact / col-sep 12; + } -div#rennes, div#orsay{ - border: 1px solid black; - border-radius: 5px; -} + div#rennes{ + grid-area: illu-start 1 / col-sep 2 / illu-end 1 / col-sep 6; + margin-right: 0.5rem; + } -div#rennes pre.center, div#orsay pre.center{ - margin-top: -5px; - margin-bottom: -5px -} + div#orsay{ + grid-area: illu-start 1 / col-sep 6 / illu-end 1 / col-sep 10; + margin-left: 0.5rem; + } -div#orsay pre.center{ - justify-content: center; -} + div#rennes, div#orsay{ + border: 1px solid black; + border-radius: 5px; + } -p#txt_infras{ - background-color: var(--txt_infras); - grid-area: txt-start 1 / col-sep 2 / txt-end 1 / col-sep 10; -} + div#rennes pre.center, div#orsay pre.center{ + margin-top: -5px; + margin-bottom: -5px + } -div#txt_outils{ - background-color: var(--txt_outils); - grid-area: txt-start 2 / col-sep 2 / txt-end 2 / col-sep 10; -} + div#orsay pre.center{ + justify-content: center; + } -div#txt_connaissance{ - grid-area: txt-start-contact / col-sep 2 / txt-end-contact / col-sep 10; -} + p#txt_infras{ + background-color: var(--txt_infras); + grid-area: txt-start 1 / col-sep 2 / txt-end 1 / col-sep 10; + } -div#txt_connaissance ul{ - padding-left: 0px; - list-style-position: inside; -} + div#txt_outils{ + background-color: var(--txt_outils); + grid-area: txt-start 2 / col-sep 2 / txt-end 2 / col-sep 10; + } -div#ordinateur { - grid-area: illu-start 2 / col-sep 1 / illu-end 2 / col-sep 11; - overflow: hidden; -} + div#txt_connaissance{ + grid-area: txt-start-contact / col-sep 2 / txt-end-contact / col-sep 10; + } -section#liste_outils{ - background-color: var(--liste_outils); - grid-area: illu-end 2 / col-sep 1 / illu-extended-end 2 / col-sep 11; - margin-top: var(--med_margin); -} + div#txt_connaissance ul{ + padding-left: 0px; + list-style-position: inside; + } -/* -section#liste_outils { - --demie-goutiere: calc(var(--small_margin) / 2); - --valeurs_width: calc(33% - var(--demie-goutiere)); - display: grid; - grid-template-columns: - [col-tiers1-start] var(--valeurs_width) [col-tiers1-end] bloc de gauche - var(--small_margin) goutière - [col-tiers2-start] var(--valeurs_width) [col-tiers2-end] - var(--small_margin) goutière - [col-tiers3-start] var(--valeurs_width) [col-tiers3-end]; bloc de droite + div#ordinateur { + grid-area: illu-start 2 / col-sep 1 / illu-end 2 / col-sep 11; + overflow: hidden; + } - grid-template-rows: - [line1-start] auto [line1-end] - var(--small_margin) - [line2-start] auto [line2-end] - var(--small_margin) - [faisons-connaissance-start] auto [faisons-connaissance-end]; - ); -} -*/ + section#liste_outils{ + background-color: var(--liste_outils); + grid-area: illu-end 2 / col-sep 1 / illu-extended-end 2 / col-sep 11; + margin-top: var(--med_margin); + } -section#liste_outils{ - display: grid; - grid-template-columns: 1fr 1fr 1fr; - row-gap: 1rem; - column-gap: 1rem; -} -div#discussion { - background-color: var(--lightgrey); - grid-area: line1-start / col-tiers1-start / line1-end / col-tiers1-end; - overflow: hidden; -} + section#liste_outils{ + display: grid; + grid-template-columns: 1fr 1fr 1fr; + row-gap: 1rem; + column-gap: 1rem; + } -div#emails { - background-color: var(--lightgrey); - grid-area: line1-start / col-tiers2-start / line1-end / col-tiers2-start; -} + div#discussion { + background-color: var(--lightgrey); + grid-area: line1-start / col-tiers1-start / line1-end / col-tiers1-end; + overflow: hidden; + } -div#visio { - background-color: var(--lightgrey); - grid-area: line1-start / col-tiers3-start / line1-end / col-tiers3-end; - overflow: hidden; -} + div#emails { + background-color: var(--lightgrey); + grid-area: line1-start / col-tiers2-start / line1-end / col-tiers2-start; + } -/**/ + div#visio { + background-color: var(--lightgrey); + grid-area: line1-start / col-tiers3-start / line1-end / col-tiers3-end; + overflow: hidden; + } -div#sites-web { - background-color: var(--lightgrey); - grid-area: line2-start / col-tiers1-start / line2-end / col-tiers1-end; - overflow: hidden; -} + div#sites-web { + background-color: var(--lightgrey); + grid-area: line2-start / col-tiers1-start / line2-end / col-tiers1-end; + overflow: hidden; + } -div#collaboration { - background-color: var(--lightgrey); - grid-area: line2-start / col-tiers2-start / line2-end / col-tiers2-end; + div#collaboration { + background-color: var(--lightgrey); + grid-area: line2-start / col-tiers2-start / line2-end / col-tiers2-end; -} + } -div#blog { - background-color: var(--lightgrey); - grid-area: line2-start / col-tiers3-start / line2-end / col-tiers3-end; -} + div#blog { + background-color: var(--lightgrey); + grid-area: line2-start / col-tiers3-start / line2-end / col-tiers3-end; + } -div#ronce{ - grid-area: illu-start 3 / col-sep 1 / illu-end 3 / col-sep 11; -} + div#ronce{ + grid-area: illu-start 3 / col-sep 1 / illu-end 3 / col-sep 11; + } -div#calendrier{ - margin-top: var(--med_margin); - grid-area: txt-end-contact / col-sep 1 / cal-end-contact / col-sep 11; - display: flex; - justify-content: center; -} + div#calendrier{ + margin-top: var(--med_margin); + grid-area: txt-end-contact / col-sep 1 / cal-end-contact / col-sep 11; + display: flex; + justify-content: center; + } -#mois_actuel, #mois_suivant{ - overflow: hidden; -} + #mois_actuel, #mois_suivant{ + overflow: hidden; + } -#mois_actuel{ - margin-bottom: 0px; - margin-right: 2rem; -} + #mois_actuel{ + margin-bottom: 0px; + margin-right: 2rem; + } } @@ -645,200 +618,200 @@ div#calendrier{ /*Smartphones*/ @media (max-width: 800px){ -:root{ - --big_margin:50px; - --med_margin:25px; - --small_margin:5px; -} + :root{ + --big_margin:50px; + --med_margin:25px; + --small_margin:5px; + } -h1:before, h1:after{ - content: ''; -} + h1:before, h1:after{ + content: ''; + } -h2:before{ - content: '______________________________________________________________________\A""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""\A* '; -} + h2:before{ + content: '______________________________________________________________________\A""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""\A* '; + } -h2:after{ - content: ' *\A______________________________________________________________________\A""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""'; -} + h2:after{ + content: ' *\A______________________________________________________________________\A""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""'; + } -h2, h1{ - font-size: 1rem; - text-align: center; -} + h2, h1{ + font-size: 1rem; + text-align: center; + } -h2, h1{ - text-transform: uppercase; - white-space: pre; - overflow: hidden; -} + h2, h1{ + text-transform: uppercase; + white-space: pre; + overflow: hidden; + } -h1#deuxfleurs{ - grid-area: h1-start / col-start / h1-end / col-sep 12; -} + h1#deuxfleurs{ + grid-area: h1-start / col-start / h1-end / col-sep 12; + } -h2#infras{ - grid-area: title-start 1 / col-start / title-end 1 / col-sep 12; -} + h2#infras{ + grid-area: title-start 1 / col-start / title-end 1 / col-sep 12; + } -h2#outils{ - grid-area: title-start 2 / col-start / title-end 2 / col-sep 12; -} + h2#outils{ + grid-area: title-start 2 / col-start / title-end 2 / col-sep 12; + } -h2#valeurs{ - grid-area: title-start 3 / col-start / title-end 3 / col-sep 12; -} + h2#valeurs{ + grid-area: title-start 3 / col-start / title-end 3 / col-sep 12; + } -h2#connaissance{ - grid-area: title-start-contact / col-start / title-end-contact / col-sep 12; -} + h2#connaissance{ + grid-area: title-start-contact / col-start / title-end-contact / col-sep 12; + } -div#jardin{ - grid-area: row-start / col-sep 1 / jardin-end / col-sep 11; -} + div#jardin{ + grid-area: row-start / col-sep 1 / jardin-end / col-sep 11; + } -nav#menu{ - position: fixed; - width: 100%; - right: 0px; - bottom: 0px; - padding-bottom: 1rem; - background-color: --day-background; - z-index: 1; - border-top: black 1px dashed; -} + nav#menu{ + position: fixed; + width: 100%; + right: 0px; + bottom: 0px; + padding-bottom: 1rem; + background-color: --day-background; + z-index: 1; + border-top: black 1px dashed; + } -nav#menu ul{ - list-style: none; - flex-direction: row; - display: flex; - justify-content: space-evenly; - padding: 0px; - margin: 0px; - width: 100%; -} + nav#menu ul{ + list-style: none; + flex-direction: row; + display: flex; + justify-content: space-evenly; + padding: 0px; + margin: 0px; + width: 100%; + } -div#txt_connaissance ul{ - padding-left: 0px; - list-style-position: inside; - margin-bottom: var(--med_margin); -} + div#txt_connaissance ul{ + padding-left: 0px; + list-style-position: inside; + margin-bottom: var(--med_margin); + } -.icone > pre{ - font-size: 0.8rem; -} + .icone > pre{ + font-size: 0.8rem; + } -#illustration-accueil > pre.center{ - font-size: 0.85rem; -} + #illustration-accueil > pre.center{ + font-size: 0.85rem; + } -div#orsay{ - display: none; -} + div#orsay{ + display: none; + } -div#rennes{ - grid-area: illu-start 1 / col-sep 1 / illu-end 1 / col-sep 11; - border: 1px solid black; - border-radius: 5px; -} + div#rennes{ + grid-area: illu-start 1 / col-sep 1 / illu-end 1 / col-sep 11; + border: 1px solid black; + border-radius: 5px; + } -div#rennes pre{ - margin-top: -5px; - margin-bottom: -5px; -} + div#rennes pre{ + margin-top: -5px; + margin-bottom: -5px; + } -pre{ - font-size: 0.95rem; -} + pre{ + font-size: 0.95rem; + } -#txt_infras, #txt_outils, #txt_connaissance{ - text-align: left; - hyphens: none; - margin-top: 0; - hyphens: none; - word-spacing: -2px; - -ms-hyphens: none; - -webkit-hyphens: none; - -moz-hyphens: none; - margin-top: 0; -} + #txt_infras, #txt_outils, #txt_connaissance{ + text-align: left; + hyphens: none; + margin-top: 0; + hyphens: none; + word-spacing: -2px; + -ms-hyphens: none; + -webkit-hyphens: none; + -moz-hyphens: none; + margin-top: 0; + } -p#txt_infras{ - background-color: var(--txt_infras); - grid-area: txt-start 1 / col-sep 1 / txt-end 1 / col-sep 11; -} + p#txt_infras{ + background-color: var(--txt_infras); + grid-area: txt-start 1 / col-sep 1 / txt-end 1 / col-sep 11; + } -div#txt_outils{ - background-color: var(--txt_outils); - grid-area: txt-start 2 / col-sep 1 / txt-end 2 / col-sep 11; -} + div#txt_outils{ + background-color: var(--txt_outils); + grid-area: txt-start 2 / col-sep 1 / txt-end 2 / col-sep 11; + } -div#txt_connaissance{ - grid-area: txt-start-contact / col-sep 1 / txt-end-contact / col-sep 11; -} + div#txt_connaissance{ + grid-area: txt-start-contact / col-sep 1 / txt-end-contact / col-sep 11; + } -div#ordinateur { - display: none; -} + div#ordinateur { + display: none; + } -section#liste_outils { - display: block; -} + section#liste_outils { + display: block; + } -section#liste_outils{ - grid-area: illu-start 2 / col-start / illu-end 2 / col-sep 12; - font-size: 1rem; -} + section#liste_outils{ + grid-area: illu-start 2 / col-start / illu-end 2 / col-sep 12; + font-size: 1rem; + } -section#liste_outils pre{ - font-size: 1rem; -} + section#liste_outils pre{ + font-size: 1rem; + } -section#liste_outils > a > div{ - margin-bottom: 1rem; -} + section#liste_outils > a > div{ + margin-bottom: 1rem; + } -div#ronce{ - grid-area: illu-start 3 / col-sep 1 / illu-end 3 / col-sep 11; - border: none; - padding: 0px; -} + div#ronce{ + grid-area: illu-start 3 / col-sep 1 / illu-end 3 / col-sep 11; + border: none; + padding: 0px; + } -#coop, #autonomie, #solidarite, #liberte{ - padding: 1rem; - margin: 0px; -} + #coop, #autonomie, #solidarite, #liberte{ + padding: 1rem; + margin: 0px; + } -#suivre{ - margin-top: 2rem; -} + #suivre{ + margin-top: 2rem; + } -section#liste_valeurs{ - grid-area: txt-start 3 / col-sep 1 / txt-end 3 / col-sep 11; -} + section#liste_valeurs{ + grid-area: txt-start 3 / col-sep 1 / txt-end 3 / col-sep 11; + } -section#liste_valeurs .description{ - display: none; -} + section#liste_valeurs .description{ + display: none; + } -div#calendrier{ - grid-area: txt-end-contact / col-sep 1 / cal-end-contact / col-sep 11; - display: none; -} + div#calendrier{ + grid-area: txt-end-contact / col-sep 1 / cal-end-contact / col-sep 11; + display: none; + } -div#calendrier > pre.center { -justify-content: center; -} + div#calendrier > pre.center { + justify-content: center; + } -footer pre.center{ - font-size: 0.85rem; -} + footer pre.center{ + font-size: 0.85rem; + } -#liens{ - text-align: center; - margin-bottom: 12rem; -} + #liens{ + text-align: center; + margin-bottom: 12rem; + } } -- cgit v1.2.3