feat: profile page redesign

school/public/css/style.css

@@ -1,16 +1,6 @@
 :root {
-  --text-xs: 11px;
-  --text-sm: 12px;
-  --text-md: 13px;
-  --text-base: 14px;
-  --text-lg: 16px;
-  --text-xl: 18px;
-  --text-2xl: 20px;
-  --text-3xl: 22px;
   --text-3-5xl: 24px;
   --text-3-8xl: 34px;
-  --text-4xl: 44px;
-  --navbar-shadow: 0px 1px 8px rgba(0, 0, 0, 0.08);
 }
 
 body {
@@ -709,6 +699,11 @@ input[type=checkbox] {
     width: 88px;
     height: 88px;
   }
+
+  .avatar-square {
+    width: 75px;
+    height: 75px;
+  }
 }
 
 @media (max-width: 375px) {
@@ -723,19 +718,6 @@ input[type=checkbox] {
   height: 48px;
 }
 
-.description-card {
-  padding: 1.5rem;
-  flex-direction: column;
-}
-
-.description-card p {
-  line-height: 1.72;
-}
-
-.description-card p:last-child {
-  margin-bottom: 0;
-}
-
 .overview-card {
   padding: 1.5rem;
   flex-direction: column;
@@ -958,9 +940,19 @@ input[type=checkbox] {
   height: 68px;
   background: #ffffff;
   border-radius: 0px 0px 8px 8px;
-  font-size: 12px;
+  font-size: var(--text-sm);
   display: flex;
   justify-content: space-between;
+  margin: 0 1rem 4rem 0;
+  flex-direction: column;
+  padding-left: 200px;
+}
+
+@media (max-width: 550px) {
+  .profile-info {
+    align-items: flex-end;
+    padding-left: 0;
+  }
 }
 
 .profile-avatar {
@@ -988,44 +980,31 @@ input[type=checkbox] {
   color: var(--gray-900);
   font-weight: 600;
   font-size: var(--text-3xl);
-  margin-left: 1.25rem;
 }
 
 @media (max-width: 375px) {
   .profile-name {
     font-size: var(--text-lg);
-    padding: 5px;
+    padding-top: 5px;
   }
 }
 
 .profile-name-section {
   display: flex;
   align-items: center;
-  margin-bottom: 0.25rem;
-  padding-left: 175px;
+  margin: 1rem 0 0.25rem;
+}
+
+@media (max-width: 550px) {
+  .profile-name-section {
+    flex-direction: column;
+    align-items: flex-end;
+    margin: 0 0 0.5rem;
+  }
 }
 
 .profile-link {
-  display: flex;
-  align-items: center;
-  padding: 1rem;
-}
-
-@media (max-width: 500px) {
-  .profile-info {
-    flex-direction: column;
-    align-items: end;
-    justify-content: space-around;
-    padding-right: 1rem;
-  }
-
-  .profile-name-section {
-    padding-left: 0;
-  }
-
-  .profile-link {
-    padding: 0;
-  }
+  margin-left: auto;
 }
 
 .creator-badge {
@@ -1051,11 +1030,16 @@ input[type=checkbox] {
   }
 }
 
-.profile-card {
-  flex-direction: column;
-  padding: 1.5rem;
+@media (max-width: 550px) {
+  .creator-badge {
+    margin-top: 0.25rem;
+    margin-left: 0;
+  }
+}
+
+.profile-grid-card {
   display: grid;
-  row-gap: 2rem;
+  row-gap: 1rem;
 }
 
 .profile-item {
@@ -1263,9 +1247,9 @@ pre {
   }
 }
 
-.thread-card {
+.profile-card {
   flex-direction: column;
-  padding: 1rem;
+  padding: 1rem 1.25rem;
 }
 
 .empty-state {
@@ -1301,9 +1285,6 @@ pre {
   align-items: center;
 }
 
-.navbar {
-  box-shadow: var(--navbar-shadow);
-}
 .search {
   background-image: url(/assets/frappe/icons/timeless/search.svg);
   border: none;
@@ -1761,3 +1742,23 @@ pre {
   flex-grow: 1;
   margin-left: 1rem;
 }
+
+.profile-page-body {
+  background-color: var(--gray-50);
+  padding: 2rem 0;
+}
+
+.profile-column-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+}
+
+.description {
+  font-size: var(--text-base);
+  color: var(--gray-800);
+}
+
+.profile-meta {
+  display: flex;
+  align-items: center;
+}