Forbedre layout på oppskriftssiden og hover på kort (#40)

client/src/components/recipe/RecipeCard.tsx

@@ -9,7 +9,7 @@ type RecipeCardProps = {
 export function RecipeCard({ recipe }: RecipeCardProps) {
     return (
         <Link to={`/recipes/${recipe.recipeId}`} className="block h-full rounded-lg focus-visible:outline-2 focus-visible:outline-primary">
-            <article className="border border-olive rounded-lg p-4 text-black h-full bg-secondary/50 transition hover:shadow-lg group">
+            <article className="border border-olive rounded-lg p-4 text-black h-full bg-secondary/50 transition hover:shadow-lg hover:border-primary group">
                 <img className="w-full aspect-square object-cover rounded-md" src={recipe.imageURL} alt={recipe.title}/>
                 <h3 className="text-lg font-semibold group-hover:underline">{recipe.title}</h3>
                 <div className="flex justify-between">

client/src/components/recipe/RecipeDetail.tsx

@@ -8,27 +8,27 @@ type RecipeDetailProps = {
 export function RecipeDetail({ recipe }: RecipeDetailProps) {
     return (
         <article className="grid md:grid-cols-2 gap-6">
-            <section className="border border-olive rounded-lg p-4 flex flex-col">
-                <h1 className="font-heading text-4xl md:text-5xl">{recipe.title}</h1>
-                <div className="flex justify-between">
-                    <p>{recipe.prepTime} minutter</p>
-                    <p>{recipe.portions} porsjoner</p>
-                </div>
-                <div>
-                    <p>{recipe.description}</p>
-                </div>
-                <ul className="flex flex-wrap gap-2 mt-auto">
+            <section className="border border-olive rounded-lg p-4 flex flex-col bg-background">
+                <ul className="flex flex-wrap gap-2 mb-4">
                     {recipe.tags.map((tag) => (
                         <li className="rounded-full bg-olive text-background px-3 py-1 text-sm" key={tag.tagId}>
                             {tag.tagName}
                         </li>
                     ))}
                 </ul>
+                <h1 className="font-heading text-4xl md:text-5xl">{recipe.title}</h1>
+                <div>
+                    <p>{recipe.description}</p>
+                </div>
+                <div className="flex justify-between">
+                    <p className="border border-olive rounded-full">{recipe.prepTime} minutter</p>
+                    <p className="border border-olive rounded-full">{recipe.portions} porsjoner</p>
+                </div>
             </section>
             <section className="rounded-lg">
-                <img className="w-full h-72 object-cover rounded-lg" src={recipe.imageURL} alt={recipe.title}/>
+                <img className="w-full h-72 object-cover bg-pink-dark rounded-lg" src={recipe.imageURL} alt={recipe.title}/>
             </section>
-            <section className="border border-olive rounded-lg p-4">
+            <section className="border border-olive rounded-lg p-4 bg-background">
                 <h2 className="text-2xl font-semibold">Ingredienser</h2>
                 <ul>
                     {recipe.ingredients.map((ingredient) => (
@@ -40,7 +40,7 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
                     ))}
                 </ul>
             </section>
-            <section className="border border-olive rounded-lg p-4">
+            <section className="border border-olive bg-background rounded-lg p-4">
                 <h2 className="text-2xl font-semibold">Steg</h2>
                 <ol className="list-decimal list-inside">
                     {recipe.steps.map((step) => (

client/src/index.css

@@ -16,6 +16,7 @@
 
   --color-pink-light: #f2c6cf;
   --color-pink: #b46a72;
+  --color-pink-dark: #ddbaae;
   --color-peach: #efd7c4;
 
   /* Typografi */