fix form styles

VeroIsoardi · Dec 9, 2024 · c942777 · c942777
1 parent be59e14
commit c942777
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 1 deletion.
diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
@@ -14,6 +14,18 @@
     font-family: 'DM Serif Display', serif;
     @apply tracking-wide;
   }
+
+  h1 {
+    @apply text-3xl my-4;
+  }
+
+  h2 {
+    @apply text-2xl my-4;
+  }
+
+  h3 {
+    @apply text-xl my-4;
+  }
 }
 
 @layer components {
@@ -46,4 +58,28 @@
   .card {
     @apply rounded-lg bg-white shadow-lg p-4 md:p-10 md:mx-auto w-full; 
   }
+
+  .ProseMirror {
+    @apply p-4;
+  }
+
+  .ProseMirror ul {
+    @apply list-disc pl-4;
+  }
+
+  .ProseMirror ol {
+    @apply list-decimal pl-4;
+  }
+
+  .ProseMirror blockquote {
+    @apply border-l-4 border-fuchsia-600 bg-fuchsia-50 ml-2 pl-2 py-2 my-4;
+  }
+
+  .ProseMirror pre {
+    @apply overflow-x-auto bg-gray-800 text-white rounded-lg p-4 my-4;
+  }
+
+  .ProseMirror a {
+    @apply text-fuchsia-600 underline hover:text-fuchsia-800;
+  }
 }
diff --git a/app/views/recipes/_form.html.erb b/app/views/recipes/_form.html.erb
@@ -28,7 +28,7 @@
 
   <div class="my-5">
     <%= form.label :steps, 'Preparación', class: 'label mb-2' %>
-    <%= form.richer_text_area :steps, placeholder: "Ingrese los ingredientes", class: "w-full flex-1 appearance-none text-gray-700 placeholder-gray-400 text-base min-h-64" %>
+    <%= form.richer_text_area :steps, placeholder: "Ingrese los ingredientes", class: "w-full flex-1 appearance-none text-gray-700 placeholder-gray-400 text-base min-h-64 prose" %>
   </div>
 
   <div class="inline">