💄 Update skeletons styles

Author: marcode24

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

@@ -1,13 +1,12 @@
+
 .card.card-websites {
   cursor: default;
   opacity: 1;
   margin: 0;
   padding: 0 !important;
-  position: fixed;
   max-width: 300px;
   display: flex;
   flex-direction: column;
-  transform: translate(0, 70px);
 }
 
 .card.card-websites .card-title {

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

@@ -10,4 +10,4 @@
       'Following' : 'Subscribe' }}</button>
   </div>
   <a class="item" routerLink="/websites">Show more...</a>
-</div>
+</div>

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

@@ -9,17 +9,18 @@
 }
 
 .skeletons {
-  margin-top: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
 .news-container {
-  margin: 0 1rem 1rem 1rem;
+  margin: 1rem;
 }
 
 .top-search {
   display: flex;
   align-items: center;
-  position: fixed;
   width: inherit;
   min-height: 70px;
 }
@@ -28,6 +29,14 @@
   width: 100%;
 }
 
+.websites-wrapper {
+  position: sticky;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
 @media (max-width: 1200px) {
   .home-section .recently .news {
     grid-template-columns: repeat(1, 100%);

src/app/features/home/home.component.html

@@ -19,10 +19,12 @@
     </div>
   </section>
   <section class="websites">
-    <div class="top-search">
-      <app-search-input (search)="search($event)"></app-search-input>
+    <div class="websites-wrapper">
+      <div class="top-search">
+        <app-search-input (search)="search($event)"></app-search-input>
+      </div>
+      <app-card-websites-a *ngIf="isLoading"></app-card-websites-a>
+      <app-websites-card *ngIf="!isLoading" [websites]="websites"></app-websites-card>
     </div>
-    <app-card-websites-a *ngIf="isLoading"></app-card-websites-a>
-    <app-websites-card *ngIf="!isLoading" [websites]="websites"></app-websites-card>
   </section>
-</div>
+</div>

src/app/shared/skeletons/card-new/card-new.component.css

@@ -7,17 +7,17 @@
   min-height: 10rem;
   height: 13rem;
   max-height: 13rem;
-  padding: 1rem 0.5rem;
-  margin: 0 0 1rem;
+  padding: 1rem;
   gap: 10px;
+  flex-direction: row-reverse;
 }
 
 .card-new .image {
   max-height: 100%;
   min-width: auto;
   height: 12rem;
   width: 12rem;
-  border-radius: 50%;
+  border-radius: 0.6rem
 }
 
 .card-new .content {
@@ -39,15 +39,15 @@
 .line {
   height: 30px;
   border-radius: 8px;
-  width: 100%;
+  width: 50%;
 }
 
 .line-1 {
   width: 90% !important;
 }
 
 .line-2 {
-  width: 70% !important;
+  width: 60% !important;
 }
 
 @media (max-width: 480px) {
@@ -59,11 +59,8 @@
     width: 95%;
   }
 
-  .line-1 {
-    width: 100% !important;
-  }
 
   .line-2 {
-    width: 78% !important;
+    width: 68% !important;
   }
 }

src/app/shared/skeletons/card-websites-a/card-websites-a.component.css

@@ -14,7 +14,6 @@
   gap: 1rem;
   opacity: 1;
   position: fixed;
-  transform: translate(0, 78px);
 }
 
 .card-website .item {