make it look better on mobile

andyleclair · andyleclair · commit 1dde17253240 · 2025-01-22T09:41:24.000-05:00
diff --git a/lib/personal.ex b/lib/personal.ex
@@ -11,7 +11,7 @@ defmodule Personal do
         <title><%= @post.title %></title>
         <meta name="description" content={@post.description} />
       </:head>
-      <article class="prose lg:prose-xl prose-pre:bg-codebg">
+      <article class="mx-auto prose sm:prose-sm md:prose-md lg:prose-xl prose-pre:bg-codebg">
         <h1><%= @post.title %></h1>
         <h3><%= @post.description %></h3>
         <h3><a href={@post.related_listening}>Related Listening</a></h3>
@@ -58,7 +58,7 @@ defmodule Personal do
           <header class="bg-bludacris p-10 my-4 lg:mt-10 lg:mb-14">
             <h1><a href={url()}>andy@andyleclair.dev</a>$><span class="blink">_</span></h1>
           </header>
-          <main class="relative grow min-h-96 flex-1 p-4">
+          <main class="container mx-auto relative grow min-h-96 flex-1 p-4 items-center">
             <%= render_slot(@inner_block) %>
           </main>
           <footer class="mt-24 bg-bludacris p-4 text-center">
diff --git a/lib/personal/watcher.ex b/lib/personal/watcher.ex
@@ -7,6 +7,7 @@ defmodule Personal.Watcher do
   end
 
   def init(args) do
+    rebuild_site()
     {:ok, watcher_pid} = FileSystem.start_link(args)
     FileSystem.subscribe(watcher_pid)
     {:ok, %{watcher_pid: watcher_pid}}
@@ -18,11 +19,7 @@ defmodule Personal.Watcher do
         %{watcher_pid: watcher_pid} = state
       ) do
     Mix.shell().info(["File modified: #{path}"])
-    Mix.shell().info(["Site Rebuilding"])
-    # Currently, we're just recompiling the entire site
-    # TODO: make this fancier based on the path
-    System.cmd("mix", ["site.build"])
-    Mix.shell().info([:green, "Site rebuilt"])
+    rebuild_site()
     {:noreply, state}
   end
 
@@ -32,4 +29,12 @@ defmodule Personal.Watcher do
       ) do
     {:noreply, state}
   end
+
+  defp rebuild_site() do
+    Mix.shell().info([:yellow, "Site Rebuilding"])
+    # Currently, we're just recompiling the entire site
+    # TODO: make this fancier based on the path
+    System.cmd("mix", ["site.build"])
+    Mix.shell().info([:green, "Site Rebuilt"])
+  end
 end
diff --git a/output/assets/app.css b/output/assets/app.css
diff --git a/output/index.html b/output/index.html
@@ -16,7 +16,7 @@
       <header class="bg-bludacris p-10 my-4 lg:mt-10 lg:mb-14">
         <h1><a href="https://andyleclair.dev/">andy@andyleclair.dev</a>$><span class="blink">_</span></h1>
       </header>
-      <main class="relative grow min-h-96 flex-1 p-4">
+      <main class="container mx-auto relative grow min-h-96 flex-1 p-4 items-center">
         
   <h2 class="text-xl">Blog!</h2>
   <ul>
diff --git a/output/posts/2024/08-27-hello-world.html b/output/posts/2024/08-27-hello-world.html
@@ -16,9 +16,9 @@
       <header class="bg-bludacris p-10 my-4 lg:mt-10 lg:mb-14">
         <h1><a href="https://andyleclair.dev/">andy@andyleclair.dev</a>$><span class="blink">_</span></h1>
       </header>
-      <main class="relative grow min-h-96 flex-1 p-4">
+      <main class="container mx-auto relative grow min-h-96 flex-1 p-4 items-center">
         
-  <article class="prose lg:prose-xl prose-pre:bg-codebg">
+  <article class="mx-auto prose sm:prose-sm md:prose-md lg:prose-xl prose-pre:bg-codebg">
     <h1>Hello world!</h1>
     <h3>The Start of Something</h3>
     <h3><a href="https://www.youtube.com/watch?v=wVrSXeRXSWE">Related Listening</a></h3>
diff --git a/output/posts/2024/08-28-readme.html b/output/posts/2024/08-28-readme.html
@@ -16,9 +16,9 @@
       <header class="bg-bludacris p-10 my-4 lg:mt-10 lg:mb-14">
         <h1><a href="https://andyleclair.dev/">andy@andyleclair.dev</a>$><span class="blink">_</span></h1>
       </header>
-      <main class="relative grow min-h-96 flex-1 p-4">
+      <main class="container mx-auto relative grow min-h-96 flex-1 p-4 items-center">
         
-  <article class="prose lg:prose-xl prose-pre:bg-codebg">
+  <article class="mx-auto prose sm:prose-sm md:prose-md lg:prose-xl prose-pre:bg-codebg">
     <h1>README</h1>
     <h3>About this site</h3>
     <h3><a href="https://www.youtube.com/watch?v=9q4mVEcedSo">Related Listening</a></h3>
diff --git a/output/posts/2024/09-09-gltest.html b/output/posts/2024/09-09-gltest.html
@@ -16,9 +16,9 @@
       <header class="bg-bludacris p-10 my-4 lg:mt-10 lg:mb-14">
         <h1><a href="https://andyleclair.dev/">andy@andyleclair.dev</a>$><span class="blink">_</span></h1>
       </header>
-      <main class="relative grow min-h-96 flex-1 p-4">
+      <main class="container mx-auto relative grow min-h-96 flex-1 p-4 items-center">
         
-  <article class="prose lg:prose-xl prose-pre:bg-codebg">
+  <article class="mx-auto prose sm:prose-sm md:prose-md lg:prose-xl prose-pre:bg-codebg">
     <h1>GLtest</h1>
     <h3>First steps with OpenGL in Elixir</h3>
     <h3><a href="https://www.youtube.com/watch?v=7ny2t1I6aTo">Related Listening</a></h3>
diff --git a/output/posts/2024/09-10-opengl-part-2.html b/output/posts/2024/09-10-opengl-part-2.html
@@ -16,9 +16,9 @@
       <header class="bg-bludacris p-10 my-4 lg:mt-10 lg:mb-14">
         <h1><a href="https://andyleclair.dev/">andy@andyleclair.dev</a>$><span class="blink">_</span></h1>
       </header>
-      <main class="relative grow min-h-96 flex-1 p-4">
+      <main class="container mx-auto relative grow min-h-96 flex-1 p-4 items-center">
         
-  <article class="prose lg:prose-xl prose-pre:bg-codebg">
+  <article class="mx-auto prose sm:prose-sm md:prose-md lg:prose-xl prose-pre:bg-codebg">
     <h1>OpenGL Part 2</h1>
     <h3>Drawing a triangle</h3>
     <h3><a href="https://www.youtube.com/watch?v=tDd3p-xn7_U">Related Listening</a></h3>
diff --git a/output/posts/2024/09-11-opengl-part-3.html b/output/posts/2024/09-11-opengl-part-3.html
@@ -16,9 +16,9 @@
       <header class="bg-bludacris p-10 my-4 lg:mt-10 lg:mb-14">
         <h1><a href="https://andyleclair.dev/">andy@andyleclair.dev</a>$><span class="blink">_</span></h1>
       </header>
-      <main class="relative grow min-h-96 flex-1 p-4">
+      <main class="container mx-auto relative grow min-h-96 flex-1 p-4 items-center">
         
-  <article class="prose lg:prose-xl prose-pre:bg-codebg">
+  <article class="mx-auto prose sm:prose-sm md:prose-md lg:prose-xl prose-pre:bg-codebg">
     <h1>OpenGL Part 3</h1>
     <h3>Layering shapes, displaying FPS</h3>
     <h3><a href="https://www.youtube.com/watch?v=bwsjQbf0czc">Related Listening</a></h3>
diff --git a/output/posts/2024/10-28-live-fridge.html b/output/posts/2024/10-28-live-fridge.html
@@ -16,9 +16,9 @@
       <header class="bg-bludacris p-10 my-4 lg:mt-10 lg:mb-14">
         <h1><a href="https://andyleclair.dev/">andy@andyleclair.dev</a>$><span class="blink">_</span></h1>
       </header>
-      <main class="relative grow min-h-96 flex-1 p-4">
+      <main class="container mx-auto relative grow min-h-96 flex-1 p-4 items-center">
         
-  <article class="prose lg:prose-xl prose-pre:bg-codebg">
+  <article class="mx-auto prose sm:prose-sm md:prose-md lg:prose-xl prose-pre:bg-codebg">
     <h1>Live Fridge</h1>
     <h3>My take on an internet fridge magnet poetry experience using Elixir, Ash, and LiveView.</h3>
     <h3><a href="https://open.spotify.com/playlist/0hTDYi34toP4tTE8rCAkgY?si=671fa097213c4103">Related Listening</a></h3>
diff --git a/output/posts/2024/11-15-how-to-do-a-preload-good.html b/output/posts/2024/11-15-how-to-do-a-preload-good.html
@@ -16,9 +16,9 @@
       <header class="bg-bludacris p-10 my-4 lg:mt-10 lg:mb-14">
         <h1><a href="https://andyleclair.dev/">andy@andyleclair.dev</a>$><span class="blink">_</span></h1>
       </header>
-      <main class="relative grow min-h-96 flex-1 p-4">
+      <main class="container mx-auto relative grow min-h-96 flex-1 p-4 items-center">
         
-  <article class="prose lg:prose-xl prose-pre:bg-codebg">
+  <article class="mx-auto prose sm:prose-sm md:prose-md lg:prose-xl prose-pre:bg-codebg">
     <h1>How To Do A Preload Good</h1>
     <h3>Avoiding N+1 queries with Ecto&#39;s preload</h3>
     <h3><a href="https://www.youtube.com/watch?v=nhWlJLP6QyM">Related Listening</a></h3>
diff --git a/output/posts/2024/12-30-adding-rss-to-a-static-site.html b/output/posts/2024/12-30-adding-rss-to-a-static-site.html
@@ -16,9 +16,9 @@
       <header class="bg-bludacris p-10 my-4 lg:mt-10 lg:mb-14">
         <h1><a href="https://andyleclair.dev/">andy@andyleclair.dev</a>$><span class="blink">_</span></h1>
       </header>
-      <main class="relative grow min-h-96 flex-1 p-4">
+      <main class="container mx-auto relative grow min-h-96 flex-1 p-4 items-center">
         
-  <article class="prose lg:prose-xl prose-pre:bg-codebg">
+  <article class="mx-auto prose sm:prose-sm md:prose-md lg:prose-xl prose-pre:bg-codebg">
     <h1>Adding RSS to a static site</h1>
     <h3>Adding RSS and Atom feeds to this site</h3>
     <h3><a href="https://www.youtube.com/watch?v=rVpR_WTRhmc">Related Listening</a></h3>
diff --git a/output/posts/2024/12-31-dev-server.html b/output/posts/2024/12-31-dev-server.html
@@ -16,9 +16,9 @@
       <header class="bg-bludacris p-10 my-4 lg:mt-10 lg:mb-14">
         <h1><a href="https://andyleclair.dev/">andy@andyleclair.dev</a>$><span class="blink">_</span></h1>
       </header>
-      <main class="relative grow min-h-96 flex-1 p-4">
+      <main class="container mx-auto relative grow min-h-96 flex-1 p-4 items-center">
         
-  <article class="prose lg:prose-xl prose-pre:bg-codebg">
+  <article class="mx-auto prose sm:prose-sm md:prose-md lg:prose-xl prose-pre:bg-codebg">
     <h1>Dev Server</h1>
     <h3>Adding a development server</h3>
     <h3><a href="https://www.youtube.com/watch?v=SJnfdEX0QWk">Related Listening</a></h3>
diff --git a/output/posts/2025/01-21-things-you-can-do-with-ecto.html b/output/posts/2025/01-21-things-you-can-do-with-ecto.html
@@ -16,9 +16,9 @@
       <header class="bg-bludacris p-10 my-4 lg:mt-10 lg:mb-14">
         <h1><a href="https://andyleclair.dev/">andy@andyleclair.dev</a>$><span class="blink">_</span></h1>
       </header>
-      <main class="relative grow min-h-96 flex-1 p-4">
+      <main class="container mx-auto relative grow min-h-96 flex-1 p-4 items-center">
         
-  <article class="prose lg:prose-xl prose-pre:bg-codebg">
+  <article class="mx-auto prose sm:prose-sm md:prose-md lg:prose-xl prose-pre:bg-codebg">
     <h1>Things You Can Do With Ecto</h1>
     <h3>Neat tricks I&#39;ve learned while working with Ecto</h3>
     <h3><a href="https://www.youtube.com/watch?v=SJnfdEX0QWk">Related Listening</a></h3>
