fix: inconsistent styles

raexera · Sep 10, 2024 · a33eaae · a33eaae
1 parent 8e4cca2
commit a33eaae
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 42 deletions.
diff --git a/src/components/Boxes.tsx b/src/components/Boxes.tsx
@@ -52,11 +52,11 @@ export default function Boxes({ className = "" }: GridProps) {
         {/* Left gradient overlay */}
         <div className="absolute left-0 top-0 h-full w-1/2">
           <div className="absolute inset-0 z-50 bg-gradient-to-tl from-black from-50% via-transparent via-90% to-transparent to-100%" />
-          <div className="flex h-full w-full flex-col divide-y divide-dashed divide-neutral-700 border-l border-t border-black">
+          <div className="flex h-full w-full flex-col divide-y divide-white/25 border-l border-t border-black">
             {Array.from({ length: rows }).map((_, rowIndex) => (
               <div
                 key={rowIndex}
-                className="relative flex w-full divide-x divide-dashed divide-neutral-700"
+                className="relative flex w-full divide-x divide-white/25"
                 style={{ height: `${cellSize}px` }}
               >
                 {Array.from({ length: Math.ceil(columns / 2) }).map(
@@ -74,11 +74,11 @@ export default function Boxes({ className = "" }: GridProps) {
         {/* Right gradient overlay */}
         <div className="absolute right-0 top-0 h-full w-1/2">
           <div className="absolute inset-0 z-50 bg-gradient-to-tr from-black from-50% via-transparent via-90% to-transparent to-100%" />
-          <div className="flex h-full w-full flex-col divide-y divide-dashed divide-neutral-700 border-l border-t border-black">
+          <div className="flex h-full w-full flex-col divide-y divide-white/25 border-l border-t border-black">
             {Array.from({ length: rows }).map((_, rowIndex) => (
               <div
                 key={rowIndex}
-                className="relative flex w-full divide-x divide-dashed divide-neutral-700"
+                className="relative flex w-full divide-x divide-white/25"
                 style={{ height: `${cellSize}px` }}
               >
                 {Array.from({ length: Math.ceil(columns / 2) }).map(

diff --git a/src/components/Card.astro b/src/components/Card.astro
@@ -13,48 +13,42 @@ const { url, description, highlights, name } = Astro.props as CardProps;
   href={url}
   target="_blank"
   rel="noopener noreferrer"
-  class="group relative flex h-full flex-col items-stretch rounded-2xl p-7 duration-300 ease-out sm:p-5"
+  class="group relative flex h-full flex-col gap-3 rounded-lg border border-white/25 bg-black p-4 transition-colors duration-300 ease-in-out hover:bg-white/10"
 >
-  <span
-    class="absolute inset-0 z-20 rounded-2xl border border-dashed border-white/25 bg-black transition-transform duration-300 ease-out group-hover:-translate-x-1 group-hover:-translate-y-1"
-  ></span>
-  <span
-    class="absolute inset-0 z-10 rounded-2xl border border-dashed border-white/25 transition-transform duration-300 ease-out group-hover:translate-x-1 group-hover:translate-y-1"
-  ></span>
-  <span
-    class="relative z-30 transition-transform duration-300 ease-out group-hover:-translate-x-1 group-hover:-translate-y-1"
-  >
-    <div class="mb-1 mt-5 w-full sm:mt-3">
-      <h3 class="mb-0 flex items-center text-base font-bold">
+  <div class="w-full group-hover:text-white">
+    <div class="flex items-center gap-2">
+      <h3 class="text-base font-bold">
         <span class="leading-snug text-white">{name}</span>
-        <svg
-          class="ml-1 h-2.5 w-2.5 -translate-x-1 translate-y-1 -rotate-45 transform stroke-current transition-all duration-200 ease-in-out group-hover:translate-x-0 group-hover:translate-y-0"
-          viewBox="0 0 13 15"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <g
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2.4"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <polyline
-              class="opacity-0 transition-opacity duration-200 ease-out group-hover:opacity-100"
-              points="5.33 0 10.83 5.5 5.33 11"></polyline>
-            <line
-              class="-translate-x-1 transform opacity-0 transition-transform duration-200 ease-out group-hover:translate-x-0 group-hover:opacity-100"
-              x1="10.83"
-              y1="5.5"
-              x2="0.83"
-              y2="5.17"></line>
-          </g>
-        </svg>
       </h3>
-      <p class="mt-2 text-sm">{description}</p>
-      <p class="mt-2 text-sm text-white/50">
+      <svg
+        class="ml-1 h-2.5 w-2.5 -translate-x-1 translate-y-1 -rotate-45 transform stroke-current transition-all duration-200 ease-in-out group-hover:translate-x-0 group-hover:translate-y-0"
+        viewBox="0 0 13 15"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.4"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline
+            class="opacity-0 transition-opacity duration-200 ease-out group-hover:opacity-100"
+            points="5.33 0 10.83 5.5 5.33 11"></polyline>
+          <line
+            class="-translate-x-1 transform opacity-0 transition-transform duration-200 ease-out group-hover:translate-x-0 group-hover:opacity-100"
+            x1="10.83"
+            y1="5.5"
+            x2="0.83"
+            y2="5.17"></line>
+        </g>
+      </svg>
+    </div>
+    <div class="mt-2 flex flex-col gap-2">
+      <p class="text-sm">{description}</p>
+      <p class="text-sm text-white/50">
         {highlights.join(" ")}
       </p>
     </div>
-  </span>
+  </div>
 </a>