components/util/anchoring.tsx

@@ -15,13 +15,13 @@ export const Anchoring = (props: AnchoringProps) => {
 
   const handleScrollOpacity = () => {
     const scrollTop = window.scrollY || window.pageYOffset;
-    const elementHeight = anchoringRef.current.clientHeight;
+    const elementHeight = anchoringRef.current?.clientHeight ? anchoringRef.current.clientHeight : 1;
     const newOpacity = (elementHeight - scrollTop) / elementHeight;
     setOpacity(newOpacity);
   };
 
   const handleScrollClick = () => {
-    anchoringRef.current.scrollIntoView({
+    anchoringRef?.current?.scrollIntoView({
       behavior: "smooth",
       block: "start"
     });

package.json

@@ -32,6 +32,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.2.0",
+    "sass": "^1.66.1",
     "styled-jsx": "^3.2.5",
     "tailwindcss": "^3.2.4",
     "tinacms": "^1.5.6",

pages/_app.tsx

@@ -1,4 +1,4 @@
-import "../styles/styles.css";
+import "../styles/_styles.scss";
 
 const App = ({ Component, pageProps }) => {
   return <Component {...pageProps} />;

styles/_styles.scss

@@ -1,8 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
-@import "header.css";
-@import "anchoring.css";
-@import "carousel.css";
+@import "header";
+@import "anchoring";
+@import "carousel";
 
 @tailwind base;
 @tailwind components;

styles/anchoring.css

@@ -1,28 +0,0 @@
-.anchoring {
-    font-family: 'Questrial', sans-serif;
-}
-
-.anchoring h1 {
-    margin-bottom: -35px;
-    font-size: 2.5rem;
-}
-
-.anchoring h1, .anchoring h1:hover {
-    color: white;
-}
-
-.anchoring > a {
-    margin: 0 auto;
-    display: block;
-    width: fit-content;
-}
-
-.anchoring > a:hover {
-    cursor:pointer;
-}
-
-.anchoring img {
-    width: 128px;
-    height: 128px;
-    margin: 0 auto;
-}

styles/anchoring.scss

@@ -0,0 +1,29 @@
+.anchoring {
+    font-family: 'Questrial', sans-serif;
+
+    h1 {
+        margin-bottom: -35px;
+        font-size: 2.5rem;
+        color: white;
+
+        &:hover {
+            color: white;
+        }
+    }
+
+    > a {
+        margin: 0 auto;
+        display: block;
+        width: fit-content;
+
+        &:hover {
+            cursor:pointer;
+        }
+    }
+
+    img {
+        width: 128px;
+        height: 128px;
+        margin: 0 auto;
+    }
+}

styles/header.scss

@@ -5,40 +5,39 @@
     z-index: 9999;
     height: var(--header-Height);
     padding: 0 3.75rem;
-}
 
-.navbar .navbar-brand img {
+    .navbar-brand {
+        h3 {
+            margin-bottom: 0;
+        }
+        img {
             height: 3rem;
             width: 2.625rem;
         }
-
-.navbar .navbar-brand h3 {
-    margin-bottom: 0;
-}
-
-.navbar .navbar-brand .title {
+        .title {
             font-size: 1.75rem;
             font-weight: 350;
             line-height: 2.1rem;
         }
-
-.navbar .navbar-brand .subtitle {
+        .subtitle {
             font-size: 1.125rem;
             font-weight: 250;
         }
+    }
 
-.navbar .nav-item .nav-link {
+    .nav-item .nav-link {
         font-family: 'Nunito', sans-serif;
         font-size: 1.4rem;
         line-height: 1.5rem;
         font-weight: 250;
-    white-space: nowrap
-}
+        white-space: nowrap;
 
-.navbar .nav-item .nav-link:hover {
+        &:hover {
             color: rgba(255,255,255, .75);
             transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
         }
+    }
+}
 
 .external-link-icon:after {
     content: "";

yarn.lock

@@ -4030,7 +4030,7 @@ character-reference-invalid@^2.0.0:
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9"
   integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==
 
-chokidar@^3.5.1, chokidar@^3.5.3:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.1, chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -5811,6 +5811,11 @@ immer@^9.0.6:
   resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176"
   integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==
 
+immutable@^4.0.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.4.tgz#2e07b33837b4bb7662f288c244d1ced1ef65a78f"
+  integrity sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==
+
 immutable@~3.7.6:
   version "3.7.6"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"
@@ -9190,6 +9195,15 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
+sass@^1.66.1:
+  version "1.66.1"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.66.1.tgz#04b51c4671e4650aa393740e66a4e58b44d055b1"
+  integrity sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 scheduler@^0.20.2:
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
@@ -9472,7 +9486,7 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
-source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==