adjust positioning of layout via grid and element height
This commit is contained in:
parent
47e47f4355
commit
ec45e66ebb
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue