Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update #44

Merged
merged 6 commits into from
Mar 5, 2024
Merged

Update #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7c4464f
Create history.js
PurveshPatelYu Mar 5, 2024
ae4e3cd
Create history.css
PurveshPatelYu Mar 5, 2024
175aa76
Update history.html
PurveshPatelYu Mar 5, 2024
8f5a0e7
Update history.html
PurveshPatelYu Mar 5, 2024
e0a6f21
Create history.js
PurveshPatelYu Mar 5, 2024
a7ac470
Update history.html
PurveshPatelYu Mar 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions website/_assets/js/history.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
})();
259 changes: 4 additions & 255 deletions website/_layouts/history.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,269 +7,18 @@
name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no"
/>
<script src="js/history.js"></script>

<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'" />
<meta http-equiv="X-Content-Type-Options" content="nosniff" /> -->
<!-- <meta http-equiv="X-Frame-Options" content="SAMEORIGIN" /> -->

<link rel="stylesheet" href="css/history.css" />
<link rel="stylesheet" href="assets/css/main.min.css" />
<noscript
><link rel="stylesheet" href="assets/css/noscript.min.css"
/></noscript>
<link rel="shortcut icon" href="assets/img/logo-short.ico" />
<style>
*,
*::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;
}
</style>

</head>
<body class="is-preload">
{% include header.html %} {{ content }} {% include footer.html %} {% include
Expand Down
Loading
Loading