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>
|
</h1>
|
||||||
</header>
|
</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">
|
<pre class="frame f1" aria-hidden="true">
|
||||||
|
|
||||||
@@ -185,7 +181,6 @@
|
|||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
<!--
|
<!--
|
||||||
@@ -237,7 +232,6 @@
|
|||||||
</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">
|
||||||
|
|
||||||
@@ -325,7 +319,6 @@
|
|||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
<!--
|
<!--
|
||||||
@@ -418,7 +411,6 @@
|
|||||||
</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">
|
||||||
|
|
||||||
@@ -484,14 +476,13 @@
|
|||||||
|
|
||||||
</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">
|
||||||
END MOUSE 3
|
|
||||||
-->
|
|
||||||
<!--
|
|
||||||
INFOS
|
|
||||||
-->
|
|
||||||
<div id="infos" class="section">
|
|
||||||
<p>hugogogo@protonmail.com</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
<!--
|
<!--
|
||||||
END INFOS
|
END CV
|
||||||
-->
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 {
|
#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;
|
||||||
|
}
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user