perso/WEBSITE_hugulumu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

transformed page layout in multiple sections to have full screen height available

Browse Source
This commit is contained in:
asus
2023-12-03 19:25:12 +01:00
parent c21df45857
commit 385b43cfc6
6 changed files with 62 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
index.html
View File

@@ -88,11 +88,7 @@
</h1>
</header>
<article>
</article>
<footer>
<div class="frames_container mouse" id="mouse_1" role="img" aria-label="mouse animated in ASCII art">
<div class="frames_container mouse" id="mouse_1" role="img" aria-label="mouse animated in ASCII art">
<pre class="frame f1" aria-hidden="true">
  
@@ -165,8 +161,8 @@
   
   
</pre>
</div>
<div id="banner_1" class="banner" role="img" aria-label="banner delimitation in ASCII art">
</div>
<div id="banner_1" class="banner" role="img" aria-label="banner delimitation in ASCII art">
<pre class="banner" aria-hidden="true">
                                                                                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
@@ -184,8 +180,7 @@
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                                                                                                                                                                                                                                                                                                                                                                                                           
</pre>
</div>
</footer>
</div>
</section>
<!--
@@ -237,8 +232,7 @@
</figure>
</article>
<footer>
<div class="frames_container mouse" id="mouse_2" role="img" aria-label="mouse animated in ASCII art">
<div class="frames_container mouse" id="mouse_2" role="img" aria-label="mouse animated in ASCII art">
<pre class="frame f1" aria-hidden="true">
 
  
@@ -311,8 +305,8 @@

</pre>
</div>
<div id="banner_2" class="banner" role="img" aria-label="banner delimitation in ASCII art">
</div>
<div id="banner_2" class="banner" role="img" aria-label="banner delimitation in ASCII art">
<pre class="banner reverse t05" aria-hidden="true">
                                                                                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
@@ -324,8 +318,7 @@
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                                                                                                                                                                          
</pre>
</div>
</footer>
</div>
</section>
<!--
@@ -418,8 +411,7 @@
</details>
</article>
<footer>
<div class="frames_container mouse" id="mouse_3" role="img" aria-label="mouse animated in ASCII art">
<div class="frames_container mouse" id="mouse_3" role="img" aria-label="mouse animated in ASCII art">
<pre class="frame f1" aria-hidden="true">
@@ -483,15 +475,14 @@
   
 
</pre>
</div>
<div id="banner_3" banner="banner" role="img" aria-label="banner delimitation in ASCII art">
</div>
<div id="banner_3" class="banner" role="img" aria-label="banner delimitation in ASCII art">
<pre class="banner t15 reverse" aria-hidden="true">
                                                                                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                                                                                                                                                                                                                                                                                                                                                                                                           
</pre>
</div>
</footer>
</div>
</section>
<!--
@@ -506,8 +497,14 @@
<!--
MOUSE 3
INFOS
-->
<section id="infos" class="footer section">
<article>
<p>hugogogo@protonmail.com</p>
</article>
<div class="frames_container mouse" id="mouse_4" role="img" aria-label="mouse animated in ASCII art">
<pre class="frame f1" aria-hidden="true">
@@ -574,17 +571,12 @@
</pre>
</div>
<div class="banner">
</div>
</section>
<!--
END MOUSE 3
-->
<!--
INFOS
-->
<div id="infos" class="section">
<p>hugogogo@protonmail.com</p>
</div>
<!--
END INFOS
END CV
-->

20
styles/elements/cv.css
View File

@@ -4,7 +4,18 @@
place-items: center;
place-self: stretch;
*/
grid-template-columns: 1fr minmax(auto, 900px) 1fr;
}
#cv header {
height: 300px;
}
#cv article {
/*
max-width: 900px;
*/
}
#cv article h2 {
text-align: center;
}
#cv #cv_ascii {
/*
@@ -17,10 +28,11 @@
*/
}
#cv details {
margin: 10px 0px 10px 25px;
margin: 0px 0px 0px 25px;
}
#cv details ul {
#cv summary {
padding: 10px 0px;
}
#cv summary + * {
margin-top: 10px;
#cv .mouse {
margin-top: 150px;
}

6
styles/elements/infos.css
View File

@@ -1,3 +1,7 @@
#personnal_infos {
#infos article {
display: flex;
flex-direction: column;
place-content: center;
height: 400px;
}

16
styles/elements/projects.css
View File

@@ -1,15 +1,18 @@
#projects .project_description {
padding: 20px 0px;
}
#projects article h2 {
text-align: center;
#projects header {
height: 300px;
}
#projects .project {
max-width: 900px;
display: flex;
flex-direction: column;
}
#projects article h2 {
text-align: center;
}
#projects .project_description {
padding: 20px 0px;
}
#projects #ljdp iframe {
height: 550px;
border: none;
@@ -23,3 +26,6 @@
#projects .project_description p {
margin: 0px 0px 10px 0px;
}
#projects .mouse {
margin-top: 150px;
}

7
styles/elements/sections.css
View File

@@ -1,7 +1,8 @@
section header { grid-area: header; }
section article { grid-area: article; }
section footer { grid-area: footer; }
section .mouse { grid-area: mouse; }
section .banner { grid-area: banner; }
section {
display: grid;
@@ -10,9 +11,11 @@ section {
grid:
' . header . ' 1fr
' . article . ' auto
' footer footer footer ' auto
' . mouse . ' auto
' banner banner banner ' auto
/ 1fr auto 1fr ;
grid-gap: 10px;
gap: 10px;
}
section header {

1
styles/style.css
View File

@@ -9,6 +9,7 @@ body, main {
overflow-x: hidden;
margin: auto;
width: fit-content;
background-color: #f6f6f6;
}
script, style {
display: none;