starting new design by section with home taking all screen height

This commit is contained in:
asus
2023-12-03 15:33:39 +01:00
parent 6b1370131d
commit c21df45857
7 changed files with 315 additions and 456 deletions

3
styles/elements/home.css Normal file
View File

@@ -0,0 +1,3 @@
.home {
height: 100vh;
}

View File

@@ -2,8 +2,13 @@
#projects .project_description {
padding: 20px 0px;
}
#projects article h2 {
text-align: center;
}
#projects .project {
max-width: 900px;
display: flex;
flex-direction: column;
}
#projects #ljdp iframe {
height: 550px;

View File

@@ -0,0 +1,33 @@
section header { grid-area: header; }
section article { grid-area: article; }
section footer { grid-area: footer; }
section {
display: grid;
margin: 0px;
width: 100vw;
grid:
' . header . ' 1fr
' . article . ' auto
' footer footer footer ' auto
/ 1fr auto 1fr ;
grid-gap: 10px;
}
section header {
display: flex;
flex-direction: column;
place-content: center;
}
section footer {
display: flex;
flex-direction: column;
}
section header h1 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}

View File

@@ -1,9 +1,9 @@
#name {
margin:30px 0px 40px 0px;
margin:30px 0px 20px 0px;
}
#title {
margin:30px 0px 20px 0px;
margin:20px 0px 20px 0px;
}
.title {
gap:10px 30px;

View File

@@ -16,49 +16,4 @@ script, style {
pre {
margin: 10px 0px;
}
.section {
justify-self: center;
margin: 50px 20px;
}
/*
grid
*/
#infos { grid-area: infos; }
#title_area { grid-area: title; }
#cv { grid-area: cv; }
#projects { grid-area: projects;}
#mouse_1 { grid-area: mouse_1; }
#mouse_2 { grid-area: mouse_2; }
#mouse_3 { grid-area: mouse_3; }
#mouse_4 { grid-area: mouse_4; }
#banner_1 { grid-area: banner_1;}
#banner_2 { grid-area: banner_2;}
#banner_3 { grid-area: banner_3;}
#banner_4 { grid-area: banner_4; display: none;}
#banner_5 { grid-area: banner_5; display: none;}
#banner_6 { grid-area: banner_6; display: none;}
#banner_7 { grid-area: banner_7; display: none;}
#banner_8 { grid-area: banner_8; display: none;}
main {
/*
*/
display: grid;
grid:
' . title . ' auto
' . mouse_1 . ' auto
' banner_1 banner_1 banner_1 ' auto
' . projects . ' auto
' . mouse_2 . ' auto
' banner_2 banner_2 banner_2 ' auto
' . cv . ' auto
' . mouse_4 . ' auto
' banner_3 banner_3 banner_3 ' auto
' . infos . ' auto
' . mouse_3 . ' auto
/ 1fr auto 1fr ;
}

View File

@@ -57,10 +57,9 @@ h4 { margin: 20px 0px; font-size: 1.5rem; }
h5 { margin: 10px 0px; font-size: 1.25rem; }
h6 { margin: 10px 0px; font-size: 1.0rem; }
.pre {
white-space: pre;
}
.pre, pre {
display: flex;
white-space: pre;
line-height: 0.8;
font-size: min(2.1vw, 1.0rem);
}