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

129 commits

Author SHA1 Message Date
Rohan Kumar
7d601a711f
Stop using the "contain" CSS property
More trouble than it's worth.
2022-05-15 17:39:22 -07:00
Rohan Kumar
3909228b19
CSS: fix focus indicators on legacy browsers. 2022-05-13 17:16:15 -07:00
Rohan Kumar
86143428f3
Better backlinks, streamline css
- Streamline CSS to reduce duplication
- Better backlink accessible names for endnotes with multiple backlinks

This required updating a false positive filter in my vnu jq filter.
2022-05-12 20:51:11 -07:00
Rohan Kumar
a9039e1bde
Adjust image transcript approach
- Use section instead of nested article
- Adjust stylesheets to match above markup changes
- Mention upcoming aria-details
2022-05-12 17:33:12 -07:00
Rohan Kumar
a96b77793b
More CSS containment, adopt shortcodes
- Adopt more shortcodes in older posts.
- Contain figures, excluding images. Slightly decreases paint times.
- Fix spacing issues for nested articles.
- Always enable vertical scrollbar, since pretty much all pages are
  taller than the viewport. Eliminates a layout shift.
- Moar microdata
- Set fixed updated dates for some posts so they don't get new
  date-updated values until I actually change the content significantly
2022-05-11 23:32:35 -07:00
Rohan Kumar
96666b671e
CSS fixes
- Fix nested list spacing
- Remove redundant padding rule
- Fix syntax error
- A couple simplifiations
2022-05-10 16:06:28 -07:00
Rohan Kumar
71dc86faf9
Fix non-interactive space section & impl
Improve non-interactive space on the homepage and use a better
screenshot to illustrate the concept.
2022-05-09 17:51:44 -07:00
Rohan Kumar
01c99e2b59
CSS: use absolute units for side margins
Side margins created to prevent mis-taps on scrollbars or swipe-backs
for going back should not scale with zoom; that would make reading while
 zoomed in impossible.
2022-05-07 22:22:11 -07:00
Rohan Kumar
6d502d7c1f
Replace bold with color contrast for superscripts 2022-05-06 22:28:06 -07:00
Rohan Kumar
3c82a16e0b
Fix extra section borders 2022-05-06 16:22:31 -07:00
Rohan Kumar
5f892f9233
Forgot to fix margin 2022-05-05 20:08:52 -07:00
Rohan Kumar
d97481f381
Homepage refactor
- Make webring links touch-friendly and accessible by using spaced-out
  details elements.
- Make details elements touch-friendly by indicating interactive region
  area and making summary padded.
- Sort featured posts by featured order.
- Ensure that at least one non-interactive tappable region exists on the
  screen at all times, 48x48 px.
2022-05-04 22:22:38 -07:00
Rohan Kumar
40cc095291
remove all pixel-perfect bs, tap target space
- atl 8px between tap targets across browsers
- use coarse em increments to remove all pixel-perfect bs.
2022-05-04 21:49:45 -07:00
Rohan Kumar
5f1b73362c
CSS: adjust to meet recommended tap-target size
Adjust margins/paddings to actually meet the 48px recommended
tap-target size.

Also get rid of the unstyled-list class. Now my stylesheet only uses a
single class; everything else is actually-semantic-markup.
2022-05-04 17:54:33 -07:00
Rohan Kumar
978b4b2b1a
Improve tap target + font size for WCAG AAA
Increased font size to decrease chars-per-line (SC 1.4.8) and increase
tap target size.

Pad the nav links more and add some extra space between them to meet SC
2.5.5.
2022-05-03 17:05:47 -07:00
Rohan Kumar
abc7b57e95
Improve print stylesheets
- Don't pad nav on print
- Link underlines in the TOC are not necessary in print
- Show home link on print
2022-05-02 15:42:57 -07:00
Rohan Kumar
c9a1958264
CSS: fix misaligned inline nav, simplify
Fixing the misaligned inline nav using "inline-block" also made it
obvious that I can simplify compound selectors. The max number of
compound selectors has dropped from 4 to 2. Update stylelint configs to
reflect this.

Also fix containment to reflect a prior change (webmentions are a
section, not a footer.)
2022-05-01 21:59:11 -07:00
Rohan Kumar
46471ea742
Improve tap target size on TOC 2022-05-01 21:24:17 -07:00
Rohan Kumar
321f851431
Remove responsive navbar
It's mobile-friendly as-is. I made sure that tap-targets were even
bigger and more spaced-apart, just to be safe.

Hide unnecessary nav-links in print mode.
2022-05-01 17:04:20 -07:00
Rohan Kumar
7bdd93d875
Increase tap-target size of nav links 2022-04-29 17:53:19 -07:00
Rohan Kumar
fa10af4051
Tweak a color 2022-04-27 08:52:14 -07:00
Rohan Kumar
8597e50a59
Stylesheet: better print theme, simpler dark theme
- Better print stylesheet, now with a file dedicated just for print
  style improvements.
- Hide extra stuff in print.
- Bring back navbar for print because it also tells users the current
  section and the site name.
- Dark theme: make superscripts bold instead of using a higher-contrast
  color.
2022-04-27 08:41:36 -07:00
Rohan Kumar
f964152072
Add SerenityOS screenshot
obv gotta show off that awesome retro desktop
2022-04-26 22:39:12 -07:00
Rohan Kumar
0548f7d66c
Re-do dark stylesheet to avoid overstim
Use the updated weights for APCA.
2022-04-26 17:29:05 -07:00
Rohan Kumar
e2bf884052
Apparently I don't know how "initial" works 2022-04-25 22:28:10 -07:00
Rohan Kumar
46a0e5127b
CSS: narrow-screen nested lists, border for <samp> 2022-04-25 22:11:18 -07:00
Rohan Kumar
5771a22943
CSS: various tweaks
- minimal print style
- trigger hyphens at a higher width threshold
- almost fully classless
2022-04-25 17:37:23 -07:00
Rohan Kumar
eb8ca07b9f
Goldmark 1.4.12, switch to good unminified output
- Goldmark 1.4.12 switches footnotes from a <section> to a <div>; update
  regexes and stylesheet to account for this.
- Goldmark 1.4.12 allows multiple footnotes with the same reference; use
  that.
- Clean up templates for unminified output. Also delete an unused class.
- Switch to unminified output by default.
2022-04-25 08:49:13 -07:00
Rohan Kumar
4e48237647
Prepare for goldmark v1.4.12
Goldmark v1.4.12 switched footnotes to a div. Make them a <section>
again, since I do insert a heading.
2022-04-24 12:35:07 -07:00
Rohan Kumar
8d22a26692
This dd/dt/dl distinction confused me ugh 2022-04-23 20:29:17 -07:00
Rohan Kumar
c609681824
Oops, that wasn't a typo. 2022-04-23 20:27:35 -07:00
Rohan Kumar
baa84af0c5
Remove skip link, typo.
The skip link is unnecessary on my site since landmarks and headings
both allow skipping repeated content.
2022-04-23 20:21:02 -07:00
Rohan Kumar
793c58eeb9
Improve link colors on gamma-adjusted screens
Existing link colors made it hard to distinguish between visited and
unvisted links on screens that had warmer color temperatures. Adjusted
the colors to make the distinction clear.

Unfortunately, that adjustment made superscript visited links (for
footnotes) fail the APCA, so I added a solid black background to
superscripts. Now they too should have good contrast.
2022-04-23 15:35:08 -07:00
Rohan Kumar
aefc6e4e26
Include h3 in TOC 2022-04-22 21:45:51 -07:00
Rohan Kumar
223fcd42c3
Lighten inks, inline footer nav on widescreen
- I felt dark-mode links were still a bit harsh, so I lightened them.
- Improved perceptual contrast of the purple visited links by making the
  background color slightly less blue.
- On widescreen, make footer links inline. They happen to be about the
  same width as the global nav, which makes this work well.
2022-04-22 08:53:11 -07:00
Rohan Kumar
901e52b442
CSS: corrective spacing, dark-theme coga
Yellow is a harsh color for people who deal with overstimulation; soften
it up a bit.
2022-04-21 22:31:38 -07:00
Rohan Kumar
83b4f32d0b
Emphasize current section in navbar
WCAG recommends telling visitors about their current place in a site's
hierarchy. All pages are exactly zero or one level below a section, so
simply emphasizing a member of the navigation links should be
sufficient.
2022-04-18 19:54:40 -07:00
Rohan Kumar
b5ebca64cd
Switch back to using a <hr>
The thematic break is appropriate here and having it announced by screen
readers actually helps.
2022-04-17 22:59:49 -07:00
Rohan Kumar
eda72198aa
CSS: embrace the default border color 2022-04-16 14:34:30 -07:00
Rohan Kumar
00da18b36e
Add skip link
Should now be full wcag AA with some AAA.
2022-04-14 22:15:54 -07:00
Rohan Kumar
98979f33de
Mention smartwatches with web browsers
Support extremely narrow viewports. Add some hyphens accordingly.
2022-04-13 18:42:52 -07:00
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
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
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
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
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
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
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
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
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
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
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
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
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
Rohan Kumar
fb797184b6
CSS: blockquotes, re-use unstyled-list class
- Make blockquotes look like blockquotes
- Make the nav links use the unstyled-list class to avoid re-writing
2021-01-29 12:01:58 -08:00
Rohan Kumar
a75c49d54a
CSS: back to old line height
Line height was too high before.
2021-01-28 11:00:47 -08:00
Rohan Kumar
cba57196ac
Remove un-needed/duplicate CSS rules
Lol why haven't I inlined my CSS yet it's like <800 bytes uncompressed
now.
2021-01-27 13:36:19 -08:00
Rohan Kumar
938428333e
Indieweb: statically display webmentions
Statically grab and include webmentions during Hugo builds, no JS
involved. Hugo supports making web requests and parsing the resulting
JSON, so there was no need to use an external program either.
2021-01-17 20:11:40 -08:00
Rohan Kumar
950918b104
Remove themes/, move its contents to repo root
I've modified etch-custom so much that it doesn't need to be its own
theme anymore.
2021-01-17 17:22:22 -08:00
Renamed from themes/etch-custom/assets/css/main.css (Browse further)