Added styles

This commit is contained in:
James Dinh 2022-12-17 01:49:14 -08:00
parent 230ee5711c
commit dc1f17eb2f
8 changed files with 258 additions and 200 deletions

BIN
.DS_Store vendored Normal file

Binary file not shown.

BIN
assets/.DS_Store vendored Normal file

Binary file not shown.

BIN
css/.DS_Store vendored Normal file

Binary file not shown.

View File

@ -1387,6 +1387,64 @@ section {
transition: opacity .2s ease;
}
.timeline-description {
font-size: 16px;
font-weight: normal;
}
.timeline-description-list li {
margin: 10px 40px;
font-size: 16px;
}
.important-text {
color: rgb(255, 126, 126);
}
.timeline-links {
display: flex;
flex-flow: row wrap;
justify-content: center;
text-align: center;
text-decoration: none !important;
margin-top: 15px;
}
.timeline-icon {
height: 23px;
width: 75px;
float: left;
}
.timeline-button {
color: rgb(233, 203, 104);
text-decoration: none;
border-radius: 5px;
font-size: 18px;
border: 1px solid rgb(192, 168, 88);
padding: 5px;
display: inline-block;
margin: 0 10px;
}
.zoom-link {
border: 1px solid rgb(45, 140, 255);
}
.timeline-button.zoom-link:hover {
background-color: rgb(45, 140, 255);
}
.timeline-button.zoom-link:hover > .timeline-icon{
filter:hue-rotate(60deg);
}
.timeline-button:hover {
color: white;
background-color: rgb(192, 168, 88);
transition: 0.5s;
}
/**
* Time
*/

BIN
img/.DS_Store vendored Normal file

Binary file not shown.

BIN
js/.DS_Store vendored Normal file

Binary file not shown.

View File

@ -371,117 +371,117 @@ document.addEventListener(
false
);
var slider = document.getElementById('slider'),
sliderItems = document.getElementById('items'),
prev = document.getElementById('prev'),
next = document.getElementById('next');
slide(slider, sliderItems, prev, next);
function slide(wrapper, items, prev, next) {
var posX1 = 0,
posX2 = 0,
posInitial,
posFinal,
threshold = 100,
slides = items.getElementsByClassName('slide'),
slidesLength = slides.length,
slideSize = items.getElementsByClassName('slide')[0].offsetWidth,
firstSlide = slides[0],
lastSlide = slides[slidesLength - 1],
cloneFirst = firstSlide.cloneNode(true),
cloneLast = lastSlide.cloneNode(true),
index = 0,
allowShift = true;
// var slider = document.getElementById('slider'),
// sliderItems = document.getElementById('items'),
// prev = document.getElementById('prev'),
// next = document.getElementById('next');
// slide(slider, sliderItems, prev, next);
// function slide(wrapper, items, prev, next) {
// var posX1 = 0,
// posX2 = 0,
// posInitial,
// posFinal,
// threshold = 100,
// slides = items.getElementsByClassName('slide'),
// slidesLength = slides.length,
// slideSize = items.getElementsByClassName('slide')[0].offsetWidth,
// firstSlide = slides[0],
// lastSlide = slides[slidesLength - 1],
// cloneFirst = firstSlide.cloneNode(true),
// cloneLast = lastSlide.cloneNode(true),
// index = 0,
// allowShift = true;
// Clone first and last slide
items.appendChild(cloneFirst);
items.insertBefore(cloneLast, firstSlide);
wrapper.classList.add('loaded');
// // Clone first and last slide
// items.appendChild(cloneFirst);
// items.insertBefore(cloneLast, firstSlide);
// wrapper.classList.add('loaded');
// Mouse and Touch events
items.onmousedown = dragStart;
// // Mouse and Touch events
// items.onmousedown = dragStart;
// Touch events
items.addEventListener('touchstart', dragStart);
items.addEventListener('touchend', dragEnd);
items.addEventListener('touchmove', dragAction);
// // Touch events
// items.addEventListener('touchstart', dragStart);
// items.addEventListener('touchend', dragEnd);
// items.addEventListener('touchmove', dragAction);
// Click events
prev.addEventListener('click', function () { shiftSlide(-1) });
next.addEventListener('click', function () { shiftSlide(1) });
// // Click events
// prev.addEventListener('click', function () { shiftSlide(-1) });
// next.addEventListener('click', function () { shiftSlide(1) });
// Transition events
items.addEventListener('transitionend', checkIndex);
// // Transition events
// items.addEventListener('transitionend', checkIndex);
function dragStart (e) {
e = e || window.event;
e.preventDefault();
posInitial = items.offsetLeft;
// function dragStart (e) {
// e = e || window.event;
// e.preventDefault();
// posInitial = items.offsetLeft;
if (e.type == 'touchstart') {
posX1 = e.touches[0].clientX;
} else {
posX1 = e.clientX;
document.onmouseup = dragEnd;
document.onmousemove = dragAction;
}
}
function dragAction (e) {
e = e || window.event;
// if (e.type == 'touchstart') {
// posX1 = e.touches[0].clientX;
// } else {
// posX1 = e.clientX;
// document.onmouseup = dragEnd;
// document.onmousemove = dragAction;
// }
// }
// function dragAction (e) {
// e = e || window.event;
if (e.type == 'touchmove') {
posX2 = posX1 - e.touches[0].clientX;
posX1 = e.touches[0].clientX;
} else {
posX2 = posX1 - e.clientX;
posX1 = e.clientX;
}
items.style.left = (items.offsetLeft - posX2) + "px";
}
// if (e.type == 'touchmove') {
// posX2 = posX1 - e.touches[0].clientX;
// posX1 = e.touches[0].clientX;
// } else {
// posX2 = posX1 - e.clientX;
// posX1 = e.clientX;
// }
// items.style.left = (items.offsetLeft - posX2) + "px";
// }
function dragEnd (e) {
posFinal = items.offsetLeft;
if (posFinal - posInitial < -threshold) {
shiftSlide(1, 'drag');
} else if (posFinal - posInitial > threshold) {
shiftSlide(-1, 'drag');
} else {
items.style.left = (posInitial) + "px";
}
document.onmouseup = null;
document.onmousemove = null;
}
// function dragEnd (e) {
// posFinal = items.offsetLeft;
// if (posFinal - posInitial < -threshold) {
// shiftSlide(1, 'drag');
// } else if (posFinal - posInitial > threshold) {
// shiftSlide(-1, 'drag');
// } else {
// items.style.left = (posInitial) + "px";
// }
// document.onmouseup = null;
// document.onmousemove = null;
// }
function shiftSlide(dir, action) {
items.classList.add('shifting');
// function shiftSlide(dir, action) {
// items.classList.add('shifting');
if (allowShift) {
if (!action) { posInitial = items.offsetLeft; }
if (dir == 1) {
items.style.left = (posInitial - slideSize) + "px";
index++;
} else if (dir == -1) {
items.style.left = (posInitial + slideSize) + "px";
index--;
}
};
// if (allowShift) {
// if (!action) { posInitial = items.offsetLeft; }
// if (dir == 1) {
// items.style.left = (posInitial - slideSize) + "px";
// index++;
// } else if (dir == -1) {
// items.style.left = (posInitial + slideSize) + "px";
// index--;
// }
// };
allowShift = false;
}
// allowShift = false;
// }
function checkIndex (){
items.classList.remove('shifting');
if (index == -1) {
items.style.left = -(slidesLength * slideSize) + "px";
index = slidesLength - 1;
}
if (index == slidesLength) {
items.style.left = -(1 * slideSize) + "px";
index = 0;
}
// function checkIndex (){
// items.classList.remove('shifting');
// if (index == -1) {
// items.style.left = -(slidesLength * slideSize) + "px";
// index = slidesLength - 1;
// }
// if (index == slidesLength) {
// items.style.left = -(1 * slideSize) + "px";
// index = 0;
// }
allowShift = true;
}
}
// allowShift = true;
// }
// }
var options = {
series: [{
@ -561,4 +561,4 @@ var options = {
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.re
chart.render();