Add anchor links to demo sections 🔗

hirasso · Dec 4, 2023 · 804df1a · 804df1a
1 parent ccd78bf
commit 804df1a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
@@ -8,30 +8,30 @@ import WindowExample from "../components/examples/WindowExample.astro";
 
 <Layout isFrontPage={true}>
 
-  <section>
+  <section id="vertical">
     <header class="section_header">
-      <h2 class="is-h2">Vertical</h2>
+      <h2 class="is-h2"><a href="#vertical">Vertical</a></h2>
     </header>
     <VerticalExample />
   </section>
 
-  <section>
+  <section id="horizontal">
     <header class="section_header">
-      <h2 class="is-h2">Horizontal</h2>
+      <h2 class="is-h2"><a href="#horizontal">Horizontal</a></h2>
     </header>
     <HorizontalExample />
   </section>
 
-  <section>
+  <section id="both-directions">
     <header class="section_header">
-      <h2 class="is-h2">Both Directions</h2>
+      <h2 class="is-h2"><a href="#both-directions">Both Directions</a></h2>
     </header>
     <BothDirectionsExample />
   </section>
 
-  <section>
+  <section id="window">
     <header class="section_header">
-      <h2 class="is-h2">Between the window and DOM elements</h2>
+      <h2 class="is-h2"><a href="#window">Between the window and DOM elements</a></h2>
       <button type="button" class="button">Show me!</button>
     </header>
     <WindowExample />

diff --git a/docs/src/styles/global.css b/docs/src/styles/global.css
@@ -22,6 +22,7 @@
   color: var(--color);
   font-size: var(--text-default);
   font-weight: 300;
+  scroll-behavior: smooth;
 }
 .tile, .cell {
   font-weight: 300;

diff --git a/docs/src/styles/reset.css b/docs/src/styles/reset.css
@@ -13,3 +13,7 @@
 ul[class] {
   list-style: none;
 }
+a {
+  color: inherit;
+  text-decoration: none;
+}