Add nav

hirasso · Dec 3, 2023 · ee9698f · ee9698f
1 parent 0a130ed
commit ee9698f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/docs/src/layouts/Default.astro b/docs/src/layouts/Default.astro
@@ -27,6 +27,13 @@ const { title, description } = Astro.props;
         <p class="is-h2">
           Sync the scoll position of multiple elements on your page
         </p>
+        <nav>
+          <ul class="navlist">
+            <li class="navlist_item"><a class="button" href="/scrollmirror">Demo</a></li>
+            <li class="navlist_item"><a class="button" href="/scrollmirror/docs">Docs</a></li>
+            <li class="navlist_item"><a class="button" href="https://github.com/hirasso/scrollmirror">GitHub</a></li>
+          </ul>
+        </nav>
       </header>
       <!-- <Header /> -->
       <slot />
@@ -41,7 +48,7 @@ const { title, description } = Astro.props;
         font-size: clamp(2rem, 7vw, 10rem);
         /* color: hsl(0, var(--saturation), var(--lightness)); */
         --_offset: 0.02em;
-        font-weight: 100 !important;
+        font-weight: 200;
 
         /* text-shadow:
           var(--_offset) var(--_offset) 0px

diff --git a/docs/src/styles/global.css b/docs/src/styles/global.css
@@ -21,7 +21,7 @@
   background: var(--background);
   color: var(--color);
   font-size: var(--text-default);
-  font-weight: 200;
+  font-weight: 300;
 }
 .tile, .cell {
   font-weight: 300;
@@ -36,20 +36,32 @@
   font-style: italic;
   text-align: center;
 }
+.navlist {
+  margin-top: var(--gap);
+  display: flex;
+  gap: var(--half-gap);
+  justify-content: center;
+}
+.navlist_item {
+  display: flex;
+}
 
 .button {
   appearance: none;
   background: none;
-  color: var(--accent);
+  color: var(--color);
   font-style: italic;
-  border: 1px solid var(--accent);
+  border: 1px solid var(--color);
   border-radius: 2em;
   padding: 0.5em 1.5em;
   cursor: pointer;
   transition: color 150ms, background 150ms;
+  text-decoration: none;
+  font-size: 1.2em;
 }
 .button:hover {
-  background: var(--accent);
+  background: var(--color);
+  border-color: var(--color);
   color: var(--background);
 }
 

diff --git a/docs/src/styles/reset.css b/docs/src/styles/reset.css
@@ -10,3 +10,6 @@
 * {
   font-size: inherit;
 }
+ul[class] {
+  list-style: none;
+}