paritybit.ca

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

commit 7fa967b728a44a5f7e33ebc605a611967edef4b6
parent 41d413c9a2adf60afa7f998bf8fa37117fa77218
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Fri,  7 Feb 2020 17:43:15 -0500

Revert to using plain imgs with alt text instead of figures with captions

Diffstat:
Mpages/blog/website-redesign.md | 14++++----------
Mstyle/main.css | 6++----
2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/pages/blog/website-redesign.md b/pages/blog/website-redesign.md @@ -17,19 +17,13 @@ paritybit.ca to make it more accessible. In that time I've completely overhauled the design of the website to make it scale better on different screen sizes and make use of as many accessibility features as I can. I've gone from this: -<figure> - <a href="/img/website-before.png"><img - src="/img/website-before-thumb.png"/></a> - <figcaption>My website before the redesign.</figcaption> -</figure> +<a href="/img/website-before.png"><img src="/img/website-before-thumb.png" +alt="My website before the redesign."/></a> To this: -<figure> - <a href="/img/website-after.png"><img - src="/img/website-after-thumb.png"/></a> - <figcaption>My website after the redesign.</figcaption> -</figure> +<a href="/img/website-after.png"><img src="/img/website-after-thumb.png" alt="My +website after the redesign."/></a> Which I think also looks a lot better and cleaner in addition to being much better in terms of accessibility. diff --git a/style/main.css b/style/main.css @@ -113,13 +113,11 @@ kbd { } img { + display: block; + margin: auto; max-width: 100%; } -figcaption { - text-align: center; -} - input { color: var(--fg-alt); background-color: var(--input-bg);