mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-10 00:12:09 +00:00
Compare commits
6 commits
fc8eb8d7a6
...
5c70d4d836
| Author | SHA1 | Date | |
|---|---|---|---|
|
5c70d4d836 | ||
|
|
dc1717b693 | ||
|
|
f4fe706cab | ||
|
|
385ea60c55 | ||
|
|
7716ffb06c | ||
|
|
5affa6df0b |
10 changed files with 153 additions and 119 deletions
1
assets/atom.svg
Normal file
1
assets/atom.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg height="72" width="144" viewBox="0 0 144 72" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h144v72H0z"/><path d="M60.51 50.71c-.72 0-1.42-.11-2.1-.33-.69-.21-1.28-.57-1.78-1.07-.51-.51-.87-1.1-1.08-1.78-.22-.69-.33-1.39-.33-2.11s.11-1.42.33-2.1c.21-.69.57-1.28 1.08-1.78.5-.51 1.09-.87 1.78-1.08.68-.22 1.38-.32 2.1-.32s1.42.1 2.1.32c.69.21 1.28.57 1.78 1.08.51.5.87 1.09 1.08 1.78.22.68.33 1.38.33 2.1s-.11 1.42-.33 2.11c-.21.68-.57 1.27-1.08 1.78-.5.5-1.09.86-1.78 1.07-.68.22-1.38.33-2.1.33zm0-18.88c-.72 0-1.42-.11-2.1-.33-.69-.21-1.28-.57-1.78-1.07-.51-.51-.87-1.1-1.08-1.78-.22-.69-.33-1.39-.33-2.11s.11-1.42.33-2.1c.21-.68.57-1.28 1.08-1.78.5-.51 1.09-.86 1.78-1.08.68-.22 1.38-.32 2.1-.32s1.42.1 2.1.32c.69.22 1.28.57 1.78 1.08.51.5.87 1.1 1.08 1.78.22.68.33 1.38.33 2.1s-.11 1.42-.33 2.11c-.21.68-.57 1.27-1.08 1.78-.5.5-1.09.86-1.78 1.07-.68.22-1.38.33-2.1.33zm21.52 29.5-4.01-3.12c2.12-2.52 3.64-5.04 4.53-7.56-.82-.1-1.59-.4-2.29-.89-.7-.48-1.2-1.12-1.51-1.91-.3-.79-.46-1.6-.46-2.43 0-.72.11-1.42.33-2.1.21-.69.57-1.28 1.08-1.78.5-.51 1.09-.87 1.78-1.08.68-.22 1.38-.32 2.1-.32s1.42.1 2.1.32c.69.21 1.28.57 1.78 1.08.51.5.87 1.09 1.08 1.78.22.68.33 1.38.33 2.1v.27c-.08 5.22-2.32 10.43-6.75 15.64zm1.46-29.5c-.72 0-1.42-.11-2.1-.33-.69-.21-1.28-.57-1.78-1.07-.51-.51-.87-1.1-1.08-1.78-.22-.69-.33-1.39-.33-2.11s.11-1.42.33-2.1c.21-.68.57-1.28 1.08-1.78.5-.51 1.09-.86 1.78-1.08.68-.22 1.38-.32 2.1-.32s1.42.1 2.1.32c.69.22 1.28.57 1.78 1.08.51.5.87 1.1 1.08 1.78.22.68.33 1.38.33 2.1s-.11 1.42-.33 2.11c-.21.68-.57 1.27-1.08 1.78-.5.5-1.09.86-1.78 1.07-.68.22-1.38.33-2.1.33z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -28,14 +28,11 @@
|
|||
color: #eee7b2;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: #b93;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #ffdaff;
|
||||
}
|
||||
|
||||
/* For users who request less contrast, target ACPA Lc of -85 to -86 */
|
||||
@media (prefers-contrast: less) {
|
||||
html {
|
||||
background-color: #333;
|
||||
|
|
@ -44,20 +41,33 @@
|
|||
|
||||
/* Small text needs higher contrast. */
|
||||
@media not (prefers-contrast: less) {
|
||||
sup a:link {
|
||||
sup a:link:not(:active) {
|
||||
color: #feb;
|
||||
}
|
||||
|
||||
sup a:visited {
|
||||
color: #ffe5ff;
|
||||
sup a:visited:not(:active) {
|
||||
color: #ffe6ff;
|
||||
}
|
||||
}
|
||||
|
||||
/* For users who request more contrast, target ACPA Lc near -96 */
|
||||
@media (prefers-contrast: more) {
|
||||
html {
|
||||
background-color: #111;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #feb;
|
||||
}
|
||||
a:visited {
|
||||
color: #ffe6ff;
|
||||
}
|
||||
}
|
||||
|
||||
/* Specified last so it overrides :visited. I chose this color because
|
||||
* it's dimmer, so it's noticeable even without color vision. */
|
||||
a:active {
|
||||
color: #f83;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,24 @@
|
|||
* microformats2 classnames for IndieWeb parsers, but I don't actually
|
||||
* use those for styling.
|
||||
*
|
||||
* Some pages (e.g. post archives) are really long despite having a
|
||||
* small download size. Rather than resort to pagination, I decided to
|
||||
* use CSS containment and content-visibility. I test performance on
|
||||
* browsers with heavy throttling and no GPU acceleration to ensure that
|
||||
* they're gentle on the CPU. For instance, Lighthouse benchmarks my
|
||||
* machine's CPU power at 1200-1300 and recommends 2.8-3.0x throttling;
|
||||
* I throttle at 12-15x.
|
||||
*
|
||||
* "content-visibility: auto" implies containment; however, some
|
||||
* browsers don't support "content-visibility: auto" but do support the
|
||||
* "contain" property. To be consistent across all these browsers, I
|
||||
* therefore use both even if it's a bit redundant. Once the latest
|
||||
* Safari has supported "content-visibility: auto" for a year or so and
|
||||
* it's in the latest version of the Tor Browser (which typically uses
|
||||
* whatever the latest Firefox-ESR was a month or two ago), I'll
|
||||
* consider removing these redundancies. I'll probably have to wait two
|
||||
* years.
|
||||
*
|
||||
* To keep myself from caring about minute details, I limited myself to
|
||||
* only defining spacing in increments of .25em. Pixels are 1px or
|
||||
* multiples of 3px. This also improves compression. No more "finding
|
||||
|
|
@ -54,10 +72,10 @@ html {
|
|||
* with minimal adjustment, and makes tap-targets larger.
|
||||
* Only do this on screen, since printouts already improve legibility
|
||||
* and cost paper + ink.
|
||||
* 108.75% is the minimum required to get superscripts to reach 14.5
|
||||
* CSS pixels with most default stylesheets. At that size, my dark
|
||||
* color palette has sufficient contrast.*/
|
||||
font-size: 109%;
|
||||
* 109.375% is the minimum required to get text to 17.5 CSS pixels and
|
||||
* superscripts past 14.75 px with most default stylesheets. At that
|
||||
* size, my dark color palette has sufficient contrast.*/
|
||||
font-size: 109.375%;
|
||||
|
||||
/* Aligning to the center with space on both sides prevents accidental
|
||||
* link activation on tablets, and is a common practice that users are
|
||||
|
|
@ -81,13 +99,13 @@ 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 14px;
|
||||
}
|
||||
|
||||
/* 45em is too wide for long body text.
|
||||
* Typically meets SC 1.4.8, plus or minus a few characters. */
|
||||
div[itemprop="articleBody"],
|
||||
li[itemprop="dataFeedElement"],
|
||||
[itemprop="articleBody"],
|
||||
[itemprop="dataFeedElement"],
|
||||
.narrow {
|
||||
margin: auto;
|
||||
max-width: 34em;
|
||||
|
|
@ -105,9 +123,9 @@ html {
|
|||
/* 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;
|
||||
margin-top: .25em;
|
||||
margin-bottom: .25em;
|
||||
padding: 0 .5em;
|
||||
}
|
||||
|
||||
/* Align titular h1 with top nav and body text. */
|
||||
|
|
@ -117,15 +135,15 @@ html {
|
|||
|
||||
/* Archive pages can get long. Allow them to get long without slowing
|
||||
* down the browser by using content-visibility. */
|
||||
dt,
|
||||
footer,
|
||||
h2,
|
||||
h3,
|
||||
aside > a,
|
||||
footer,
|
||||
dt,
|
||||
a[role="doc-backlink"],
|
||||
section[role="doc-endnotes"],
|
||||
li article,
|
||||
summary {
|
||||
summary,
|
||||
aside > a,
|
||||
[role="doc-backlink"],
|
||||
[role="doc-endnotes"] {
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: auto 3em;
|
||||
}
|
||||
|
|
@ -146,40 +164,42 @@ html {
|
|||
}
|
||||
|
||||
.tall,
|
||||
section[role="doc-endnotes"] {
|
||||
[role="doc-endnotes"] {
|
||||
contain-intrinsic-size: auto 50em;
|
||||
}
|
||||
|
||||
/* Full-width elements (e.g. display: block) have known widths, so
|
||||
* contain their widths. */
|
||||
html,
|
||||
body,
|
||||
main,
|
||||
article,
|
||||
body,
|
||||
dt,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
html,
|
||||
main,
|
||||
pre,
|
||||
dt,
|
||||
summary,
|
||||
section[role="doc-endnotes"] {
|
||||
[role="doc-endnotes"],
|
||||
[role="doc-preface"] {
|
||||
contain: inline-size layout paint;
|
||||
}
|
||||
|
||||
p,
|
||||
figure {
|
||||
figure,
|
||||
p {
|
||||
contain: inline-size layout;
|
||||
}
|
||||
|
||||
/* Containment changed spaicng a bit; correct that. */
|
||||
article > h2 {
|
||||
margin: .25em 0;
|
||||
padding: .25em 0;
|
||||
}
|
||||
|
||||
/* If we have a list of disclosure widgets, we need some
|
||||
/* A11y: If we have a list of disclosure widgets, we need some
|
||||
* non-interactive space on the screen that's safe to tap. */
|
||||
form,
|
||||
details {
|
||||
details,
|
||||
form {
|
||||
contain: inline-size layout;
|
||||
margin: .5em 0;
|
||||
}
|
||||
|
|
@ -192,13 +212,13 @@ html {
|
|||
* paragraph are section permalinks. */
|
||||
|
||||
input,
|
||||
div[itemprop="comment"] dd > a,
|
||||
dt > a,
|
||||
summary,
|
||||
nav[itemprop="breadcrumb"] a,
|
||||
nav[itemprop="breadcrumb"] > span,
|
||||
aside > a, /* Used for section permalinks */
|
||||
li > a {
|
||||
dt > a,
|
||||
li > a,
|
||||
[itemprop="comment"] dd > a,
|
||||
[itemprop="breadcrumb"] a,
|
||||
[itemprop="breadcrumb"] > span {
|
||||
padding: .75em .25em;
|
||||
}
|
||||
|
||||
|
|
@ -207,8 +227,7 @@ html {
|
|||
* Also prevent overlapping outlines on focus */
|
||||
|
||||
/* We've increased the padding for dt > a, but dt without a link
|
||||
* should take up as much space. Also: since it got
|
||||
* content-visibility: auto previously, give it an intrinsic size. */
|
||||
* should take up as much space. */
|
||||
dt {
|
||||
padding: 1em .5em;
|
||||
margin: -.25em 0 -.25em -.5em;
|
||||
|
|
@ -220,15 +239,15 @@ html {
|
|||
padding-bottom: .25em;
|
||||
}
|
||||
|
||||
dt > a,
|
||||
aside > a {
|
||||
aside > a,
|
||||
dt > a {
|
||||
contain: content;
|
||||
margin: -.75em -.25em;
|
||||
}
|
||||
|
||||
header > nav,
|
||||
a[href="#h1"], /* skip link */
|
||||
div[itemprop="comment"] dd > a ,
|
||||
[itemprop="comment"] dd > a ,
|
||||
footer > nav,
|
||||
/* List items with direct hyperlink children should only have one
|
||||
* hyperlink. */
|
||||
|
|
@ -260,15 +279,12 @@ html {
|
|||
margin: 0 0 0 -.5em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* align h-feeds in sections; they typically follow articles. */
|
||||
a[role="doc-backlink"],
|
||||
[role="doc-backlink"],
|
||||
section article p {
|
||||
margin-left: -.5em;
|
||||
}
|
||||
|
||||
|
||||
/* The nav has to be distant-enough from the top to make room for a
|
||||
* skip-link. The breadcrumbs also can't have their focus-outlines
|
||||
* overflow while CSS containment is enabled. */
|
||||
|
|
@ -284,6 +300,7 @@ html {
|
|||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* Lists of links should have some spacing so tap targets don't overlap. */
|
||||
/* stylelint-disable selector-max-compound-selectors -- simplest way to describe link-lists */
|
||||
:not(nav) > ul li > a,
|
||||
nav:not([itemprop="breadcrumb"]) li,
|
||||
|
|
@ -293,7 +310,7 @@ html {
|
|||
}
|
||||
|
||||
/* Increase backlink tap target size to at least 48x48 */
|
||||
a[role="doc-backlink"] {
|
||||
[role="doc-backlink"] {
|
||||
contain: content;
|
||||
display: inline-block;
|
||||
padding: .75em .5em;
|
||||
|
|
@ -311,7 +328,7 @@ html {
|
|||
a[href="#h1"]:focus {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
} /* End of adjustments for screen media type */
|
||||
|
||||
/* Make superscripts a bit easier to tap, and prevent consecutive
|
||||
* superscripts from touching. */
|
||||
|
|
@ -328,7 +345,6 @@ sup {
|
|||
line-height: 0;
|
||||
}
|
||||
|
||||
|
||||
/* narrow screens: reduce list indentation, hyphenate nested lists
|
||||
* touch screens: lists of links should be easy to tap so give them
|
||||
* some spacing (partial SC 2.5.5). There should be non-interactive
|
||||
|
|
@ -359,20 +375,20 @@ nav ul {
|
|||
}
|
||||
|
||||
/* step 2: remove bullets and make elements inline. */
|
||||
nav[itemprop="breadcrumb"] ol,
|
||||
nav[itemprop="breadcrumb"] li,
|
||||
nav[itemprop="breadcrumb"] > span,
|
||||
[itemprop="breadcrumb"] ol,
|
||||
[itemprop="breadcrumb"] li,
|
||||
[itemprop="breadcrumb"] > span,
|
||||
nav ul li,
|
||||
dt > a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
nav[itemprop="breadcrumb"] ol {
|
||||
[itemprop="breadcrumb"] ol {
|
||||
margin: -.25em;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav[itemprop="breadcrumb"] li:not(:last-of-type)::after {
|
||||
[itemprop="breadcrumb"] li:not(:last-of-type)::after {
|
||||
content: "→";
|
||||
}
|
||||
/* narrow screens: we reduce margin for blockquotes a lot, using
|
||||
|
|
@ -402,8 +418,8 @@ h1 {
|
|||
}
|
||||
|
||||
li > a,
|
||||
nav[itemprop="breadcrumb"] a,
|
||||
nav[itemprop="breadcrumb"] > span {
|
||||
[itemprop="breadcrumb"] a,
|
||||
[itemprop="breadcrumb"] > span {
|
||||
padding: .25em;
|
||||
}
|
||||
|
||||
|
|
@ -429,6 +445,7 @@ kbd {
|
|||
ins,
|
||||
[role="note"],
|
||||
[role="doc-tip"] {
|
||||
contain: content;
|
||||
font-style: italic;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -439,8 +456,8 @@ ins,
|
|||
* This does not hold true for figures in somewhat distinct sections; the
|
||||
* section should instead get the spacing. A section that constitutes a
|
||||
* separate schema.org object would qualify. */
|
||||
section[itemprop="mentions"],
|
||||
figure {
|
||||
figure,
|
||||
section[itemprop="mentions"] {
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
|
||||
|
|
@ -462,7 +479,7 @@ samp {
|
|||
* I use hidden spans in backlinks to provide ARIA labels.
|
||||
* Some ancient browsers don't support input[type="hidden"] */
|
||||
[hidden],
|
||||
input[type="hidden"] {
|
||||
[type="hidden"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -476,7 +493,7 @@ input[type="hidden"] {
|
|||
* viewport, triggering horizontal scrolling. Allow breaking words in
|
||||
* content I don't control (comments, names). For content I do control,
|
||||
* I just add soft hyphens to the HTML. */
|
||||
div[itemprop="comment"],
|
||||
[itemprop="comment"],
|
||||
:not(pre) > code,
|
||||
:not(pre) > samp,
|
||||
span[itemtype="https://schema.org/Person"] {
|
||||
|
|
@ -517,7 +534,7 @@ summary {
|
|||
/* center standalone images; same justification as
|
||||
* for centering the body contents. Also makes images easier to see
|
||||
* for people holding a device with one hand. */
|
||||
div[itemprop="articleBody"] img {
|
||||
[itemprop="articleBody"] img {
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
|
|
@ -585,7 +602,7 @@ form > div > div {
|
|||
|
||||
a:focus,
|
||||
summary:focus,
|
||||
pre[tabindex]:focus,
|
||||
[tabindex="0"]:focus,
|
||||
form :focus {
|
||||
outline: 3px solid;
|
||||
}
|
||||
|
|
@ -594,7 +611,7 @@ form :focus {
|
|||
* Leave it on for elements that are supposed to show focus on click. */
|
||||
@supports selector(:focus-visible) {
|
||||
a:focus:not(:focus-visible),
|
||||
pre[tabindex]:focus:not(:focus-visible) {
|
||||
[tabindex="0"]:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
}
|
||||
|
||||
/* Hide screen-only content */
|
||||
a[href="#h1"], /* Skip link */
|
||||
a[role="doc-backlink"], /* can't navigate back on print. */
|
||||
[href="#h1"], /* Skip link */
|
||||
[role="doc-backlink"], /* can't navigate back on print. */
|
||||
aside:not([role="note"]),
|
||||
/* An un-opened summary inside an article has no use in print.
|
||||
* Outside an article it's used in my webring list where it has some
|
||||
|
|
@ -20,6 +20,7 @@
|
|||
/* splitting up sections with <hr> is unnecesary if those
|
||||
* sections are removed */
|
||||
body > hr,
|
||||
main[itemprop] > article + hr,
|
||||
nav:not([itemprop="breadcrumb"]) a:not([rel="home"]) {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -27,8 +28,8 @@
|
|||
|
||||
/* Print: don't break up self-contained items. */
|
||||
figure,
|
||||
section[itemprop="mentions"],
|
||||
blockquote,
|
||||
section[itemprop="mentions"],
|
||||
li {
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ About me
|
|||
<meta itemprop="url" content="https://seirdy.one" />
|
||||
<div itemprop="author" itemscope="" itemtype="https://schema.org/Person" itemid="https://seirdy.one/#seirdy" class="p-author author h-card vcard" id="seirdy">
|
||||
|
||||
I'm <a itemprop="url" href="https://seirdy.one" rel="author me home canonical" class="u-url u-uid url"> {{% indieweb-icon %}} <span itemprop="name" class="p-name fn n"> <span itemprop="givenName" class="p-given-name given-name">Rohan</span> <span itemprop="familyName" class="p-family-name family-name">Kumar</span></span></a> (<span class="p-pronouns"><a href="https://pronoun.is/he" class="p-pronoun h-pronoun">he</a>/<a href="https://pronoun.is/he/him" class="p-pronoun h-pronoun">him</a></span>). I'm also known by my more casual online handle <span itemprop="alternateName" class="p-nickname nickname">Seirdy</span> (<span class="p-pronouns"><a href="https://pronoun.is/they" class="p-pronoun h-pronoun">they</a>/<a href="https://pronoun.is/they/them" class="p-pronoun h-pronoun">them</a></span>). Mixing them up is fine.
|
||||
I'm <a itemprop="url" href="https://seirdy.one" rel="author me home canonical" class="u-url u-uid url"> {{% indieweb-icon %}} <span itemprop="name" class="p-name fn n"> <span itemprop="givenName" class="p-given-name given-name">Rohan</span> <span itemprop="familyName" class="p-family-name family-name">Kumar</span></span></a> (<span class="p-pronouns"><a href="https://pronoun.is/he/him" class="u-pronouns"><span class="p-pronoun">he</span>/<span class="p-pronoun">him</span></a></span>). I'm also known by my more casual online handle <span itemprop="alternateName" class="p-nickname nickname">Seirdy</span> (<span class="p-pronouns"><a href="https://pronoun.is/they/them" class="u-pronouns"><span class="p-pronoun">they</span>/<span class="p-pronoun">them</span></a></span>). Mixing them up is fine.
|
||||
|
||||
The Director's Cut of my bio is at my [About page](./about/ "{itemprop='subjectOf'}").
|
||||
|
||||
|
|
|
|||
|
|
@ -23,12 +23,10 @@ I go by <span itemprop="name" class="p-name fn n"><span itemprop="givenName" cla
|
|||
<dd><span itemprop="homeLocation" itemscope="" itemtype="https://schema.org/State" class="p-region">California</span>, <abbr itemprop="nationality" itemscope="" itemtype="https://schema.org/Country" class="p-country-name" title="United States of America">USA</abbr></dd>
|
||||
|
||||
<dt>Gender</dt>
|
||||
<dd>
|
||||
<span class="p-gender-identity" itemprop="gender">Male</span>
|
||||
</dd>
|
||||
<dd class="p-gender-identity" itemprop="gender">Male</dd>
|
||||
|
||||
<dt>Pronouns</dt>
|
||||
<dd class="p-pronouns"><a href="https://pronoun.is/he" class="p-pronoun h-pronoun">he</a>/<a href="https://pronoun.is/he/him" class="p-pronoun h-pronoun">him</a></dd>
|
||||
<dd class="p-pronouns"><a href="https://pronoun.is/he/him" class="u-pronouns"><span class="p-pronoun">he</span>/<span class="p-pronoun">him</span></a></dd>
|
||||
|
||||
<dt>Software forges</dt>
|
||||
<dd><a href="https://sr.ht/~seirdy" rel="me">Sourcehut</a> (preferred)</dd>
|
||||
|
|
@ -56,12 +54,10 @@ I go by <span class="p-nickname nickname" itemprop="alternateName">Seirdy</span>
|
|||
<dd>Cyberspace</dd>
|
||||
|
||||
<dt>Gender</dt>
|
||||
<dd>
|
||||
<span class="p-gender-identity" itemprop="gender">Agender</span>
|
||||
</dd>
|
||||
<dd class="p-gender-identity" itemprop="gender">Agender</dd>
|
||||
|
||||
<dt>Pronouns</dt>
|
||||
<dd class="p-pronouns"><a href="https://pronoun.is/they" class="p-pronoun h-pronoun">they</a>/<a href="https://pronoun.is/they/them" class="p-pronoun h-pronoun">them</a></dd>
|
||||
<dd class="p-pronouns"><a href="https://pronoun.is/they/them" class="u-pronouns"><span class="p-pronoun">they</span>/<span class="p-pronoun">them</span></a></dd>
|
||||
|
||||
<dt>Social (Fediverse)</dt>
|
||||
<dd><a href="https://pleroma.envs.net/seirdy" rel="me">@Seirdy<wbr />@pleroma<wbr />.envs.net</a> (primary)</dd>
|
||||
|
|
@ -112,13 +108,11 @@ If you want to follow me on the Fediverse, [read my Fediverse greeting first]({{
|
|||
Selected projects
|
||||
-----------------
|
||||
|
||||
### [Clogstats](https://sr.ht/~seirdy/clogstats/)
|
||||
[Clogstats](https://sr.ht/~seirdy/clogstats/)
|
||||
: Analyze WeeChat logs to quantify, graph, forecast, and perform anomaly-detection on IRC channel activity. Written in Python; uses Pandas.
|
||||
|
||||
Analyze WeeChat logs to quantify, graph, forecast, and perform anomaly-detection on IRC channel activity. Written in Python; uses Pandas.
|
||||
|
||||
### [MOAC](https://sr.ht/~seirdy/MOAC/)
|
||||
|
||||
Generate passwords and analyze password strength given physical limits to computing. Based on a weblog/gemlog entry: [Becoming physically immune to brute-force attacks](../posts/2021/01/12/password-strength/). Written in Go.
|
||||
[MOAC](https://sr.ht/~seirdy/MOAC/)
|
||||
: Generate passwords and analyze password strength given physical limits to computing. Based on a weblog/gemlog entry: [Becoming physically immune to brute-force attacks](../posts/2021/01/12/password-strength/). Written in Go.
|
||||
|
||||
Interests, preferences, et cetera
|
||||
---------------------------------
|
||||
|
|
|
|||
12
content/notes/accessibility-and-search-indexes.md
Normal file
12
content/notes/accessibility-and-search-indexes.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
title: "Accessibility and search indexes"
|
||||
date: 2022-08-02T18:06:26-07:00
|
||||
---
|
||||
|
||||
Search engine indexes like Google, Yandex, and Bing now favor mobile-friendly sites. This has encouraged many sites to invest in mobile-friendliness. If we overlook toxic developments like Google AMP and Yandex Turbo pages, this is an example of search engines creating incentives to improve the state of the Web. Smaller indexes like Teclis and Marginalia create different incentives: they penalize tracking and toxic forms of <abbr title="Search Engine Optimization">SEO</abbr>.
|
||||
|
||||
I wonder how this could apply to accessibility. Currently, Google rewards the use of alt-text and penalizes small text, small tap-targets, bad link text, and missing language metadata. Rewarding alt-text has created perverse incentives to be overly descriptive, but on the whole these incentives have been helpful. Can we do better?
|
||||
|
||||
For starters: on searches with many results, search engines could stick to keywords that show up in both the DOM *and* significant landmarks of the accessible tree. They could gently penalize easily-detectable accessibility issues such as missing labels, landmarks, or heading-levels. Search engines that use these heuristics should develop or endorse tools to detect issues using the same logic. Automated tools only detect a tiny fraction of issues; saying "we plan to roll out more accessibility checks in the future" could get people to do more than merely meet current checks.
|
||||
|
||||
I also think it's worth exposing some metadata in search results to describe fixable issues. Something as simple as "This result has detectable accessibility issues: missing landmarks" with a "more info" link could go a long way.
|
||||
|
|
@ -14,12 +14,17 @@ outputs:
|
|||
- html
|
||||
- gemtext
|
||||
---
|
||||
<section role="doc-preface">
|
||||
<h2 id="preface">Preface</h2>
|
||||
|
||||
This began as a reply to another article by Lucas F. Costa; it lists practices to improve user-experience (<abbr title="User Experience">UX</abbr>) of command-line interfaces (<abbr title="Command-Line Interface">CLIs</abbr>). It comes from a good place, and has some good advice: I particularly like its advice on input-validation and understandable errors. Unfortunately, a number of its suggestions are problematic, particularly from an accessibility perspective.
|
||||
|
||||
This is a "living article" that I plan on adding to indefinitely. If you like it, come back in a month or two and check the "changelog" link in the article header.
|
||||
|
||||
<p role="doc-tip">Note: this article specifically concerns CLIs, not full-blown textual user interfaces (<abbr title="Textual User Interfaces">TUIs</abbr>). It also focuses on utilities for UNIX-like shells; other command-line environments may have different conventions.</p>
|
||||
|
||||
</section>
|
||||
|
||||
{{<toc>}}
|
||||
|
||||
Problematic patterns
|
||||
|
|
@ -128,8 +133,10 @@ $ moac -
|
|||
|
||||
2. Be safe. If a tool makes irreversible changes to the outside environment, add a `--dry-run` or equivalent option.
|
||||
|
||||
3. If your tool has color output: disable color when the output is not a [TTY](https://en.wikipedia.org/wiki/Tty_(Unix)), unless the user explicitly force-enables color via a command-line flag. Many tools support a `--color` flag that accepts the values "always", "never", and "auto".
|
||||
|
||||
More opinionated considerations {#more-opinionated-considerations}
|
||||
-----------------------------------------
|
||||
-------------------------------
|
||||
|
||||
These considerations are far more subjective, debatable, and deserving of skepticism than the previous recommendations. There's a reason I call this section "considerations", not "recommendations". Exceptions abound; I'm here to present information, not to think on your behalf.
|
||||
|
||||
|
|
|
|||
|
|
@ -46,10 +46,8 @@ Portfolio
|
|||
|
||||
Git repositories mirrored across [Sourcehut](https://sr.ht/~seirdy), [GitHub](https://github.com/Seirdy), and [GitLab](https://gitlab.com/Seirdy). Selected projects:
|
||||
|
||||
### Clogstats: [sr.ht<wbr />/~seirdy<wbr />/clogstats](https://sr.ht/~seirdy/clogstats)
|
||||
[Clogstats: sr.ht<wbr />/~seirdy<wbr />/clogstats](https://sr.ht/~seirdy/clogstats)
|
||||
: Gathers IRC channel activity statistics from WeeChat logs and performs time-series analysis and forecasting on them. It can quantify, rank, and chart chatting activity over time and display forecasts. It can also detect anomalous increases in activity. Written in Python with NumPy and Pandas.
|
||||
|
||||
Gathers IRC channel activity statistics from WeeChat logs and performs time-series analysis and forecasting on them. It can quantify, rank, and chart chatting activity over time and display forecasts. It can also detect anomalous increases in activity. Written in Python with NumPy and Pandas.
|
||||
|
||||
### MOAC: [sr.ht<wbr />/~seirdy<wbr />/MOAC](https://sr.ht/~seirdy/MOAC/)
|
||||
|
||||
Analyze password strength given physical limits to computing, and generate secure passwords. Computes theoretical limits to a brute-force attack limited by given physical quantities (mass, energy, power, temperature, etc.) and generates passwords to withstand them. This provides a future-proof understanding of password strength. Extensively tested. Written in Go.
|
||||
[MOAC: sr.ht<wbr />/~seirdy<wbr />/MOAC](https://sr.ht/~seirdy/MOAC/)
|
||||
: Analyze password strength given physical limits to computing, and generate secure passwords. Computes theoretical limits to a brute-force attack limited by given physical quantities (mass, energy, power, temperature, etc.) and generates passwords to withstand them. This provides a future-proof understanding of password strength. Extensively tested. Written in Go.
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
{{- $pages := (where site.RegularPages "Section" .Section) -}}
|
||||
{{- $period := "daily" -}}
|
||||
{{- $title := .Section | humanize -}}
|
||||
{{- if .IsHome }}
|
||||
{{- if .IsHome -}}
|
||||
{{- $title = "All content" -}}
|
||||
{{- $pages = where .Site.RegularPages "Date" "!=" (time "0001-01-01") -}}
|
||||
{{- $period = "hourly" -}}
|
||||
{{ end -}}
|
||||
{{- end -}}
|
||||
{{- if eq .Section "notes" -}}
|
||||
{{- $period = "hourly" -}}
|
||||
{{- end -}}
|
||||
{{- $icon_svg := resources.Get "/favicon.svg" | resources.Fingerprint "md5" -}}
|
||||
{{- $icon_png := resources.Get "/favicon192.png" | resources.Fingerprint "md5" -}}
|
||||
{{- $icon := resources.Get "/favicon.svg" | resources.Fingerprint "md5" -}}
|
||||
{{- $logo := resources.Get "/atom.svg" | resources.Fingerprint "md5" -}}
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<feed
|
||||
xmlns="http://www.w3.org/2005/Atom"
|
||||
|
|
@ -22,9 +22,6 @@
|
|||
xmlns:thr="http://purl.org/syndication/thread/1.0"
|
||||
xml:lang="{{ .Site.LanguageCode }}">
|
||||
<title>{{ $title }} on {{ .Site.Title }}</title>
|
||||
<link rel="self" type="application/atom+xml" href="{{ .Permalink }}atom.xml" />
|
||||
<logo>{{ $icon_png.Permalink }}</logo>
|
||||
<icon>{{ .Site.Params.icon | absURL }}</icon>
|
||||
<subtitle>
|
||||
{{- if .Params.Description -}}
|
||||
{{- .Params.Description -}}
|
||||
|
|
@ -32,6 +29,8 @@
|
|||
{{- .Site.Params.Description -}}
|
||||
{{- end -}}
|
||||
</subtitle>
|
||||
<icon>{{ $icon.Permalink }}</icon><logo>{{ $logo.Permalink }}</logo>
|
||||
<link rel="self" type="application/atom+xml" href="{{ .Permalink }}atom.xml" />
|
||||
<sy:updatePeriod>{{ $period }}</sy:updatePeriod>
|
||||
<sy:updateFrequency>2</sy:updateFrequency>
|
||||
<author>
|
||||
|
|
@ -44,43 +43,38 @@
|
|||
<updated>{{ now.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</updated>
|
||||
<id>{{ .Permalink }}</id>
|
||||
{{ range $pages -}}
|
||||
{{- if not .Params.Private }}
|
||||
{{- if not .Params.Private -}}
|
||||
<entry>
|
||||
<title>{{ .Title }}</title>
|
||||
<link rel="alternate" type="text/html" href="{{ .Permalink }}" />
|
||||
<published>{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</published>
|
||||
<updated>{{ .Lastmod.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</updated>
|
||||
<author>
|
||||
<name>Rohan Kumar</name>
|
||||
<uri>https://seirdy.one/</uri>
|
||||
</author>
|
||||
<id>{{ .Permalink }}</id>
|
||||
<rights>CC-BY-SA 4.0 by Rohan Kumar</rights>
|
||||
{{- with .Params.replyURI }}
|
||||
<link rel="alternate" type="text/html" href="{{ .Permalink }}" /><id>{{ .Permalink }}</id>
|
||||
<published>{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</published><updated>{{ .Lastmod.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</updated>
|
||||
<author><name>Rohan Kumar</name><uri>https://seirdy.one/</uri></author>
|
||||
<rights>CC-BY-SA 4.0 by Rohan Kumar</rights>
|
||||
{{- with .Params.replyURI -}}
|
||||
<thr:in-reply-to ref="{{ . }}" href="{{ . }}" />
|
||||
{{- end -}}
|
||||
{{- with .Params.replyAuthorURI }}
|
||||
{{- with .Params.replyAuthorURI -}}
|
||||
<link rel="mentioned" ostatus:object-type="http://activitystrea.ms/schema/1.0/person" href="{{ . }}"/>
|
||||
{{- end -}}
|
||||
<content type="xhtml" xml:base="{{ .Permalink }}">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml">
|
||||
{{- if .Params.replyURI -}}
|
||||
{{- partial "reply-context" .Params | replaceRE `(?: )?(?:item(type|scope|prop|id|ref)="[^"]*"|class="language-figure")` "" | safeHTML }}
|
||||
{{- end -}}
|
||||
{{ partial "processed-content.html" . | replaceRE `(?: )?(?:item(type|scope|prop|id|ref)="[^"]*"|class="language-figure")` "" | replaceRE `<meta content="true" ?/>` "" | safeHTML }}
|
||||
</div>
|
||||
</content>
|
||||
{{- $type := "article" -}}
|
||||
{{- if eq .Section "notes" -}}
|
||||
{{- $type = "note" -}}
|
||||
{{- end -}}
|
||||
<activity:object-type>http://activitystrea.ms/schema/1.0/{{ $type }}</activity:object-type>
|
||||
<activity:verb>http://activitystrea.ms/schema/1.0/post</activity:verb>
|
||||
{{ with .Params.image -}}
|
||||
{{- with .Params.image -}}
|
||||
{{- $image := resources.Get (printf "/p/%s" . ) | resources.Fingerprint "md5" -}}
|
||||
<media:thumbnail url="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" />
|
||||
{{- end }}
|
||||
</entry>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
<content type="xhtml" xml:base="{{ .Permalink }}">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml">
|
||||
{{- if .Params.replyURI -}}
|
||||
{{- partial "reply-context" .Params | replaceRE `(?: )?(?:item(type|scope|prop|id|ref)="[^"]*"|class="language-figure")` "" | safeHTML }}
|
||||
{{- end -}}
|
||||
{{ partial "processed-content.html" . | replaceRE `(?: )?(?:item(type|scope|prop|id|ref)="[^"]*"|class="language-figure")` "" | replaceRE `<meta content="true" ?/>` "" | safeHTML -}}
|
||||
</div>
|
||||
</content>
|
||||
</entry>
|
||||
{{ end -}}
|
||||
{{- end }}
|
||||
</feed>
|
||||
|
|
|
|||
Loading…
Reference in a new issue