adjust positioning of layout via grid and element height

This commit is contained in:
emma 2025-01-10 19:44:13 -05:00
parent 47e47f4355
commit ec45e66ebb
1 changed files with 6 additions and 4 deletions

View File

@ -33,8 +33,10 @@ body {
background-image: url("../img/site/assets/sakura.webp"); background-image: url("../img/site/assets/sakura.webp");
display: grid; display: grid;
grid-template-columns: 20vw 60vw; grid-template-columns: 20vw 60vw;
grid-template-rows: 6vh 88vh 5vh; grid-template-rows: 6vh 85vh 6vh;
justify-content: center; justify-content: center;
align-items: end;
align-content: center;
overflow: hidden; overflow: hidden;
} }
@ -50,7 +52,7 @@ main, nav {
main { main {
background-color: var(--background-color); background-color: var(--background-color);
height: 87vh; height: 85vh;
width: 60vw; width: 60vw;
padding-left: 2.5rem; padding-left: 2.5rem;
overflow: auto; overflow: auto;
@ -82,7 +84,7 @@ footer {
background-color: var(--background-color); background-color: var(--background-color);
grid-row: 3/4; grid-row: 3/4;
grid-column: 1/3; grid-column: 1/3;
height: 5vh; height: 6vh;
width: 80vw; width: 80vw;
border-bottom-left-radius: 15px; border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px; border-bottom-right-radius: 15px;
@ -110,7 +112,7 @@ nav {
justify-self: end; justify-self: end;
align-self: end; align-self: end;
width: 20vw; width: 20vw;
height: 87vh; height: 85vh;
padding-top: 0.75rem; padding-top: 0.75rem;
padding-left: 1.5rem; padding-left: 1.5rem;
border-right: 10px solid; border-right: 10px solid;