fix scroll margin for anchor links; fix conditional header layout (#1685)

* fix links to anchors (e.g. https://observablehq.com/framework/files#static-analysis)

* use scroll-padding-top instead

* fix #1686; conditional header layout

* move scroll-padding-top to default styles

---------

Co-authored-by: Mike Bostock <[email protected]>

Author: Fil

docs/style.css

@@ -9,15 +9,6 @@
   --theme-foreground-focus: #148576;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: revert;
-}
-
 h1 code,
 h2 code,
 h3 code,

src/style/global.css

@@ -39,7 +39,6 @@ h6 {
   line-height: 1.15;
   margin-top: 0;
   margin-bottom: 0.25rem;
-  scroll-margin-top: 1rem;
   text-wrap: balance;
 }
 

src/style/layout.css

@@ -4,6 +4,11 @@
   --theme-magnifier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath stroke='currentColor' stroke-width='2' fill='none' d='M15,15L10.5,10.5a3,3 0 1,0 -6 -6a3,3 0 1,0 6 6'%3E%3C/path%3E%3C/svg%3E");
   --observablehq-max-width: 1440px;
   --observablehq-header-height: 2.2rem;
+  scroll-padding-top: 2.5rem;
+}
+
+:root:has(#observablehq-header) {
+  scroll-padding-top: calc(var(--observablehq-header-height) + 2.5rem);
 }
 
 body {
@@ -35,12 +40,15 @@ body {
 }
 
 #observablehq-main {
-  margin-top: 0.67rem;
   min-height: calc(100vh - 20rem);
   position: relative;
   z-index: 0;
 }
 
+#observablehq-header ~ #observablehq-main {
+  margin-top: calc(var(--observablehq-header-height) + 1.5rem + 2rem);
+}
+
 #observablehq-footer {
   display: block;
   margin-top: 10rem;
@@ -101,8 +109,7 @@ body {
 }
 
 #observablehq-center {
-  margin: 1rem 2rem;
-  padding-top: calc(var(--observablehq-header-height) + 0.5rem);
+  margin: 2rem;
   --observablehq-inset-left: 0rem;
   --observablehq-inset-right: 0rem;
 }
@@ -290,12 +297,16 @@ body {
   color: var(--theme-foreground-muted);
   font: 400 14px var(--sans-serif);
   z-index: 1;
-  top: calc(var(--observablehq-header-height) + 1.5rem);
+  top: 0;
   right: calc(max(0rem, (100% - var(--observablehq-max-width)) / 2) + 1rem);
   bottom: 0;
   overflow-y: auto;
 }
 
+#observablehq-header ~ #observablehq-toc {
+  top: calc(var(--observablehq-header-height) + 1.5rem);
+}
+
 #observablehq-toc nav {
   width: 192px;
   margin: 2rem 0;