update

Co-authored-by: Allen Lee <[email protected]> Co-authored-by: Rachele Lang <[email protected]> Co-authored-by: Weston Ludeke <[email protected]>
campfire-previews · Apr 15, 2024 · 00eb017 · 00eb017
1 parent e3073d5
commit 00eb017
Show file tree

Hide file tree

Showing 53 changed files with 1,297 additions and 70 deletions.
diff --git a/css/index.css b/css/index.css
@@ -8,7 +8,7 @@
   --yellow: #efbe43;
   --off-white: #f2f1ea;
   --gray: #d3d2cc;
-  --toc-width: 350px;
+  --toc-width: 320px;
   font-family: "proxima-nova", sans-serif;
   scroll-behavior: smooth;
 }
@@ -21,7 +21,7 @@ header {
   align-items: center;
   position: fixed;
   padding: 10px;
-  z-index: 2;
+  z-index: 100;
 
   img {
     height: 52px;
@@ -127,17 +127,6 @@ nav {
   background-size: cover;
 }
 
-@media (max-width: 750px) {
-  #rock-wrapper {
-    margin-top: -400px;
-  }
-}
-
-@media (max-width: 590px) {
-  #rock-wrapper {
-    margin-top: -300px;
-  }
-}
 #rock-left {
   position: absolute;
   left: 0;
@@ -220,24 +209,6 @@ nav {
   background-color: var(--blue);
 }
 
-@media (min-width: 800px) {
-  /* CSS code for the breakpoint of 800px wide */
-
-  .feature {
-    flex-direction: row;
-    align-items: center;
-    gap: 50px;
-  }
-
-  .feature .gif {
-    min-width: 300px;
-  }
-
-  .right {
-    order: 2;
-  }
-}
-
 /* FEATURES-CASE-STUDY TRANSITION */
 #features-case-study {
   max-width: 100%;
@@ -254,14 +225,14 @@ nav {
 #case-study {
   background-color: var(--dark-blue);
   padding: 70px;
+  padding-top: 20px;
   color: white;
 
   /* article houses case study content */
   article {
     display: flex;
     flex-direction: column;
     gap: 50px;
-    width: 90%;
     margin-left: var(--toc-width);
   }
 
@@ -275,6 +246,9 @@ nav {
     margin: auto;
   }
 
+  & > h1 {
+    margin-bottom: 70px;
+  }
   h1 {
     font-size: 1.5rem;
   }
@@ -290,14 +264,18 @@ nav {
 
 #case-study-content {
   display: flex;
+  gap: 0;
 }
 
 /* CASE STUDY TABLE OF CONTENTS */
 
 #toc {
+  /* display: none; */
   width: var(--toc-width);
   position: fixed;
   top: 5rem;
+  transition: opacity 0.5s ease;
+  opacity: 0;
 
   a {
     display: flex;
@@ -306,20 +284,42 @@ nav {
     text-decoration: none;
   }
 
-  li {
+  li.subitem {
+    display: none;
+  }
+
+  li,
+  li.subitem.show {
     display: flex;
     align-items: center;
   }
 
+  li.selected::before {
+    display: block;
+    border: 4px solid var(--red);
+    content: " ";
+    border-radius: 50%;
+    width: 0.5rem;
+    height: 0.5rem;
+    background-color: var(--blue);
+  }
+
   li::before {
     display: block;
-    /* border: 4px solid var(--red); for selected item  */
     content: " ";
     border-radius: 50%;
     width: 0.5rem;
     height: 0.5rem;
     background-color: var(--blue);
   }
+
+  .subitem {
+    padding-left: 30px;
+  }
+}
+
+#toc.show {
+  opacity: 1;
 }
 
 /* CASE-STUDY-TEAM TRANSITION */
@@ -406,3 +406,50 @@ footer {
   padding-top: 0;
   font-size: 0.8rem;
 }
+
+/* MOBILE SETTINGS */
+@media (max-width: 750px) {
+  #rock-wrapper {
+    margin-top: -400px;
+  }
+}
+
+@media (max-width: 590px) {
+  #rock-wrapper {
+    margin-top: -300px;
+  }
+}
+
+@media (min-width: 800px) {
+  /* CSS code for the breakpoint of 800px wide */
+
+  .feature {
+    flex-direction: row;
+    align-items: center;
+    gap: 50px;
+  }
+
+  .feature .gif {
+    min-width: 300px;
+  }
+
+  .right {
+    order: 2;
+  }
+}
+
+@media (max-width: 950px) {
+  #toc {
+    display: none;
+  }
+
+  #case-study article {
+    margin-left: 0 !important;
+  }
+}
+
+@media (max-width: 530px) {
+  #case-study {
+    padding: 35px !important;
+  }
+}
diff --git a/images/index.js b/images/index.js
@@ -0,0 +1,72 @@
+/*code for the toc and case study*/
+const caseStudy = document.getElementById("case-study");
+const caseStudyText = document.querySelector(".prose");
+const toc = document.getElementById("toc");
+const tocLinks = document.querySelectorAll("#toc a");
+const tocLinksCount = tocLinks.length;
+
+function isTOCVisible() {
+  const caseStudyTopIsVisible = window.scrollY >= caseStudy.offsetTop;
+  const caseStudyBottomIsVisible =
+    window.scrollY + window.innerHeight >
+    caseStudy.offsetHeight + caseStudy.offsetTop;
+
+  return caseStudyTopIsVisible && !caseStudyBottomIsVisible;
+}
+function handleTOCVisibility() {
+  if (isTOCVisible()) {
+    toc.classList.add("show");
+  } else {
+    toc.classList.remove("show");
+  }
+}
+console.log("JS");
+// const handleTocSelection = () => {
+//   const clearSelectedToc = () => {
+//     const selectedTocItems = document.querySelectorAll("#toc .selected");
+//     const subItems = document.querySelectorAll(`li.subitem.show`);
+
+//     //hide any open subitems
+//     subItems.forEach((subItem) => {
+//       subItem.classList.remove("show");
+//     });
+
+//     //remove the selected items
+//     selectedTocItems.forEach((selectedTocItem) => {
+//       selectedTocItem.classList.remove("selected");
+//     });
+//   };
+
+//   const selectTocItem = (link) => {
+//     const tocItem = link.closest("li");
+//     const dataSection = tocItem.dataset.section;
+//     const subItems = document.querySelectorAll(
+//       `li.subitem[data-section="${dataSection}"]`
+//     );
+
+//     subItems.forEach((subItem) => {
+//       subItem.classList.add("show");
+//     });
+
+//     tocItem.classList.add("selected");
+//   };
+
+//   //do nothing if we don't want to show the toc
+//   if (!toc.classList.contains("show")) return;
+
+//   //for each link in the toc
+//   for (let i = tocLinksCount - 1; i >= 0; i--) {
+//     const link = tocLinks[i];
+//     //link.hash is the place the anchor links to.
+//     if (!link.hash) continue;
+//     const target = document.querySelector(link.hash);
+
+//     //if the target exists and its reasonable far away
+//     if (!!target && target.offsetTop <= window.scrollY + 16 * 2) {
+//       clearSelectedToc();
+//       selectTocItem(link, target);
+
+//       break;
+//     }
+//   }
+// };