fix: Minor fix on styles

WCY-dt · Jun 3, 2024 · 14e1008 · 14e1008
1 parent 6a16a00
commit 14e1008
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 12 deletions.
diff --git 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 = `
-                <dt class="project-info">
+                <div class="project-info">
                     <span>${data.title}</span>
-                </dt>
-                <dd class="project-desc">${data.description}</dd>
+                </div>
+                <div class="project-desc">${data.description}</div>
                 <menu class="project-link">
                     ${!data.link ? `` : `
                         <a href="${data.link}" target="_blank">
@@ -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
@@ -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
@@ -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
@@ -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;
     }
 }