#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.

[davidvkimball]

I could not get this fix working for the life of me, so here's what I did instead:

section {
  display: none;
}

section:target, #home {
  display: block;
}

section:target ~ #home {
  display: none;
}

/* Keep this rule for scroll position issues */
section {
  scroll-margin-top: 100vh;
}

section {
  padding: calc(6em + 5vw) 5vw 8vw 5vw;
  position: absolute;
  top: 0;
  min-height: 100vh;
  width: 100%;
  background: var(--bgcolor);
}

I put #home as the final section and now everything works as expected. I hope this helps someone.