1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-10 08:12:11 +00:00
Commit graph

41 commits

Author SHA1 Message Date
Rohan Kumar
068df74cff
Make prefers-contrast change contrast even more 2022-08-12 00:00:04 -07:00
Rohan Kumar
d42f304f71
Many style tweaks
- Fix unnecessarily excessive spacing around "li > article" entry data
  (was due to containment)
- Aesthetic tweak: ugly underline between microformat u-photo and p-name
- Make CSS file smaller by using some microformats2 classnames instead
  of microdata attributes.
2022-08-03 21:31:05 -07:00
Rohan Kumar
5affa6df0b
CSS: compact, preserve active color, size tweak
- Remove unnecessary elements from attribute selectors wherever it
  improves compression.
- Dark theme: prevent active link color from being overridden.
- Sort properties/attributes to improve compression ratios.
- Bump font size from 109% to 109.375% so the default font size hits
  17.5px and we get nice round numbers.
2022-08-01 21:24:53 -07:00
Rohan Kumar
05dbdb7748
Add CSS for <mark> elements.
Will be using them in a future post.
2022-06-28 08:52:07 -07:00
Rohan Kumar
69a49b5dc0
Add non-interactive space between form tap targets
Also fixes alignment on some browsers like IE.
2022-05-26 18:00:02 -07:00
Rohan Kumar
8158cb3cd9
Add site search (poweredy by SearchMySite)
Add a search bar to the site footer to search seirdy.one.
2022-05-26 17:06:56 -07:00
Rohan Kumar
972e025aa3
Dark palette: reduce excessively harsh contrast
Use excessively harsh colors in response to a "prefers-contrast: more"
media query, but otherwise use something a bit softer to accommodate
overstimulation.
2022-05-23 08:54:06 -07:00
Rohan Kumar
404d7d8561
Improve dark-mode contrast a bit
- Lighten dark background some more
- Replace the black superscript backgrounds with different foreground
  colors.
2022-05-23 08:42:24 -07:00
Rohan Kumar
a0644d74c3
Make webmentions a <dl>, don't translate code 2022-05-19 19:26:21 -07:00
Rohan Kumar
809fed4308
Accessible in-page heading anchors!
Bit the bullet and decided to make anchors that look great to
terminal/textual browsers, ARIA + screen reader combos, and a regular
browser.
2022-05-19 13:26:54 -07:00
Rohan Kumar
6d502d7c1f
Replace bold with color contrast for superscripts 2022-05-06 22:28:06 -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
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
0548f7d66c
Re-do dark stylesheet to avoid overstim
Use the updated weights for APCA.
2022-04-26 17:29:05 -07:00
Rohan Kumar
46a0e5127b
CSS: narrow-screen nested lists, border for <samp> 2022-04-25 22:11:18 -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
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
00da18b36e
Add skip link
Should now be full wcag AA with some AAA.
2022-04-14 22:15:54 -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
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
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
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
815b7d7837
Fix: reflect recent changes in dark stylesheet 2022-02-24 17:56:17 -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
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
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
Rohan Kumar
fc8d0caeea
Massively shrink uncompressed CSS assets 6 bytes
This is a good use of my time.
2021-02-12 13:43:30 -08:00
Rohan Kumar
bc667feec6
Fix: visible dark webring icon in Webkit
Dark mode now switches to a different icon instead of
inverting it. There's probably a better way but I'll figure that out
later.
2021-02-01 22:59:56 -08:00
Rohan Kumar
4e7a0c8bde
Link to Merveilles webring!
My site's first Webring. I plan to join a few others, and to create
three of my own.
2021-02-01 22:35:08 -08: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
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/dark.css (Browse further)