transformed page layout in multiple sections to have full screen height available
This commit is contained in:
asus
32
index.html
32
index.html
@@ -88,10 +88,6 @@
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<article>
|
||||
</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">
|
||||
|
||||
@@ -185,7 +181,6 @@
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</section>
|
||||
<!--
|
||||
@@ -237,7 +232,6 @@
|
||||
</figure>
|
||||
</article>
|
||||
|
||||
<footer>
|
||||
<div class="frames_container mouse" id="mouse_2" role="img" aria-label="mouse animated in ASCII art">
|
||||
<pre class="frame f1" aria-hidden="true">
|
||||
|
||||
@@ -325,7 +319,6 @@
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</section>
|
||||
<!--
|
||||
@@ -418,7 +411,6 @@
|
||||
</details>
|
||||
</article>
|
||||
|
||||
<footer>
|
||||
<div class="frames_container mouse" id="mouse_3" role="img" aria-label="mouse animated in ASCII art">
|
||||
<pre class="frame f1" aria-hidden="true">
|
||||
|
||||
@@ -484,14 +476,13 @@
|
||||
|
||||
</pre>
|
||||
</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>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</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>
|
||||
<!--
|
||||
END MOUSE 3
|
||||
-->
|
||||
<!--
|
||||
INFOS
|
||||
-->
|
||||
<div id="infos" class="section">
|
||||
<p>hugogogo@protonmail.com</p>
|
||||
<div class="banner">
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--
|
||||
END INFOS
|
||||
END CV
|
||||
-->
|
||||
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
|
||||
#personnal_infos {
|
||||
#infos article {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
place-content: center;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -9,6 +9,7 @@ body, main {
|
||||
overflow-x: hidden;
|
||||
margin: auto;
|
||||
width: fit-content;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
script, style {
|
||||
display: none;
|
||||
|
||||
Reference in New Issue
Block a user