From 7c4464f140e9ac0ffa48cbca88a5ca315acc5079 Mon Sep 17 00:00:00 2001 From: PurveshPatelYu <134462884+PurveshPatelYu@users.noreply.github.com> Date: Mon, 4 Mar 2024 19:49:40 -0500 Subject: [PATCH 1/6] Create history.js --- website/_assets/js/history.js | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 website/_assets/js/history.js diff --git a/website/_assets/js/history.js b/website/_assets/js/history.js new file mode 100644 index 00000000..44c7911a --- /dev/null +++ b/website/_assets/js/history.js @@ -0,0 +1,32 @@ +(function () { + "use strict"; + + // define variables + var items = document.querySelectorAll(".timeline li"); + + // check if an element is in viewport + // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport + function isElementInViewport(el) { + var rect = el.getBoundingClientRect(); + return ( + rect.top >= 0 && + rect.left >= 0 && + rect.bottom <= + (window.innerHeight || document.documentElement.clientHeight) && + rect.right <= (window.innerWidth || document.documentElement.clientWidth) + ); + } + + function callbackFunc() { + for (var i = 0; i < items.length; i++) { + if (isElementInViewport(items[i])) { + items[i].classList.add("in-view"); + } + } + } + + // listen for events + window.addEventListener("load", callbackFunc); + window.addEventListener("resize", callbackFunc); + window.addEventListener("scroll", callbackFunc); +})(); From ae4e3cd3837c4e5207b85dbc42a8ab7adcdf691f Mon Sep 17 00:00:00 2001 From: PurveshPatelYu <134462884+PurveshPatelYu@users.noreply.github.com> Date: Mon, 4 Mar 2024 19:50:50 -0500 Subject: [PATCH 2/6] Create history.css --- website/css/history.css | 252 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 252 insertions(+) create mode 100644 website/css/history.css diff --git a/website/css/history.css b/website/css/history.css new file mode 100644 index 00000000..337664bf --- /dev/null +++ b/website/css/history.css @@ -0,0 +1,252 @@ +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font: normal 16px/1.5 "Helvetica Neue", sans-serif; + background: #456990; + color: #fff; + overflow-x: hidden; + padding-bottom: 50px; +} + + +/* INTRO SECTION +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +.intro { + background: #f45b69; + padding: 100px 0; +} + +.container { + width: 90%; + max-width: 1200px; + margin: 0 auto; + text-align: center; +} + +h1 { + font-size: 2.5rem; +} + + +/* TIMELINE +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +.timeline ul { + background: #456990; + padding: 50px 0; +} + +.timeline ul li { + list-style-type: none; + position: relative; + width: 6px; + margin: 0 auto; + padding-top: 50px; + background: #fff; +} + +.timeline ul li::after { + content: ""; + position: absolute; + left: 50%; + bottom: 0; + transform: translateX(-50%); + width: 30px; + height: 30px; + border-radius: 50%; + background: inherit; + z-index: 1; +} + +.timeline ul li div { + position: relative; + bottom: 0; + width: 400px; + padding: 15px; + background: #f45b69; +} + +.timeline ul li div::before { + content: ""; + position: absolute; + bottom: 7px; + width: 0; + height: 0; + border-style: solid; +} + +.timeline ul li:nth-child(odd) div { + left: 45px; +} + +.timeline ul li:nth-child(odd) div::before { + left: -15px; + border-width: 8px 16px 8px 0; + border-color: transparent #f45b69 transparent transparent; +} + +.timeline ul li:nth-child(even) div { + left: -439px; +} + +.timeline ul li:nth-child(even) div::before { + right: -15px; + border-width: 8px 0 8px 16px; + border-color: transparent transparent transparent #f45b69; +} + +time { + display: block; + font-size: 1.2rem; + font-weight: bold; + margin-bottom: 8px; +} + + +/* EFFECTS +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +.timeline ul li::after { + transition: background 0.5s ease-in-out; +} + +.timeline ul li.in-view::after { + background: #f45b69; +} + +.timeline ul li div { + visibility: hidden; + opacity: 0; + transition: all 0.5s ease-in-out; +} + +.timeline ul li:nth-child(odd) div { + transform: translate3d(200px, 0, 0); +} + +.timeline ul li:nth-child(even) div { + transform: translate3d(-200px, 0, 0); +} + +.timeline ul li.in-view div { + transform: none; + visibility: visible; + opacity: 1; +} + + +/* GENERAL MEDIA QUERIES +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +@media screen and (max-width: 900px) { + .timeline ul li div { + width: 250px; + } + .timeline ul li:nth-child(even) div { + left: -289px; + /*250+45-6*/ + } +} + +@media screen and (max-width: 600px) { + .timeline ul li { + margin-left: 20px; + } + .timeline ul li div { + width: calc(100vw - 91px); + } + .timeline ul li:nth-child(even) div { + left: 45px; + } + .timeline ul li:nth-child(even) div::before { + left: -15px; + border-width: 8px 16px 8px 0; + border-color: transparent #f45b69 transparent transparent; + } +} + + +/* EXTRA/CLIP PATH STYLES +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.timeline-clippy ul li::after { + width: 40px; + height: 40px; + border-radius: 0; +} + +.timeline-rhombus ul li::after { + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); +} + +.timeline-rhombus ul li div::before { + bottom: 12px; +} + +.timeline-star ul li::after { + clip-path: polygon( + 50% 0%, + 61% 35%, + 98% 35%, + 68% 57%, + 79% 91%, + 50% 70%, + 21% 91%, + 32% 57%, + 2% 35%, + 39% 35% + ); +} + +.timeline-heptagon ul li::after { + clip-path: polygon( + 50% 0%, + 90% 20%, + 100% 60%, + 75% 100%, + 25% 100%, + 0% 60%, + 10% 20% + ); +} + +.timeline-infinite ul li::after { + animation: scaleAnimation 2s infinite; +} + +@keyframes scaleAnimation { + 0% { + transform: translateX(-50%) scale(1); + } + 50% { + transform: translateX(-50%) scale(1.25); + } + 100% { + transform: translateX(-50%) scale(1); + } +} + + +/* FOOTER STYLES +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.page-footer { + position: fixed; + right: 0; + bottom: 20px; + display: flex; + align-items: center; + padding: 5px; + color: black; + background: rgba(255, 255, 255, 0.65); +} + +.page-footer a { + display: flex; + margin-left: 4px; +} From 175aa767cb4b95891bca7fda20bdde9b3b6f0f59 Mon Sep 17 00:00:00 2001 From: PurveshPatelYu <134462884+PurveshPatelYu@users.noreply.github.com> Date: Mon, 4 Mar 2024 19:56:41 -0500 Subject: [PATCH 3/6] Update history.html --- website/_layouts/history.html | 257 +--------------------------------- 1 file changed, 2 insertions(+), 255 deletions(-) diff --git a/website/_layouts/history.html b/website/_layouts/history.html index 3ebaccbe..feafda57 100644 --- a/website/_layouts/history.html +++ b/website/_layouts/history.html @@ -10,266 +10,13 @@ - + - + {% include header.html %} {{ content }} {% include footer.html %} {% include From 8f5a0e74a906f2b49682949df82cb575d0d4be26 Mon Sep 17 00:00:00 2001 From: PurveshPatelYu <134462884+PurveshPatelYu@users.noreply.github.com> Date: Mon, 4 Mar 2024 19:59:03 -0500 Subject: [PATCH 4/6] Update history.html --- website/history.html | 39 ++------------------------------------- 1 file changed, 2 insertions(+), 37 deletions(-) diff --git a/website/history.html b/website/history.html index ef42ac94..5fd96fac 100644 --- a/website/history.html +++ b/website/history.html @@ -3,44 +3,9 @@ layout: history --- -
-

Vertical Timeline ↓

+

YURS Timeline ↓

@@ -48,7 +13,7 @@

Vertical Timeline ↓