#home section is always focused, issue with longer content

[cadars]

Here is a workaround, but it implies that the #home section is last in the HTML:

section {
  display: none;
  position: absolute;
  top: 0;
  width: 100%;
}

section:target, section#home {
  z-index: 1;
  display: block;
}

section:target {
  z-index:2;
}

section:target ~ section * {
  display:none;
}

I'm open to other solutions, because the first page should appear first in the markup.

[cadars]

Someone figured out a way better way to do this: https://codesandbox.io/s/hash-navigation-919fp?file=/index.html:226-397

It doesn't solve the issue with the markup order, but it's way more elegant than to abuse position:absolute, min-height:100vh;, z-index and background.

section, section:target ~ section:last-of-type {
  display: none;
}
section:target, section:last-of-type {
  display: inherit;
}

[cadars]

Also, scroll-margin-top: 100vh on #target elements solves the scroll position issues, as seen on portable-php. I might update the template with it someday soon.