Skip to content

Commit

Permalink
feat: navbar scrollspy
Browse files Browse the repository at this point in the history
  • Loading branch information
@ginatrapani
ginatrapani committed Feb 5, 2025
1 parent f3d45f8 commit 0fb14de
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 64 deletions.
2 changes: 1 addition & 1 deletion _data/life-in-weeks.yml
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"1975-09-19":
- headline: "🐣 I was born"
description: "I entered the world at around 9am in Brooklyn, New York, USA, the youngest of 4 by far, a happy accident. Dad came to the hospital in a jacket and tie to meet me for the first time."
description: "I entered the world at around 9am in Brooklyn, New York, USA, the youngest of 4 by far, a happy accident. Thanks, Mom. Dad came to the hospital in a jacket and tie to meet me for the first time."
based: "Brooklyn"
doing: "I was tiny"

Expand Down
72 changes: 37 additions & 35 deletions _includes/header_fullscreen.html
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,42 @@
<div class="sticky-top">
<h1><a href="{{ site.baseurl }}">{{ 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>
<nav class="navbar" id="lifeinweeks-navbar">
<div class="p-0">
<ul class="nav nav-pills justify-content-between">
<li class="nav-item">
<a class="nav-link" href="#decade-0">Birth</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#decade-10">Teens</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#decade-20">20s</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#decade-30">30s</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#decade-40">40s</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#decade-50">50s</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#decade-60">60s</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#decade-70">70s</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#decade-80">80s</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#decade-90">90s</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#decade-100">100</a>
</li>
</ul>
</div>
</nav>
</div>
7 changes: 6 additions & 1 deletion _layouts/fullscreen.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
<!doctype html>
<html lang="en">
{% include head.html %}
<body>
<body
data-bs-spy="scroll"
data-bs-target="#lifeinweeks-navbar"
data-bs-offset="0"
tabindex="0"
>
<div id="fullscreen" class="justify-content-center">
<div>{{ content }}</div>
</div>
Expand Down
34 changes: 20 additions & 14 deletions _layouts/life-in-weeks.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,21 @@
{% assign events_in_row = 0 %}
{% assign empty_weeks_in_row = 0 %}
<div class="row mt-3">
<div class="col-12 d-flex justify-content-between" id="0">
<div id="decade-0">
<div class="col-12 d-flex justify-content-between">
{% 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 %}
{% assign decade_diff = age | modulo: 10 %}
{% if decade_diff == 0 %}
<a id="{{ age }}"></a>
</div>
</div>
<div id="decade-{{ age }}">
<div class="col-12 d-flex justify-content-between">
{% assign events_in_row = 0 %}
{% assign empty_weeks_in_row = 0 %}
{% endif %}
<button type="button"
class="btn birthday {{ based_class }} {{ doing_class }} text-nowrap"
Expand All @@ -52,8 +58,8 @@
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 %}
{% if events_in_row > 1 and empty_weeks_in_row > 3 %}
</div>
<div class="col-12 d-flex justify-content-between">
</div>
<div class="col-12 d-flex justify-content-between">
{% assign events_in_row = 0 %}
{% assign empty_weeks_in_row = 0 %}
{% endif %}
Expand All @@ -72,14 +78,14 @@
data-bs-title="{{ specific_date | date: "%b %-d, %Y" }} – {{ doing }}{{ association }}, based in {{ based }}"></button>
{% assign empty_weeks_in_row = empty_weeks_in_row | plus: 1 %}
{% if events_in_row > 0 and empty_weeks_in_row > 10 %}
</div>
<div class="col-12 d-flex justify-content-between">
</div>
<div class="col-12 d-flex justify-content-between">
{% assign events_in_row = 0 %}
{% assign empty_weeks_in_row = 0 %}
{% endif %}
{% if events_in_row > 1 and empty_weeks_in_row > 2 %}
</div>
<div class="col-12 d-flex justify-content-between">
</div>
<div class="col-12 d-flex justify-content-between">
{% assign events_in_row = 0 %}
{% assign empty_weeks_in_row = 0 %}
{% endif %}
Expand Down Expand Up @@ -107,8 +113,8 @@
data-bs-title="{{ specific_date | date: "%b %-d, %Y" }} - {{ event.description }}{% unless event.description %}{{ doing }}{{ association }}, based in {{ based }}{% endunless %}">{{ event.headline | truncate: 22 }}</button>
{% assign events_in_row = events_in_row | plus: 1 %}
{% if events_in_row > 0 and empty_weeks_in_row > 5 %}
</div>
<div class="col-12 d-flex justify-content-between">
</div>
<div class="col-12 d-flex justify-content-between">
{% assign events_in_row = 0 %}
{% assign empty_weeks_in_row = 0 %}
{% endif %}
Expand All @@ -117,14 +123,14 @@
{% endfor %}
{% assign quarter = week | modulo: 13 %}
{% if events_in_row > 1 and empty_weeks_in_row > 5 %}
</div>
<div class="col-12 d-flex justify-content-between">
</div>
<div class="col-12 d-flex justify-content-between">
{% assign events_in_row = 0 %}
{% assign empty_weeks_in_row = 0 %}
{% endif %}
{% if week != 0 and quarter == 0 and empty_weeks_in_row >= 8 %}
</div>
<div class="col-12 d-flex justify-content-between">
</div>
<div class="col-12 d-flex justify-content-between">
{% assign events_in_row = 0 %}
{% assign empty_weeks_in_row = 0 %}
{% endif %}
Expand Down
28 changes: 15 additions & 13 deletions _sass/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@
color: inherit;
margin: 0;
padding: 0;
border-radius: 5px;
scroll-padding-top: 70px;
@media only screen and (max-width: 768px) {
scroll-padding-top: 62px;
Expand Down Expand Up @@ -67,19 +66,18 @@ h1 a:hover {
a {
color: var(--link-color);
border-bottom: dotted var(--link-color) 1px;
border-radius: 0;
text-decoration: none;
}

a:hover {
color: var(--highlight-color);
text-decoration: none;
border-bottom: solid var(--highlight-color) 1px;
border-radius: 0;
}

.life-in-weeks {
margin: 0 20%;
border-radius: 5px;
margin: 0 20% 40% 20%;
.future-date {
background-color: var(--future-bg-color) !important;
border-color: var(--future-border) !important;
Expand Down Expand Up @@ -109,15 +107,12 @@ a:hover {
}
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;
border: none;
}
@keyframes fadeIn {
from {
Expand All @@ -135,14 +130,21 @@ a:hover {
display: none;
opacity: 0;
animation: fadeIn 0.5s ease-out forwards;
.nav-pills {
--bs-nav-pills-border-radius: 0;
--bs-nav-pills-link-active-bg: var(--main-bg-color);
--bs-nav-link-padding-x: 0.5rem;
@media only screen and (max-width: 768px) {
--bs-nav-link-padding-x: 0.35rem;
}
--bs-nav-link-padding-y: 0;
--bs-nav-link-color: var(--highlight-color);
--bs-nav-pills-link-active-color: var(--highlight-color);
border-bottom: solid var(--highlight-color) 1px;
}
}
}

hr {
margin: 2% 0%;
border-top: dotted var(--link-color) 1px;
border-radius: 0;
}
.custom-tooltip {
--bs-tooltip-bg: var(--highlight-color);
--bs-tooltip-color: var(--bs-white);
Expand Down

0 comments on commit 0fb14de

Please sign in to comment.