From 12f07cb1ad73d2f9f81711b801d0a70a8a7581ff Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Wed, 1 Feb 2023 20:03:02 +0500
Subject: [PATCH] Video section only main

---
 src/App.tsx                   |  3 +--
 src/pages/Main.tsx            | 17 +++++++++++------
 src/styles/_asideNews.scss    |  4 ++++
 src/styles/_category.scss     |  8 ++++++--
 src/styles/_main.scss         |  2 +-
 src/styles/_news-article.scss |  2 +-
 src/styles/_news-section.scss |  8 +++++++-
 src/styles/_videos.scss       |  2 +-
 8 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 1100489..b73418d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,7 +13,6 @@ import Category from "./pages/Category";
 
 // Components
 import Header from "./components/header/Header";
-import Videos from "./components/videos/Videos";
 import Footer from "./components/footer/Footer";
 
 const App = () => {
@@ -25,7 +24,7 @@ const App = () => {
         <Route path="/category/:category" element={<Category />} />
         <Route path="/news/:id" element={<NewsArticle />} />
       </Routes>
-      <Videos />
+
       <Footer />
     </div>
   );
diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx
index e97b7f4..8d2468e 100644
--- a/src/pages/Main.tsx
+++ b/src/pages/Main.tsx
@@ -1,18 +1,23 @@
-import Aside from '../components/aside/Aside';
-import NewsScroll from '../components/global/NewsScroll';
+// Components
+import Aside from "../components/aside/Aside";
+import NewsScroll from "../components/global/NewsScroll";
+import Videos from "../components/videos/Videos";
 
 const Main = () => {
   return (
-    <div className="main">
+    <main className="main">
       <div className="news-section">
         <div className="container">
           <div className="news-inner">
-            <NewsScroll state={true} />
-            <Aside />
+            <div className="news-outer-wrapper">
+              <NewsScroll state={true} />
+              <Aside />
+            </div>
+            <Videos />
           </div>
         </div>
       </div>
-    </div>
+    </main>
   );
 };
 
diff --git a/src/styles/_asideNews.scss b/src/styles/_asideNews.scss
index 67b9c91..4f7d120 100644
--- a/src/styles/_asideNews.scss
+++ b/src/styles/_asideNews.scss
@@ -20,6 +20,10 @@
   font-size: 1.6rem;
   font-weight: 700;
   @include raleway;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .aside-news-status {
diff --git a/src/styles/_category.scss b/src/styles/_category.scss
index 6c45e1c..d81843e 100644
--- a/src/styles/_category.scss
+++ b/src/styles/_category.scss
@@ -11,7 +11,11 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%);
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 50%,
+    rgba(0, 0, 0, 0.7) 100%
+  );
   z-index: 2;
   pointer-events: none;
   display: flex;
@@ -43,7 +47,7 @@
 }
 
 .category-inner {
-  padding-top: 5.6rem;
+  padding: 5.6rem 0;
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 2.4rem;
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
index 240e63a..e471675 100644
--- a/src/styles/_main.scss
+++ b/src/styles/_main.scss
@@ -1,3 +1,3 @@
 .main {
-  padding-top: 5.6rem;
+  padding: 5.6rem 0;
 }
diff --git a/src/styles/_news-article.scss b/src/styles/_news-article.scss
index f00c212..e93f996 100644
--- a/src/styles/_news-article.scss
+++ b/src/styles/_news-article.scss
@@ -1,5 +1,5 @@
 .news-article {
-  padding-top: 5.6rem;
+  padding: 5.6rem 0;
 }
 .news-article-inner {
   display: grid;
diff --git a/src/styles/_news-section.scss b/src/styles/_news-section.scss
index fe9a93b..aacdf1e 100644
--- a/src/styles/_news-section.scss
+++ b/src/styles/_news-section.scss
@@ -1,5 +1,11 @@
-.news-inner {
+.news-outer-wrapper {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 2.4rem;
 }
+
+.news-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 5.6rem;
+}
diff --git a/src/styles/_videos.scss b/src/styles/_videos.scss
index 8126fce..45775b8 100644
--- a/src/styles/_videos.scss
+++ b/src/styles/_videos.scss
@@ -1,5 +1,5 @@
 .videos {
-  padding: 5.6rem 0;
+  // padding: 5.6rem 0;
 }
 
 .videos-inner {