Skip to content

Commit

Permalink
feat: navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@ginatrapani
ginatrapani committed Feb 5, 2025
1 parent 8fe7442 commit 5c01c13
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 12 deletions.
41 changes: 40 additions & 1 deletion _includes/header_fullscreen.html
View file
Original file line number Diff line number Diff line change
@@ -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>
18 changes: 12 additions & 6 deletions _layouts/life-in-weeks.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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 %}
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
42 changes: 39 additions & 3 deletions _sass/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions index.markdown
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.

0 comments on commit 5c01c13

Please sign in to comment.