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

20
styles/elements/cv.css
View File

@@ -4,7 +4,18 @@
place-items: center; place-items: center;
place-self: stretch; place-self: stretch;
*/ */
grid-template-columns: 1fr minmax(auto, 900px) 1fr;
}
#cv header {
height: 300px;
}
#cv article {
/*
max-width: 900px; max-width: 900px;
*/
}
#cv article h2 {
text-align: center;
} }
#cv #cv_ascii { #cv #cv_ascii {
/* /*
@@ -17,10 +28,11 @@
*/ */
} }
#cv details { #cv details {
margin: 10px 0px 10px 25px; margin: 0px 0px 0px 25px;
} }
#cv details ul { #cv summary {
padding: 10px 0px;
} }
#cv summary + * { #cv .mouse {
margin-top: 10px; 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 { #projects header {
padding: 20px 0px; height: 300px;
}
#projects article h2 {
text-align: center;
} }
#projects .project { #projects .project {
max-width: 900px; max-width: 900px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#projects article h2 {
text-align: center;
}
#projects .project_description {
padding: 20px 0px;
}
#projects #ljdp iframe { #projects #ljdp iframe {
height: 550px; height: 550px;
border: none; border: none;
@@ -23,3 +26,6 @@
#projects .project_description p { #projects .project_description p {
margin: 0px 0px 10px 0px; 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 header { grid-area: header; }
section article { grid-area: article; } section article { grid-area: article; }
section footer { grid-area: footer; } section .mouse { grid-area: mouse; }
section .banner { grid-area: banner; }
section { section {
display: grid; display: grid;
@@ -10,9 +11,11 @@ section {
grid: grid:
' . header . ' 1fr ' . header . ' 1fr
' . article . ' auto ' . article . ' auto
' footer footer footer ' auto ' . mouse . ' auto
' banner banner banner ' auto
/ 1fr auto 1fr ; / 1fr auto 1fr ;
grid-gap: 10px; grid-gap: 10px;
gap: 10px;
} }
section header { section header {

1
styles/style.css
View File

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