Mobile changes

brycesexton · Sep 30, 2024 · eae0649 · eae0649
1 parent dcfdceb
commit eae0649
Show file tree

Hide file tree

Showing 8 changed files with 268 additions and 3,067 deletions.
diff --git a/public/index.html b/public/index.html
@@ -12,6 +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?6353f3cf5de8526768c5"></script><script defer src="js/dist/App.d0d12a17139c8e1a3206.js?6353f3cf5de8526768c5"></script><script defer src="js/dist/main.841074f3275e4c5613dd.js?6353f3cf5de8526768c5"></script></head>
 
 <body>
   <div id="app"></div>

diff --git a/public/js/dist/App.25fc0a036873426545d6994e433594bf.js.map b/public/js/dist/App.25fc0a036873426545d6994e433594bf.js.map
diff --git a/public/js/dist/App.43a464e22ebbc9d735208339ad02b08c.js.map b/public/js/dist/App.43a464e22ebbc9d735208339ad02b08c.js.map
diff --git a/public/js/dist/App.6cfff8de695a7a18eee96e45aa932655.js.map b/public/js/dist/App.6cfff8de695a7a18eee96e45aa932655.js.map
diff --git a/public/js/dist/App.ab9e910ffc42cc5d582d.js b/public/js/dist/App.ab9e910ffc42cc5d582d.js
diff --git a/public/js/dist/App.a1e5efac6be8719703fd.js → public/js/dist/App.d0d12a17139c8e1a3206.js b/public/js/dist/App.a1e5efac6be8719703fd.js → public/js/dist/App.d0d12a17139c8e1a3206.js
diff --git a/src/App.module.scss b/src/App.module.scss
@@ -20,4 +20,11 @@
         pointer-events: none; 
         margin-top: -35rem;
     }
+}
+
+@media screen and (max-width: 880px) {
+    .App {
+        overflow-x: hidden;
+    }
+
 }
diff --git a/src/components/YoutubeSection/YoutubeSection.module.scss b/src/components/YoutubeSection/YoutubeSection.module.scss
@@ -1,5 +1,5 @@
 .YoutubeSection {
-  width: 100vw;
+  width: 100%;
   height: 60vh;
   display: flex;
   justify-content: center;
@@ -76,3 +76,137 @@
     border: none;
   }
 }
+
+@media screen and (max-width: 480px) {
+  .PlaylistContainer {
+    flex-direction: column-reverse;
+  }
+
+  .PlaylistSidebar {
+    max-height: 200px;
+    width: 100%;
+  }
+
+  .PlaylistItem {
+    img {
+      width: 25%;
+    }
+
+    p {
+      font-size: 0.75rem;
+    }
+  }
+
+  .PlaylistEmbed {
+    iframe {
+      height: 250px;
+    }
+  }
+}
+
+.YoutubeSection {
+  width: 100%;
+  height: 60vh;
+  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');
+  background-attachment: scroll;
+  background-size: cover;
+  background-position: center;
+}
+
+.PlaylistContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 1200px;
+  background-color: rgba(0, 0, 0, 0.4);
+  padding: 2rem;
+  border-radius: 1rem;
+  margin: 0;
+  white-space: normal;
+}
+
+.PlaylistSidebar {
+  overflow-y: scroll;
+  max-height: 500px;
+  width: 30%;  
+  padding: 0;
+  white-space: normal;
+  word-spacing: -.2rem;
+}
+
+.PlaylistItem {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  margin-bottom: .3rem;
+  transition: background-color 0.3s ease, color 0.3s ease;
+  margin: 0;
+  white-space: normal;
+
+  &:hover {
+    background-color: #f0f0f0;
+
+    p {
+      color: #333;
+    }
+  }
+
+  img {
+    object-fit: cover;
+    width: 30%;
+    margin: .3rem 1rem .3rem 1rem;
+  }
+
+  p {
+    width: 70%;
+    font-size: 0.9rem;
+    color: #f1f1f1;
+    transition: color 0.3s ease;
+  }
+}
+
+.PlaylistEmbed {
+  flex-grow: 1;
+  iframe {
+    width: 100%;
+    height: 500px;
+    border-radius: 8px;
+    border: none;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .PlaylistContainer {
+    flex-direction: column-reverse;
+  }
+
+  .PlaylistSidebar {
+    max-height: 200px;
+    width: 100%;
+  }
+
+  .PlaylistItem {
+    img {
+      width: 25%;
+    }
+
+    p {
+      font-size: 0.75rem;
+    }
+  }
+
+  .PlaylistEmbed {
+    iframe {
+      height: 250px;
+    }
+  }
+}
+