New getting started guide (#715)

* New getting started guide

* style: small style tweaks

* style: theme updates

* chore: add redirect

* style: theme tweaks

* fix: clamp logo height

* style: fix sidebar width

Co-authored-by: Nate Moore <nate@skypack.dev>

1 files changed, 37 insertions, 0 deletions

diff --git a/docs/public/nav.js b/docs/public/nav.js
new file mode 100644
index 000000000..93fadcd61
--- /dev/null
+++ b/docs/public/nav.js
@@ -0,0 +1,37 @@
+const nav = document.querySelector('body > header');
+
+if (!window.matchMedia('(prefers-reduced-motion)').matches) {
+  window.addEventListener('scroll', onScroll, { passive: true });
+}
+
+let prev = -1;
+let prevDir = 0;
+let threshold = 32;
+
+function onScroll() {
+  const curr = window.scrollY;
+  const dir = curr > prev ? 1 : -1;
+  
+  if (curr < threshold) {
+    show();
+    document.documentElement.classList.add('initial');
+  } else if (dir !== prevDir) {
+    if (dir === 1) {
+      hide();
+    } else {
+      show();
+    }
+  }
+  
+  prev = curr;
+}
+
+const hide = () => {
+  nav.classList.add('hidden')
+  document.documentElement.classList.add('scrolled');
+  document.documentElement.classList.remove('initial');
+};
+const show = () => {
+  nav.classList.remove('hidden');
+  document.documentElement.classList.remove('scrolled');
+}