From 5c01c13ba27f7e86eae4f32ea359a7367e6a91e8 Mon Sep 17 00:00:00 2001
From: Gina Trapani <ginatrapani@gmail.com>
Date: Tue, 4 Feb 2025 22:26:54 -0500
Subject: [PATCH] feat: navbar

---
 _includes/header_fullscreen.html | 41 ++++++++++++++++++++++++++++++-
 _layouts/life-in-weeks.html      | 18 +++++++++-----
 _sass/main.scss                  | 42 +++++++++++++++++++++++++++++---
 index.markdown                   |  4 +--
 4 files changed, 93 insertions(+), 12 deletions(-)

diff --git a/_includes/header_fullscreen.html b/_includes/header_fullscreen.html
index ef2cf1c..4a8f173 100644
--- a/_includes/header_fullscreen.html
+++ b/_includes/header_fullscreen.html
@@ -1 +1,40 @@
-<h1>{{ page.title }}</h1>
+<div class="sticky-top">
+    <h1><a href="/life-in-weeks/">{{ page.title }}</a></h1>
+    <nav class="navbar">
+        <div class="container-fluid justify-content-between p-0">
+            <li class="nav-item">
+                <a class="nav-link" href="#0">Birth</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#10">Teens</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#20">20s</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#30">30s</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#40">40s</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#50">50s</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#60">60s</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#70">70s</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#80">80s</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#90">90s</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#100">100</a>
+            </li>
+        </div>
+    </nav>
+</div>
diff --git a/_layouts/life-in-weeks.html b/_layouts/life-in-weeks.html
index 0835337..bc7320d 100644
--- a/_layouts/life-in-weeks.html
+++ b/_layouts/life-in-weeks.html
@@ -15,9 +15,9 @@
 {% assign year_border_class = "border-secondary" %}
 
 <section class="life-in-weeks">
-    <div class="row justify-content-center">
+    {% include header_fullscreen.html %}
+    <div class="row justify-content-center mt-3">
         <div class="col-12">
-        {% include header_fullscreen.html %}
         {{content}}
         </div>
     </div>
@@ -32,18 +32,21 @@
     {% endfor %}
     {% assign events_in_row = 0 %}
     {% assign empty_weeks_in_row = 0 %}
-    <div class="row">
-        <div class="col-12 d-flex justify-content-between">
+    <div class="row mt-3">
+        <div class="col-12 d-flex justify-content-between" id="0">
         {% for year in (start_year..end_year) %}
             {% capture this_year = year %}{{ year }}-{{ start_month }}-{{ start_day }}{% endcapture %}
             {% capture next_year = year %}{{ year | plus: 1 }}-{{ start_month }}-{{ start_day }}{% endcapture %}
             {% assign age = year | minus: start_year %}
             {% unless age == 0 %}
+                {% if age | modulo: 10 == 0 %}
+            <a id="{{ age }}"></a>
+                {% endif %}
             <button type="button"
                 class="btn birthday {{ based_class }} {{ doing_class }} text-nowrap"
                 data-date="{{ this_week_date }}"
                 data-bs-toggle="tooltip"
-                data-bs-placement="left"
+                data-bs-placement="bottom"
                 data-bs-custom-class="custom-tooltip"
                 data-bs-title="{{ year | append: "-" | append: start_month | append: "-" | append: start_day | date: "%b %-d, %Y" }}  – Turned  {{ age }} year{% unless age==1 %}s{% endunless %} old">🎂 {{ age }} in {{ year }}</button>
                 {% assign events_in_row = events_in_row | plus: 1 %}
@@ -128,7 +131,6 @@
         {% endfor %}
         </div>
     </div>
-    <blockquote>How you regard your past influences how your future unfolds. You did what you needed to do at the time with what you had to work with. Thank goodness! Now you wake up knowing more. – Danielle LaPorte</blockquote>
 </section>
 
 <style>
@@ -171,5 +173,9 @@
             (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl),
         );
     })
+    $(window).on("scroll touchmove", function () {
+        $("h1").toggleClass("tiny", $(document).scrollTop() > 0);
+        $(".navbar").toggleClass("d-block", $(document).scrollTop() > 200);
+    });
 });
 </script>
diff --git a/_sass/main.scss b/_sass/main.scss
index 5093b3d..5f1d991 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -21,6 +21,10 @@
     margin: 0;
     padding: 0;
     border-radius: 5px;
+    scroll-padding-top: 70px;
+    @media only screen and (max-width: 768px) {
+        scroll-padding-top: 62px;
+    }
 }
 
 body {
@@ -42,11 +46,22 @@ body {
 h1 {
     font-weight: 800;
     font-size: var(--header-font-size-desktop);
-    margin-bottom: 20px;
+    margin: 0;
     color: var(--header-text-color);
     @media only screen and (max-width: 768px) {
         font-size: var(--header-font-size-mobile);
     }
+    transition: all 0.25s;
+}
+
+h1.tiny {
+    font-size: var(--header-font-size-mobile);
+    transition: all 0.25s;
+}
+
+h1 a,
+h1 a:hover {
+    border: none;
 }
 
 a {
@@ -64,7 +79,7 @@ a:hover {
 }
 
 .life-in-weeks {
-    margin: 4% 20%;
+    margin: 0 20%;
     .future-date {
         background-color: var(--future-bg-color) !important;
         border-color: var(--future-border) !important;
@@ -84,11 +99,32 @@ a:hover {
         margin-top: 50px;
     }
     @media only screen and (max-width: 768px) {
-        margin: 2%;
+        margin: 0 2%;
         .btn {
             --bs-btn-font-size: var(--body-font-size-mobile);
         }
     }
+    li {
+        list-style-type: none;
+    }
+    li a {
+        color: var(--link-color);
+        border-bottom: solid var(--link-color) 1px;
+        border-radius: 0;
+        text-decoration: none;
+    }
+    li a:hover {
+        color: var(--highlight-color);
+        text-decoration: none;
+        border-bottom: solid var(--highlight-color) 1px;
+        border-radius: 0;
+    }
+    .navbar {
+        --bs-navbar-padding-y: 0;
+        margin-bottom: 2em;
+        display: none;
+        transition: all 0.25s;
+    }
 }
 
 hr {
diff --git a/index.markdown b/index.markdown
index bd92960..f436859 100644
--- a/index.markdown
+++ b/index.markdown
@@ -11,6 +11,6 @@ end_year    : 2075
 
 📌 Read more about [Life in Weeks by Wait But Why](https://waitbutwhy.com/2014/05/life-weeks.html). I adapted [the code that generated this page](https://github.com/ginatrapani/life-in-weeks) from [Buster Benson](https://busterbenson.com/life-in-weeks).
 
-🛣️ This life and this map are a work in progress. I'll update it as I go.
+💭 "How you regard your past influences how your future unfolds. You did what you needed to do at the time with what you had to work with. Thank goodness! Now you wake up knowing more." – Danielle LaPorte
 
----
+🛣️ This life and this map are a work in progress. I'll update it as I go.