starting new design by section with home taking all screen height
This commit is contained in:
3
styles/elements/home.css
Normal file
3
styles/elements/home.css
Normal file
@@ -0,0 +1,3 @@
|
||||
.home {
|
||||
height: 100vh;
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
33
styles/elements/sections.css
Normal file
33
styles/elements/sections.css
Normal 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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 ;
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user