webp main image and text color accessibility improvements

This commit is contained in:
Adam Piontek 2021-04-06 19:52:08 -04:00
parent 2027ecc1d5
commit 2ce2db1b37
9 changed files with 16 additions and 17 deletions

View file

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

View file

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

View file

@ -20,16 +20,16 @@
<%= @live_action == :show && post.title || live_redirect "#{post.title}", to: Routes.blog_path(@socket, :show, post) %> <%= @live_action == :show && post.title || live_redirect "#{post.title}", to: Routes.blog_path(@socket, :show, post) %>
</h2> </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) %> <%= 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 by <%= icon_div @socket, "mdi-account", [class: "icon baseline me-1"] %>Adam Piontek
</div> </div>
<%= if length(post.tags) > 0 do %> <%= if length(post.tags) > 0 do %>
<div class="post-tags fs-smaller mb-3"> <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 %> <%= 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 %> <% end %>
</div> </div>
<% end %> <% end %>

View file

@ -4,14 +4,14 @@
<h2 class="fs-2 fw-600 mb-0">About</h2> <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"> <figure class="my-4 border-start border-gray border-5 ps-3 py-2">
<blockquote class="blockquote"> <blockquote class="blockquote">
<p>&ldquo;Probabilities collapse. I become increasingly unlikely.&rdquo;</p> <p>&ldquo;Probabilities collapse. I become increasingly unlikely.&rdquo;</p>
</blockquote> </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> Robert Charles Wilson, <cite title="Divided by Infinity">Divided by Infinity</cite>
</figcaption> </figcaption>
</figure> </figure>

View file

@ -17,7 +17,7 @@
<%= icon_div @conn, "mdi-account-hard-hat", [class: "icon baseline me-2"] %><span>Working on it!</span> <%= icon_div @conn, "mdi-account-hard-hat", [class: "icon baseline me-2"] %><span>Working on it!</span>
</h2> </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> </div>

View file

@ -3,7 +3,7 @@
<div class="d-flex flex-column-reverse flex-lg-row align-items-lg-end mt-5"> <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"> <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", 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.", 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." 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> <%= icon_div @conn, "mdi-account", [class: "icon baseline me-2"] %><span>Adam Piontek</span>
</h2> </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"> <div id="social-icons" class="mt-1">
<%= for s <- socials(@conn) do %> <%= for s <- socials(@conn) do %>

View file

@ -8,7 +8,7 @@
<%= icon_div @conn, "mdi-account", [class: "icon baseline me-2"] %><span>Adam Piontek</span> <%= icon_div @conn, "mdi-account", [class: "icon baseline me-2"] %><span>Adam Piontek</span>
</h2> </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"> <div id="social-icons" class="mt-1">
<%= for s <- socials_prof(@conn) do %> <%= for s <- socials_prof(@conn) do %>
@ -24,7 +24,7 @@
<div class="separator mt-4 mb-2">qualifications</div> <div class="separator mt-4 mb-2">qualifications</div>
<ul class="text-gray-200"> <ul class="text-gray-100">
<%= for qualif <- resume_qualifs() do %> <%= for qualif <- resume_qualifs() do %>
<%= content_tag :li, qualif %> <%= content_tag :li, qualif %>
<% end %> <% end %>
@ -36,9 +36,9 @@
<div class="fs-5 border-bottom border-gray mt-3 mb-2"><%= employer%></div> <div class="fs-5 border-bottom border-gray mt-3 mb-2"><%= employer%></div>
<div class="mb-3"> <div class="mb-3">
<%= for position <- positions do %> <%= 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> </div>
<% end %> <% end %>
</div> </div>

View file

@ -37,7 +37,7 @@
<%#= if footer_absolute?(@conn) do %> <%#= if footer_absolute?(@conn) do %>
<footer class="footer73k footer bottom-0 end-0 bg-dark"> <footer class="footer73k footer bottom-0 end-0 bg-dark">
<div class="px-2 px-sm-3"> <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> </div>
</footer> </footer>