look: fix scrolling to sections

This fixes:

1. Sections overlapping with navbar when linked to. The fix is dirty,
   it's just a margin.
2. The inability to scroll down to 'contacts' and other lower sections.
   We just expand the second-to-last section to allow the browser to
   scroll.
3. Updating the currently active section - this now uses a global view
   of all visible sections that is updated by the observer diff, thereby
   fixing the logic.

src/components/landing-page.tsx

@@ -51,7 +51,7 @@ function NewSection({
   after?: ReactElement;
 }) {
   return (<section id={id} className="bg-background">
-    <div className="container mx-auto px-4 gap-6 flex flex-col">
+    <div className="container mx-auto px-4 gap-6 flex flex-col mt-20">
       {children}
       {after}
     </div>

src/globals.css

@@ -160,8 +160,3 @@
 section#contact {
   min-height: 100vh;
 }
-
-/* Fix scrolling to section by fragment, making sure it shows in the right spot and not behind the navbar. */
-section {
-  scroll-margin-top: calc(var(--spacing) * 16 + var(--spacing) * 4);
-}