Merge pull request #12 from fac31/sd/changes

Updates from loom
fac31 · Jul 1, 2024 · 1450473 · 1450473
2 parents 17009c0 + 322c87c
commit 1450473
Show file tree

Hide file tree

Showing 13 changed files with 513 additions and 349 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,6 +7,7 @@ yarn-error.log*
 lerna-debug.log*
 .pnpm-debug.log*
 
+
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
@@ -128,3 +129,4 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+.DS_Store
diff --git a/public/css/styles.css b/public/css/styles.css
@@ -24,6 +24,50 @@ html {
   --extra-bold: 800;
   --small-fs: 1.5rem;
   --large-fs: 15rem;
+
+  --circle-width: 9.25vw;
+  --screen-small-container: 90%;
+  --screen-large-container: 60%;
+  --screen-small-step-height: 70vh;
+  --screen-large-step-height: 90vh;
+  --circle-multiplier: 6;
+  --circle-speed: 2500ms;
+  --circle-delay: 250ms;
+}
+
+@keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    margin-top: 0;
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    margin-top: 60vh;
+  }
+}
+
+#hero-text {
+  position: relative;
+  z-index: 100;
+}
+
+.circles > * {
+  position: absolute;
+  z-index: 0;
+  right: 16.5vw;
+  width: 9.1vw;
+  height: 9vw;
+  border-radius: 50%;
+  animation-duration: var(--circle-speed);
+  /* COMMENT OUT BELOW FOR JS ANIMATION */
+  animation-name: fadeInDown;
+  animation-direction: normal;
+  opacity: 0;
+  animation-fill-mode: forwards;
+
 }
 
 #start {
@@ -38,6 +82,7 @@ body {
   background-color: var(--beige);
   margin: 0px;
 }
+
 #fade-elements {
   position: absolute;
   bottom: 0px;
@@ -46,23 +91,24 @@ body {
 }
 
 h1 {
-  font-size: var(--large-fs);
+  font-size: 12vw;
+  position: relative;
 }
+
 small {
   position: absolute;
-  top: 50%;
-  margin-top: -10px;
-  margin-left: -31px;
-
+  margin-left: -1.25vw;
+  top: 8vw;
+  transform-origin: center;
   transform: rotate(270deg);
   -webkit-transform: rotate(270deg);
-
-  width: 224px;
+  width: 10.5vw;
   text-align: center;
-
   color: var(--beige);
-  font-size: var(--small-fs);
+  font-size: 0.9vw;
   background-color: var(--green);
+  letter-spacing: 1px;
+  font-weight: normal;
 }
 
 #down-arrow {
@@ -81,6 +127,12 @@ small {
   font-weight: var(--extra-bold);
 }
 
+p {
+  font-size: var(--small-fs);
+  padding: 1rem;
+  margin: auto;
+}
+
 .center {
   display: flex;
   align-items: center;
@@ -94,95 +146,129 @@ small {
   flex-direction: column;
 }
 
-#dataviz_one,
+#data_viz_container {
+  position: fixed;
+  z-index: 0;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100%;
+}
+
+#dataviz_one {
+  position: absolute;
+  bottom: 300px;
+  z-index: 1000;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 #dataviz_two,
 #dataviz_three {
+  position: relative;
+  z-index: 1000;
   width: 100%;
-  /* height: 600px; */
-  height: 300px;
   margin: 20px auto;
+  height: 600px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
+
 /* CIRCLE ELEMENTS */
-#circles-intro > * {
-  position: absolute;
-  margin-left: 468px;
-  top: 50%;
-  margin-top: -85px;
-}
-.circles > * {
-  width: 185px;
-  height: 185px;
-  border-radius: 50%;
-  opacity: 0;
+#circles-intro {
+  position: relative;
+  z-index: 0;
+  /* COMMENT OUT FOR JS ANIMATION */
+  top: -21vw;
+  /* UNCOMMENT FOR JS ANIMATION */
+  /* top: -14vw; */
+  left: 6.5vw;
 }
+
 #blue-c {
   background-color: var(--blue);
+  animation-delay: calc(var(--circle-delay) * 1);
 }
-#green-c {
+#orange-c {
   background-color: var(--green);
+  animation-delay: calc(var(--circle-delay) * 2);
 }
-#yellow-c {
+
+#dark-blue-c {
   background-color: var(--yellow);
+  animation-delay: calc(var(--circle-delay) * 3);
 }
-#pink-c {
+#light-green-c {
   background-color: var(--pink);
+  animation-delay: calc(var(--circle-delay) * 4);
 }
 #grey-c {
   background-color: var(--grey);
+  animation-delay: calc(var(--circle-delay) * 5);
 }
-#light-green-c {
+#pink-c {
   background-color: var(--light-green);
+  animation-delay: calc(var(--circle-delay) * 6);
 }
-#dark-blue-c {
+#yellow-c {
   background-color: var(--dark-blue);
+  animation-delay: calc(var(--circle-delay) * 7);
 }
-#orange-c {
+
+#green-c {
   background-color: var(--orange);
+  animation-delay: calc(var(--circle-delay) * 8);
 }
-#purple-c {
+#blue-c {
   background-color: var(--purple);
+  animation-delay: calc(var(--circle-delay) * 9);
 }
 
-/* SCROLL ELEMENTS */
+.step {
+  margin: auto;
+  height: var(--screen-large-step-height);
+  width: var(--screen-large-container);
+}
 
-#scrolly {
-  position: relative;
+.step p {
+  text-align: center;
 }
 
-article {
+#step0 {
   position: relative;
   width: 100%;
 }
 
-.step {
-  height: 90vh;
-  width: 100%;
-  margin-top: 200px;
-}
-#step1Viz {
-  height: 300px;
+#step3 {
+  padding-bottom: 200px;
 }
-#main-article {
-  width: 70%;
+
+article {
+  width: var(--screen-large-container);
   margin: auto;
   margin-top: 200px;
   font-size: var(--small-fs);
+  position: relative;
+  z-index: 1;
 }
 
-div > p {
-  text-align: center;
-  padding: 1rem;
-  font-size: var(--small-fs);
-}
 #billion-dollar-dot {
   height: 80vh;
   width: 100%;
 }
-#billions-of-dots {
-  padding: 100px;
+
+#billions-of-dots-viz {
+  position: relative;
+  z-index: 1;
+  padding: 100px 0;
+  width: 1200px;
+  margin: auto;
+}
+.tooltip {
+  z-index: 2;
 }
 
 #dataviz3-text {
@@ -199,19 +285,22 @@ div > p {
   width: 100%;
 }
 
-/* Media Queries */
-
-@media (max-width: 1720px) {
-  h1 {
-    text-align: center;
+@media (max-width: 768px) {
+  p {
+    font-size: 14px;
   }
-  small {
-    margin-top: -200px;
+
+  #step0 {
+    height: 100vh;
   }
 
-  #circles-intro > * {
-    margin-left: 110px;
-    top: 60%;
+  .step {
+    height: var(--screen-small-step-height);
+  }
+
+  .step,
+  article {
+    width: var(--screen-small-container);
   }
 
   #dataviz-two-sizing {
@@ -222,11 +311,6 @@ div > p {
     margin-top: 5000px;
   }
 
-  .para-text {
-    margin: 0px;
-    padding: 0px;
-  }
-
   #Layer_1,
   #Layer_2 {
     max-width: 800px;