Update group.html

afaji · Nov 23, 2024 · d8ebbd3 · d8ebbd3
1 parent 3239413
commit d8ebbd3
Showing 1 changed file with 30 additions and 26 deletions.
diff --git a/_pages/group.html b/_pages/group.html
@@ -14,7 +14,7 @@
 <style>
   .card {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
-    overflow: hidden; /* Ensure images don't overflow */
+    overflow: hidden;
   }
 
   .card:hover {
@@ -52,49 +52,53 @@
     opacity: 1;
   }
 
-  .card-body {
-    z-index: 3; /* Ensure text stays on top */
-    padding: 10px;
-    font-size: 0.55rem;
-  }
-
-  /* Category Background Colors */
+  /* Gradient Backgrounds */
   .category-phd {
-    background-color: #1a75cf; /* Blue for PhD */
+    background: linear-gradient(to right, gold, gray);
     color: white;
+    transition: background 0.3s ease;
+  }
+
+  .category-phd:hover {
+    background: gold;
   }
 
   .category-msc {
-    background-color: #1f8a3d; /* Green for MSc */
+    background: linear-gradient(to right, purple, gray);
     color: white;
+    transition: background 0.3s ease;
+  }
+
+  .category-msc:hover {
+    background: purple;
   }
 
   .category-staff {
-    background-color: #4e4e4e; /* Gray for Staff */
+    background: linear-gradient(to right, blue, gray);
     color: white;
+    transition: background 0.3s ease;
   }
 
-  .card-title {
+  .category-staff:hover {
+    background: blue;
+  }
+
+  .card-body {
+    z-index: 3; /* Ensure text stays on top */
+    padding: 10px;
     font-size: 0.65rem;
+  }
+
+  .card-title {
+    font-size: 0.75rem;
     font-weight: bold;
   }
 
   .card-text {
-    font-size: 0.55rem;
+    font-size: 0.65rem;
     line-height: 1.2;
   }
 
-  /* Responsive Fonts */
-  @media (max-width: 768px) {
-    .card-title {
-      font-size: 0.6rem;
-    }
-
-    .card-text {
-      font-size: 0.5rem;
-    }
-  }
-
   a.card-link {
     text-decoration: none;
     color: inherit;
@@ -117,7 +121,7 @@ <h1 class="text-center mb-4">Research Group</h1>
     {% if people_in_category.size > 0 %}
       <div class="mb-5">
         <h2 class="text-uppercase text-center mb-4">{{ category }}</h2>
-        <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 g-4">
+        <div class="row row-cols-2 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
           {% for person in people_in_category %}
             <div class="col">
               <a href="{{ person.website }}" class="card-link" target="_blank">
@@ -162,7 +166,7 @@ <h6 class="card-title mb-1">
   {% if alumni.size > 0 %}
     <div class="mb-5">
       <h2 class="text-uppercase text-center mb-4">Alumni</h2>
-      <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 g-3">
+      <div class="row row-cols-2 row-cols-sm-3 row-cols-md-3 row-cols-lg-4 g-3">
         {% for person in alumni %}
           <div class="col">
             <a href="{{ person.website }}" class="card-link" target="_blank">