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 20 additions and 10 deletions
Showing only changes of commit 5cabfd269c - Show all commits

View file

@ -34,7 +34,7 @@ div#jardin p{
justify-content:center;
}
h2.infras{
h2.infras, h2.infrasLine, h2.infrasLinePhone{
background-color: var(--infras);
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 */
@ -237,7 +237,7 @@ div#blog {
/*Tablettes et petits ordinateurs*/
@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;
}
@ -374,7 +374,7 @@ div#blog {
/*Smartphones*/
@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;
}

View file

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

View file

@ -101,8 +101,7 @@
<div id="container">
<header>
<h1 id="deuxfleurs"><span role="img" aria-label="2 emojis fleur blanche">💮💮 </span>deuxfleurs</h1>
<h1 aria-hidden="true">___________________________________<br>"""""""""""""""""""""""""""""""""""</h1>
<h1 id="deuxfleurs"><span role="img" aria-label="2 emojis fleur blanche" aria-hidden="true">💮💮 </span>deuxfleurs<span class="decoration"></span></h1>
</header>
<main aria-label="contenu de la page web">
@ -490,8 +489,10 @@
</div>
<p>Fabriquons un internet convivial ⤵</p>
</div>
<h2 class="infras">Avec nos propres infrastructures</h2>
<h2 class="infras" aria-hidden="true"><br>____________________________________<br>""""""""""""""""""""""""""""""""""""</h2>
<!--<h2 class="infrasLinePhone" 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">
<!--diode qui clignote ?-->
<pre class="center">/¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨\