created a central area thinner than banners

This commit is contained in:
asus
2023-11-19 19:02:08 +01:00
parent f80c7608b2
commit 0d55418bf1
7 changed files with 205 additions and 146 deletions

View File

@@ -14,16 +14,16 @@ pre.banner.pause {
pre.banner.reverse {
animation-direction: reverse;
}
pre.banner.t0_5 {
pre.banner.t05 {
animation-duration: 0.5s;
}
pre.banner.t1_0 {
pre.banner.t10 {
animation-duration: 1s;
}
pre.banner.t1_5 {
pre.banner.t15 {
animation-duration: 1.5s;
}
pre.banner.t2_0 {
pre.banner.t20 {
animation-duration: 2s;
}
@keyframes slide {

View File

@@ -1,27 +1,27 @@
#cv_infos {
margin: 10px 10px 30px 10px;
#cv {
}
#cv_infos h1,
#cv_infos h2,
#cv_infos h3,
#cv_infos h4,
#cv_infos h5,
#cv_infos h6 {
#cv h1,
#cv h2,
#cv h3,
#cv h4,
#cv h5,
#cv h6 {
/*
place-self: center;
margin-left: var(--list-padding);
*/
}
#cv_infos details {
#cv details {
margin: 10px 0px;
}
#cv_infos summary {
#cv summary {
/*
*/
margin-left: var(--list-padding);
}
#cv_infos summary + * {
#cv summary + * {
margin-top: 10px;
}

View File

@@ -1,7 +1,7 @@
.mouse {
position: relative;
margin: 0px;
margin: 20px 0px;
}
.frames_container {
display: grid;
@@ -48,6 +48,7 @@ pre.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);}
#mouse_1 {
place-self: center;
margin: auto;
}
#mouse_2 {
left: 10%;

View File

@@ -0,0 +1,5 @@
section {
justify-self: center;
margin: 50px 20px;
}

View File

@@ -1,24 +0,0 @@
#test::after {
content: "  \a   \a   \a  \a \a  \a  \a  \a  \a    \a    \a  \a     \a    \a  \a ";
white-space: pre-wrap;
/*
 
  
  
 

 
 
 
 
   
   
 
    
   
 
*/
}

View File

@@ -5,10 +5,12 @@ html {
--small-space: 10px;
--medium-space: calc(var(--small-space) * 3);
--big-space: calc(var(--small-space) * 10);
--list-padding: 40px;
--list-padding: 10px;
}
body {
overflow-x: hidden;
margin: auto;
width: fit-content;
}
figure {
overflow: hidden;
@@ -25,10 +27,9 @@ pre {
grid
*/
#personnal_infos { grid-area: infos; }
#role_title { grid-area: title; }
#cv_infos { grid-area: cv; }
#mouse_1 { grid-area: mouse_1; }
#infos { grid-area: infos; }
#title_area { grid-area: title; }
#cv { grid-area: cv; }
#mouse_2 { grid-area: mouse_2; }
#mouse_3 { grid-area: mouse_3; }
#mouse_4 { grid-area: mouse_4; }
@@ -37,24 +38,29 @@ pre {
#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 {
/*
*/
margin: 0px;
display: grid;
grid:
' title ' auto
' banner_1 ' auto
' mouse_1 ' auto
' banner_2 ' auto
' cv ' auto
' banner_3 ' auto
' banner_4 ' auto
' mouse_2 ' auto
' mouse_3 ' auto
' banner_5 ' auto
' mouse_4 ' auto
' infos ' auto
/ 1fr ;
' banner_1 banner_1 banner_1 ' auto
' . title . ' auto
' banner_2 banner_2 banner_2 ' auto
' . cv . ' auto
' banner_3 banner_3 banner_3 ' auto
' . mouse_2 . ' auto
' banner_4 banner_4 banner_4 ' 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 auto 1fr ;
}