WIP: feat/UnderlignedTitle closes #18 #33

Draft
adrian wants to merge 6 commits from adrian/site:feat/UnderlignedTitle into feat/a11y
3 changed files with 26 additions and 23 deletions
Showing only changes of commit 1508aa1da3 - Show all commits

View file

@ -34,9 +34,11 @@ div#jardin p{
justify-content:center; justify-content:center;
} }
h2#infras{ h2.infras{
background-color: var(--infras); background-color: var(--infras);
grid-area: title-start 1 / col-sep 1 / title-end 1 / col-sep 12; grid-area: title-start 1 / col-sep 1 / title-end 1 / col-sep 12;
padding-bottom: 10px; /* Ajoutez de l'espace en dessous du texte */
} }
div#rennes{ div#rennes{
@ -58,7 +60,7 @@ p#txt_infras{
grid-area: txt-start 1 / col-sep 1 / txt-end 1 / col-sep 7; grid-area: txt-start 1 / col-sep 1 / txt-end 1 / col-sep 7;
} }
h2#outils{ h2.outils{
background-color: var(--outils); background-color: var(--outils);
grid-area: title-start 2 / col-sep 1 / title-end 2 / col-sep 12; grid-area: title-start 2 / col-sep 1 / title-end 2 / col-sep 12;
} }
@ -87,7 +89,7 @@ div#txt_outils{
grid-area: txt-start 2 / col-sep 1 / txt-end 2 / col-sep 7; grid-area: txt-start 2 / col-sep 1 / txt-end 2 / col-sep 7;
} }
h2#valeurs{ h2.valeurs{
background-color: var(--valeurs); background-color: var(--valeurs);
grid-area: title-start 3 / col-sep 1 / title-end 3 / col-sep 12; grid-area: title-start 3 / col-sep 1 / title-end 3 / col-sep 12;
} }
@ -110,7 +112,7 @@ section#liste_valeurs{
grid-area: txt-start 3 / col-sep 2 / txt-end 3 / col-sep 10; grid-area: txt-start 3 / col-sep 2 / txt-end 3 / col-sep 10;
} }
h2#connaissance{ h2.connaissance{
background-color: var(--connaissance); background-color: var(--connaissance);
grid-area: title-start-contact / col-sep 1 / title-end-contact / col-sep 12; grid-area: title-start-contact / col-sep 1 / title-end-contact / col-sep 12;
} }
@ -235,19 +237,19 @@ div#blog {
/*Tablettes et petits ordinateurs*/ /*Tablettes et petits ordinateurs*/
@media (max-width: 1500px) and (min-width: 801px){ @media (max-width: 1500px) and (min-width: 801px){
h2#infras{ h2.infras{
grid-area: title-start 1 / col-sep 1 / title-end 1 / col-sep 12; grid-area: title-start 1 / col-sep 1 / title-end 1 / col-sep 12;
} }
h2#outils{ h2.outils{
grid-area: title-start 2 / col-sep 1 / title-end 2 / col-sep 12; grid-area: title-start 2 / col-sep 1 / title-end 2 / col-sep 12;
} }
h2#valeurs{ h2.valeurs{
grid-area: title-start 3 / col-sep 1 / title-end 3 / col-sep 12; grid-area: title-start 3 / col-sep 1 / title-end 3 / col-sep 12;
} }
h2#connaissance{ h2.connaissance{
grid-area: title-start-contact / col-sep 1 / title-end-contact / col-sep 12; grid-area: title-start-contact / col-sep 1 / title-end-contact / col-sep 12;
} }
@ -372,19 +374,19 @@ div#blog {
/*Smartphones*/ /*Smartphones*/
@media (max-width: 800px){ @media (max-width: 800px){
h2#infras{ h2.infras{
grid-area: title-start 1 / col-start / title-end 1 / col-sep 12; grid-area: title-start 1 / col-start / title-end 1 / col-sep 12;
} }
h2#outils{ h2.outils{
grid-area: title-start 2 / col-start / title-end 2 / col-sep 12; grid-area: title-start 2 / col-start / title-end 2 / col-sep 12;
} }
h2#valeurs{ h2.valeurs{
grid-area: title-start 3 / col-start / title-end 3 / col-sep 12; grid-area: title-start 3 / col-start / title-end 3 / col-sep 12;
} }
h2#connaissance{ h2.connaissance{
grid-area: title-start-contact / col-start / title-end-contact / col-sep 12; grid-area: title-start-contact / col-start / title-end-contact / col-sep 12;
} }

View file

@ -66,10 +66,6 @@ nav ul{
margin: 0px; margin: 0px;
} }
h1:after, h2:after{
content:'\A___________________________________\A"""""""""""""""""""""""""""""""""""';
}
h2, h1{ h2, h1{
font-size: 1rem; font-size: 1rem;
font-weight: normal; font-weight: normal;

View file

@ -102,6 +102,7 @@
<header> <header>
<h1 id="deuxfleurs"><span role="img" aria-label="2 emojis fleur blanche">💮💮 </span>deuxfleurs</h1> <h1 id="deuxfleurs"><span role="img" aria-label="2 emojis fleur blanche">💮💮 </span>deuxfleurs</h1>
<h1 aria-hidden="true">___________________________________<br>"""""""""""""""""""""""""""""""""""</h1>
</header> </header>
<main aria-label="contenu de la page web"> <main aria-label="contenu de la page web">
@ -489,7 +490,8 @@
</div> </div>
<p>Fabriquons un internet convivial ⤵</p> <p>Fabriquons un internet convivial ⤵</p>
</div> </div>
<h2 id="infras">Avec nos propres infrastructures</h2> <h2 class="infras">Avec nos propres infrastructures</h2>
<h2 class="infras" aria-hidden="true"><br>____________________________________<br>""""""""""""""""""""""""""""""""""""</h2>
<div id="rennes" role="img" aria-label="illustration de trois serveurs informatiques rangés dans la bibliothèque d'un salon"> <div id="rennes" role="img" aria-label="illustration de trois serveurs informatiques rangés dans la bibliothèque d'un salon">
<!--diode qui clignote ?--> <!--diode qui clignote ?-->
<pre class="center">/¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨\ <pre class="center">/¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨\
@ -721,7 +723,8 @@
\___________`_______________________________________________________`___________/</pre> \___________`_______________________________________________________`___________/</pre>
</div> </div>
<p id="txt_infras" lang="fr">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 à Orsay, Lille et Bruxelles. Nous avons également des machines à Suresnes pour les sauvegardes. <a href="https://guide.deuxfleurs.fr/infrastructures/">En savoir plus</a>. <br><br>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 <a href="https://garagehq.deuxfleurs.fr/">Garage</a>, <a href="https://bottin.eu">Bottin</a>, <a href="https://git.deuxfleurs.fr/lx/tricot">Tricot</a>, <a href="https://git.deuxfleurs.fr/Deuxfleurs/diplonat">Diplonat</a> et nos <a href="https://git.deuxfleurs.fr/Deuxfleurs">autres projets</a>.</p> <p id="txt_infras" lang="fr">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 à Orsay, Lille et Bruxelles. Nous avons également des machines à Suresnes pour les sauvegardes. <a href="https://guide.deuxfleurs.fr/infrastructures/">En savoir plus</a>. <br><br>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 <a href="https://garagehq.deuxfleurs.fr/">Garage</a>, <a href="https://bottin.eu">Bottin</a>, <a href="https://git.deuxfleurs.fr/lx/tricot">Tricot</a>, <a href="https://git.deuxfleurs.fr/Deuxfleurs/diplonat">Diplonat</a> et nos <a href="https://git.deuxfleurs.fr/Deuxfleurs">autres projets</a>.</p>
<h2 id="outils">Avec nos services sobres</h2> <h2 class="outils">Avec nos services sobres</h2>
<h2 class="outils" aria-hidden="true"><br>____________________________________<br>""""""""""""""""""""""""""""""""""""</h2>
<div id="ordinateur"> <div id="ordinateur">
<pre class="center" aria-hidden="true"> <pre class="center" aria-hidden="true">
@ -847,8 +850,8 @@
<p>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.</p> <p>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.</p>
<p>Prenez contact avec nous, nous vous aiderons à identifier les outils dont vous avez besoin et nous vous accompagnerons dans votre transition. ⤵</p> <p>Prenez contact avec nous, nous vous aiderons à identifier les outils dont vous avez besoin et nous vous accompagnerons dans votre transition. ⤵</p>
</div> </div>
<h2 id="valeurs">Avec des valeurs fortes</h2> <h2 class="valeurs">Avec des valeurs fortes</h2>
<div id="ronce"> <h2 class="valeurs"><br>____________________________________<br>""""""""""""""""""""""""""""""""""""</h2> <div id="ronce">
<img src="./ronce.webp" loading="lazy" alt="Deux personnages qui regardent et s'avancent vers une maison cabane perchée dans un arbre, illustrant notre envie d'un internet plus éthique."> <img src="./ronce.webp" loading="lazy" alt="Deux personnages qui regardent et s'avancent vers une maison cabane perchée dans un arbre, illustrant notre envie d'un internet plus éthique.">
</div> </div>
<section id="liste_valeurs"> <section id="liste_valeurs">
@ -858,7 +861,8 @@
<p id="liberte">La liberté <span class="description">- eg. permettre à toutes et tous de s'exprimer, respecter la vie privée</span></p> <p id="liberte">La liberté <span class="description">- eg. permettre à toutes et tous de s'exprimer, respecter la vie privée</span></p>
<p id="suivre"><a href="https://plume.deuxfleurs.fr/timeline/1">Suivez notre actualité, réflexions et analyses sur notre blog Plume</a></p> <p id="suivre"><a href="https://plume.deuxfleurs.fr/timeline/1">Suivez notre actualité, réflexions et analyses sur notre blog Plume</a></p>
</section> </section>
<h2 id="connaissance">Faisons connaissance</h2> <h2 class="connaissance">Faisons connaissance</h2>
<h2 class="connaissance"><br>____________________________________<br>""""""""""""""""""""""""""""""""""""</h2>
<div id="txt_connaissance"> <div id="txt_connaissance">
<p lang="fr">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.</p> <p lang="fr">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.</p>
<p lang="fr">Pour accéder à nos services ou simplement discuter avec nous, écrivez à <span style="text-decoration: underline;">coucou[@]deuxfleurs.fr</span>, rejoignez-nous sur le salon Matrix <span style="text-decoration: underline;">#deuxfleurs:deuxfleurs.fr</span> ou rencontrez-nous à : </p> <p lang="fr">Pour accéder à nos services ou simplement discuter avec nous, écrivez à <span style="text-decoration: underline;">coucou[@]deuxfleurs.fr</span>, rejoignez-nous sur le salon Matrix <span style="text-decoration: underline;">#deuxfleurs:deuxfleurs.fr</span> ou rencontrez-nous à : </p>
@ -917,6 +921,7 @@
| ———— ———— ———— ———— | | ———— ———— ———— ———— |
|______________________________________|</pre> |______________________________________|</pre>
</div> </div>
</div>
</main> </main>
<footer class="noscroll" aria-label="pied de page et liens vers CGU, mentions, sources et risques"> <footer class="noscroll" aria-label="pied de page et liens vers CGU, mentions, sources et risques">