From f61493023d48a038df4cfa614d2311c81698472d Mon Sep 17 00:00:00 2001 From: Nabil Kashyap Date: Sat, 3 Feb 2024 17:45:35 -0800 Subject: [PATCH] adds scrolly widget --- .../css/components/_header-noun-scroll.scss | 44 ------------------- assets/css/components/_madlib.scss | 44 +++++++++++++++++++ assets/css/components/_nav.scss | 24 +++++----- assets/css/style.scss | 3 +- assets/js/main.js | 18 ++++++++ includes/header-noun-scroll.html | 13 ------ includes/madlib.html | 14 ++++++ includes/navigation.html | 21 ++++----- meta/madlib.md | 12 +++++ 9 files changed, 112 insertions(+), 81 deletions(-) delete mode 100644 assets/css/components/_header-noun-scroll.scss create mode 100644 assets/css/components/_madlib.scss delete mode 100644 includes/header-noun-scroll.html create mode 100644 includes/madlib.html create mode 100644 meta/madlib.md diff --git a/assets/css/components/_header-noun-scroll.scss b/assets/css/components/_header-noun-scroll.scss deleted file mode 100644 index f94657c..0000000 --- a/assets/css/components/_header-noun-scroll.scss +++ /dev/null @@ -1,44 +0,0 @@ -.header-noun-scroll > span { - position: absolute; - top: 0; -} - -.header-noun-scroll__wrapper { - display: inline-block; - position: relative; - left: 4rem; - height: 2.5rem; - overflow: hidden; -} - -.header-noun-scroll__list { - display: inline-block; - transition: 300ms all; - margin-top: 0; - animation: slide 10s infinite alternate $easing--bezier-sharp 2s; -} - -.header-noun-scroll__list span { - display: block; - padding-bottom: 0.25rem; -} -@keyframes slide { - 0% { - margin-top: 0; - } - 20% { - margin-top: calc(-1 * 2.5rem); - } - 40% { - margin-top: calc(-2 * 2.5rem); - } - 60% { - margin-top: calc(-3 * 2.5rem); - } - 80% { - margin-top: calc(-4 * 2.5rem); - } - 100% { - margin-top: calc(-5 * 2.5rem); - } -} diff --git a/assets/css/components/_madlib.scss b/assets/css/components/_madlib.scss new file mode 100644 index 0000000..6ad0d49 --- /dev/null +++ b/assets/css/components/_madlib.scss @@ -0,0 +1,44 @@ +.madlib > span { + position: absolute; + top: 0; +} + +.madlib__wrapper { + display: inline-block; + position: relative; + left: 3.65rem; + height: 2.5rem; + overflow: hidden; +} + +.madlib__list { + display: inline-block; + margin-top: 0; +} + +.madlib__list span { + display: block; + opacity: 0; + max-height: 0; + + &.active { + opacity: 1; + max-height: 100%; + animation: slide 3s $easing--bezier-standard; + } +} + +@keyframes slide { + 0% { + margin-top: calc(3 * 2.5rem); + } + 20% { + margin-top: calc(0 * 2.5rem); + } + 40% { + margin-top: calc(0 * 2.5rem); + } + 100% { + margin-top: calc(-3 * 2.5rem); + } +} diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index 45cba32..657f689 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss @@ -42,7 +42,7 @@ } &.nav--open { - height: 27em; + height: 30em; } &.nav--open .nav__links-list { @@ -51,15 +51,15 @@ height: 100%; } - &.nav--open .header-noun-scroll { + &.nav--open .madlib { opacity: 0; } // other styles - .nav__header-title, .nav__page-title, .nav__links-list, - .nav__action .button { + .nav__action .button, + .madlib__list { @include get-map-values($serif); font-size: 1.5rem; @include breakpoint("medium") { @@ -67,7 +67,7 @@ } } - .header-noun-scroll { + .madlib { position: absolute; display: none; padding-left: 0.5rem; @@ -89,6 +89,10 @@ a + ul { margin-top: 1rem; } + + .shop a { + font-size: 3rem; + } } .nav__links-about { @@ -137,27 +141,27 @@ // page specific styles .p-home { - .header-noun-scroll { + .madlib { display: inline; } } .p-events, .p-post-page.events { - .nav__links-list #events { + .nav__links-list .events { display: none; } } .p-projects, .p-post-page.projects { - .nav__links-list #projects { + .nav__links-list .projects { display: none; } } .p-search { - .nav__links-list #search { + .nav__links-list .search { display: none; } } @@ -171,6 +175,6 @@ } } -.p-about .nav__links-list #about { +.p-about .nav__links-list .about { display: none; } diff --git a/assets/css/style.scss b/assets/css/style.scss index dbc230f..07255b4 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -25,9 +25,10 @@ $background--dark: $color__black; @import "components/pagination"; @import "components/footer"; @import "components/page"; -@import "components/header-noun-scroll"; +@import "components/madlib"; @import "components/searchbox"; +@import "pages/about"; @import "pages/home"; @import "pages/post-page"; @import "pages/post-type"; diff --git a/assets/js/main.js b/assets/js/main.js index 52e2390..cbd981d 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -181,6 +181,24 @@ function handleMutation( window.location = searchUrl.toString(); }); + // handle home route + if (route.pathname == "/") { + // handle header madlib + const madlib = document.querySelector(".madlib__list"); + let nounCount = madlib.children.length; + let activeIndex = nounCount % 2 ? (nounCount - 1) / 2 : nounCount / 2; + madlib.children[activeIndex].classList.add("active"); + + setInterval(() => { + for (let n of madlib.children) { + n.classList.remove("active"); + } + let oldNode = madlib.removeChild(madlib.children[0]); + madlib.appendChild(oldNode); + madlib.children[activeIndex].classList.add("active"); + }, 2000); + } + // handle search route if (route.pathname.includes("/search")) { const fuse = await initFuse(); diff --git a/includes/header-noun-scroll.html b/includes/header-noun-scroll.html deleted file mode 100644 index 89b6364..0000000 --- a/includes/header-noun-scroll.html +++ /dev/null @@ -1,13 +0,0 @@ -is a -
-
- Shop - Gallery - Archive - Institute - Company - Project - Group -
-
- \ No newline at end of file diff --git a/includes/madlib.html b/includes/madlib.html new file mode 100644 index 0000000..6a4a5a6 --- /dev/null +++ b/includes/madlib.html @@ -0,0 +1,14 @@ +{% for card in collections.meta %} +{% if card.data.tags contains 'madlib' %} +{% assign madlib = card %} +{% endif %} +{% endfor %} +is a +
+
+ {% for n in madlib.data.values %} + {{ n }} + {% endfor %} +
+
+ \ No newline at end of file diff --git a/includes/navigation.html b/includes/navigation.html index a8461dd..b18ee02 100644 --- a/includes/navigation.html +++ b/includes/navigation.html @@ -3,7 +3,7 @@