fixed expert directory page.

Signed-off-by: sahil suman <[email protected]>

Author: sahilsuman933

fern/assets/styles.css

@@ -10,35 +10,76 @@
 /* for a grid of videos */
 
 .video-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 24px;
+  padding: 16px 0;
+  width: 100%;
+}
+
+.video-grid .ed-card {
   display: flex;
-  flex-wrap: wrap;
-  gap: 20px; /* Spacing between videos */
+  flex-direction: column;
+  background: var(--bg-surface);
+  border-radius: 12px;
+  overflow: hidden;
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  height: 100%;
+  min-height: 360px;
 }
 
-.video-grid iframe,
-.video-grid a {
-  flex: 0 0 calc(50% - 20px); /* Flex grow is 0, basis is 50% minus the gap */
-  aspect-ratio: 560 / 315; /* Maintain the aspect ratio of 16:9 */
-  max-width: calc(50% - 20px); /* Max width is also set to 50% minus the gap */
-  height: auto; /* Allow height to auto adjust based on aspect ratio */
+.video-grid .ed-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-.video-grid a {
-  aspect-ratio: 1;
+.video-grid .card-img {
+  width: 100%;
+  height: 200px;
+  object-fit: contain;
+  padding: 24px;
+  background: white;
+  border-radius: 12px 12px 0 0;
 }
 
-@media (max-width: 600px) {
-  .video-grid iframe {
-    flex: 0 0 100%; /* Flex grow is 0, basis is 100% */
-    max-width: 100%; /* Allow max-width to be full width on mobile */
+.video-grid .card-content {
+  padding: 20px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.video-grid .card-content h3 {
+  margin: 0 0 12px 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.video-grid .card-content p {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: var(--text-secondary);
+}
+
+@media (max-width: 768px) {
+  .video-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .video-grid .ed-card {
+    min-height: 320px;
   }
 }
 
 .card-img {
   height: 200px;
   object-fit: contain;
   margin: auto;
-  background: white; /*TODO: change color as per theme*/
+  background: white;
+  /*TODO: change color as per theme*/
 }
 
 .card-content {
@@ -49,21 +90,22 @@
   text-align: center;
 }
 
-.card-content > h3 {
+.card-content>h3 {
   margin: 16px 0 8px 0;
   font-size: 1.5em;
   text-align: center;
 }
 
-.card-content > p {
+.card-content>p {
   font-size: 1em;
   text-align: center;
 }
 
 .video-embed-wrapper {
   position: relative;
   width: 100%;
-  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
+  padding-top: 56.25%;
+  /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
 }
 
 .video-embed-wrapper iframe {
@@ -74,59 +116,37 @@
   height: 100%;
 }
 
-#\/api-reference\/webhooks\/server-message\#request
-  h3
-  + div:first-of-type
-  > div:first-of-type {
+#\/api-reference\/webhooks\/server-message\#request h3+div:first-of-type>div:first-of-type {
   display: none;
 }
 
-#\/api-reference\/webhooks\/server-message\#request
-  h3
-  + div:first-of-type:before {
+#\/api-reference\/webhooks\/server-message\#request h3+div:first-of-type:before {
   content: "Vapi will make a request to your server with the following object:";
   font-size: 0.875rem;
 }
 
-:is(.light)
-  #\/api-reference\/webhooks\/server-message\#request
-  h3
-  + div:first-of-type:before {
+:is(.light) #\/api-reference\/webhooks\/server-message\#request h3+div:first-of-type:before {
   color: #0008059f;
 }
 
-:is(.dark)
-  #\/api-reference\/webhooks\/server-message\#request
-  h3
-  + div:first-of-type:before {
+:is(.dark) #\/api-reference\/webhooks\/server-message\#request h3+div:first-of-type:before {
   color: #f6f5ffb6;
 }
 
-#\/api-reference\/webhooks\/client-message\#request
-  h3
-  + div:first-of-type
-  > div:first-of-type {
+#\/api-reference\/webhooks\/client-message\#request h3+div:first-of-type>div:first-of-type {
   display: none;
 }
 
-#\/api-reference\/webhooks\/client-message\#request
-  h3
-  + div:first-of-type:before {
+#\/api-reference\/webhooks\/client-message\#request h3+div:first-of-type:before {
   content: "Vapi will make a request to your server with the following object:";
   font-size: 0.875rem;
 }
 
-:is(.light)
-  #\/api-reference\/webhooks\/client-message\#request
-  h3
-  + div:first-of-type:before {
+:is(.light) #\/api-reference\/webhooks\/client-message\#request h3+div:first-of-type:before {
   color: #0008059f;
 }
 
-:is(.dark)
-  #\/api-reference\/webhooks\/client-message\#request
-  h3
-  + div:first-of-type:before {
+:is(.dark) #\/api-reference\/webhooks\/client-message\#request h3+div:first-of-type:before {
   color: #f6f5ffb6;
 }
 
@@ -157,5 +177,5 @@
 }
 
 html.dark button[data-highlighted] .fern-api-property-meta {
-    color: var(--accent-contrast) !important;
-}
+  color: var(--accent-contrast) !important;
+}