update permalink styles, small homepage fix

website/package-lock.json

@@ -3238,9 +3238,9 @@
       }
     },
     "@hashicorp/react-content": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@hashicorp/react-content/-/react-content-2.2.0.tgz",
-      "integrity": "sha512-c9eYZGu/1YC7tGWKE/mPsi4DLfHOTlpOwOjUCXgzauOOwqrjJHEfLiGzJsgd8CMDxWRswZ7Es/i/s8rZnCN5og=="
+      "version": "3.0.0-0",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-content/-/react-content-3.0.0-0.tgz",
+      "integrity": "sha512-yP5d8zA6az3rvL1vHjsV8c9jUl05M06knvtmMdP4VYlkElikeoJ0kd/oJi0n1Zb5s4Pe4k7zOZah7VmYLYdwyw=="
     },
     "@hashicorp/react-docs-page": {
       "version": "0.1.3",
@@ -3251,6 +3251,13 @@
         "@hashicorp/react-docs-sidenav": "^3.0.4",
         "@hashicorp/react-head": "^0.1.1",
         "@hashicorp/react-inline-svg": "^1.0.0"
+      },
+      "dependencies": {
+        "@hashicorp/react-content": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/@hashicorp/react-content/-/react-content-2.2.0.tgz",
+          "integrity": "sha512-c9eYZGu/1YC7tGWKE/mPsi4DLfHOTlpOwOjUCXgzauOOwqrjJHEfLiGzJsgd8CMDxWRswZ7Es/i/s8rZnCN5og=="
+        }
       }
     },
     "@hashicorp/react-docs-sidenav": {

website/package.json

@@ -10,7 +10,7 @@
     "@hashicorp/react-alert": "^2.0.0",
     "@hashicorp/react-button": "^2.1.6",
     "@hashicorp/react-consent-manager": "^2.0.6",
-    "@hashicorp/react-content": "^2.2.0",
+    "@hashicorp/react-content": "^3.0.0-0",
     "@hashicorp/react-docs-page": "^0.1.3",
     "@hashicorp/react-docs-sidenav": "^3.0.4",
     "@hashicorp/react-docs-sitemap": "^1.0.0",

website/pages/home/index.jsx

@@ -20,7 +20,7 @@ export default function Homepage() {
       </section>
       <section id="infrastructure-as-code" className="g-container">
         <div className="code-block">
-          <div class="circles">
+          <div className="circles">
             <span></span>
             <span></span>
             <span></span>

website/pages/style.css

@@ -42,6 +42,23 @@
 /* Print Styles */
 @import './print.css';
 
+/*
+ * About this selector:
+ * `.g-subnav ~ *` finds all elements after the navigation.
+ * `:target` finds the active permalink on the page.
+ *
+ * About this style:
+ * `scroll-margin-top` adjusts the vertical scroll of a permalink.
+ * `64px` adjusts the scroll to account for the navigation.
+ * `0.5em` further adjusts the scroll to give the permalink breathing room.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/CSS/:target
+ * See: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top
+ */
+.g-subnav ~ * :target {
+  scroll-margin-top: calc(64px + 0.5em);
+}
+
 /* Layout Styles */
 .g-section-block section {
   padding-top: 96px;