70 lines
1.6 KiB
CSS
70 lines
1.6 KiB
CSS
html {
|
|
font-size: 62.5%;
|
|
}
|
|
:root {
|
|
--section_side_margin: 20px;
|
|
}
|
|
body {
|
|
overflow-x: hidden;
|
|
margin: auto;
|
|
width: fit-content;
|
|
}
|
|
figure {
|
|
overflow: hidden;
|
|
}
|
|
script, style {
|
|
display: none;
|
|
}
|
|
pre {
|
|
margin: 10px 0px;
|
|
}
|
|
section {
|
|
justify-self: center;
|
|
margin: 50px var(--section_side_margin);
|
|
}
|
|
|
|
|
|
/*
|
|
grid
|
|
*/
|
|
|
|
#infos { grid-area: infos; }
|
|
#title_area { grid-area: title; }
|
|
#cv { grid-area: cv; }
|
|
#works { grid-area: works; }
|
|
#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;}
|
|
#banner_5 { grid-area: banner_5;}
|
|
#banner_6 { grid-area: banner_6;}
|
|
#banner_7 { grid-area: banner_7;}
|
|
#banner_8 { grid-area: banner_8;}
|
|
|
|
#body {
|
|
/*
|
|
*/
|
|
display: grid;
|
|
grid:
|
|
' banner_1 banner_1 banner_1 ' auto
|
|
' . title . ' auto
|
|
' banner_2 banner_2 banner_2 ' auto
|
|
' . works . ' auto
|
|
' banner_3 banner_3 banner_3 ' auto
|
|
' . mouse_2 . ' auto
|
|
' banner_4 banner_4 banner_4 ' auto
|
|
' . cv . ' auto
|
|
' banner_5 banner_5 banner_5 ' auto
|
|
' . mouse_3 . ' auto
|
|
' banner_6 banner_6 banner_6 ' auto
|
|
' banner_7 banner_7 banner_7 ' auto
|
|
' . mouse_4 . ' auto
|
|
' banner_8 banner_8 banner_8 ' auto
|
|
' . infos . ' auto
|
|
/ 1fr minmax(auto, 900px) 1fr;
|
|
}
|
|
|