webawesome/docs/_includes/layout-templates/example.css.njk

html {
  min-height: 100%;
  height: auto;
}

body {
  padding: 0;
  height: auto;
}

.grid {
  font-size: 1.35rem;
  text-align: center;
  display: grid;
  place-content: center;
  padding: 1rem;
}

header {
  background-color: var(--wa-color-blue-90);
}

aside {
  min-width: 250px;
  max-width: 250px;
}

main {
  background-color: var(--wa-color-green-90);
  height: 100%;
}

footer {
  background-color: var(--wa-color-blue-80);
}

.banner {
  background-color: var(--wa-color-yellow-90);
}

.header {
  background-color: var(--wa-color-blue-90);
}

.banner, .header {
  min-width: 100%;
  height: 100%;
}

[slot=header] {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

[slot=aside] {
  height: 100%;
  background-color: var(--wa-color-yellow-90);
}

[slot=menu] {
  height: 100%;
  background-color: var(--wa-color-red-90);
}

[slot=main-header] {
  background-color: var(--wa-color-red-80);
  padding: 1rem;
}

[slot=main-footer] {
  background-color: var(--wa-color-green-80);
}