1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-30 15:22:09 +00:00
Commit graph

68 commits

Author SHA1 Message Date
Rohan Kumar
eaa8023af8
CSS: apply improvements described in WBP article
- Use borders instead of <hr>
- Distinguish <kbd> from <code> and body text with boldness
- Improve dark contrast and make dark visited links look distinct from
  regular text
- Improve focus indicators
2022-04-13 18:19:49 -07:00
Rohan Kumar
37860608d0
More on dark stylesheets
- More on the APCA being premature
- Notes on WebKit's shitty default dark colors needing to be overridden
2022-04-11 16:12:57 -07:00
Rohan Kumar
97d9cdeb63
CSS: more browser default colors for borders. 2022-04-10 20:41:35 -07:00
Rohan Kumar
9e2d7aa615
CSS: margin only on image figcaptions, not figures
Keeps images from getting shrunk to the point at which pictures of text
are unreadable.
2022-04-08 21:02:06 -07:00
Rohan Kumar
a3b8eb87b7
Add image of hidden search matches, wrapping fixes
- Add ugly screenshot of reddit redesign
- Fix wrapping on narrow viewports
2022-04-08 21:01:08 -07:00
Rohan Kumar
93c394a57b
CSS: fix print, compat with older browsers
- Fix print directive i accidentally deleted
- Switch from inline-start to "left" since old browsers prolly outnumber
  the number of poeple using Eng-Arabic machine translation engines that
  also alter the text direction.
2022-04-07 15:19:34 -07:00
Rohan Kumar
069dca0a06
New subsection on cache, semantic code snippets
Add "Don't count on the cache" under the "Optimal loading" section.

Some semantics for code snippets, including switching some from <code>
to <samp>.
2022-04-06 23:42:10 -07:00
Rohan Kumar
c0d511b7c9
Mark up and widen code snippets 2022-04-06 19:02:17 -07:00
Rohan Kumar
bbe9ff458e
CSS: better margins, contrast
- Allow figures that are *not* quotations to keep their old default
  margins.
- Improve the contrast of links just a little bit more.
2022-04-06 17:50:11 -07:00
Rohan Kumar
aab9356cf2
New section on spacing, other additions
- Mention checking privacy policies for 3p content
- Elaborate on more mainstream examples of color overrides
- Link to CSS WG docs instead of MDN for prefers-contrast since they're
  more detailed.
- Specify that I'm just removing margins in <figure> elements for
  quotations.
2022-04-06 17:49:19 -07:00
Rohan Kumar
0666dcd715
Revert to default font size, reduce body padding
It was getting annoying to fit stuff in a small viewport and the default
size isn't so bad tbh.
2022-04-05 20:20:56 -07:00
Rohan Kumar
b1e7b65e02
Re-organize and clarify some things
- Re-phrase a line referring to a previous section; after some
  re-arrangements, that section is no longer a "previous" section.
- Replace spatial terminology ("bottom") with sequential terminology
  ("end")
- Add note on font enumeration without the Font Access API
- Acknowledge testing in grayscale but emphasize that it isn't enough.
- Move defense of link underlines to just after the section on custom
  colors, since it's more relevant to it.
- Add xkcd image into the page instead of just linking, since the linked
  page content is an image that doesn't include a transcript or
  descriptive alt-text.
- Trivial rephrasings
2022-04-03 19:34:45 -07:00
Rohan Kumar
60bf9110b9
A11y and perf improvements
- Even less halation for dark theme
- More contrast for borders
- Slightly larger font, fixes APCA contrast issue for <small>
- Make responsive navbar work in NetSurf
- Make aria-current page bold
- Use content-visibility to unload footers and endnotes
- Add aria-labels to unclear webring link text
- Replace <hr> elements with css borders; the semantic meaning of <hr>
  was unnecessary with section breaks.
2022-04-02 23:54:39 -07:00
Rohan Kumar
02b1a8421e
Support reduced-contrast + RTL in dark mode
Use -inline-start instead of -left for machine translators that change
direction. Wrap that in a feature query so browsers that don't support
these rules can fall back to default styling. Those browsers are desktop
browsers anyway, where this doesn't relaly make a huge difference.

Add reduced-contrast for dark mode, for readers with severe astigmatism.
Reduced-contrast is the same as regular dark mode, except that the
background is lighter.

Somehow fit all of this in <1kb, any bigger and I'll have to stop
inlining.
2022-03-30 17:44:39 -07:00
Rohan Kumar
8b5c30c76c
Assets: add dark variant, replace useless WebPs
- Add dark variant of an image
- Some WebP images weren't significantly smaller than their PNG
  counterparts; replace them with JPEG-XL. No browser supports it yet
  but I need those meme image formats aaaaaaaaa
2022-03-29 18:35:29 -07:00
Rohan Kumar
689b6bcc3a
New "Beyond alt-text" section, short viewports
Describe how to best include images and figures in a way that flows well
and is accessible to both sighted and non-sighted users.

Describe how sticky elements can be a usability hazard on short
viewports

- Add changefreq
- Clean up structured data for quotations
- Add more sample unorthodox tests

TODO: dark image variant of image in new "Beyond alt-text" section
2022-03-29 18:26:22 -07:00
Rohan Kumar
3a639537b3
Info about csp, halation
- Mention pitfalls of a <meta>-based CSP
- Describe halation a bit more, with an image.
2022-03-28 18:11:55 -07:00
Rohan Kumar
aa631df58b
Fix stylesheet's overflow for <pre>, less indent 2022-03-28 18:11:21 -07:00
Rohan Kumar
ccce5c94a9
Inline nav links in print media 2022-03-27 17:24:07 -07:00
Rohan Kumar
b0d3189c84
Improve printer-friendliness
Make max line widths only apply to the "screen" media type.
2022-03-27 17:21:13 -07:00
Rohan Kumar
c40dc58bac
Fix some validator issues
- Typo in CSS
- improper use of <section>
2022-03-26 16:36:39 -07:00
Rohan Kumar
82a63d9662
Optimal line length 2022-03-26 12:33:01 -07:00
Rohan Kumar
fd576c9175
Prepare a TOC template 2022-03-26 12:32:22 -07:00
Rohan Kumar
4607ec2d95
Better example of bad custom colors
Add a better screenshot showcasing bad custom colors. Also give it a
figcaption.

The figcaption meant that I had to revise a statement later down when I
said I don't use figcaptions for images.
2022-03-20 16:09:01 -07:00
Rohan Kumar
66833dc93e
Improve narrow screen compat
- Replace long <code> snippets
- Add some soft hyphens.
- Make one image of text look better on a narrow viewport.
2022-03-16 16:52:03 -07:00
Rohan Kumar
d0fdf26227
Move microformat markup from picture to img 2022-03-08 19:32:28 -08:00
Rohan Kumar
5d685d2ce6
Include SVG version of u-photo on homepage
Useful for other IndieWeb software that parses homepages and renders
avatars.
2022-03-08 19:03:09 -08:00
Rohan Kumar
4b6cfbb9ed
Add bookmarks page
Pulls content exported from Buku, so I don't have to commit every time I
add a bookmark.

Since I added another nav item, I had to adjust the navbar css.
2022-03-07 22:40:26 -08:00
Rohan Kumar
6a08adb6c8
CSS: narrow body text
WCAG AAA guidelines encourage limiting text to 80 chars. Unlike A and
AA, the AAA level is more of a list of suggestions than a requirement.
Most other studies seem to indicate 70 is a good minimum but 100 is a
bit excessive.

"ch" units are broken on NetSurf, so I went with the closest "em"
approximation (since I already use "em" everywhere else).
2022-03-04 13:55:58 -08:00
Rohan Kumar
f8d4b6170d
Refactor stylesheet a bit
- More comments
- Remove redundancy; shaves off a few bytes
2022-02-28 15:05:14 -08:00
Rohan Kumar
4b79d96afe
remove <figure> margin, for narrow screens. 2022-02-28 14:18:21 -08:00
Rohan Kumar
14f2053fc1
Style: reduce horizontal scroll, element borders
All pages should now look good on screens 230px wide (DPR=1), inc. most
feature-phones running e.g. KaiOS.

Add borders to images so they look distinct from the surrounding page.
2022-02-26 17:18:44 -08:00
Rohan Kumar
29ae0f3115
Web practices: link underlines are good. 2022-02-24 23:00:49 -08:00
Rohan Kumar
815b7d7837
Fix: reflect recent changes in dark stylesheet 2022-02-24 17:56:17 -08:00
Rohan Kumar
acbaac71ea
CSS fixes
- Remove redundant selector
- surround preformatted text with a soft border even outside <p>.
2022-02-22 14:00:52 -08:00
Rohan Kumar
41d5ea1b4d
Optimize asset
New image optim pipeline spat this out.
2022-02-20 15:57:46 -08:00
Rohan Kumar
d8cb28d1db
Use navlinks to navigate previous posts in series
This requires making <nav> *not* display inline except for the
unstyled-list navlinks. This should also do a better job at appeasing
reader modes.

For the same reason, also make one link a citation
2022-02-14 17:24:40 -08:00
Rohan Kumar
3c2e4f40c4
Lighten bkg a bit more
Thanks to anonymous for feedback on contrast with astigmatism.
2021-10-04 12:30:43 -07:00
Rohan Kumar
636ecb3591
CSS: a11y: brighten bkg for astigmatic readers
Reduces the "halo" effect that comes with reading bright text on a solid
black background.
2021-08-30 15:08:59 -07:00
Rohan Kumar
678fda93da
Fix 512px favicon 2021-07-19 02:58:22 -07:00
Rohan Kumar
63f1708965
Clean up <head> a bit
- Remove reference to unused syntax.css
- Stop Apple's magic phone-number-linkification. If I need to link a
  telephone number I'll use a tel: URI, thank you very much.
2021-06-28 14:46:45 -07:00
Rohan Kumar
acad7a018f
CSS: respect browser default font size
Switch from pixels to %. Required some other changes to happen
2021-06-26 19:35:49 -07:00
Rohan Kumar
b224d003bb
Dark stylesheet improvement
- Replace css filter with a border
- Replacae "background" with "background-color" since "background" does
  a bunch of other things too.
2021-06-24 15:22:54 -07:00
Rohan Kumar
eee23d1574
Remove obsolete comment 2021-06-13 21:05:58 -07:00
Rohan Kumar
f61bbfe3d2
Update assets with precompressed versions
No need to re-compress the same file every CI job.
2021-06-13 17:25:59 -07:00
Rohan Kumar
be77c33081
Some more minification
- Use ect to shrink PNGs
- Use some CSS shorthands I didn't know about before.
2021-06-05 15:28:55 -07:00
Rohan Kumar
2abdb82cb3
CSS: Dark palette: switch to yellow links
The newish APCA contrast algorithm correctly reveals that blue-on-black
and purple-on-black links have lower perceptual contrast than
yellow-on-black links.

A Fediverse survey with 19 participants revealed that others tend to
prefer the older look over this one, but the number in favor was much
larger than I thought; it was a 3:2 split. I decided that on my poor
laptop screen facing sunlight with simulated color vision deficiencies,
the yellow links are indeed easier to read so I went with them.
2021-06-03 01:24:04 -07:00
Rohan Kumar
f9092d7694
CSS: improve dark-mode contrast
Improve link contrast in dark mode, using APCA contrast ratios.
2021-05-31 16:02:12 -07:00
Rohan Kumar
558b6844ca
Unbold home link
It says "Home". That's enough to know it navigates to the homepage.
Bolding it makes it look like it's the current page.
2021-05-06 11:33:05 -07:00
Rohan Kumar
7d405b7980
Simplify CSS, remove unneeded rules
It's even smaller now
2021-03-25 15:38:07 -07:00