From 5169534ba41cab888c3b8cf061c3cf2adc255c29 Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Sun, 24 Apr 2022 20:31:33 +0100 Subject: [PATCH] updated intersectional observation project with way to indicate the page we are currently on --- .../intersectional-observation/about.html | 168 ++++++++++++++++++ .../intersectional-observation/contact.html | 168 ++++++++++++++++++ .../intersectional-observation/donate.html | 168 ++++++++++++++++++ .../intersectional-observation/index.html | 8 +- .../random/intersectional-observation/nav.js | 59 +++--- .../intersectional-observation/style.css | 9 +- 6 files changed, 551 insertions(+), 29 deletions(-) create mode 100644 projects/random/intersectional-observation/about.html create mode 100644 projects/random/intersectional-observation/contact.html create mode 100644 projects/random/intersectional-observation/donate.html diff --git a/projects/random/intersectional-observation/about.html b/projects/random/intersectional-observation/about.html new file mode 100644 index 0000000..1ca7c52 --- /dev/null +++ b/projects/random/intersectional-observation/about.html @@ -0,0 +1,168 @@ + + + + + + + + + Responsive Navigation + + + + + + + + + +
+ View of earth from space +
+

The Next Frontier

+

Explore the universe of tomorrow.

+
+
+
+
+

Look to the Stars

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae eligendi quibusdam dolor + illum impedit nisi. Eaque sequi necessitatibus voluptatum porro.

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt fugiat commodi numquam? + Obcaecati magni perferendis eligendi laudantium cum perspiciatis minus animi ipsa placeat adipisci + repellendus, id culpa minima officiis fugiat quidem nisi sint consectetur eius vero velit sunt quas + expedita. Ullam unde optio ad voluptas praesentium animi velit quae dicta?

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, temporibus.

+
+
+

Reasons to Travel

+
+
+ + + + + + + + +
+

Stars in the Sky

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati, + deserunt optio possimus atque qui!

+
+
+
+ + + + + + +
+

Moon Up Above

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati, + deserunt optio possimus atque qui!

+
+
+
+ + + + + + + + + + +
+

Ain’t no Sun Allowed

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati, + deserunt optio possimus atque qui!

+
+
+
+
+
+

Space Travel for Everyone

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae eligendi quibusdam dolor + illum impedit + nisi. Eaque sequi necessitatibus voluptatum porro.

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt fugiat commodi numquam? + Obcaecati + magni perferendis eligendi laudantium cum perspiciatis minus animi ipsa placeat adipisci repellendus, id + culpa minima + officiis fugiat quidem nisi sint consectetur eius vero velit sunt quas expedita. Ullam unde optio ad + voluptas + praesentium animi velit quae dicta?

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, temporibus.

+
+
+ + + \ No newline at end of file diff --git a/projects/random/intersectional-observation/contact.html b/projects/random/intersectional-observation/contact.html new file mode 100644 index 0000000..1ca7c52 --- /dev/null +++ b/projects/random/intersectional-observation/contact.html @@ -0,0 +1,168 @@ + + + + + + + + + Responsive Navigation + + + + + + + + + +
+ View of earth from space +
+

The Next Frontier

+

Explore the universe of tomorrow.

+
+
+
+
+

Look to the Stars

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae eligendi quibusdam dolor + illum impedit nisi. Eaque sequi necessitatibus voluptatum porro.

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt fugiat commodi numquam? + Obcaecati magni perferendis eligendi laudantium cum perspiciatis minus animi ipsa placeat adipisci + repellendus, id culpa minima officiis fugiat quidem nisi sint consectetur eius vero velit sunt quas + expedita. Ullam unde optio ad voluptas praesentium animi velit quae dicta?

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, temporibus.

+
+
+

Reasons to Travel

+
+
+ + + + + + + + +
+

Stars in the Sky

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati, + deserunt optio possimus atque qui!

+
+
+
+ + + + + + +
+

Moon Up Above

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati, + deserunt optio possimus atque qui!

+
+
+
+ + + + + + + + + + +
+

Ain’t no Sun Allowed

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati, + deserunt optio possimus atque qui!

+
+
+
+
+
+

Space Travel for Everyone

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae eligendi quibusdam dolor + illum impedit + nisi. Eaque sequi necessitatibus voluptatum porro.

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt fugiat commodi numquam? + Obcaecati + magni perferendis eligendi laudantium cum perspiciatis minus animi ipsa placeat adipisci repellendus, id + culpa minima + officiis fugiat quidem nisi sint consectetur eius vero velit sunt quas expedita. Ullam unde optio ad + voluptas + praesentium animi velit quae dicta?

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, temporibus.

+
+
+ + + \ No newline at end of file diff --git a/projects/random/intersectional-observation/donate.html b/projects/random/intersectional-observation/donate.html new file mode 100644 index 0000000..1ca7c52 --- /dev/null +++ b/projects/random/intersectional-observation/donate.html @@ -0,0 +1,168 @@ + + + + + + + + + Responsive Navigation + + + + + + + + + +
+ View of earth from space +
+

The Next Frontier

+

Explore the universe of tomorrow.

+
+
+
+
+

Look to the Stars

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae eligendi quibusdam dolor + illum impedit nisi. Eaque sequi necessitatibus voluptatum porro.

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt fugiat commodi numquam? + Obcaecati magni perferendis eligendi laudantium cum perspiciatis minus animi ipsa placeat adipisci + repellendus, id culpa minima officiis fugiat quidem nisi sint consectetur eius vero velit sunt quas + expedita. Ullam unde optio ad voluptas praesentium animi velit quae dicta?

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, temporibus.

+
+
+

Reasons to Travel

+
+
+ + + + + + + + +
+

Stars in the Sky

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati, + deserunt optio possimus atque qui!

+
+
+
+ + + + + + +
+

Moon Up Above

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati, + deserunt optio possimus atque qui!

+
+
+
+ + + + + + + + + + +
+

Ain’t no Sun Allowed

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati, + deserunt optio possimus atque qui!

+
+
+
+
+
+

Space Travel for Everyone

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae eligendi quibusdam dolor + illum impedit + nisi. Eaque sequi necessitatibus voluptatum porro.

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt fugiat commodi numquam? + Obcaecati + magni perferendis eligendi laudantium cum perspiciatis minus animi ipsa placeat adipisci repellendus, id + culpa minima + officiis fugiat quidem nisi sint consectetur eius vero velit sunt quas expedita. Ullam unde optio ad + voluptas + praesentium animi velit quae dicta?

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, temporibus.

+
+
+ + + \ No newline at end of file diff --git a/projects/random/intersectional-observation/index.html b/projects/random/intersectional-observation/index.html index 21561e3..1ca7c52 100644 --- a/projects/random/intersectional-observation/index.html +++ b/projects/random/intersectional-observation/index.html @@ -42,16 +42,16 @@ diff --git a/projects/random/intersectional-observation/nav.js b/projects/random/intersectional-observation/nav.js index 876c35f..2679a1e 100644 --- a/projects/random/intersectional-observation/nav.js +++ b/projects/random/intersectional-observation/nav.js @@ -1,32 +1,43 @@ -const navBtn = document.querySelector('#menu-btn'); -const nav = document.querySelector('nav'); -const navLinks = document.querySelector('.nav-links'); +const navBtn = document.querySelector("#menu-btn"); +const nav = document.querySelector("nav"); +const navLinks = document.querySelector(".nav-links"); -navBtn.addEventListener('click', () => { - navLinks.classList.add('activated'); - const isExpanded = JSON.parse(navBtn.getAttribute('aria-expanded')); - navBtn.setAttribute('aria-expanded', !isExpanded); - !isExpanded && nav.classList.add('active'); -}) +navBtn.addEventListener("click", () => { + navLinks.classList.add("activated"); + const isExpanded = JSON.parse(navBtn.getAttribute("aria-expanded")); + navBtn.setAttribute("aria-expanded", !isExpanded); + !isExpanded && nav.classList.add("active"); +}); //INTERSECTION OBSERVER -const navObs = new IntersectionObserver((entries) => nav.classList.toggle('active', !entries[0].isIntersecting) -, {threshold: .85}) +const navObs = new IntersectionObserver( + (entries) => nav.classList.toggle("active", !entries[0].isIntersecting), + { threshold: 0.85 } +); -navObs.observe(document.querySelector('header')); +navObs.observe(document.querySelector("header")); -const fadeUpObserver = new IntersectionObserver((entries) => { - entries.forEach(entry => { - if(entry.isIntersecting){ - entry.target.classList.add('faded'); - fadeUpObserver.unobserve(entry.target) +const fadeUpObserver = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add("faded"); + fadeUpObserver.unobserve(entry.target); + } + }); + }, + { + rootMargin: "-15%", } - }) -}, { - rootMargin: '-15%' -}) +); -document.querySelectorAll('.fade-up').forEach(el => { - fadeUpObserver.observe(el); -}) +document.querySelectorAll(".fade-up").forEach((el) => { + fadeUpObserver.observe(el); +}); + +document.querySelectorAll(".nav-link").forEach((link) => { + if (link.href === window.location.href) { + link.setAttribute("aria-current", "page"); + } +}); diff --git a/projects/random/intersectional-observation/style.css b/projects/random/intersectional-observation/style.css index 2178102..2d324a8 100644 --- a/projects/random/intersectional-observation/style.css +++ b/projects/random/intersectional-observation/style.css @@ -8,6 +8,7 @@ :root { --bkg: linear-gradient(to top, #0f0915, #050307); + /* --dark: #050307; */ --dark: #050307; --text: #f9f6fe; --accent: #4233e4; @@ -34,6 +35,11 @@ nav.active { background-color: var(--dark); } +.nav-link[aria-current="page"] { + text-decoration: underline wavy #f8c348 0.15rem; + text-underline-offset: 0.5rem; + } + .nav-container { display: flex; justify-content: space-between; @@ -271,10 +277,11 @@ header { width: clamp(4rem, 10vw, 8rem); } +/* default transform was 1 second, I prefer a lower figure */ .fade-up { opacity: 0; transform: translate3d(0, 5rem, 0); - transition: transform 1s cubic-bezier(0.64, 0.04, 0.26, 0.87), + transition: transform 0.4s cubic-bezier(0.64, 0.04, 0.26, 0.87), opacity 0.8s cubic-bezier(0.64, 0.04, 0.26, 0.87); }