rework grid to use template-area

This commit is contained in:
rick 2024-10-13 18:07:09 +02:00
parent 2afc5cd36b
commit e65d24700c
Signed by: Rick
GPG key ID: A2E7B6CA577C8F07

View file

@ -1,11 +1,10 @@
body { body {
margin: 0; margin: 0;
/*display: flex;
flex-direction: column;*/
display: grid; display: grid;
min-height: 100vh; grid-template-areas:
/*grid-template-rows: auto 1fr auto;*/ "header header"
grid-template-columns: 0.2fr 1fr; "menu main"
"footer footer";
} }
header { header {
@ -14,7 +13,7 @@ header {
margin-top: 2em; margin-top: 2em;
margin-left: 3em; margin-left: 3em;
margin-right: 3em; margin-right: 3em;
grid-column: 1 / 3; grid-area: header;
} }
header a { header a {
@ -59,7 +58,7 @@ header h2 {
margin: 2em 0 2em 3em; margin: 2em 0 2em 3em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
grid-column: 1; grid-area: menu;
} }
#header-links a { #header-links a {
@ -74,13 +73,14 @@ header h2 {
#main { #main {
margin: 2em 3em 5em 1em; margin: 2em 3em 5em 1em;
grid-area: main;
} }
footer { footer {
background-color: #304B99; background-color: #304B99;
padding: 1em; padding: 1em;
padding-bottom: 0; padding-bottom: 0;
grid-column: 1/4; grid-area: footer;
} }
#buttons { #buttons {