From ab4e5f247273088865765fbac09c3e5047e08992 Mon Sep 17 00:00:00 2001 From: Quentin Dufour Date: Tue, 17 Oct 2023 12:26:09 +0200 Subject: =?UTF-8?q?d=C3=A9couapge=20du=20CSS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/cgu.html | 595 +++++++++++++++++++++++++++++++ static/css/home.css | 576 ++++++++++++++++++++++++++++++ static/css/layout.css | 263 ++++++++++++++ static/css/page-generic.css | 20 ++ static/index.html | 18 +- static/style-bon.css | 842 -------------------------------------------- 6 files changed, 1465 insertions(+), 849 deletions(-) create mode 100644 static/css/home.css create mode 100644 static/css/layout.css create mode 100644 static/css/page-generic.css delete mode 100644 static/style-bon.css (limited to 'static') diff --git a/static/cgu.html b/static/cgu.html index e69de29..a407251 100644 --- a/static/cgu.html +++ b/static/cgu.html @@ -0,0 +1,595 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Deuxfleurs : fabriquons un internet convivial + + + + + + + + + + + +
+
+

💮💮 deuxfleurs

+
+
+
+

10/03/2022

En utilisant les services de Deuxfleurs, vous acceptez d’être lié par les conditions suivantes.

Évolution des conditions générales d'utilisation

Deuxfleurs se réserve le droit de mettre à jour et modifier ces conditions. Dans ce cas, Deuxfleurs informe les personnes concernées par mail si elle le peut ou par un affichage sur le site.

Accès aux services

Certains services sont en accès libre, d'autre requièrent un compte. Vous pouvez obtenir un compte par cooptation d'un membre existant ou en faisant une demande directement par email à l'association. +Certains services sont soumis à l'approbation préalable de Deuxfleurs selon les ressources disponibles. La liste des services et leurs conditions d'accès peut-être obtenue en contactant l'association.

Fonctionnement

Délais de mise en service

Deuxfleurs propose ses services grâce à des bénévoles, de ce fait Deuxfleurs ne s’engage sur aucun délai de mise en service. Nous essayons toutefois de faire de notre mieux pour les fournir dans les 7 jours.

Transmission sécurisée d’identifiants

Deuxfleurs ne vous demandera jamais de communiquer vos mots ou phrases de passe. +Lorsque Deuxfleurs doit vous transmettre un identifiant, Deuxfleurs le fera via email ou en physique.

Intervention en cas de panne

En cas de panne constatée et si aucun message n’atteste sur la page de statut que Deuxfleurs est en train de corriger le dysfonctionnement, vous devez faire un signalement via Matrix.

Deuxfleurs propose l’ensemble de ses services grâce à des bénévoles qui feront ce qu’ils et elles peuvent pour résoudre les problèmes techniques qui pourraient subvenir.

Intégrité des données

Deuxfleurs réalise des sauvegardes quotidiennes afin d’éviter des pertes de données. Les sauvegardes sont conservées selon cette politique suivante : 1/jour jusqu’à 1 mois, 1/semaine jusqu’à 3 mois, 1/mois jusqu’à 1 an. Les sauvegardes sont stockées de manière chiffrée avec un mot de passe par l'association à Suresnes.

Deuxfleurs ne peut être tenu responsable de l’intégrité des données et des conséquences liées à une perte de données.

Deuxfleurs recommande aux usager·es d’avoir une sauvegarde locale afin d’assurer l’intégrité de leurs données.

Responsabilité de Deuxfleurs

Deuxfleurs est assujetti à une obligation de moyens. En cas de défaillance, Deuxfleurs ne peut être tenu pour responsable des dommages indirects tels que pertes d’exploitation, préjudices commerciaux, perte de Clientèle, de chiffre d’affaires, de bénéfices ou d’économies prévus, ou de tout autre préjudice indirect.

Mésusage des services

Vous devez respecter les lois et réglementations en vigueur lors de l’usage des services proposés que ce soit en matière de respect de la vie privée, d’envoi de mails en grande quantité, de propriété intellectuelle, de propos discriminatoires, d’appel à la haine, de harcèlement, d’atteinte aux libertés fondamentales de personnes, etc.

En cas d’usage prohibé, Deuxfleurs peut se trouver dans l’obligation de déclencher la suspension totale ou partielle du service, le retrait de contenu, ou toute autre mesure que les lois et réglementations lui imposent. Vous devez respecter les autres utilisateurs en faisant preuve de civisme et de politesse. Deuxfleurs se réserve le droit de supprimer tout contenu paraissant non pertinent ou contrevenant à ces principes, selon son seul jugement.

Par ailleurs, si un ou une utilisatrice abuse du service, par exemple en monopolisant des ressources machines partagées, son contenu ou son accès pourra être supprimé, si nécessaire sans avertissement ni négociation. Deuxfleurs reste seul juge de cette notion « d’abus » dans le but de fournir le meilleur service possible à l’ensemble des usagers et usagères.

Devenir des services

Deuxfleurs peut par ailleurs choisir (de résilier des abonnements ou) d’arrêter des services si Deuxfleurs estime ne plus être en mesure de fournir lesdits services. Si Deuxfleurs en a la possibilité, elle fera de son mieux pour laisser un délai suffisant pour permettre à tout le monde de migrer sereinement.

Support et conseil

Vous pouvez nous signaler des souhaits sur la création de futur service, mais sachez que nous ne pourrons pas créer de nouveaux services en moins de 6 mois. Deuxfleurs pourra toutefois vous rediriger vers des chatons à même de répondre à vos demandes.

En dehors de dysfonctionnement technique, Deuxfleurs propose également de vous aider dans la réalisation de votre projet avec les services de Deuxfleurs selon l'envie et le temps disponible de ses membres. Deuxfleurs se réserve le droit de facturer le temps de support et de conseil pour des projets importants après avoir prévenu les utilisateurs en amont.

Résiliation d’un compte

Si vous souhaitez résilier un compte, vous devez le signaler à Deuxfleurs.

Nos engagements

Deuxfleurs n’exploitera vos données personnelles que dans le cadre de ces 5 finalités:

  • fournir le service pour lesquels vous avez transmis vos données
  • produire d‘éventuelles statistiques anonymisées et agrégées
  • vous prévenir d’un changement important sur le service (panne, notification d’intrusion et de vol de données, changement d’interface, date d’arrêt du service...)
  • obtenir votre avis sur les services et l’action de l’association
  • vous inviter à participer à un évènement de Deuxfleurs

Deuxfleurs ne transmettra ni ne revendra vos données personnelles (votre vie privée nous tient - vraiment - à cœur). Votre contenu vous appartient tout autant, toutefois, nous vous encourageons à le publier sous licence libre si c’est pertinent.

Une modification du paragraphe précédent, contrairement au reste de la présente charte, ne peut se faire simplement par une simple notification. Si une telle modification devait survenir, elle :

  • Ne serait pas rétroactive
  • Demandera un accord explicite de votre part pour continuer à utiliser les services fournis par Deuxfleurs
  • Provoquera une révocation préalable à la modification auprès de tous les soutiens de Deuxfleurs ayant à cœur les problématiques de respect de la vie privée.

Charte CHATONS

Deuxfleurs s’engage à respecter la charte du Collectif des Hébergeurs Alternatifs, Transparents, Ouverts, Neutres et Solidaires dans le cadre de son activité d’hébergeur et de fourniture de services en ligne

Deuxfleurs est candidat à l’intégration au sein de ce collectif.

Plus d’information sur la charte C.H.A.T.O.N.S. : chatons.org/fr/charte

Localisation des données

Vos données sont localisées en France et en Belgique, sur les serveurs de nos membres. Un détail complet de l'infrastructure et de l'emplacement des données par service est disponible sur notre page Infrastructure.

Devenir des données

Une fois le compte clôturé, Deuxfleurs peut procéder à la suppression des données.

Certains services en libre accès permettent de configurer la péremption des données, d’autres les conservent de façon permanentes, mais vous pouvez demander leur retrait si vous pouvez prouver que vous en êtes l’auteur⋅ice.

Exercice de vos droits

Conformément à l’article 34 de la loi « Informatique et Libertés », vous pouvez exercer les droits suivant en envoyant un mail à ca arobase deuxfleurs point fr :

  • droits d’accès, de rectification, d’effacement et d’opposition
  • droit à la limitation du traitement
  • droit à la portabilité des données
  • droit de ne pas faire l’objet d’une décision individuelle automatisée

RGPD

Vous et Deuxfleurs s’engagent à respecter la réglementation en vigueur applicable au traitement de données à caractère personnel et, en particulier, le règlement (UE) 2016/679 du Parlement européen et du Conseil du 27 avril 2016 applicable à compter du 25 mai 2018, dite RGPD.

Litige et juridiction compétente

Le droit applicable aux présentes est le droit français. En cas de différent, les parties recherchent une solution amiable. Si la démarche échoue, le litige sera tranché par le Tribunal de Grande Instance de Rennes.

Le fait que l’usager ou Deuxfleurs ne se prévale pas à un moment donné de l’une des présentes conditions générales et/ou tolère un manquement par l’autre partie ne peut être interprété comme valant renonciation par l’usager ou Deuxfleurs à se prévaloir ultérieurement de ces conditions.

La nullité d’une des clauses de ces conditions en application d’une loi, d’une réglementation ou d’une décision de justice n’implique pas la nullité de l’ensemble des autres clauses. Par ailleurs l’esprit général de la clause sera à conserver en accord avec le droit applicable.

+
+
+
+ + + + + + + + + diff --git a/static/css/home.css b/static/css/home.css new file mode 100644 index 0000000..e8b1cdc --- /dev/null +++ b/static/css/home.css @@ -0,0 +1,576 @@ +/*GESTION DE LA GRILLE DE LA PAGE PRINCIPALE */ +main { + 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] 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*/ + ; +} + +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; +} + +/*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; +} + + +/*GESTION DES MEDIA QUERIES*/ + +/*Tablettes et petits ordinateurs*/ +@media (max-width: 1500px) and (min-width: 801px){ + 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{ + 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){ + 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; + } + +} + +/* En vrac */ +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; +} + + +#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; +} diff --git a/static/css/layout.css b/static/css/layout.css new file mode 100644 index 0000000..6b754b3 --- /dev/null +++ b/static/css/layout.css @@ -0,0 +1,263 @@ +/*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;*/ + +} + +/* PAR DEFAUT */ +html, body, main{ + margin:0; + padding: 0; + font-size: 13px; +} + +body{ + font-family: monospace; + color: black; + background-color: var(--day-background); +} + +pre{ + padding: 0; + margin: 0; + font-size: 1rem; +} + +p{ + font-size: 1rem; +} + +a{ + color: darkgreen; +} + + +nav ul{ + list-style: none; + padding: 0px; + margin: 0px; +} + +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%; +} + +.noscroll{ + overflow: hidden; +} + +/*GESTION DE LA GRILLE DU DOCUMENT*/ +div#container{ + display: grid; + grid-template-columns: [main-col-start] repeat(12, calc(100% / 12) [main-col-sep]); + grid-template-rows: + [main-row-debut] var(--med_margin) [header-start] auto [header-end] var(--big_margin) [core-start] auto [main-row-fin] + var(--big_margin) + [footer-start] auto [footer-end] + ; +} + +/* EN-TETE */ +header { + grid-area: header-start / main-col-sep 1 / header-end / main-col-sep 12; +} + +/* PIED DE PAGE */ +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) +} + +/* MENU */ +nav#menu{ + background-color: var(--day-background); + display: flex; + justify-content: flex-end; + flex-direction: column; + position: fixed; + bottom: 1rem; + right: 1rem; +} + +.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; +} + +/* ILLUSTRATIONS ASCII (Y COMPRIS FOOTER) */ +pre.center{ + font-size: 1rem; + display: flex; + justify-content: center; +} + +pre.hide { + display: none; +} +pre.center > a{ + font-size: 1rem; + display: contents; + text-decoration: 1px black solid; +} + +/* RESPONSIVE */ +/* Tablettes */ +@media (max-width: 1500px) and (min-width: 801px) { + h2, h1{ + font-size: 1rem; + font-weight: normal; + margin: 0px; + padding: 0px; + text-transform: uppercase; + white-space:pre; + overflow: hidden; + } +} + +/* 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; + } + +} + +/* THEME SOMBRE */ +@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/static/css/page-generic.css b/static/css/page-generic.css new file mode 100644 index 0000000..cc41691 --- /dev/null +++ b/static/css/page-generic.css @@ -0,0 +1,20 @@ +/*GESTION DE LA GRILLE D'UNE PAGE DE TEXTE LEGAL/INFO/BORRING */ +main { + grid-area: core-start / main-col-sep 3 / main-row-fin / main-col-sep 9; +} + +/* Tablettes */ +@media (max-width: 1500px) and (min-width: 801px) { + main { + grid-area: core-start / main-col-sep 1 / main-row-fin / main-col-sep 11; + } +} + +/* Smartphones */ +@media (max-width: 800px) { + main { + grid-area: core-start / main-col-start / main-row-fin / main-col-sep 12; + } +} + + diff --git a/static/index.html b/static/index.html index 9a2cb4b..48cf469 100644 --- a/static/index.html +++ b/static/index.html @@ -38,7 +38,8 @@ Deuxfleurs : fabriquons un internet convivial - + + @@ -98,10 +99,14 @@
-
-

💮💮 deuxfleurs

-
- diff --git a/static/style-bon.css b/static/style-bon.css deleted file mode 100644 index 34e8ab5..0000000 --- a/static/style-bon.css +++ /dev/null @@ -1,842 +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; -} - -pre.hide { - display: none; -} - -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.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*/ - ; -} - -/*POSITIONNEMENT SUR LA GRILLE PRINCIPALE*/ -nav#menu{ - background-color: var(--day-background); - display: flex; - justify-content: flex-end; - flex-direction: column; - position: fixed; - bottom: 1rem; - right: 1rem; -} - -.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{ - 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