From 385b43cfc6aa9e16485c6152a6ad246d5b30de94 Mon Sep 17 00:00:00 2001 From: asus Date: Sun, 3 Dec 2023 19:25:12 +0100 Subject: [PATCH] transformed page layout in multiple sections to have full screen height available --- index.html | 56 ++++++++++++++++-------------------- styles/elements/cv.css | 20 ++++++++++--- styles/elements/infos.css | 6 +++- styles/elements/projects.css | 16 +++++++---- styles/elements/sections.css | 7 +++-- styles/style.css | 1 + 6 files changed, 62 insertions(+), 44 deletions(-) diff --git a/index.html b/index.html index bd9a8a3..914304c 100644 --- a/index.html +++ b/index.html @@ -88,11 +88,7 @@ -
-
- - + + - -
-

hugogogo@protonmail.com

-
- diff --git a/styles/elements/cv.css b/styles/elements/cv.css index e4c4252..2136fda 100644 --- a/styles/elements/cv.css +++ b/styles/elements/cv.css @@ -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; } diff --git a/styles/elements/infos.css b/styles/elements/infos.css index b12c3ca..523c10c 100644 --- a/styles/elements/infos.css +++ b/styles/elements/infos.css @@ -1,3 +1,7 @@ -#personnal_infos { +#infos article { + display: flex; + flex-direction: column; + place-content: center; + height: 400px; } diff --git a/styles/elements/projects.css b/styles/elements/projects.css index a9599ad..c8a6b94 100644 --- a/styles/elements/projects.css +++ b/styles/elements/projects.css @@ -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; +} diff --git a/styles/elements/sections.css b/styles/elements/sections.css index 02e2e2a..5637e01 100644 --- a/styles/elements/sections.css +++ b/styles/elements/sections.css @@ -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 { diff --git a/styles/style.css b/styles/style.css index 30de4be..02fa946 100644 --- a/styles/style.css +++ b/styles/style.css @@ -9,6 +9,7 @@ body, main { overflow-x: hidden; margin: auto; width: fit-content; + background-color: #f6f6f6; } script, style { display: none;