minor changes

brycesexton · Oct 1, 2024 · 2d650f7 · 2d650f7
1 parent 83288be
commit 2d650f7
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 14 deletions.
diff --git a/public/index.html b/public/index.html
@@ -12,7 +12,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Adamina&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Teko:[email protected]&display=swap" rel="stylesheet">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
-<script defer src="js/dist/vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_css-loader_dist_runtime_getU-efc6cb.b6ef0f44ae728aa0791f.js?b68647220d79e2a956c5"></script><script defer src="js/dist/App.4122862f50efcce3e33b.js?b68647220d79e2a956c5"></script><script defer src="js/dist/main.841074f3275e4c5613dd.js?b68647220d79e2a956c5"></script></head>
+<script defer src="js/dist/vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_css-loader_dist_runtime_getU-efc6cb.b6ef0f44ae728aa0791f.js?68b2105325b5a39ee34f"></script><script defer src="js/dist/App.bf3aae08b3dfe8200941.js?68b2105325b5a39ee34f"></script><script defer src="js/dist/main.841074f3275e4c5613dd.js?68b2105325b5a39ee34f"></script></head>
 
 <body>
   <div id="app"></div>

diff --git a/public/js/dist/App.9eef8e997ab8e0197cd55985e019d65f.js.map b/public/js/dist/App.9eef8e997ab8e0197cd55985e019d65f.js.map
diff --git a/public/js/dist/App.4122862f50efcce3e33b.js → public/js/dist/App.bf3aae08b3dfe8200941.js b/public/js/dist/App.4122862f50efcce3e33b.js → public/js/dist/App.bf3aae08b3dfe8200941.js
diff --git a/public/js/dist/App.c9a5a734cffbb99f7d69677decc94a1c.js.map b/public/js/dist/App.c9a5a734cffbb99f7d69677decc94a1c.js.map
diff --git a/src/components/TourSection/TourSection.module.scss b/src/components/TourSection/TourSection.module.scss
@@ -2,7 +2,7 @@
   padding: 10rem 0 5rem 0;
   width: 90%;
   color: rgb(255, 255, 255);
-  margin-top: 4.2rem;
+  margin-top: 2rem;
 }
 
 @media screen and (max-width: 768px) {

diff --git a/src/components/YoutubeSection/YoutubeSection.js b/src/components/YoutubeSection/YoutubeSection.js
@@ -28,6 +28,12 @@ function YoutubeSection() {
     fetchPlaylistItems();
   }, [PLAYLIST_ID]);
 
+  // Function to format video titles
+  const formatTitle = (title) => {
+    return title
+  };
+
+
   return (
     <div id="videos" className={styles.YoutubeSection}>
       <div className={styles.PlaylistContainer}>
@@ -40,8 +46,8 @@ function YoutubeSection() {
               onClick={() => setSelectedVideo(item.snippet.resourceId.videoId)} // Change video on click
             >
               <img src={item.snippet.thumbnails.default.url} alt={item.snippet.title} />
-              {/* Replace &nbsp; with a space in the title */}
-              <p>{item.snippet.title.replace(/\u00A0/g, ' ')}</p>
+              {/* Format title to add spaces where necessary */}
+              <p>{formatTitle(item.snippet.title)}</p>
             </div>
           ))}
         </div>

diff --git a/src/components/YoutubeSection/YoutubeSection.module.scss b/src/components/YoutubeSection/YoutubeSection.module.scss
@@ -3,7 +3,6 @@
   height: 80vh;
   display: flex;
   justify-content: center;
-  align-items: center;
   padding: 2rem;
   clip-path: polygon(0% 0%, 25% 10%, 70% 0%, 100% 10%, 100% 100%, 50% 92%, 20% 100%, 0% 95%);
   background-image: url('/public/img/forester-film-edits-17.jpg');
@@ -32,6 +31,22 @@
   padding: 0;
   white-space: normal;
   word-spacing: -.2rem;
+
+    ::-webkit-scrollbar {
+      width: 8px; 
+    }
+
+    ::-webkit-scrollbar-track {
+      background-color: transparent; 
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background-color: rgba(255, 255, 255, 0.3); 
+      border-radius: 4px; 
+    }
+
+    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+    scrollbar-width: thin;
 }
 
 .PlaylistItem {
@@ -72,7 +87,7 @@
   iframe {
     width: 100%;
     height: 500px;
-    border-radius: 8px;
+    border-radius: 6px;
     border: none;
   }
 }