adam/home73k
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

webp main image and text color accessibility improvements

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
assets/css/app.scss
View file

@ -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;
}
}

0
assets/static/images/cat-roof_portrait.jpg → assets/raw/cat-roof_portrait_oldjpg.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

BIN
assets/static/images/cat-roof_portrait.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 43 KiB

6
lib/home73k_web/live/blog_live.html.leex
View file

@ -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 %>

4
lib/home73k_web/templates/home/about.html.eex
View file

@ -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>

2
lib/home73k_web/templates/home/folio.html.eex
View file

@ -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>

4
lib/home73k_web/templates/home/index.html.eex
View file

@ -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 %>

10
lib/home73k_web/templates/home/resume.html.eex
View file

@ -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>
<span class="text-gray-200"><%= position.title %></span>
<span class="text-gray-500">&middot; <%= position.start %> &mdash; <%= position.end %></span>
<div class="d-flex justify-content-between">
<span class="text-gray-100"><%= position.title %></span>
<span class="text-gray-300"><%= position.start %> &mdash; <%= position.end %></span>
</div>
<% end %>
</div>

2
lib/home73k_web/templates/layout/root.html.leex
View file

@ -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>