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 --- .gitignore | 2 +- README.md | 2 +- img/deuxfleurs-common-ratio.jpg | Bin 233342 -> 0 bytes img/deuxfleurs-rect.jpg | Bin 235381 -> 0 bytes img/deuxfleurs-square.jpg | Bin 252853 -> 0 bytes img/favicon.ico | Bin 15406 -> 0 bytes index.html | 1603 -------------------------------- r/rdv23 | 13 - ronce.webp | Bin 426020 -> 0 bytes script-bon.js | 44 - static/cgu.html | 0 static/img/deuxfleurs-common-ratio.jpg | Bin 0 -> 233342 bytes static/img/deuxfleurs-rect.jpg | Bin 0 -> 235381 bytes static/img/deuxfleurs-square.jpg | Bin 0 -> 252853 bytes static/img/favicon.ico | Bin 0 -> 15406 bytes static/index.html | 1603 ++++++++++++++++++++++++++++++++ static/mentions.html | 0 static/r/rdv23 | 13 + static/risques.html | 0 static/ronce.webp | Bin 0 -> 426020 bytes static/script-bon.js | 44 + static/sources.html | 0 static/style-bon.css | 865 +++++++++++++++++ style-bon.css | 865 ----------------- 24 files changed, 2527 insertions(+), 2527 deletions(-) delete mode 100644 img/deuxfleurs-common-ratio.jpg delete mode 100644 img/deuxfleurs-rect.jpg delete mode 100644 img/deuxfleurs-square.jpg delete mode 100644 img/favicon.ico delete mode 100644 index.html delete mode 100644 r/rdv23 delete mode 100644 ronce.webp delete mode 100644 script-bon.js create mode 100644 static/cgu.html create mode 100644 static/img/deuxfleurs-common-ratio.jpg create mode 100644 static/img/deuxfleurs-rect.jpg create mode 100644 static/img/deuxfleurs-square.jpg create mode 100644 static/img/favicon.ico create mode 100644 static/index.html create mode 100644 static/mentions.html create mode 100644 static/r/rdv23 create mode 100644 static/risques.html create mode 100644 static/ronce.webp create mode 100644 static/script-bon.js create mode 100644 static/sources.html create mode 100644 static/style-bon.css delete mode 100644 style-bon.css diff --git a/.gitignore b/.gitignore index dcb7644..0e3d94f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ -static/ +public/ node_modules/ *.swp .awsclirc diff --git a/README.md b/README.md index 16b9a16..3cb1eb0 100644 --- a/README.md +++ b/README.md @@ -36,5 +36,5 @@ Fabriquons un internet convivial ⤵ ne sont pas copiés ici ``` -aws s3 sync . s3://deuxfleurs.fr +aws s3 sync static/ s3://deuxfleurs.fr ``` diff --git a/img/deuxfleurs-common-ratio.jpg b/img/deuxfleurs-common-ratio.jpg deleted file mode 100644 index 485ec8b..0000000 Binary files a/img/deuxfleurs-common-ratio.jpg and /dev/null differ diff --git a/img/deuxfleurs-rect.jpg b/img/deuxfleurs-rect.jpg deleted file mode 100644 index e515e9f..0000000 Binary files a/img/deuxfleurs-rect.jpg and /dev/null differ diff --git a/img/deuxfleurs-square.jpg b/img/deuxfleurs-square.jpg deleted file mode 100644 index 77e26f8..0000000 Binary files a/img/deuxfleurs-square.jpg and /dev/null differ diff --git a/img/favicon.ico b/img/favicon.ico deleted file mode 100644 index 0d1103c..0000000 Binary files a/img/favicon.ico and /dev/null differ diff --git a/index.html b/index.html deleted file mode 100644 index 693198f..0000000 --- a/index.html +++ /dev/null @@ -1,1603 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Deuxfleurs : fabriquons un internet convivial - - - - - - - - - - -
-
-

💮💮 deuxfleurs

-
- -

Fabriquons un internet convivial ⤵

-
-

💮💮 deuxfleurs

-

Avec nos propres infrastructures

- - -

Nous fournissons des services numériques garantis "sans datacenter". À la place, nous utilisons moins d'une dizaine de vieux ordinateurs reconditionnés à nos domiciles qui peuvent fournir des services numériques à plusieurs dizaines de milliers de personnes. Actuellement ces ordinateurs sont situés à Lyon, Orsay, Lille et Bruxelles. Nous avons également des machines à Suresnes pour les sauvegardes. En savoir plus.

Cette infrastructure atypique nous mène à développer de nouveaux logiciels libres. Si vous êtes dans la technique, vous pourriez être intéressé·e par Garage, Bottin, Tricot, Diplonat et nos autres projets.

-

Avec nos services sobres

-
- -
-
- - - - - - - - - - - - - - - - - - -
-
-

Remplacez WhatsApp, Slack, Gmail, Zoom ou encore Google Drive par des outils Deuxfleurs. Nous proposons des alternatives sobres et non-marchandes à ces services, pour que vous restiez en contact avec votre entourage, votre association ou votre collectif.

-

Envie de faire entendre votre voix sur Internet ? Nous mettons à disposition plusieurs outils de publication sur le web allant de la plateforme de blog partagée à la publication de sites web en autonomie.

-

Prenez contact avec nous, nous vous aiderons à identifier les outils dont vous avez besoin et nous vous accompagnerons dans votre transition. ⤵

-
-

Avec des valeurs fortes

-
- Deux personnages qui regardent et s'avancent vers une maison cabane perchée dans un arbre, illustrant notre envie d'un internet plus éthique. -
-
-

La coopération - eg. promouvoir l'intéropérabilité, les communs, le libre, et les formats de données ouverts

-

L'autonomie - eg. gérer nos propres moyens de communications, prendre nos propres décisions

-

La solidarité - eg. partager le savoir, partager les ressources informatiques, s'entraider pour la gestion des services

-

La liberté - eg. permettre à toutes et tous de s'exprimer, respecter la vie privée

-

Suivez notre actualité, réflexions et analyses sur notre blog Plume

-
-

Faisons connaissance

-
-

L'accès à nos services est à prix libre. Nous estimons leur coût à 15€/an/compte pour leur maintien en fonctionnement et recommandons le double pour permettre à l'association de se développer. Il est conditionné par les ressources disponibles, à la fois matérielles et humaines.

-

Pour accéder à nos services ou simplement discuter avec nous, écrivez à coucou[@]deuxfleurs.fr, rejoignez-nous sur le salon Matrix #deuxfleurs:deuxfleurs.fr ou rencontrez-nous à :

-
    - - - - - - - - - - - - - - - - - - - - - -
  • Réunion mensuelle "au coin du feu" en ligne, le 5 septembre à 19h.
    Un fois par mois nous organisons une réunion en ligne informelle. C'est le bon moment pour venir faire un coucou si vous voulez parler à des gens de vive voix numérique.
    • -
  • Soirée affaire du «8 décembre» à la bourse du travail à Paris, le 25 septembre à 19h00.
    Soirée de discussion autour de la criminalisation du chiffrement à l’œuvre dans l’affaire du «8 décembre», en présence de la Quadrature du Net, N0thing2Hide, le SNJ, et les avocat·es concernés. Vous pourrez y trouver Vincent.
    • -
  • Permanence associative autour du Libre au Café Citoyen à Lille, le 26 septembre à 20h00.
    La permanence associative autour du Libre est une manifestation conviviale, ouverte à toutes et tous, organisée le dernier mardi de chaque mois par les associations Chtinux, Raoull et Deuxfleurs, avec l'amicale participation de Mycélium, CLX et Cliss XXI. Vous pourrez y croiser Adrien.
    • -
  • Quadrapero au Garage de la Quadrature de Net, le 29 septembre à 19h00.
    Apéritif convivial pour discuter des divers enjeux en cours autour des droits et libertés numériques, en présence de membres de la Quadrature du Net et de bien autres intéressés. Vous y verrez Vincent.
    • -
  • Grand RDV Salle Irène Joliot-Curie à Vénissieux, le 30 septembre à 9h00.
    Nous y tiendrons un stand Deuxfleurs sur le "numérique durable" où nous parlerons d'obsolescence dans le numérique et des solutions qu'on explore. Vous y verrez Quentin et Léa.
    • - - - -
  • Réunion mensuelle "au coin du feu" en ligne, le 3 octobre à 19h.
    Un fois par mois nous organisons une réunion en ligne informelle. C'est le bon moment pour venir faire un coucou si vous voulez parler à des gens de vive voix numérique.
    • -
  • Assemblée pour les CHATONS à Paris VIII, le 14 octobre à 9h.
    (Réservé en priorité aux CHATONS) Nous serons à Paris pour discuter de l'avenir du collectif le temps d'une journée.
    • -
  • Permanence associative autour du Libre au Café Citoyen à Lille, le 31 octobre à 20h00.
    La permanence associative autour du Libre est une manifestation conviviale, ouverte à toutes et tous, organisée le dernier mardi de chaque mois, et regroupant les collectifs Chtinux, Raoull, Deuxfleurs, Mycélium, CLX et Cliss XXI.
    • - -
- -
-
- - - - - - - - -
-
- - -
-
- - - - diff --git a/r/rdv23 b/r/rdv23 deleted file mode 100644 index 6a8556c..0000000 --- a/r/rdv23 +++ /dev/null @@ -1,13 +0,0 @@ - - - - - Redirection automatique en HTML - - - - -

Cette page est une redirection vers : Vénissieux Grand RDV 2023

- - - diff --git a/ronce.webp b/ronce.webp deleted file mode 100644 index de8ad38..0000000 Binary files a/ronce.webp and /dev/null differ diff --git a/script-bon.js b/script-bon.js deleted file mode 100644 index 5458968..0000000 --- a/script-bon.js +++ /dev/null @@ -1,44 +0,0 @@ -// dictionary to keep track of frame count for each animation -let frameCounts = {}; - -function animate(id, delay) { - - // get the container and frames for the amination - const container = document.getElementById(id); - const frames = container.children; - - // set up the frame counter - frameCounts[id] = 0; - - // hide all frames except for the first - frames[0].style.display = "flex"; - for (let i = 1; i < frames.length; i++) { - frames[i].style.display = "none"; - } - - // start the animation - const interval = setInterval(updateAnimation, delay, id, frames, frames.length); - -} - -function updateAnimation(id, frames, totalFrames) { - - // increment the frame counter for the given id - frameCounts[id] = (frameCounts[id] + 1) % totalFrames; - - // show the next frame - frames[frameCounts[id]].style.display = "flex"; - - // hide the previous frame - if (frameCounts[id] == 0) { - frames[totalFrames - 1].style.display = "none"; - } else { - frames[frameCounts[id] - 1].style.display = "none"; - } - -} - -animate("illustration-accueil", 500); -animate("rennes", 1000); -animate("orsay", 2000); -animate("parterre", 1500); \ No newline at end of file diff --git a/static/cgu.html b/static/cgu.html new file mode 100644 index 0000000..e69de29 diff --git a/static/img/deuxfleurs-common-ratio.jpg b/static/img/deuxfleurs-common-ratio.jpg new file mode 100644 index 0000000..485ec8b Binary files /dev/null and b/static/img/deuxfleurs-common-ratio.jpg differ diff --git a/static/img/deuxfleurs-rect.jpg b/static/img/deuxfleurs-rect.jpg new file mode 100644 index 0000000..e515e9f Binary files /dev/null and b/static/img/deuxfleurs-rect.jpg differ diff --git a/static/img/deuxfleurs-square.jpg b/static/img/deuxfleurs-square.jpg new file mode 100644 index 0000000..77e26f8 Binary files /dev/null and b/static/img/deuxfleurs-square.jpg differ diff --git a/static/img/favicon.ico b/static/img/favicon.ico new file mode 100644 index 0000000..0d1103c Binary files /dev/null and b/static/img/favicon.ico differ diff --git a/static/index.html b/static/index.html new file mode 100644 index 0000000..693198f --- /dev/null +++ b/static/index.html @@ -0,0 +1,1603 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Deuxfleurs : fabriquons un internet convivial + + + + + + + + + + +
+
+

💮💮 deuxfleurs

+
+ +

Fabriquons un internet convivial ⤵

+
+

💮💮 deuxfleurs

+

Avec nos propres infrastructures

+ + +

Nous fournissons des services numériques garantis "sans datacenter". À la place, nous utilisons moins d'une dizaine de vieux ordinateurs reconditionnés à nos domiciles qui peuvent fournir des services numériques à plusieurs dizaines de milliers de personnes. Actuellement ces ordinateurs sont situés à Lyon, Orsay, Lille et Bruxelles. Nous avons également des machines à Suresnes pour les sauvegardes. En savoir plus.

Cette infrastructure atypique nous mène à développer de nouveaux logiciels libres. Si vous êtes dans la technique, vous pourriez être intéressé·e par Garage, Bottin, Tricot, Diplonat et nos autres projets.

+

Avec nos services sobres

+
+ +
+
+ + + + + + + + + + + + + + + + + + +
+
+

Remplacez WhatsApp, Slack, Gmail, Zoom ou encore Google Drive par des outils Deuxfleurs. Nous proposons des alternatives sobres et non-marchandes à ces services, pour que vous restiez en contact avec votre entourage, votre association ou votre collectif.

+

Envie de faire entendre votre voix sur Internet ? Nous mettons à disposition plusieurs outils de publication sur le web allant de la plateforme de blog partagée à la publication de sites web en autonomie.

+

Prenez contact avec nous, nous vous aiderons à identifier les outils dont vous avez besoin et nous vous accompagnerons dans votre transition. ⤵

+
+

Avec des valeurs fortes

+
+ Deux personnages qui regardent et s'avancent vers une maison cabane perchée dans un arbre, illustrant notre envie d'un internet plus éthique. +
+
+

La coopération - eg. promouvoir l'intéropérabilité, les communs, le libre, et les formats de données ouverts

+

L'autonomie - eg. gérer nos propres moyens de communications, prendre nos propres décisions

+

La solidarité - eg. partager le savoir, partager les ressources informatiques, s'entraider pour la gestion des services

+

La liberté - eg. permettre à toutes et tous de s'exprimer, respecter la vie privée

+

Suivez notre actualité, réflexions et analyses sur notre blog Plume

+
+

Faisons connaissance

+
+

L'accès à nos services est à prix libre. Nous estimons leur coût à 15€/an/compte pour leur maintien en fonctionnement et recommandons le double pour permettre à l'association de se développer. Il est conditionné par les ressources disponibles, à la fois matérielles et humaines.

+

Pour accéder à nos services ou simplement discuter avec nous, écrivez à coucou[@]deuxfleurs.fr, rejoignez-nous sur le salon Matrix #deuxfleurs:deuxfleurs.fr ou rencontrez-nous à :

+
    + + + + + + + + + + + + + + + + + + + + + +
  • Réunion mensuelle "au coin du feu" en ligne, le 5 septembre à 19h.
    Un fois par mois nous organisons une réunion en ligne informelle. C'est le bon moment pour venir faire un coucou si vous voulez parler à des gens de vive voix numérique.
    • +
  • Soirée affaire du «8 décembre» à la bourse du travail à Paris, le 25 septembre à 19h00.
    Soirée de discussion autour de la criminalisation du chiffrement à l’œuvre dans l’affaire du «8 décembre», en présence de la Quadrature du Net, N0thing2Hide, le SNJ, et les avocat·es concernés. Vous pourrez y trouver Vincent.
    • +
  • Permanence associative autour du Libre au Café Citoyen à Lille, le 26 septembre à 20h00.
    La permanence associative autour du Libre est une manifestation conviviale, ouverte à toutes et tous, organisée le dernier mardi de chaque mois par les associations Chtinux, Raoull et Deuxfleurs, avec l'amicale participation de Mycélium, CLX et Cliss XXI. Vous pourrez y croiser Adrien.
    • +
  • Quadrapero au Garage de la Quadrature de Net, le 29 septembre à 19h00.
    Apéritif convivial pour discuter des divers enjeux en cours autour des droits et libertés numériques, en présence de membres de la Quadrature du Net et de bien autres intéressés. Vous y verrez Vincent.
    • +
  • Grand RDV Salle Irène Joliot-Curie à Vénissieux, le 30 septembre à 9h00.
    Nous y tiendrons un stand Deuxfleurs sur le "numérique durable" où nous parlerons d'obsolescence dans le numérique et des solutions qu'on explore. Vous y verrez Quentin et Léa.
    • + + + +
  • Réunion mensuelle "au coin du feu" en ligne, le 3 octobre à 19h.
    Un fois par mois nous organisons une réunion en ligne informelle. C'est le bon moment pour venir faire un coucou si vous voulez parler à des gens de vive voix numérique.
    • +
  • Assemblée pour les CHATONS à Paris VIII, le 14 octobre à 9h.
    (Réservé en priorité aux CHATONS) Nous serons à Paris pour discuter de l'avenir du collectif le temps d'une journée.
    • +
  • Permanence associative autour du Libre au Café Citoyen à Lille, le 31 octobre à 20h00.
    La permanence associative autour du Libre est une manifestation conviviale, ouverte à toutes et tous, organisée le dernier mardi de chaque mois, et regroupant les collectifs Chtinux, Raoull, Deuxfleurs, Mycélium, CLX et Cliss XXI.
    • + +
+ +
+
+ + + + + + + + +
+
+ + +
+
+ + + + diff --git a/static/mentions.html b/static/mentions.html new file mode 100644 index 0000000..e69de29 diff --git a/static/r/rdv23 b/static/r/rdv23 new file mode 100644 index 0000000..6a8556c --- /dev/null +++ b/static/r/rdv23 @@ -0,0 +1,13 @@ + + + + + Redirection automatique en HTML + + + + +

Cette page est une redirection vers : Vénissieux Grand RDV 2023

+ + + diff --git a/static/risques.html b/static/risques.html new file mode 100644 index 0000000..e69de29 diff --git a/static/ronce.webp b/static/ronce.webp new file mode 100644 index 0000000..de8ad38 Binary files /dev/null and b/static/ronce.webp differ diff --git a/static/script-bon.js b/static/script-bon.js new file mode 100644 index 0000000..5458968 --- /dev/null +++ b/static/script-bon.js @@ -0,0 +1,44 @@ +// dictionary to keep track of frame count for each animation +let frameCounts = {}; + +function animate(id, delay) { + + // get the container and frames for the amination + const container = document.getElementById(id); + const frames = container.children; + + // set up the frame counter + frameCounts[id] = 0; + + // hide all frames except for the first + frames[0].style.display = "flex"; + for (let i = 1; i < frames.length; i++) { + frames[i].style.display = "none"; + } + + // start the animation + const interval = setInterval(updateAnimation, delay, id, frames, frames.length); + +} + +function updateAnimation(id, frames, totalFrames) { + + // increment the frame counter for the given id + frameCounts[id] = (frameCounts[id] + 1) % totalFrames; + + // show the next frame + frames[frameCounts[id]].style.display = "flex"; + + // hide the previous frame + if (frameCounts[id] == 0) { + frames[totalFrames - 1].style.display = "none"; + } else { + frames[frameCounts[id] - 1].style.display = "none"; + } + +} + +animate("illustration-accueil", 500); +animate("rennes", 1000); +animate("orsay", 2000); +animate("parterre", 1500); \ No newline at end of file diff --git a/static/sources.html b/static/sources.html new file mode 100644 index 0000000..e69de29 diff --git a/static/style-bon.css b/static/style-bon.css new file mode 100644 index 0000000..3635d6e --- /dev/null +++ b/static/style-bon.css @@ -0,0 +1,865 @@ +/*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); + } +} 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