From 7dcd436b8407810c28933d7cfee8f6e36456d622 Mon Sep 17 00:00:00 2001 From: Quentin Dufour Date: Tue, 17 Oct 2023 10:05:18 +0200 Subject: move root to static/ folder --- style-bon.css | 865 ---------------------------------------------------------- 1 file changed, 865 deletions(-) delete mode 100644 style-bon.css (limited to 'style-bon.css') diff --git a/style-bon.css b/style-bon.css deleted file mode 100644 index 3635d6e..0000000 --- a/style-bon.css +++ /dev/null @@ -1,865 +0,0 @@ -/*PARAMETRES GENERAUX*/ -:root{ - --big_margin:100px; - --med_margin:50px; - --small_margin:10px; - --day-background: #fdfff9; - --day-highlight-color: white; - --day-highlight-bg: darkgreen; - --night-highlight-color: #ebebed; - --night-highlight-bg: #565a4d; - --night-background: #242526;/*#3c3c39;*/ - --txt-night: #ebebed;/*#c7c4d4;*/ - color-scheme: light dark; -/* - --menu: pink; - --jardin: darkseagreen; - --infras: gold; - --rennes: orange; - --orsay: chartreuse; - --txt_infras: bisque; - --outils: coral; - --liste_outils: aliceblue; - --txt_outils: aquamarine; - --valeurs: grey; - --ronce: cornflowerblue; - --liste_valeurs: brown; - --connaissance: chocolate; - --txt_connaissance: crimson; - --calendrier: darkkhaki; - --footer: deeppink; - --lightgrey: lightgrey;*/ - -} - -html, body, main{ - margin:0; - padding: 0; - font-size: 13px; -} - -body{ - font-family: monospace; - color: black; -} - -pre{ - padding: 0; - margin: 0; - font-size: 1rem; -} - -p{ - font-size: 1rem; -} - -a{ - color: darkgreen; -} - -h1:after, h2:after{ - content:'\A___________________________________\A"""""""""""""""""""""""""""""""""""'; -} - -h2, h1{ - font-size: 1rem; - font-weight: normal; - margin: 0px; - padding: 0px; - text-align: left; -} - -h2, h1{ - text-transform: uppercase; - white-space:pre; - overflow: hidden; -} - -img{ - width: 100%; -} - -#txt_infras, #txt_outils, #txt_connaissance{ - line-height: 1.3rem; - text-align: justify; - text-justify: inter-character; - hyphens: auto; - word-spacing: -2px; - -ms-hyphens: auto; - -webkit-hyphens: auto; - -moz-hyphens: auto; - margin-top: 0; -} - -.noscroll{ - overflow: hidden; -} - -pre.center{ - font-size: 1rem; - display: flex; - justify-content: center; -} - -div#calendrier > pre.center{ -justify-content: right; -} - -#calendrier #mois_actuel{ - margin-bottom: 1rem; -} - -#mois_actuel, #mois_suivant{ - text-align: center; -} - -.highlight{ - color: var(--day-highlight-color); - background-color: var(--day-highlight-bg); -} - -#txt_connaissance li{ - margin-bottom: 1rem; -} - -#txt_connaissance p{ - margin-top: 0px; -} - -pre.center > a{ - font-size: 1rem; - display: contents; - text-decoration: 1px black solid; -} - -/*GESTION DE LA GRILLE DU DOCUMENT*/ -div#container{ - background-color: var(--day-background); - 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] - ; -} - -/*GESTION DE LA GRILLE DU MAIN*/ -main{ - 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*/ - ; -} - -/*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; - flex-direction: column; - position: fixed; - bottom: 1rem; - 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; -} - -.icone{ - position : relative; - display: inline-block; - text-decoration: none; -} - -.icone .img_top{ - display: none; - position: absolute; - top: 0; - left: 0; - z-index: 99; - background-color: var(--day-background); - color: darkgreen; -} - -.icone:hover .img_top{ - display: inline; -} - -.icone a{ - text-decoration: none; - color:black; -} - -nav#menu > a{ - display: block; - color: black; - text-decoration: none; -} - -nav#menu > a:hover{ - color: darkgreen; - text-decoration: none; -} - -h1#deuxfleurs{ - grid-area: h1-start / col-sep 1 / h1-end / col-sep 12; -} - -div#jardin{ - background-color: var(--jardin); - grid-area: row-start / col-start / jardin-end / col-sep 12; - display: flex; - flex-direction: column; - justify-content: center; - height: 100vh; -} - -div#jardin p{ - display: flex; - justify-content:center; -} - -h2#infras{ - background-color: var(--infras); - grid-area: title-start 1 / col-sep 1 / title-end 1 / col-sep 12; -} - -div#rennes{ - background-color: var(--rennes); - grid-area: illu-start 1 / col-sep 1 / illu-end 1 / col-sep 6; - overflow: hidden; - /*height: 450px;*/ -} - -div#orsay{ - background-color: var(--orsay); - grid-area: illu-start 1 / col-sep 6 / illu-end 1 / col-sep 11; - overflow: hidden; - /*height:450px;*/ -} - -p#txt_infras{ - background-color: var(--txt_infras); - grid-area: txt-start 1 / col-sep 1 / txt-end 1 / col-sep 7; -} - -h2#outils{ - background-color: var(--outils); - grid-area: title-start 2 / col-sep 1 / title-end 2 / col-sep 12; -} - -section#liste_outils{ - background-color: var(--liste_outils); - grid-area: illu-start 2 / col-sep 7 / illu-end 2 / col-sep 11; -} - -section#liste_outils > a > div > p{ - text-align: center; -} - -section#liste_outils > a{ - /*display: contents;*/ - color: black; - text-decoration: none; -} - -section#liste_outils > a:hover{ - color: darkgreen; -} - -div#txt_outils{ - background-color: var(--txt_outils); - grid-area: txt-start 2 / col-sep 1 / txt-end 2 / col-sep 7; -} - -h2#valeurs{ - background-color: var(--valeurs); - grid-area: title-start 3 / col-sep 1 / title-end 3 / col-sep 12; -} - -div#ronce{ - background-color: var(--ronce); - grid-area: illu-start 3 / col-sep 2 / illu-end 3 / col-sep 10; - padding: 0.5rem; - filter: grayscale(100%); - border: 1px dashed black; - transition: filter 0.15s ease 0s; -} - -div#ronce:hover{ - filter: none; -} - -section#liste_valeurs{ - background-color: var(--liste_valeurs); - grid-area: txt-start 3 / col-sep 2 / txt-end 3 / col-sep 10; -} - -h2#connaissance{ - background-color: var(--connaissance); - grid-area: title-start-contact / col-sep 1 / title-end-contact / col-sep 12; -} - -div#txt_connaissance{ - background-color: var(--txt_connaissance); - grid-area: txt-start-contact / col-sep 1 / txt-end-contact / col-sep 6; -} - -div#calendrier{ - background-color: var(--calendrier); - grid-area: txt-start-contact / col-sep 7 / txt-end-contact / col-sep 10; - overflow: hidden; -} - -.mois_actuel, .mois_suivant{ - overflow: hidden; -} - -footer{ - background-color: var(--footer); - grid-area: footer-start / main-col-start / footer-end / main-col-sep 12; -} - -#liens{ - text-align: center; - margin-bottom: var(--med_margin) -} - -/*GESTION DE LA GRILLE LISTE DE NOS VALEURS*/ - -section#liste_valeurs{ - /*on ne peut pas faire plusieurs opérations en même temps dans calc, il faut un calc par opération*/ - --demie-goutiere: calc(var(--small_margin) / 2); - --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*/ - grid-template-rows: - [line1-start] auto [line1-end] - var(--small_margin) - [line2-start] auto [line2-end] - var(--small_margin) - [suivre-start] auto [suivre-end]; -} - -p#coop{ - background-color: var(--lightgrey); - grid-area: line1-start / col2-start / line1-end / col2-mid-left; - text-align: center; -} - -p#autonomie{ - background-color: var(--lightgrey); - grid-area: line1-start / col2-mid-right / line1-end / col2-end; -} - -p#solidarite{ - background-color: var(--lightgrey); - grid-area: line2-start / col2-start / line2-end / col2-mid-left; -} - -p#liberte{ - background-color: var(--lightgrey); - grid-area: line2-start / col2-mid-right / line2-end / col2-end; -} - -p#suivre { - background-color: var(--lightgrey); - grid-area: suivre-start / col2-start / suivre-end / col2-end; - text-align: center; -} - -#coop, #autonomie, #solidarite, #liberte{ - padding: 2rem; - border: 1px dashed black; - text-align: center; -} - -section#liste_outils { - display: grid; - grid-template-columns: 1fr 1fr; - column-gap: 1rem; - row-gap: 1rem; -} - -section#liste_outils > a > div { - overflow: hidden; -} - -div#ordinateur { - background-color: var(--lightgrey); - grid-area: illu-start 2 / col-start / illu-end 2 / col-sep 7; -} - - -div#discussion { - background-color: var(--lightgrey); - grid-area: line1-start / col-start / line1-end / col-mid-left; -} - -div#visio { - background-color: var(--lightgrey); - grid-area: line2-start / col-start / line2-end / col-mid-left; -} - -div#sites-web { - background-color: var(--lightgrey); - grid-area: line3-start / col-start / line3-end / col-mid-left; -} - -div#emails { - background-color: var(--lightgrey); - grid-area: line1-start / col-mid-right / line1-end / col-end; -} - -div#collaboration { - background-color: var(--lightgrey); - grid-area: line2-start / col-mid-right / line2-end / col-end; - -} - -div#blog { - background-color: var(--lightgrey); - grid-area: line3-start / col-mid-right / line3-end / col-end; -} - - -nav ul{ - list-style: none; - padding: 0px; - margin: 0px; -} - - - - - - -/*GESTION DES MEDIA QUERIES*/ - -/*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#infras{ - grid-area: title-start 1 / col-sep 1 / title-end 1 / col-sep 12; -} - -h2#outils{ - grid-area: title-start 2 / col-sep 1 / title-end 2 / col-sep 12; -} - -h2#valeurs{ - grid-area: title-start 3 / col-sep 1 / title-end 3 / col-sep 12; -} - -h2#connaissance{ - grid-area: title-start-contact / col-sep 1 / title-end-contact / col-sep 12; -} - -div#rennes{ - grid-area: illu-start 1 / col-sep 2 / illu-end 1 / col-sep 6; - margin-right: 0.5rem; -} - -div#orsay{ - grid-area: illu-start 1 / col-sep 6 / illu-end 1 / col-sep 10; - margin-left: 0.5rem; -} - -div#rennes, div#orsay{ - border: 1px solid black; - border-radius: 5px; -} - -div#rennes pre.center, div#orsay pre.center{ - margin-top: -5px; - margin-bottom: -5px -} - -div#orsay pre.center{ - justify-content: center; -} - -p#txt_infras{ - background-color: var(--txt_infras); - grid-area: txt-start 1 / col-sep 2 / txt-end 1 / col-sep 10; -} - -div#txt_outils{ - background-color: var(--txt_outils); - grid-area: txt-start 2 / col-sep 2 / txt-end 2 / col-sep 10; -} - -div#txt_connaissance{ - grid-area: txt-start-contact / col-sep 2 / txt-end-contact / col-sep 10; -} - -div#txt_connaissance ul{ - padding-left: 0px; - list-style-position: inside; -} - -div#ordinateur { - grid-area: illu-start 2 / col-sep 1 / illu-end 2 / col-sep 11; - overflow: hidden; -} - -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 { - --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 - - 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{ - 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; -} - -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#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#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; -} - -#mois_actuel, #mois_suivant{ - overflow: hidden; -} - -#mois_actuel{ - margin-bottom: 0px; - margin-right: 2rem; -} - -} - - -/*Smartphones*/ -@media (max-width: 800px){ - -:root{ - --big_margin:50px; - --med_margin:25px; - --small_margin:5px; -} - -h1:before, h1:after{ - content: ''; -} - -h2:before{ - content: '______________________________________________________________________\A""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""\A* '; -} - -h2:after{ - content: ' *\A______________________________________________________________________\A""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""'; -} - -h2, h1{ - font-size: 1rem; - text-align: center; -} - -h2, h1{ - text-transform: uppercase; - white-space: pre; - overflow: hidden; -} - -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#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#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; -} - -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%; -} - -div#txt_connaissance ul{ - padding-left: 0px; - list-style-position: inside; - margin-bottom: var(--med_margin); -} - -.icone > pre{ - font-size: 0.8rem; -} - -#illustration-accueil > pre.center{ - font-size: 0.85rem; -} - -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 pre{ - margin-top: -5px; - margin-bottom: -5px; -} - -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; -} - -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_connaissance{ - grid-area: txt-start-contact / col-sep 1 / txt-end-contact / col-sep 11; -} - -div#ordinateur { - display: none; -} - -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 pre{ - font-size: 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; -} - -#coop, #autonomie, #solidarite, #liberte{ - padding: 1rem; - margin: 0px; -} - -#suivre{ - margin-top: 2rem; -} - -section#liste_valeurs{ - grid-area: txt-start 3 / col-sep 1 / txt-end 3 / col-sep 11; -} - -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 > pre.center { -justify-content: center; -} - -footer pre.center{ - font-size: 0.85rem; -} - -#liens{ - text-align: center; - margin-bottom: 12rem; -} - -} - -@media (prefers-color-scheme: dark) { - div#container, nav#menu, body{ - background-color: var(--night-background); - } - p, pre, ul, li, a, a:hover, h1, h2, footer{ - color: var(--txt-night); - } - .highlight{ - color: var(--night-highlight-color); - background-color: var(--night-highlight-bg); - } - .icone > pre{ - color: var(--txt-night); - } - .icone .img_top{ - background-color: var(--night-background); - color: var(--txt-night); - } - .icone a{ - color: var(--txt-night); - } - div#ronce, #coop, #autonomie, #solidarite, #liberte, nav#menu, div#rennes, div#orsay{ - border-color: var(--txt-night); - } -} -- cgit v1.2.3