mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-10 00:12:09 +00:00
Compare commits
4 commits
1823cb57b7
...
8ba79ba769
Author | SHA1 | Date | |
---|---|---|---|
|
8ba79ba769 | ||
|
549c6f4c87 | ||
|
1d4797753f | ||
|
1d44b76dc1 |
4 changed files with 58 additions and 15 deletions
|
@ -1,7 +1,7 @@
|
||||||
/* CSS that adds the bare minimum for a simple, accessible,
|
/* CSS that adds the bare minimum for a simple, accessible,
|
||||||
* touch-friendly layout.
|
* touch-friendly layout compatible with as many UAs as possible.
|
||||||
* Nothing here exists purely for cosmetics; everything addresses a
|
* Nothing here exists purely for cosmetics; everything addresses a
|
||||||
* specific a11y, compatibility, or critical
|
* specific accessibility, compatibility, or critical
|
||||||
* usability need.
|
* usability need.
|
||||||
*
|
*
|
||||||
* Three exceptions:
|
* Three exceptions:
|
||||||
|
@ -36,9 +36,9 @@
|
||||||
* years.
|
* years.
|
||||||
*
|
*
|
||||||
* To keep myself from caring about minute details, I limited myself to
|
* To keep myself from caring about minute details, I limited myself to
|
||||||
* only defining spacing in increments of .25em. Pixels are 1px or
|
* only defining spacing in increments of .25em. Pixels are multiples of
|
||||||
* multiples of 3px. This also improves compression. No more "finding
|
* 3px. This also improves compression.
|
||||||
* the perfect value".
|
* No more "finding the perfect value".
|
||||||
*
|
*
|
||||||
* I cite WCAG 2.2 success criteria with "SC". I also tried to meet
|
* I cite WCAG 2.2 success criteria with "SC". I also tried to meet
|
||||||
* the Google a11y requirement of 48px tap targets separated by atl
|
* the Google a11y requirement of 48px tap targets separated by atl
|
||||||
|
@ -449,7 +449,10 @@ h1 {
|
||||||
body {
|
body {
|
||||||
-webkit-hyphens: auto;
|
-webkit-hyphens: auto;
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
padding: 0 8px;
|
/* Use an absolute unit for side margins so they don't increase with zoom.
|
||||||
|
* I computed this based on the thickness I saw in scrollbars and
|
||||||
|
* bezels on some watches. */
|
||||||
|
padding: 0 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
li > a,
|
li > a,
|
||||||
|
@ -564,20 +567,51 @@ img,
|
||||||
mark, /* borders provide a distinguishing factor besides color */
|
mark, /* borders provide a distinguishing factor besides color */
|
||||||
pre,
|
pre,
|
||||||
summary {
|
summary {
|
||||||
border: 1px solid;
|
border: thin solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Putting a border around <details> makes summaries and
|
||||||
|
* the toggled details linked together as a sort of non-semantic
|
||||||
|
* section. I did this because in some situations (such as print layouts
|
||||||
|
* or PDF generators), <summary> receives no styling; it looks like
|
||||||
|
* ordinary text! There's no indication that it represents a toggle. Of
|
||||||
|
* course, you can't actually toggle things on a printed page, so I
|
||||||
|
* understand why they had to do this. Still, I think it's necessary to
|
||||||
|
* provide an indicator that you're looking at a section that was
|
||||||
|
* toggled somehow. Assistive technologies expose the button semantics
|
||||||
|
* of the <summary> and read its contents (which on seirdy.one start
|
||||||
|
* with the word "toggle"; interactive mouse/keyboard users can click it
|
||||||
|
* and see the list-style-type; print users should also have some
|
||||||
|
* indication.
|
||||||
|
*
|
||||||
|
* We still have more work to do, though. The contents of <details> are
|
||||||
|
* smooshed up against the border, so introduce some padding. This
|
||||||
|
* padding should apply to all top-level children of `details` *except*
|
||||||
|
* the `summary`, since we don't want a double-border.
|
||||||
|
*
|
||||||
|
* By applying this padding, we also happen to ensure that `details`
|
||||||
|
* children never protrude outside the `details` container. We can then
|
||||||
|
* apply some CSS containment for free without consequences. */
|
||||||
|
|
||||||
/* A black border is too harsh; the extra visual noise is distracting
|
/* A black border is too harsh; the extra visual noise is distracting
|
||||||
* to users with eye-tracking or ADHD. Only special items like headings
|
* to users with eye-tracking or ADHD. Only special items like headings
|
||||||
* should draw gaze. */
|
* should draw gaze.
|
||||||
|
*
|
||||||
|
* We also need padding around inline code snippets so the border
|
||||||
|
* doesn't touch the letters and screw up readability. */
|
||||||
|
details,
|
||||||
:not(pre) > code,
|
:not(pre) > code,
|
||||||
:not(pre) > samp {
|
:not(pre) > samp {
|
||||||
border: 1px solid #999;
|
border: thin solid #999;
|
||||||
|
|
||||||
/* borders shouldn't touch text */
|
/* borders shouldn't touch text */
|
||||||
padding: 0 .25em;
|
padding: 0 .25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
margin: 0 -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
/* center standalone images; same justification as
|
/* center standalone images; same justification as
|
||||||
* for centering the body contents. Also makes images easier to see
|
* for centering the body contents. Also makes images easier to see
|
||||||
* for people holding a device with one hand. */
|
* for people holding a device with one hand. */
|
||||||
|
@ -675,4 +709,7 @@ form :focus {
|
||||||
/* Todo:
|
/* Todo:
|
||||||
* - Wait till Webkit fixes its broken-ass default dark stylesheet
|
* - Wait till Webkit fixes its broken-ass default dark stylesheet
|
||||||
* then consider trimming the dark stylesheet I provide.
|
* then consider trimming the dark stylesheet I provide.
|
||||||
|
* (UPDATE: they did! now I'll wait maybe three years for it to roll
|
||||||
|
* out as much as possible before removing my dark styles or
|
||||||
|
* relegating them to an optional stylesheet.)
|
||||||
* */
|
* */
|
||||||
|
|
BIN
assets/p/b/lain.png
Normal file
BIN
assets/p/b/lain.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.3 KiB |
|
@ -99,7 +99,7 @@ Sites that link back to me:
|
||||||
<a href="https://daudix.codeberg.page/about/">{{<picture name="b/daudix" alt="Daudix." width="162" height="62" class="pix">}}</a>
|
<a href="https://daudix.codeberg.page/about/">{{<picture name="b/daudix" alt="Daudix." width="162" height="62" class="pix">}}</a>
|
||||||
<a href="https://dj-chase.com/">{{<picture name="b/dj-chase" alt="DJ Chase." width="162" height="62" class="pix">}}</a>
|
<a href="https://dj-chase.com/">{{<picture name="b/dj-chase" alt="DJ Chase." width="162" height="62" class="pix">}}</a>
|
||||||
|
|
||||||
### Other
|
### Other cool sites
|
||||||
|
|
||||||
<a href="https://keithhacks.cyou/">{{<picture name="b/keith" alt="the word “keith” after a tilde and a bone, with a rainbow border." width="162" height="62" class="pix">}}</a>
|
<a href="https://keithhacks.cyou/">{{<picture name="b/keith" alt="the word “keith” after a tilde and a bone, with a rainbow border." width="162" height="62" class="pix">}}</a>
|
||||||
<a href="https://astrid.tech/">{{<picture name="b/astriddottech" alt="astrid dot tech in glitchy distorted letters." width="162" height="62" class="pix">}}</a>
|
<a href="https://astrid.tech/">{{<picture name="b/astriddottech" alt="astrid dot tech in glitchy distorted letters." width="162" height="62" class="pix">}}</a>
|
||||||
|
@ -115,5 +115,6 @@ The Yesterweb is winding down its social activity after admin burnout, but it re
|
||||||
|
|
||||||
## Other
|
## Other
|
||||||
|
|
||||||
|
{{<picture name="b/lain" alt="Close-up of Lain Iwakura’s eyes with a static filter." width="162" height="62" class="pix">}}
|
||||||
{{<picture name="b/graphicdesign" alt="The words “graphic design is my passion” next to a bad drawing of a frog. Sarcasm implied." width="162" height="62" class="pix">}}
|
{{<picture name="b/graphicdesign" alt="The words “graphic design is my passion” next to a bad drawing of a frog. Sarcasm implied." width="162" height="62" class="pix">}}
|
||||||
{{<picture name="b/ilovehorror" alt="I heart horror." width="162" height="62" class="pix">}}
|
{{<picture name="b/ilovehorror" alt="I heart horror." width="162" height="62" class="pix">}}
|
||||||
|
|
|
@ -100,7 +100,7 @@ Mainstream engine forks
|
||||||
: Pale Moon and recent versions of K-Meleon use Goanna, a single-process fork of Firefox's Gecko engine. Ultralight is a proprietary, source-available fork of WebKit focused on lightweight embedded webviews. My site works in these engines without any noticeable issues.
|
: Pale Moon and recent versions of K-Meleon use Goanna, a single-process fork of Firefox's Gecko engine. Ultralight is a proprietary, source-available fork of WebKit focused on lightweight embedded webviews. My site works in these engines without any noticeable issues.
|
||||||
|
|
||||||
Alternative engines
|
Alternative engines
|
||||||
: I test compatibility with current alternative engines: the SerenityOS browser, Servo, NetSurf, Kristall, and litehtml. I have excellent compatibility with litehtml and Servo. The site is usable in NetSurf, and the SerenityOS browser. Servo is the only engine in this category with support for `<details>`. ~~[The SerenityOS browser lacks ECDSA certificate support](https://github.com/SerenityOS/serenity/issues/14160), but the Tildeverse mirror works fine.~~ <ins itemprop="correction" itemscope="" itemtype="https://schema.org/CorrectionComment" cite="https://github.com/SerenityOS/serenity/commit/f9386737a631b5f3b7eb1920bd4440a2784359e9">Update <time itemprop="datePublished">2024-01-30</time>: <span itemprop="text">[SerenityOS LibTLS merged support for these ciphers in October 2023](https://github.com/SerenityOS/serenity/commit/f9386737a631b5f3b7eb1920bd4440a2784359e9), resolving this incompatibility</span></ins>. The SerenityOS browser also has issues displaying my inline SVG avatar.
|
: I test compatibility with current alternative engines: Ladybird (the SerenityOS browser), Servo, NetSurf, Kristall, and litehtml. I have excellent compatibility with litehtml, Ladybird, and Servo. The site is usable in NetSurf. litehtml and NetSurf do not support `<details>`, but remain usable. ~~[The SerenityOS browser lacks ECDSA certificate support](https://github.com/SerenityOS/serenity/issues/14160), but the Tildeverse mirror works fine.~~ <ins itemprop="correction" itemscope="" itemtype="https://schema.org/CorrectionComment" cite="https://github.com/SerenityOS/serenity/commit/f9386737a631b5f3b7eb1920bd4440a2784359e9">Update <time itemprop="datePublished">2024-01-30</time>: <span itemprop="text">[SerenityOS LibTLS merged support for these ciphers in October 2023](https://github.com/SerenityOS/serenity/commit/f9386737a631b5f3b7eb1920bd4440a2784359e9), resolving this incompatibility</span></ins>.
|
||||||
|
|
||||||
Textual browsers
|
Textual browsers
|
||||||
: The site works well with textual browsers. All features except `<details>` work in Lynx and Links2. I include [felinks (an ELinks fork)](https://github.com/rkd77/elinks), edbrowse, and w3m in my tests. [w3m doesn't support soft hyphens](https://bugs.debian.org/cgi-bin/bugreport.cgi?bug=830173), but the site is still otherwise usable in it. I support these engines by making CSS a strictly-optional progressive enhancement and by using semantic markup. I test with Edbrowse less often. No textual browser supports `<details>`.
|
: The site works well with textual browsers. All features except `<details>` work in Lynx and Links2. I include [felinks (an ELinks fork)](https://github.com/rkd77/elinks), edbrowse, and w3m in my tests. [w3m doesn't support soft hyphens](https://bugs.debian.org/cgi-bin/bugreport.cgi?bug=830173), but the site is still otherwise usable in it. I support these engines by making CSS a strictly-optional progressive enhancement and by using semantic markup. I test with Edbrowse less often. No textual browser supports `<details>`.
|
||||||
|
@ -108,21 +108,26 @@ Textual browsers
|
||||||
Abandoned engines
|
Abandoned engines
|
||||||
: I occasionally test abandoned engines, sometimes with a TLS-terminating proxy if necessary. These engines include Tkhtml, KHTML, Dillo,[^1] Internet Explorer[^2] (with and without compatibility mode), Netscape Navigator, old Presto-based Opera versions,[^3] and outdated versions of current browsers. No abandoned engine supports `<details>`. I use Linux, but testing in Internet Explorer depends on my access to a Windows machine. Besides the `<details>` issues, the site works well in Internet Explorer 11 and Opera Presto. The site has layout issues but remains usable in Tkhtml, KHTML, and Netscape.
|
: I occasionally test abandoned engines, sometimes with a TLS-terminating proxy if necessary. These engines include Tkhtml, KHTML, Dillo,[^1] Internet Explorer[^2] (with and without compatibility mode), Netscape Navigator, old Presto-based Opera versions,[^3] and outdated versions of current browsers. No abandoned engine supports `<details>`. I use Linux, but testing in Internet Explorer depends on my access to a Windows machine. Besides the `<details>` issues, the site works well in Internet Explorer 11 and Opera Presto. The site has layout issues but remains usable in Tkhtml, KHTML, and Netscape.
|
||||||
|
|
||||||
|
Others
|
||||||
|
: WeasyPrint uses a custom browser engine optimized for print. I test a small selection of representative pages with it. Should I ever stumble across a VR headset, I'll be sure to test Wolvic too.
|
||||||
|
|
||||||
I support compatibility to the following degrees:
|
I support compatibility to the following degrees:
|
||||||
|
|
||||||
- Works without major issues in mainstream engines, the Tor browser, Goanna, and Ultralight.
|
- Works without major issues in mainstream engines, the Tor browser's "Safest" mode (assuming use of the Onion service which does not use SVGs), Ladybird, Goanna, Ultralight, and WeasyPrint.[^0]
|
||||||
- Fully operable in textual browsers, litehtml, and NetSurf. Some issues (e.g. missing `<details>`) might make the experience unpleasant, but all major functions work.
|
- Fully operable in textual browsers, litehtml, and NetSurf. Some issues (e.g. missing `<details>`) might make the experience unpleasant, but all major functions work.
|
||||||
- Basic features in abandoned engines, Dillo, the SerenityOS browser. Some ancillary features may not work (e.g. forms for Webmentions and search), but users can browse and read.
|
- Basic features in abandoned engines and Dillo. Some ancillary features may not work (e.g. forms for Webmentions and search), but users can browse and read.
|
||||||
|
|
||||||
|
[^0]: WeasyPrint doesn't support `details`, but I don't fully count this against my site's support for its engine because WeasyPrint targets non-interactive print media. Instead, I just ensure that the site makes sense in WeasyPrint without special `details` styling. Since my stylesheets define a border around `summary` and `details` elements, and since I they always start with the word "toggle", they mostly make sense even when not rendered with special builtin styles.
|
||||||
|
|
||||||
Some engines I have not yet tested, but hope to try in the future:
|
Some engines I have not yet tested, but hope to try in the future:
|
||||||
|
|
||||||
- [Flow Browser](https://www.ekioh.com/flow-browser/)
|
- [Flow Browser](https://www.ekioh.com/flow-browser/)
|
||||||
- [gngr](https://gngr.info/)
|
- [gngr](https://gngr.info/)
|
||||||
- [WeasyPrint](https://weasyprint.org/)
|
|
||||||
- [Netzhaut](https://web.archive.org/web/20230405031300/http://netzhaut.dev/)
|
- [Netzhaut](https://web.archive.org/web/20230405031300/http://netzhaut.dev/)
|
||||||
- [Kozmonaut](https://github.com/twilco/kosmonaut)
|
- [Kozmonaut](https://github.com/twilco/kosmonaut)
|
||||||
- [Moon](https://github.com/ZeroX-DG/moon)
|
- [Moon](https://github.com/ZeroX-DG/moon)
|
||||||
- [hastur](https://github.com/robinlinden/hastur)
|
- [hastur](https://github.com/robinlinden/hastur)
|
||||||
|
- [Wolvic](https://wolvic.org/en/)
|
||||||
|
|
||||||
## Machine-friendliness
|
## Machine-friendliness
|
||||||
|
|
||||||
|
@ -224,7 +229,7 @@ I'm not opposed to these features, but I probably won't implement support for th
|
||||||
This site is **privacy-respecting.** Its <abbr title="Content Security Policy">CSP</abbr> blocks all scripts, third-parties, and other problematic features. For details on this site's privacy, [read the privacy policy](../privacy/).
|
This site is **privacy-respecting.** Its <abbr title="Content Security Policy">CSP</abbr> blocks all scripts, third-parties, and other problematic features. For details on this site's privacy, [read the privacy policy](../privacy/).
|
||||||
|
|
||||||
|
|
||||||
[^1]: Although no official announcement of Dillo's demise exists, the browser's development halted years ago. The Dillo website's domain name expired, so [I mirrored the Dillo repository]({{<relref "/notes/dillo-repository-mirror.md">}}).
|
[^1]: Although no official announcement of Dillo's demise exists, the browser's development halted years ago. The Dillo website's domain name expired, so [I mirrored the Dillo repository]({{<relref "/notes/dillo-repository-mirror.md">}}). The project has since been picked up by a different team that does not use the original Dillo domain, and [Dillo work continues on GitHub](https://dillo-browser.github.io/).
|
||||||
|
|
||||||
[^2]: [Internet Explorer's engine isn't abandoned]({{<relref "internet-explorer-is-almost-gone.md">}}). Microsoft discontinued the consumer version, but supports the browser for enterprise users. I used to have access to the latter; I now test with "Internet Explorer Mode" in Edge when I can access a Windows machine.
|
[^2]: [Internet Explorer's engine isn't abandoned]({{<relref "internet-explorer-is-almost-gone.md">}}). Microsoft discontinued the consumer version, but supports the browser for enterprise users. I used to have access to the latter; I now test with "Internet Explorer Mode" in Edge when I can access a Windows machine.
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue