💄 Update main wrapper styles

Author: marcode24

src/app/core/components/sidebar/sidebar.component.css

@@ -1,12 +1,10 @@
 nav {
   position: fixed;
   height: 100%;
-  width: 250px;
   border-right: 1px solid #c1c1c1;
-  padding: 6px 14px;
   z-index: 103;
   transition: 0.5s ease;
-  padding: 0 0.2rem;
+  padding: 0 1rem;
   display: flex;
   flex-direction: column;
   align-items: flex-start;

src/app/features/features.component.css

@@ -1,27 +1,29 @@
 .wrapper {
   max-width: 1280px;
   margin: 0 auto;
-}
-
-.wrapper.open .container {
-  margin-left: 80px;
+  display: grid;
+  grid-template-columns: minmax(80px, 20%) 1fr;
 }
 
 .wrapper .container {
   min-height: 100vh;
-  margin-left: 250px;
   width: auto;
+  padding: 0 1rem 0 0;
 }
 
 @media (max-width: 1280px) {
-  .wrapper .container {
-    margin-left: 78px;
+  .wrapper {
+    max-width: 100%;
+    grid-template-columns: 80px auto;
   }
 }
 
 @media (max-width: 768px) {
+  .wrapper {
+    grid-template-columns: 0 100%;
+  }
   .wrapper .container {
-    margin-left: 0 !important;
     margin-bottom: 55px !important;
+    padding: 0;
   }
 }

src/app/features/home/components/websites-card/websites-card.component.css

@@ -7,7 +7,7 @@
   max-width: 300px;
   display: flex;
   flex-direction: column;
-  transform: translate(0, 78px);
+  transform: translate(0, 70px);
 }
 
 .card.card-websites .card-title {

src/app/features/home/home.component.css

@@ -1,7 +1,6 @@
 .home-section {
   display: grid;
-  grid-template-columns: auto 300px;
-  gap: 0.5rem;
+  grid-template-columns: 1fr minmax(300px, 20%);
 }
 
 .home-section .websites {
@@ -13,6 +12,10 @@
   margin-top: 0.5rem;
 }
 
+.news-container {
+  margin: 0 1rem 1rem 1rem;
+}
+
 .top-search {
   display: flex;
   align-items: center;

src/app/shared/news-container/news-container.component.css

@@ -1,6 +1,7 @@
 .news {
   display: grid;
   grid-template-columns: repeat(1, 100%);
+  gap: 1rem;
 }
 
 .card.card-new {

src/styles.css

@@ -81,7 +81,6 @@ body.dark {
 }
 
 .card {
-  margin: 0.5rem 0;
   background: var(--bg-color-card);
   color: var(--font-color-primary);
   border-radius: 1rem;
@@ -236,11 +235,11 @@ section > .title-wrapper {
   width: 100%;
   height: auto;
   min-height: 70px;
-  padding: 0 1rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: var(--bg-blur);
+  padding: 0 1rem;
 }
 
 .title-wrapper > span.title-section {
@@ -271,9 +270,6 @@ section > .title-wrapper {
   transform: rotate(135deg);
 }
 
-.news-container {
-  margin: 0 1rem;
-}
 
 @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
   section > .title-wrapper {