turned off lazy loading, refactored js, image tweaks, css tweaks, be-your-own rennovation

src/assets/js/_header.js

@@ -0,0 +1,26 @@
+//////////////////////////////////////////
+// HEADER
+
+gsap.to("header", {
+    duration: 0.5,
+    backgroundColor: "rgba(0,0,0,0.1)",
+    backdropFilter: "blur(10px)",
+    scrollTrigger: {
+      trigger: "#hero-image",
+      scrub: true,
+      start: "center top", // "triggerElement page"
+      end: "bottom top", // "triggerElement page"
+    },
+  });
+  
+  gsap.to(".header__logo", {
+    duration: 0.5,
+    opacity: "1",
+    filter: "blur(0px)",
+    scrollTrigger: {
+      trigger: "#hero-image",
+      scrub: true,
+      start: "center top", // "triggerElement page"
+      end: "bottom top", // "triggerElement page"
+    },
+  });

src/assets/js/_hero.js

@@ -0,0 +1,18 @@
+//////////////////////////////////////////
+// HERO
+
+gsap.from("#hero-image", {
+    duration: 1,
+    //y: "-10rem",
+    scale: 0.95,
+    opacity: 0,
+    filter: "blur(10px)",
+    delay: 0.5,
+  });
+  gsap.from("#logo", {
+    duration: 0.5,
+    y: "-5rem",
+    opacity: 0,
+    delay: 1.25,
+    //ease: "in-out"
+  });

src/assets/js/_menu.js

@@ -0,0 +1,30 @@
+//////////////////////////////////////////
+// MENU
+
+let menuOpen = document.getElementById("menu-open"),
+  menuClose = document.getElementById("menu-close"),
+  openedMenuArray = gsap.utils.toArray(".opened-menu"),
+  closedMenuArray = gsap.utils.toArray(".closed-menu");
+
+menuOpen.addEventListener("click", (e) => openMenu(e));
+menuClose.addEventListener("click", (e) => closeMenu(e));
+
+function openMenu(e) {
+  e.preventDefault();
+  gsap.to("#menu", { y: "0vh" });
+  gsap.to("main", { y: "100vh" });
+  gsap.to(openedMenuArray, { x: "0", opacity: 1, width: "auto" });
+  gsap.to(closedMenuArray, { x: "3rem", opacity: 0, width: 0 });
+  gsap.to("html", { overflow: "hidden" });
+  document.querySelector('html').classList.add("menu-is-open");
+}
+function closeMenu(e) {
+  e.preventDefault();
+  gsap.to("#menu", { y: "-100vh" });
+  gsap.to("main", { y: "0vh" });
+  gsap.to(closedMenuArray, { x: "0", opacity: 1, width: "auto" });
+  gsap.to(openedMenuArray, { x: "3rem", opacity: 0, width: 0 });
+  gsap.to("html", { overflow: "scroll" });
+  gsap.to("html", { overflow: "overlay" });
+  document.querySelector('html').classList.remove("menu-is-open");
+}

src/assets/js/main.js

@@ -1,6 +1,3 @@
-gsap.registerPlugin(DrawSVGPlugin);
-gsap.registerPlugin(CustomEase);
-
 var bodyRect = document.body.getBoundingClientRect();
 
 const sections = [
@@ -61,55 +58,9 @@ const defaultActions = "play none none none"; //onEnter, onLeave, onEnterBack, a
 //   });
 // }, 2000);
 
-//////////////////////////////////////////
-// MENU
 
-let menuOpen = document.getElementById("menu-open"),
-  menuClose = document.getElementById("menu-close"),
-  openedMenuArray = gsap.utils.toArray(".opened-menu"),
-  closedMenuArray = gsap.utils.toArray(".closed-menu");
 
-menuOpen.addEventListener("click", (e) => openMenu(e));
-menuClose.addEventListener("click", (e) => closeMenu(e));
 
-function openMenu(e) {
-  e.preventDefault();
-  gsap.to("#menu", { y: "0vh" });
-  gsap.to("main", { y: "100vh" });
-  gsap.to(openedMenuArray, { x: "0", opacity: 1, width: "auto" });
-  gsap.to(closedMenuArray, { x: "3rem", opacity: 0, width: 0 });
-  gsap.to("html", { overflow: "hidden" });
-  document.querySelector('html').classList.add("menu-is-open");
-}
-function closeMenu(e) {
-  e.preventDefault();
-  gsap.to("#menu", { y: "-100vh" });
-  gsap.to("main", { y: "0vh" });
-  gsap.to(closedMenuArray, { x: "0", opacity: 1, width: "auto" });
-  gsap.to(openedMenuArray, { x: "3rem", opacity: 0, width: 0 });
-  gsap.to("html", { overflow: "scroll" });
-  gsap.to("html", { overflow: "overlay" });
-  document.querySelector('html').classList.remove("menu-is-open");
-}
-
-//////////////////////////////////////////
-// HERO
-
-gsap.from("#hero-image", {
-  duration: 1,
-  //y: "-10rem",
-  scale: 0.95,
-  opacity: 0,
-  filter: "blur(10px)",
-  delay: 0.5,
-});
-gsap.from("#logo", {
-  duration: 0.5,
-  y: "-5rem",
-  opacity: 0,
-  delay: 1.25,
-  //ease: "in-out"
-});
 //gsap.config({trialWarn: false});
 
 // create the smooth scroller FIRST!
@@ -123,32 +74,7 @@ gsap.from("#logo", {
 // backdrop-filter: blur(10px);
 //background-color: rgba(0,0,0,0.1);
 
-//////////////////////////////////////////
-// HEADER
 
-gsap.to("header", {
-  duration: 0.5,
-  backgroundColor: "rgba(0,0,0,0.1)",
-  backdropFilter: "blur(10px)",
-  scrollTrigger: {
-    trigger: "#hero-image",
-    scrub: true,
-    start: "center top", // "triggerElement page"
-    end: "bottom top", // "triggerElement page"
-  },
-});
-
-gsap.to(".header__logo", {
-  duration: 0.5,
-  opacity: "1",
-  filter: "blur(0px)",
-  scrollTrigger: {
-    trigger: "#hero-image",
-    scrub: true,
-    start: "center top", // "triggerElement page"
-    end: "bottom top", // "triggerElement page"
-  },
-});
 
 gsap.from("#hero-to-pitch path:first-child", {
   drawSVG: 0,
@@ -398,7 +324,7 @@ function positionServiceIcons() {
 
 function onResizeComplete() {
   positionServiceIcons();
-};
+}
 var resizeTimeout = setTimeout(onResizeComplete, 400);
 window.onresize = function() {
   clearTimeout(resizeTimeout);
@@ -457,23 +383,37 @@ gsap.from("#be-your-own #ticker", {
   },
 });
 
-let pseudoserviceArray = gsap.utils.toArray(".pseudoservice"),
-  next = 3, // time to change
+let pseudoserviceArray, next, itemHeight, listHeight, windowHeight, kerplunk, kerplunk2;
+
+pseudoserviceArray = gsap.utils.toArray(".pseudoservice");
+
+next = 4;
+
+function initializeSizes() {
+
   itemHeight = document
     .querySelector(".pseudoservice")
-    .getBoundingClientRect().height,
+    .getBoundingClientRect().height;
+  
   listHeight = document
     .querySelector(".pseudoservices")
-    .getBoundingClientRect().height,
-  windowHeight = document.getElementById("ticker__window").clientHeight,
-  kerplunk = CustomEase.create(
-    "custom",
-    "M0,0 C0.126,0.382 0.066,0.863 0.198,1.036 0.25,1.104 0.264,0.982 0.326,0.982 0.344,0.982 0.489,0.998 0.516,1 0.65,1.007 0.863,1 1,1 "
-  ),
-  kerplunk2 = CustomEase.create(
-    "custom",
-    "M0,0 C0.126,0.382 0.178,0.802 0.288,1.052 0.303,1.088 0.372,0.99 0.434,0.99 0.502,0.99 0.497,1 0.524,1 0.664,1 0.863,1 1,1 "
-  );
+    .getBoundingClientRect().height;
+  
+  windowHeight = document.getElementById("ticker__window").clientHeight;
+
+}
+
+initializeSizes();
+
+kerplunk = CustomEase.create(
+  "custom",
+  "M0,0 C0.126,0.382 0.066,0.863 0.198,1.036 0.25,1.104 0.264,0.982 0.326,0.982 0.344,0.982 0.489,0.998 0.516,1 0.65,1.007 0.863,1 1,1 "
+);
+
+kerplunk2 = CustomEase.create(
+  "custom",
+  "M0,0 C0.126,0.382 0.178,0.802 0.288,1.052 0.303,1.088 0.372,0.99 0.434,0.99 0.502,0.99 0.497,1 0.524,1 0.664,1 0.863,1 1,1 "
+);
 
 function crossfade() {
   var action = gsap
@@ -495,10 +435,10 @@ function crossfade() {
 
   var thisPseudoservice = pseudoserviceArray[2].innerHTML,
     thisElement = document.querySelector(
-      ".slides-container--" + thisPseudoservice.toLowerCase()
+      ".service-container--" + thisPseudoservice.toLowerCase().replace(' ','-')
     );
 
-  var slidesContainerArray = document.querySelectorAll(".slides-container");
+  var slidesContainerArray = document.querySelectorAll(".service-container");
   slidesContainerArray.forEach((thisContainer) => {
     thisContainer.style.display = "none";
   });
@@ -511,101 +451,104 @@ function crossfade() {
 // start the crossfade after next = 3 sec
 gsap.delayedCall(next, crossfade);
 
-document.querySelector(".services").addEventListener("mouseenter", pauseThunk);
-// TODO: pause not working - Id not found
-function pauseThunk() {
-  console.log("asfd");
-  gsap.getById("thunk").kill();
-}
+// document.querySelector(".services").addEventListener("mouseenter", pauseThunk);
+// // TODO: pause not working - Id not found
+// function pauseThunk() {
+//   console.log("asfd");
+//   gsap.getById("thunk").kill();
+// }
 
 // CAROUSEL
 
-var slideDelay = 1.5;
-var slideDuration = 0.3;
-var wrap = true;
+// var slideDelay = 1.5;
+// var slideDuration = 0.3;
+// var wrap = true;
 
-var slides = document.querySelectorAll(".slide");
-var prevButton = document.querySelector("#prevButton");
-var nextButton = document.querySelector("#nextButton");
-var progressWrap = gsap.utils.wrap(0, 1);
+// var slides = document.querySelectorAll(".slide");
+// var prevButton = document.querySelector("#prevButton");
+// var nextButton = document.querySelector("#nextButton");
+// var progressWrap = gsap.utils.wrap(0, 1);
 
-var numSlides = slides.length;
+// var numSlides = slides.length;
 
-gsap.set(slides, {
-  xPercent: (i) => i * 100,
-});
+// gsap.set(slides, {
+//   xPercent: (i) => i * 100,
+// });
 
-var wrapX = gsap.utils.wrap(-100, (numSlides - 1) * 100);
+// var wrapX = gsap.utils.wrap(-100, (numSlides - 1) * 100);
 
-var animation = gsap.to(slides, {
-  xPercent: "+=" + numSlides * 100,
-  duration: 1,
-  ease: "none",
-  paused: true,
-  repeat: -1,
-  modifiers: {
-    xPercent: wrapX,
-  },
-});
+// var animation = gsap.to(slides, {
+//   xPercent: "+=" + numSlides * 100,
+//   duration: 1,
+//   ease: "none",
+//   paused: true,
+//   repeat: -1,
+//   modifiers: {
+//     xPercent: wrapX,
+//   },
+// });
 
-var proxy = document.createElement("div");
-var slideAnimation = gsap.to({}, {});
-var slideWidth = 0;
-var wrapWidth = 0;
+// var proxy = document.createElement("div");
+// var slideAnimation = gsap.to({}, {});
+// var slideWidth = 0;
+// var wrapWidth = 0;
 
 resize();
 
 window.addEventListener("resize", resize);
 
-prevButton.addEventListener("click", function () {
-  animateSlides(1);
-});
+// prevButton.addEventListener("click", function () {
+//   animateSlides(1);
+// });
 
-nextButton.addEventListener("click", function () {
-  animateSlides(-1);
-});
+// nextButton.addEventListener("click", function () {
+//   animateSlides(-1);
+// });
 
 // function updateDraggable() {
 //   slideAnimation.kill();
 //   this.update();
 // }
 
-function animateSlides(direction) {
-  slideAnimation.kill();
-  var x = snapX(gsap.getProperty(proxy, "x") + direction * slideWidth);
+// function animateSlides(direction) {
+//   slideAnimation.kill();
+//   var x = snapX(gsap.getProperty(proxy, "x") + direction * slideWidth);
 
-  slideAnimation = gsap.to(proxy, {
-    x: x,
-    duration: slideDuration,
-    onUpdate: updateProgress,
-  });
-}
+//   slideAnimation = gsap.to(proxy, {
+//     x: x,
+//     duration: slideDuration,
+//     onUpdate: updateProgress,
+//   });
+// }
 
-function updateProgress() {
-  animation.progress(progressWrap(gsap.getProperty(proxy, "x") / wrapWidth));
-}
+// function updateProgress() {
+//   animation.progress(progressWrap(gsap.getProperty(proxy, "x") / wrapWidth));
+// }
 
-function snapX(value) {
-  let snapped = gsap.utils.snap(slideWidth, value);
-  return wrap
-    ? snapped
-    : gsap.utils.clamp(-slideWidth * (numSlides - 1), 0, snapped);
-}
+// function snapX(value) {
+//   let snapped = gsap.utils.snap(slideWidth, value);
+//   return wrap
+//     ? snapped
+//     : gsap.utils.clamp(-slideWidth * (numSlides - 1), 0, snapped);
+// }
 
 function resize() {
-  var norm = gsap.getProperty(proxy, "x") / wrapWidth || 0;
+  initializeSizes();
+  
+  // var norm = gsap.getProperty(proxy, "x") / wrapWidth || 0;
 
-  slideWidth = slides[0].offsetWidth;
-  wrapWidth = slideWidth * numSlides;
+  // slideWidth = slides[0].offsetWidth;
+  // wrapWidth = slideWidth * numSlides;
 
-  wrap; // || draggable.applyBounds({minX: -slideWidth * (numSlides - 1), maxX: 0});
+  // wrap; // || draggable.applyBounds({minX: -slideWidth * (numSlides - 1), maxX: 0});
 
-  gsap.set(proxy, {
-    x: norm * wrapWidth,
-  });
+  // gsap.set(proxy, {
+  //   x: norm * wrapWidth,
+  // });
+
+  // animateSlides(0);
+  // slideAnimation.progress(1);
 
-  animateSlides(0);
-  slideAnimation.progress(1);
 }
 
 gsap.from("#be-to-powered path", {

src/assets/js/peripheral.js

@@ -1,14 +0,0 @@
-gsap.to(
-    "header",
-    {
-      duration: 0.5,
-      backgroundColor: "rgba(0,0,0,0.1)",
-      backdropFilter: "blur(10px)",
-      scrollTrigger: {
-          trigger: "#hero-image",
-          scrub: true,
-          start: "center top", // "triggerElement page"
-          end: "bottom top", // "triggerElement page"
-      },
-    }
-  );

src/assets/styles/be-your-own copy.scss

@@ -0,0 +1,147 @@
+#be-your-own {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6rem;
+  //margin: 0 0 6rem 0;
+  padding: 0 6rem 0 6rem;
+  box-sizing: border-box;
+  width: 100%;
+
+  --size: 3rem;
+  --p-t: calc(0.2 * var(--size));
+  --p-b: calc(0 * var(--size));
+  --p: var(--p-t) 0 var(--p-b) calc(0.2 * var(--size));
+  --line: calc(var(--p-t) + var(--p-b) + var(--size));
+
+  h2 {
+    text-align: center;
+  }
+
+
+    #ticker {
+      height: 50vh;
+      position: relative;
+      width: 100%;
+
+      #ticker__selected-frame {
+        //outline: 1px solid white;
+        //outline-offset: calc(0.1 * var(--size));
+        font-size: var(--size);
+        text-transform: uppercase;
+        line-height: var(--size);
+        position: absolute;
+        top: calc(2 * var(--line));
+        left: -.5ch;
+        right: 0;
+        display: flex;
+        align-items: center;
+        height: var(--size);
+        padding: var(--p);
+        background-color: #353535;
+        border-bottom: 0.5rem #353535 solid;
+      }
+      #ticker__window {
+        height: 50vh;
+        width: calc(100vw - 12rem - 11.5ch);
+        overflow: hidden;
+        font-size: var(--size);
+        left: 11.5ch;
+        position: relative;
+      }
+
+      ul.pseudoservices {
+        margin: 0;
+        padding: 0;
+        li {
+          list-style: none;
+          font-size: var(--size);
+          line-height: 1;
+          display: flex;
+          align-items: center;
+          height: var(--size);
+          padding: var(--p);
+          white-space: nowrap;
+          overflow: hidden;
+        }
+      }
+
+      .services{
+        display: none;
+        position: absolute;
+        top: calc(3 * var(--line));
+        background-color: #353535;
+        padding: 2rem;
+        width: calc(11.5ch - 4rem);
+        font-size: var(--size);
+        left: -1rem;
+
+        img{
+          border-radius: 100%;
+          width: 5rem;
+        }
+        
+        .service{
+          display: flex;
+          align-items: center;
+
+          .service__content{
+            color: var(--c-1);
+            font-size: 1rem;
+            font-weight: 400;
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+          }
+        }
+      }
+    }
+  a.btn{
+    align-self: center;
+  }
+}
+
+.slides-controls {
+  padding: 10px;  
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 70px;
+  min-height: 70px;
+  gap: 2rem;
+
+  button{
+    background: none;
+    padding: 0;
+    border: 0;
+    cursor: pointer;
+  }
+}
+
+.slides-container {
+  position: relative;
+  overflow: hidden;  
+  display: none;
+  flex: 1;
+}
+
+.slide {
+  position: absolute;
+  font-size: 90px;
+  font-weight: 700;
+  color: rgba(255,255,255,0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  
+  width: calc(100% / 3);
+  width: 100%;
+}
+
+.slides-inner {
+  position: relative;
+  height: 7rem;
+  width: 100%;  
+  overflow: hidden;
+}

src/assets/styles/be-your-own.scss

@@ -1,3 +1,41 @@
+@media screen and (min-width: 900px) {
+  #be-your-own { --size: 3rem;
+    --rows-above: 2; 
+    --rows-height: 7;}
+}
+
+@media screen and (max-width: 1300px) {
+  #be-your-own { 
+    --rows-above: 1; 
+    --rows-height: 3;
+  }
+  .service__content{
+    justify-content: center !important;
+  }
+  .service__link{
+    margin: 10rem 0 0 0 !important;
+    flex-direction: row !important;
+  }
+  .service__info{
+    margin: 0 0 0 1rem !important;
+    &::before{
+      top: 25% !important;
+      left: -4rem !important;
+      align-self: flex-start !important;
+      justify-content: center !important;
+      border-top: 2rem transparent solid !important;
+              border-right: 2rem var(--c-text-accent) solid !important;
+              border-bottom: 2rem transparent solid !important;
+              border-left: 2rem transparent solid !important;
+    }
+  }
+
+}
+
+@media screen and (max-width: 900px) {
+  #be-your-own { --size: 2rem; }
+}
+
 #be-your-own {
   display: flex;
   flex-direction: column;
@@ -8,7 +46,7 @@
   box-sizing: border-box;
   width: 100%;
 
-  --size: 3rem;
+  //--size: 3rem;
   --p-t: calc(0.2 * var(--size));
   --p-b: calc(0 * var(--size));
   --p: var(--p-t) 0 var(--p-b) calc(0.2 * var(--size));
@@ -18,91 +56,169 @@
     text-align: center;
   }
 
+  #ticker {
+    height: 50vh;
+    position: relative;
+    width: 100%;
 
-    #ticker {
-      height: 50vh;
+    #ticker__selected-frame {
+      //outline: 1px solid white;
+      //outline-offset: calc(0.1 * var(--size));
+      font-size: var(--size);
+      text-transform: uppercase;
+      line-height: var(--size);
+      position: absolute;
+      top: calc(var(--rows-above) * var(--line));
+      left: -0.5ch;
+      right: 0;
+      display: flex;
+      align-items: center;
+      height: var(--size);
+      padding: var(--p);
+      background-color: #353535;
+      border-bottom: 0.5rem #353535 solid;
+    }
+    #ticker__window {
+      height: calc(var(--rows-height) * var(--line));
+      width: calc(100vw - 12rem - 11.5ch);
+      overflow: hidden;
+      font-size: var(--size);
+      left: 11.5ch;
       position: relative;
-      width: 100%;
+    }
 
-      #ticker__selected-frame {
-        //outline: 1px solid white;
-        //outline-offset: calc(0.1 * var(--size));
+    ul.pseudoservices {
+      margin: 0;
+      padding: 0;
+      li {
+        list-style: none;
         font-size: var(--size);
-        text-transform: uppercase;
-        line-height: var(--size);
-        position: absolute;
-        top: calc(2 * var(--line));
-        left: -.5ch;
-        right: 0;
+        line-height: 1;
         display: flex;
         align-items: center;
         height: var(--size);
         padding: var(--p);
-        background-color: #353535;
-        border-bottom: 0.5rem #353535 solid;
-      }
-      #ticker__window {
-        height: 50vh;
-        width: calc(100vw - 12rem - 11.5ch);
+        white-space: nowrap;
         overflow: hidden;
-        font-size: var(--size);
-        left: 11.5ch;
-        position: relative;
+      }
+    }
+
+    .services {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      //background-color: #353535;
+      padding: 2rem;
+      font-size: var(--size);
+      left: -1rem;
+      right: 0;
+
+      img {
+        border-radius: 100%;
+        width: 5rem;
       }
 
-      ul.pseudoservices {
-        margin: 0;
-        padding: 0;
-        li {
-          list-style: none;
-          font-size: var(--size);
-          line-height: 1;
-          display: flex;
-          align-items: center;
-          height: var(--size);
-          padding: var(--p);
-          white-space: nowrap;
-          overflow: hidden;
-        }
-      }
-
-      .services{
+      .service-container {
         display: none;
         position: absolute;
-        top: calc(3 * var(--line));
-        background-color: #353535;
-        padding: 2rem;
-        width: calc(11.5ch - 4rem);
-        font-size: var(--size);
-        left: -1rem;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
 
-        img{
-          border-radius: 100%;
-          width: 5rem;
-        }
-        
-        .service{
+        .service__content {
+          width: 100%;
+          color: var(--c-1);
+          font-size: 1rem;
+          font-weight: 400;
           display: flex;
           align-items: center;
-
+          justify-content: flex-end;
+          gap: 1rem;
+          width: 100%;
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          
           .service__link{
-            color: var(--c-1);
-            font-size: 1rem;
-            font-weight: 400;
             display: flex;
+            flex-direction: column;
             align-items: center;
-            gap: 1rem;
+            justify-content: center;
+            margin-top: 2rem;
+            margin-right: 5rem;
+            transition: var(--t-simple);
+            &:hover{
+              transform: scale(1.05);
+            }
+          }
+
+          .service__image{
+            width: 12rem;
+            &.service__image--gitea, &.service__image--photoview{
+              background-color: var(--c-1);
+              padding: 1rem;
+              box-sizing: border-box;
+            }
+          }
+
+          .service__info{
+            background-color: var(--c-text-accent);
+            width: 20ch;
+            padding: 1rem;
+            margin-top: 1rem;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            box-shadow: 0 3rem 2rem 0rem rgb(0 0 0 / 40%);
+            
+            &::before{
+              position: absolute;
+              top: -4rem;
+              content: '';
+              display: block;
+              //width: 0;
+              //height: 0;
+              border-top: 2rem transparent solid;
+              border-right: 2rem transparent solid;
+              border-bottom: 2rem var(--c-text-accent) solid;
+              border-left: 2rem transparent solid;
+              align-self: center;
+            }
+            *{
+              color: var(--c-text-primary);
+            }
+            p{
+              font-size: .75rem;
+              height: 4em;
+              overflow: hidden;
+            }
+          }
+
+          .service__bkg{
+            filter: opacity(0.25) blur(2rem);
+            width: 100%;
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          z-index: -1;
+          }
+
+          &:nth-child(n + 2) {
+            outline: 1px solid orange;
+            display: none !important;
           }
         }
       }
     }
-  a.btn{
+  }
+  a.btn {
     align-self: center;
   }
 }
 
 .slides-controls {
-  padding: 10px;  
+  padding: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -110,7 +226,7 @@
   min-height: 70px;
   gap: 2rem;
 
-  button{
+  button {
     background: none;
     padding: 0;
     border: 0;
@@ -120,7 +236,7 @@
 
 .slides-container {
   position: relative;
-  overflow: hidden;  
+  overflow: hidden;
   display: none;
   flex: 1;
 }
@@ -129,12 +245,12 @@
   position: absolute;
   font-size: 90px;
   font-weight: 700;
-  color: rgba(255,255,255,0.9);
+  color: rgba(255, 255, 255, 0.9);
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
-  
+
   width: calc(100% / 3);
   width: 100%;
 }
@@ -142,6 +258,6 @@
 .slides-inner {
   position: relative;
   height: 7rem;
-  width: 100%;  
+  width: 100%;
   overflow: hidden;
-}
+}

src/assets/styles/dev.scss

@@ -16,10 +16,11 @@
     gap:1rem;
   }
   .wrapper{
-    background-color: var(--c-1);
+    background: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.05));
     max-width: 35ch;
+    padding: 2rem;
     .content {
-      padding: 1rem;
+      //padding: 1rem;
       h3{
         margin: 0;
         font-family: var(--f-accent);
@@ -33,7 +34,7 @@
     }
     .footer{
       padding: 1rem;
-      background: var(--c-spacer);
+      //background: var(--c-spacer);
       display: flex;
       justify-content: center;
     }
@@ -42,7 +43,7 @@
     position: relative;
     &::before{
       position: absolute;
-      top: 17rem;
+      top: 15rem;
       left: -4rem;
     content: '';
     display: block;
@@ -58,5 +59,6 @@
   img {
     width: 20rem;
     box-shadow: 0 3rem 2rem 0rem rgb(0 0 0 / 40%);
+    border-radius: 1.3rem;
   }
 }

src/assets/styles/footer.scss

@@ -7,8 +7,8 @@ footer{
         display: flex;
         .header{
             align-self: flex-start;
-            margin: 5rem 0 0 5rem;
-            img{
+            margin: 1.8rem 0 0 5rem;
+            svg{
                 width: 12rem;
             }
         }
@@ -105,17 +105,26 @@ footer{
   }
 
   @media only screen and (max-width: 650px) {
-    footer .groups li > a {
-      font-size: 3.5vmin;
-    }
-    footer .groups{
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: 1fr 1fr 1fr;
-    }
 
-    footer .groups li {
-        border: 0 !important;
+    footer .footer__content {
+        flex-direction: column;
+        .header{
+            margin: 5rem 0 2.5rem 2.5rem;
+        }
+        .groups .full {
+            grid-row: auto;
+        }
+        .groups li > a {
+            font-size: 3.5vmin;
+          }
+          .groups{
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: 1fr 1fr 1fr;
+            li {
+                border: 0 !important;
+            }
+        }
     }
   }
 

src/assets/styles/infographics.scss

@@ -39,4 +39,15 @@ section#infographics{
       }
     }
   }
+
+  .image-with-shadow{
+    width: 100%;
+    z-index: 1;
+    .img-shadow{
+      width: 100%;
+      svg{
+        width: 100%;
+      }
+    }
+  }
 }

src/assets/styles/landing.scss

@@ -107,8 +107,9 @@ nav {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
-  img {
+  svg {
     width: 15rem;
+    margin-top: 0.6rem;
   }
   span{
     text-transform: uppercase;

src/assets/styles/main.scss

@@ -104,6 +104,14 @@ a {
     transition: var(--t-simple);
 }
 
+p a {
+    color: var(--c-text-primary);
+    text-decoration: underline;
+    &:hover{
+        color: var(--c-text-accent);
+    }
+}
+
 h1, h2, h3, h4, h5 {
     margin: 0;
     text-transform: uppercase;
@@ -127,16 +135,33 @@ header{
     z-index: 2;
     top:0;
 
-    .header__logo{
+    a.header__logo{
         opacity: 0;
         filter: blur(10px);
-        margin-top: -.9rem;
-        margin-bottom: -1rem;
         margin-left: 1rem;
-        height: fit-content;
-        img{
+        display: flex;
+        align-items: center;
+        position: relative;
+
+        svg{
            width:8rem; 
+           position: absolute;
+           path{
+        transition: var(--t-simple);
+                stroke-width: 0;
+              stroke: transparent;
+           }
         }
+        &:hover{
+            svg path{
+              stroke-width: 0.4rem;
+              stroke: var(--c-text-primary);
+            }
+            svg path:last-child{
+              stroke-width: 0.4rem;
+              stroke: var(--c-text-accent);
+            }
+          }
     }
 }
 nav{

src/assets/styles/menu.scss

@@ -14,7 +14,7 @@
         .header{
             align-self: flex-start;
             margin: 5rem 0 0 5rem;
-            img{
+            svg{
                 width: 12rem;
             }
         }
@@ -60,6 +60,10 @@
         flex-direction: column;
         display: inline-block;
         white-space: nowrap;
+        --hover-padding: .5rem;
+        --hover-width: calc(100% + (2 * var(--hover-padding)));
+        --hover-nudge: calc(-1 * var(--hover-padding));
+
         &::after{
             content: '';
             position: absolute;
@@ -75,8 +79,8 @@
 
             &::after{
                 border: var(--b-primary);
-                width: 110%;
-                left: -5%;
+                width: var(--hover-width);
+                left: var(--hover-nudge);
                 opacity: 1;
             }
         }
@@ -88,8 +92,8 @@
                 z-index: -1;
                 //border: var(--b-primary);
                 background-color: var(--c-text-accent);
-                width: 110%;
-                left: -5%;
+                width: var(--hover-width);
+                left: var(--hover-nudge);
                 top: 6%;
                 display: inline-block; 
                 height: 85%; 

src/assets/styles/powered-by.scss

@@ -54,14 +54,14 @@ section#powered-by {
   svg {
     width: 45rem;
     max-width: calc(100vw - 12rem);
-    margin-top: 6rem;
+    //margin-top: 6rem;
   }
 
   a.source-link{
     margin-top: 5rem;
     display: flex;
     align-items: center;
-    font-size: 2rem;
+    font-size: 1.7rem;
     font-weight: 500;
     color: var(--c-text-bright);
     line-height: 1;
@@ -75,6 +75,7 @@ section#powered-by {
       border-radius: 999px;
       padding: .15em .6em;
       transition: var(--t-simple);
+      white-space: nowrap;
     }
     &:hover{
       transform: scale(1.05);