diff --git a/assets/js/project.js b/assets/js/project.js index cffaa32..0509216 100644 --- a/assets/js/project.js +++ b/assets/js/project.js @@ -1,6 +1,7 @@ let dataHTMLs = [] const container = document.getElementById('project-content'); let currentDataIndex = 2 +let totDataNum = 0 function getIndexDelta(idx, delta) { return (idx + delta + totDataNum) % totDataNum @@ -13,10 +14,10 @@ fetch('./assets/data/project.json') const div = document.createElement('div') div.classList.add('project-item') div.innerHTML = ` -
+
${data.title} -
-
${data.description}
+ +
${data.description}
${!data.link ? `` : ` @@ -42,8 +43,6 @@ fetch('./assets/data/project.json') totDataNum = dataHTMLs.length currentDataIndex = 2 - const container = document.getElementById('project-content'); - dataHTMLs.slice(getIndexDelta(currentDataIndex, -2), getIndexDelta(currentDataIndex, 2) + 1).forEach(dataHTML => { container.appendChild(dataHTML) }) @@ -56,9 +55,9 @@ fetch('./assets/data/project.json') function moveRight() { lastElementIdx = getIndexDelta(currentDataIndex, -3) - container.insertBefore(dataHTMLs[lastElementIdx], container.children[0]) - container.removeChild(container.children[container.children.length - 1]) currentDataIndex = getIndexDelta(currentDataIndex, -1) + container.removeChild(container.children[container.children.length - 1]) + container.insertBefore(dataHTMLs[lastElementIdx], container.children[0]) container.scrollTo({ left: container.scrollWidth / 2 - container.clientWidth / 2, @@ -68,9 +67,9 @@ function moveRight() { function moveLeft() { nextElementIdx = getIndexDelta(currentDataIndex, 3) - container.appendChild(dataHTMLs[nextElementIdx]) - container.removeChild(container.children[0]) currentDataIndex = getIndexDelta(currentDataIndex, 1) + container.removeChild(container.children[0]) + container.appendChild(dataHTMLs[nextElementIdx]) container.scrollTo({ left: container.scrollWidth / 2 - container.clientWidth / 2, diff --git a/assets/styles/footer.css b/assets/styles/footer.css index ff8883d..8524031 100644 --- a/assets/styles/footer.css +++ b/assets/styles/footer.css @@ -1,6 +1,6 @@ .footer { margin-top: 4rem; - background-color: var(--secondary-color); + background-color: var(--tertiary-color); color: var(--black-color); padding: 4rem 0 2rem 0; text-align: center; diff --git a/assets/styles/link.css b/assets/styles/link.css index 7b23926..bdfb518 100644 --- a/assets/styles/link.css +++ b/assets/styles/link.css @@ -21,7 +21,9 @@ grid-template-columns: auto auto; grid-template-rows: auto 1fr; gap: 1rem 2rem; + /* border: 0.25rem solid var(--primary-color); + */ max-width: 31.25rem; padding: 2rem; box-shadow: 0 0 0.5rem var(--black-shadow-primary-color); diff --git a/assets/styles/project.css b/assets/styles/project.css index 7f11c4b..af9e556 100644 --- a/assets/styles/project.css +++ b/assets/styles/project.css @@ -26,21 +26,25 @@ .project-content .project-item { flex: 0 0 auto; width: 30rem; - height: 25rem; + height: 30rem; line-height: 2.25rem; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; justify-content: start; + /* box-sizing: border-box; border: solid var(--white-color) 0.5rem; + */ opacity: 0.5; transition: opacity 0.25s ease-in-out, border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out; } .project-content .project-item:nth-child(3) { + /* border: 0.25rem solid var(--primary-color); + */ opacity: 1; z-index: 10; box-shadow: 0 0 0.5rem var(--black-shadow-primary-color), 0 0 2rem var(--black-shadow-secondary-color); @@ -154,6 +158,6 @@ @media screen and (max-width: 375px) { .project-content .project-item { max-width: 25rem; - height: 30rem; + height: 40rem; } } \ No newline at end of file