Use prose class

Author: RoyalIcing

lib/components_guide_web/templates/landing/index.html.eex

@@ -3,15 +3,16 @@
 heading = "Great apps start with great components"
 heading = "Want to learn more of the why than the how?"
 heading = raw("Improve the user experience <em>and</em> developer experience of your components")
-heading = raw("Want to improve both the user experience <em>and</em> developer experience of your components?")
+heading = raw("Learn how to improve both the user experience <em>and</em> developer experience of your components")
+heading = raw("Learn how to improve the UX <em>and</em> DX of your components")
 
-subhead = "Learn about accessibility, TDD, BDD, naming, performance, and the latest browser features — all for free."
+subhead = "Get better at accessibility, TDD, BDD, naming, performance, and the latest browser features — all for free."
 
 %>
 
 <div class="text-white" style="<%= header_styles(3) %>">
   <section class="container px-6 pt-12 pb-8">
-    <h1 class="mx-auto max-w-4xl px-2 text-3xl sm:text-4xl md:text-5xl text-center leading-tight font-bold text-shadow">
+    <h1 class="mx-auto max-w-4xl px-2 text-3xl sm:text-4xl md:text-5xl text-center font-bold text-shadow">
       <%= heading %>
     </h1>
     <p class="mt-6 mb-8 mx-auto max-w-4xl text-2xl sm:text-3xl md:text-3xl text-center leading-snug italic text-gray-100 text-shadow">

lib/components_guide_web/views/react_typescript_view.ex

@@ -21,7 +21,7 @@ defmodule ComponentsGuideWeb.ReactTypescriptView do
 
   def article_content_class("editor"), do: "content text-xl"
   def article_content_class("editor-prolog"), do: "content text-xl"
-  def article_content_class(_article), do: "content max-w-4xl mx-auto py-8 text-xl"
+  def article_content_class(_article), do: "prose md:prose-xl prose-invert max-w-4xl mx-auto py-16"
 
   def collected_image(conn, name) do
     %{static_path: path_to_image, width: width, height: height} = render(name)