mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-30 15:22:09 +00:00
Compare commits
No commits in common. "aa79edeb21dc2fb851b89ca6ceb4f707264b1d2b" and "7c835a14e42247f633ba627696cf3750f9b0f6a8" have entirely different histories.
aa79edeb21
...
7c835a14e4
7 changed files with 43 additions and 44 deletions
|
|
@ -2,17 +2,16 @@
|
|||
* touch-friendly layout.
|
||||
* Nothing here exists purely for aesthetics; everything addresses a
|
||||
* specific a11y, compatibility, or critical
|
||||
* usability need.
|
||||
* usability need. The only exception is the h1's top margin.
|
||||
*
|
||||
* Two exceptions: I re-set the input styles so Safari wouldn't make
|
||||
* them pill-shaped, and I tweaked some margins to make some things
|
||||
* evenly aligned.
|
||||
* One exception: I re-set the input styles so Safari wouldn't make them
|
||||
* pill-shaped.
|
||||
*
|
||||
* I also don't use any classes except to optimize embedded content.
|
||||
* (e.g. to specify that an image should have pixelated rendering or be
|
||||
* inverted in dark mode). One exception: a class for narrow width body
|
||||
* text. My HTML contains microformats2 classnames for IndieWeb parsers,
|
||||
* but I don't actually use those for styling.
|
||||
* I also don't use any classes except for image presentation. (e.g. to
|
||||
* specify that an image should have pixelated rendering or be inverted
|
||||
* in dark mode). One exception: a class for narrow width body text.
|
||||
* My HTML contains microformats2 classnames for IndieWeb parsers, but I
|
||||
* don't actually use those for styling.
|
||||
*
|
||||
* To keep myself from caring about minute details, I limited myself to
|
||||
* only defining spacing in increments of .25em. Pixels are 1px or
|
||||
|
|
@ -78,7 +77,7 @@ html {
|
|||
* containing lists of interactives, with 8px in between.
|
||||
* Don't use relative units here; this margin shouldn't scale with
|
||||
* zoom, or else text will get narrower with zoom. */
|
||||
padding: 0 16px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
/* 45em is too wide for long body text.
|
||||
|
|
@ -90,18 +89,6 @@ html {
|
|||
max-width: 35em;
|
||||
}
|
||||
|
||||
/* Enable containment, especially useful for achive pages with
|
||||
* long lists of content. */
|
||||
body > :not(main),
|
||||
main > :not(article),
|
||||
article > * {
|
||||
contain: content;
|
||||
/* Add padding on both sides so that focus outlines don't escape their
|
||||
* containers. This will let us enable CSS containment without
|
||||
* clipping overflowing elements. */
|
||||
padding: 0 .5em;
|
||||
}
|
||||
|
||||
summary {
|
||||
/* It's not obvious that a <summary> has button semantics.
|
||||
* "cursor: pointer" is used on MDN, web.dev, GitHub, gov.uk, and
|
||||
|
|
@ -150,13 +137,17 @@ html {
|
|||
margin: .75em 0;
|
||||
}
|
||||
|
||||
dt > a {
|
||||
margin: -.75em 0 -.75em -.25em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* <dt> should not be closer to the previous <dd> than the following <dd>.
|
||||
* That can happen in webmentions. */
|
||||
dd {
|
||||
padding-bottom: .25em;
|
||||
}
|
||||
|
||||
dt > a,
|
||||
aside > a {
|
||||
margin: -.75em -.25em;
|
||||
}
|
||||
|
|
@ -164,8 +155,7 @@ html {
|
|||
a[href="#h1"], /* skip link */
|
||||
div[itemprop="comment"] dd > a ,
|
||||
footer > nav,
|
||||
/* List items with direct hyperlink children should only have one
|
||||
* hyperlink. */
|
||||
/* List items with direct hyperlink children should only have one hyperlink. */
|
||||
li > a,
|
||||
aside > a,
|
||||
nav ol a {
|
||||
|
|
@ -173,8 +163,7 @@ html {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
/* The nav has to be distant-enough from the top to make room for a
|
||||
* skip-link. */
|
||||
/* The nav has to be distant-enough from the top to make room for a skip-link. */
|
||||
header > nav {
|
||||
margin: .75em 0 0 -.25em;
|
||||
display: block;
|
||||
|
|
@ -338,15 +327,15 @@ samp {
|
|||
/* Some browsers don't support the hidden attr.
|
||||
* I use hidden spans in backlinks to provide ARIA labels.
|
||||
* Some ancient browsers don't support input[type="hidden"] */
|
||||
[hidden],
|
||||
span[hidden],
|
||||
input[type="hidden"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Remove list style from data feeds. */
|
||||
[itemtype="https://schema.org/DataFeed"] > ol {
|
||||
list-style-type: none;
|
||||
main[itemtype="https://schema.org/DataFeed"] > ol {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
/* Narrow screens: long words can cause content to flow out of the
|
||||
|
|
@ -362,7 +351,6 @@ span[itemtype="https://schema.org/Person"] {
|
|||
|
||||
/* Narrow screens: allow horizontal scroll in a pre block. */
|
||||
pre {
|
||||
contain: content;
|
||||
overflow: auto;
|
||||
padding: .5em;
|
||||
}
|
||||
|
|
@ -402,7 +390,6 @@ div[itemprop="articleBody"] img {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Stretch out audio elements so the progress meter is easier to use. */
|
||||
audio {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -428,8 +415,8 @@ form > div {
|
|||
|
||||
input {
|
||||
/* Browsers like Safari make the submit button pill-shaped which
|
||||
* clashes with the input box. One of the only purely-cosmetic changes
|
||||
* on this site. */
|
||||
* clashes with the input box. The only purely-cosmetic change on this
|
||||
* site. */
|
||||
appearance: none;
|
||||
|
||||
/* Don't shrink the size of the text in forms or make it system-ui. */
|
||||
|
|
@ -479,6 +466,11 @@ form :focus {
|
|||
}
|
||||
|
||||
/* Todo:
|
||||
* - Some browsers don't scale SVGs properly; the img container
|
||||
* dimensions crop the image rather than scale it. Investigate
|
||||
* if this only applies to Internet Explorer or if it applies to
|
||||
* other uncommon browsers too. If any non-IE browsers do this and/or
|
||||
* if the spec allows this behavior, try to correct it here.
|
||||
* - Wait till Webkit fixes its broken-ass default dark stylesheet
|
||||
* then consider trimming the dark stylesheet I provide.
|
||||
* */
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 976 B After Width: | Height: | Size: 1,003 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1,017 B After Width: | Height: | Size: 1,004 B |
|
|
@ -71,7 +71,7 @@ The website is built on well structured, semantic, [polygot XHTML5](https://www.
|
|||
|
||||
This site sticks to Web standards. I regularly run a local build of [the Nu HTML Checker](https://github.com/validator/validator), `xmllint`, and [html proofer](https://github.com/gjtorikian/html-proofer) on every page in my sitemap, and see no errors. I do [filter out false Nu positives](https://git.sr.ht/~seirdy/seirdy.one/tree/master/item/linter-configs/vnu_filter.jq) and report them upstream when I can.
|
||||
|
||||
I also perform cross-browser testing for both HTML and XHTML versions of my pages. I test with, but do not necessarily endorse, a large variety of browsers:
|
||||
I also perform cross-browser testing for both HTML and XHTML versions of my pages:
|
||||
|
||||
- I maintain excellent compatibility with **mainstream engines:** Blink (Chromium and Edge), WebKit (Safari, Epiphany), and Gecko (Firefox). The hidden service also works well with the Tor Browser.
|
||||
|
||||
|
|
@ -79,7 +79,7 @@ I also perform cross-browser testing for both HTML and XHTML versions of my page
|
|||
|
||||
- I also regularly test compatibility with **current alternative engines:** the SerenityOS browser, Servo, NetSurf, Dillo, Kristall, and Goanna (Pale Moon's Gecko fork). I have excellent compatibility with Goanna and Servo. The site is usable in NetSurf, Dillo, and the SerenityOS browser; the always-expanded `<details>` elements might look odd. [The SerenityOS browser doesn't support ECDSA certificates](https://github.com/SerenityOS/serenity/issues/14160), but the Tildeverse mirror works fine. It also has some issues displaying my SVG avatar; it does not attempt to use the PNG fallback.
|
||||
|
||||
- I occasionally test **abandoned engines,** sometimes with a TLS-terminating proxy if necessary. These engines include Tkhtml, KHTML, Internet Explorer (with and without compatibility mode), Netscape Navigator, Opera Presto,[^1] and outdated versions of current browsers. The aforementioned issue with `<details>` applies to all of these choices. I use Linux, but testing in browsers like Internet Explorer depends on my access to a Windows machine.
|
||||
- I occasionally test **abandoned engines,** sometimes with a TLS-terminating proxy if necessary. These engines include Tkhtml, KHTML, Internet Explorer (with and without compatibility mode), Netscape Navigator, and outdated versions of current browsers. The aforementioned issue with `<details>` applies to all of these choices. I use Linux, but testing in browsers like Internet Explorer depends on my access to a Windows machine.
|
||||
|
||||
Some engines I have not yet tested, but hope to try in the future:
|
||||
|
||||
|
|
@ -87,7 +87,6 @@ Some engines I have not yet tested, but hope to try in the future:
|
|||
- [Kozmonaut](https://github.com/twilco/kosmonaut)
|
||||
- [Moon](https://github.com/ZeroX-DG/moon)
|
||||
- [hastur](https://github.com/robinlinden/hastur)
|
||||
- [Flow Browser](https://www.ekioh.com/flow-browser/)
|
||||
|
||||
Machine-friendliness
|
||||
--------------------
|
||||
|
|
@ -164,7 +163,3 @@ Privacy
|
|||
|
||||
This site is **privacy-respecting.** Its CSP blocks all scripts, third-party content, and other problematic features. I describe how I go out of my way to reduce the information you can transmit on this site in [my privacy policy](../privacy/).
|
||||
|
||||
|
||||
[^1]: Opera Presto isn't really abandoned. Opera Mini's "Extreme" mode still uses a server-side Presto rendering engine; see {{<mention-work itemprop="citation" role="doc-credit" itemtype="Article">}}{{<cited-work name="Opera Browsers, Modes & Engines" url="https://dev.opera.com/articles/browsers-modes-engines/" extraName="headline">}}{{</mention-work>}}. That being said, I do test with the outdated desktop Presto engine in a sandboxed environment.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
<a rel="alternate" href="http://wgq3bd2kqoybhstp77i3wrzbfnsyd27wt34psaja4grqiezqircorkyd.onion/">Tor mirror</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ site.BaseURL }}meta/privacy/">Privacy</a>
|
||||
<a href="{{ site.BaseURL }}privacy/">Privacy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ site.BaseURL }}about/#location-seirdy-online">Contact</a>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
{{- if and (eq .Level 2) (.Page.Section) (ne .Page.Section "notes") -}}
|
||||
<!--crimes-->
|
||||
<aside role="none"><a
|
||||
href="#{{ .Anchor | safeURL }}"
|
||||
id="{{ .Anchor | safeURL }}-anchor" href="#{{ .Anchor | safeURL }}"
|
||||
aria-labelledby="{{ .Anchor | safeURL }}-prefix {{ .Anchor | safeURL }}">
|
||||
<span id="{{ .Anchor | safeURL }}-prefix">Permalink to section</span>
|
||||
</a></aside>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,19 @@
|
|||
)
|
||||
or
|
||||
( # the search page has raw templates, let those slide. I validate the final dynamic search page manually.
|
||||
.url | test ("/search/index.")
|
||||
(.url | test ("/search/index."))
|
||||
and (
|
||||
(.message == "Text not allowed in element “ol” in this context.")
|
||||
or
|
||||
(.message == "Bad value “{{ .URL }}” for attribute “href” on element “a”: Illegal character in path segment: “{” is not allowed.")
|
||||
or
|
||||
(.message == "Bad value “{{ .URL }}” for attribute “cite” on element “q”: Illegal character in path segment: “{” is not allowed.")
|
||||
)
|
||||
and (
|
||||
(.extract | test("{{"))
|
||||
or
|
||||
(.extract | test("}}"))
|
||||
)
|
||||
)
|
||||
) | not
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in a new issue