fix: added :before logic with void content

This commit is contained in:
Adrian Rosin 2024-02-08 15:33:37 +01:00
parent 1508aa1da3
commit 5cabfd269c
3 changed files with 20 additions and 10 deletions

View file

@ -34,7 +34,7 @@ div#jardin p{
justify-content:center; justify-content:center;
} }
h2.infras{ h2.infras, h2.infrasLine, h2.infrasLinePhone{
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 */ padding-bottom: 10px; /* Ajoutez de l'espace en dessous du texte */
@ -237,7 +237,7 @@ 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, h2.infrasLine, h2.infrasLinePhone{
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;
} }
@ -374,7 +374,7 @@ div#blog {
/*Smartphones*/ /*Smartphones*/
@media (max-width: 800px){ @media (max-width: 800px){
h2.infras{ h2.infras, h2.infrasLine, h2.infrasLinePhone{
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;
} }

View file

@ -33,6 +33,11 @@
} }
/* PAR DEFAUT */ /* PAR DEFAUT */
h1 > .decoration:last-of-type:before, h2 > .decoration:last-of-type:before{
content: '\A____________________________________\A""""""""""""""""""""""""""""""""""""';
}
html, body, main{ html, body, main{
margin:0; margin:0;
padding: 0; padding: 0;
@ -205,15 +210,19 @@ pre.center > a{
--small_margin:5px; --small_margin:5px;
} }
h1:before, h1:after{ h1 > .decoration:last-of-type:before{
content: ''; content: '';
} }
h2:before{ h2.infrasLine{
display: none;
}
h2 > .decoration:first-of-type:before{
content: '______________________________________________________________________\A""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""\A* '; content: '______________________________________________________________________\A""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""\A* ';
} }
h2:after{ h2 > .decoration:last-of-type:before{
content: ' *\A______________________________________________________________________\A""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""'; content: ' *\A______________________________________________________________________\A""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""';
} }

View file

@ -101,8 +101,7 @@
<div id="container"> <div id="container">
<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" aria-hidden="true">💮💮 </span>deuxfleurs<span class="decoration"></span></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">
@ -490,8 +489,10 @@
</div> </div>
<p>Fabriquons un internet convivial ⤵</p> <p>Fabriquons un internet convivial ⤵</p>
</div> </div>
<h2 class="infras">Avec nos propres infrastructures</h2> <!--<h2 class="infrasLinePhone" aria-hidden="true">______________________________________________________________________<br>""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""<br></h2> -->
<h2 class="infras" aria-hidden="true"><br>____________________________________<br>""""""""""""""""""""""""""""""""""""</h2> <h2 class="infras"><span class="decoration" aria-hidden="true"></span>Avec nos propres infrastructures<span class="decoration" aria-hidden="true"></span></h2>
<!--<h2 class="infrasLine" aria-hidden="true"><br>____________________________________<br>""""""""""""""""""""""""""""""""""""</h2> -->
<!--<h2 class="infrasLinePhone" 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">/¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨\