Add additional css rules to address Nuxt and similar frameworks

[djmtype]

Nuxt v3 injects and requires a div#__nuxt added to the DOM directly following the body. The way Pico's max-width rules target head, main and footer is by using direct descenders. For example ,body > main.

Original:

@media (min-width: 768px) {
body > header,
body > main,
body > footer {
    max-width: 700px;
  }
}

While Nuxt contains this one descending div, Next contains two descending divs. To accommodate both frameworks, maybe:

@media (min-width: 768px) {
body > header, body > div[id] header,
body > main, body > div[id] main,
body > footer, body > div[id] footer {
    max-width: 700px;
  }
}

[ja1den]

This seems quite similar to my issue, #13.

[djmtype]

Same issue as #13

[nuxodin]

I find that too framework-specific. But the problem exists.

I could imagine the following solution: The good old [role="contentinfo"] is the old aria variant of "footer". With the difference that it should only be the main footer. And that is exactly what we want.

So instead of body > footer you could use [role="contentinfo"]...
The same applies to the header: [role="banner"] instead of body > header.

The disadvantage is that you have to mark the footer with an additional (redundant?) attribute.