webp main image and text color accessibility improvements

assets/css/app.scss

@@ -121,7 +121,7 @@ a {
   display: flex;
   align-items: center;
   text-align: center;
-  color: $gray-500;
+  color: $gray-400;
   font-family: $font-family-monospace;
   font-size: smaller;
   text-transform: uppercase;
@@ -152,9 +152,8 @@ a {
 }
 .post-lede,
 .post-body {
-  color: $gray-200;
   h2, h3, h4, h5, h6 {
-    color: $gray-300;
+    color: $gray-200;
     margin-top: 2rem;
   }
 }

lib/home73k_web/live/blog_live.html.leex

@@ -20,16 +20,16 @@
             <%= @live_action == :show && post.title || live_redirect "#{post.title}", to: Routes.blog_path(@socket, :show, post) %>
           </h2>
 
-          <div class="post-date font-monospace text-gray-400 <%= if length(post.tags) == 0, do: "mb-3" %>">
+          <div class="post-date font-monospace text-gray-300 <%= if length(post.tags) == 0, do: "mb-3" %>">
             <%= icon_div @socket, "mdi-calendar-clock", [class: "icon baseline me-2"] %><%= format_date(post.date) %>
             by <%= icon_div @socket, "mdi-account", [class: "icon baseline me-1"] %>Adam Piontek
           </div>
 
           <%= if length(post.tags) > 0 do %>
             <div class="post-tags fs-smaller mb-3">
-            <%= icon_div @socket, "mdi-tag-multiple", [class: "icon baseline text-gray-400"] %>
+            <%= icon_div @socket, "mdi-tag-multiple", [class: "icon baseline text-gray-300"] %>
             <%= for {tag, i} <- Enum.with_index(post.tags) do %>
-              <span class="text-gray-400">#</span><%= live_redirect tag, to: Routes.blog_path(@socket, :tag, tag) %><%= i < (length(post.tags) - 1) && "," || "" %>
+              <span class="text-gray-300">#</span><%= live_redirect tag, to: Routes.blog_path(@socket, :tag, tag) %><%= i < (length(post.tags) - 1) && "," || "" %>
             <% end %>
             </div>
           <% end %>

lib/home73k_web/templates/home/about.html.eex

@@ -4,14 +4,14 @@
 
     <h2 class="fs-2 fw-600 mb-0">About</h2>
 
-    <div class="fs-5 font-monospace text-gray-500">Adam Piontek. Human.</div>
+    <div class="fs-5 font-monospace text-gray-300">Adam Piontek. Human.</div>
 
 
     <figure class="my-4 border-start border-gray border-5 ps-3 py-2">
       <blockquote class="blockquote">
         <p>&ldquo;Probabilities collapse. I become increasingly unlikely.&rdquo;</p>
       </blockquote>
-      <figcaption class="blockquote-footer text-gray-400 mb-0">
+      <figcaption class="blockquote-footer text-gray-300 mb-0">
         Robert Charles Wilson, <cite title="Divided by Infinity">Divided by Infinity</cite>
       </figcaption>
     </figure>

lib/home73k_web/templates/home/folio.html.eex

@@ -17,7 +17,7 @@
           <%= icon_div @conn, "mdi-account-hard-hat", [class: "icon baseline me-2"] %><span>Working on it!</span>
         </h2>
 
-        <div class="font-monospace text-gray-200 fs-5">I've made some things over the years (like this site!), and at some point I'll highlight some here.</div>
+        <div class="font-monospace text-gray-300 fs-5">I've made some things over the years (like this site!), and at some point I'll highlight some here.</div>
 
       </div>
 

lib/home73k_web/templates/home/index.html.eex

@@ -3,7 +3,7 @@
   <div class="d-flex flex-column-reverse flex-lg-row align-items-lg-end mt-5">
 
     <div class="col-auto mt-3 mt-lg-0">
-      <%= img_tag Routes.static_path(@conn, "/images/cat-roof_portrait.jpg"),
+      <%= img_tag Routes.static_path(@conn, "/images/cat-roof_portrait.webp"),
           class: "img-fluid border border-20 border-gray-900 rounded-2",
           alt: "My cat Babka, stuck on a roof when she was still just a stray.",
           title: "My cat Babka, stuck on a roof when she was still just a stray."
@@ -17,7 +17,7 @@
         <%= icon_div @conn, "mdi-account", [class: "icon baseline me-2"] %><span>Adam Piontek</span>
       </h2>
 
-      <div class="font-monospace text-gray-500 fs-5">Desktop Systems Engineer. Human.</div>
+      <div class="font-monospace text-gray-300 fs-5">Desktop Systems Engineer. Human.</div>
 
       <div id="social-icons" class="mt-1">
         <%= for s <- socials(@conn) do %>

lib/home73k_web/templates/home/resume.html.eex

@@ -8,7 +8,7 @@
         <%= icon_div @conn, "mdi-account", [class: "icon baseline me-2"] %><span>Adam Piontek</span>
       </h2>
 
-      <div class="font-monospace text-gray-500 fs-5">Desktop Systems Engineer.</div>
+      <div class="font-monospace text-gray-300 fs-5">Desktop Systems Engineer.</div>
 
       <div id="social-icons" class="mt-1">
         <%= for s <- socials_prof(@conn) do %>
@@ -24,7 +24,7 @@
 
       <div class="separator mt-4 mb-2">qualifications</div>
 
-      <ul class="text-gray-200">
+      <ul class="text-gray-100">
         <%= for qualif <- resume_qualifs() do %>
           <%= content_tag :li, qualif %>
         <% end %>
@@ -36,9 +36,9 @@
         <div class="fs-5 border-bottom border-gray mt-3 mb-2"><%= employer%></div>
         <div class="mb-3">
         <%= for position <- positions do %>
-          <div>
+          <div class="d-flex justify-content-between">
-            <span class="text-gray-200"><%= position.title %></span>
+            <span class="text-gray-100"><%= position.title %></span>
-            <span class="text-gray-500">&middot; <%= position.start %> &mdash; <%= position.end %></span>
+            <span class="text-gray-300"><%= position.start %> &mdash; <%= position.end %></span>
           </div>
         <% end %>
         </div>

lib/home73k_web/templates/layout/root.html.leex

@@ -37,7 +37,7 @@
       <%#= if footer_absolute?(@conn) do %>
       <footer class="footer73k footer bottom-0 end-0 bg-dark">
         <div class="px-2 px-sm-3">
-          <span class="text-gray-400">&copy; Copyright <%= Date.utc_today |> Map.get(:year) %> Adam Piontek</span>
+          <span class="text-gray-300">&copy; Copyright <%= Date.utc_today |> Map.get(:year) %> Adam Piontek</span>
         </div>
       </footer>