💄 websites section styles fixed

Author: marcode24

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

@@ -34,16 +34,13 @@
     </li>
   </ul>
   <div class="profile" *ngIf="userActive">
-    <div class="profile-details">
+    <div routerLink="/settings" class="profile-details">
       <figure class="box-image">
         <img
           src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80"
           alt="img-user">
       </figure>
       <span class="username"> {{userActive.email }} </span>
-      <a href="" class="more">
-        <i class='bx bx-dots-horizontal-rounded'></i>
-      </a>
     </div>
   </div>
 

src/app/features/website/pages/websites/websites.component.css

@@ -44,17 +44,25 @@
 .card-body .website-title {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
+  width: 100%;
+  gap: 5px;
 }
 
 .card-body .website-title .title {
   font-size: 26px;
   font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1 1 100%;
+  width: 0;
 }
 
 .card-body .website-title .btn {
   border-radius: 40px;
   max-width: 100px;
+  width: 100px;
 }
 
 .card-body .w-desc {
@@ -80,18 +88,26 @@
   }
 }
 
-@media (max-width: 768px) {
-  .card.card-website {
-    flex-direction: column;
+@media (max-width: 480px) {
+  .card.card-website figure {
+    width: 3rem;
+    height: 3rem;
+    min-width: 3rem;
+    min-height: 3rem;
   }
 
-  .card.card-website figure {
-    max-width: 100%;
-    height: 10rem;
-    border-radius: 10px 10px 0 0;
+  .card-body .website-title .title {
+    font-size: 22px;
   }
 
-  .card-body .bottom .buttons .w-link {
+  .card-body .w-desc {
     font-size: 14px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: -webkit-box !important;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    white-space: normal;
+    max-height: 50px;
   }
 }

src/styles.css

@@ -220,14 +220,15 @@ input:focus-within {
 section > .title-wrapper {
   position: sticky;
   top: 0;
-  backdrop-filter: blur(12px);
   z-index: 100;
   width: 100%;
-  height: 70px;
+  height: auto;
+  min-height: 70px;
   padding: 0 1rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  background: hsla(0, 0%, 100%, 0.6);
 }
 
 .title-wrapper > span.title-section {
@@ -257,6 +258,14 @@ section > .title-wrapper {
   margin: 0 1rem;
 }
 
+@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+  section > .title-wrapper {
+    background: transparent;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
+}
+
 /* Sekeletons design */
 
 .gradient {
@@ -286,3 +295,9 @@ section > .title-wrapper {
     background-position: 468px 0;
   }
 }
+
+@media (max-width: 480px) {
+  .title-wrapper > span.title-section {
+    font-size: 32px;
+  }
+}