changed first header with visually hidden h1

This commit is contained in:
asus
2023-11-30 01:06:14 +01:00
parent 0dd0ff4843
commit 49bc7be27f
2 changed files with 80 additions and 45 deletions

View File

@@ -38,6 +38,64 @@
<body id="body">
<main>
<!--
TITLE AREA
-->
<div id="title_area" class="section">
<h1 class="visually-hidden">hugo lamy - programmeur informatique</h1>
<div id="name" style="gap:10px 30px;" data-flex="horizontal center wrap">
<pre aria-hidden="true">
     
      
      
       
    
</pre>
<pre aria-hidden="true">
     
      
     
     
     
</pre>
</div>
<div id="title" style="gap:10px 30px;" data-flex="horizontal center wrap">
<pre aria-hidden="true">
             
                   
                 
                   
                
</pre>
<pre aria-hidden="true">
              
                  
                  
                   
               
</pre>
</div>
</div>
<!--
END TITLE AREA
-->
<!--
PROJECTS
-->
@@ -78,6 +136,8 @@
<!--
CV
-->
@@ -159,6 +219,9 @@
<!--
INFOS
-->
@@ -177,51 +240,6 @@
<!--
TITLE AREA
-->
<div id="title_area" class="section">
<div role="heading" aria-level="1" title="hugo lamy" id="name" style="gap:10px 30px;" data-flex="horizontal center wrap">
<pre aria-hidden="true">
     
      
      
       
    
</pre>
<pre aria-hidden="true">
     
      
     
     
     
</pre>
</div>
<div role="heading" aria-level="1" title="programmeur informatique" id="title" style="gap:10px 30px;" data-flex="horizontal center wrap">
<pre aria-hidden="true">
             
                   
                 
                   
                
</pre>
<pre aria-hidden="true">
              
                  
                  
                   
               
</pre>
</div>
</div>
<!--
END TITLE AREA
-->
<!--
MOUSE 1

View File

@@ -1,3 +1,20 @@
/* https://stackoverflow.com/questions/62107074/how-to-hide-a-text-and-make-it-accessible-by-screen-reader */
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
outline: none;
box-shadow: none;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /* maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /* modern browsers, clip-path works inwards from each corner */
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space) */
}
/*
DATA-FLEX