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

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.
This commit is contained in:
Rohan Kumar 2022-05-04 22:22:38 -07:00
parent 40cc095291
commit d97481f381
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
10 changed files with 78 additions and 42 deletions

View file

@ -68,35 +68,55 @@ html {
/* Compensate for misalignment and wasted space caused by padding
* and margin adjustments in nav children made to meet SC 2.5.5 */
nav:not([role="doc-toc"]) {
header nav,
footer nav {
margin: -.5em 0 -.75em -.25em;
}
/* Google a11y: ensure tap targets have >=8px space between them */
nav li,
details li {
padding: 1em 0;
}
/* SC 2.5.5: Increase nav link tap target size a bit */
nav:not([role="doc-toc"]) a {
nav a,
summary,
details li a {
padding: .875em .25em;
}
nav li {
margin: 1em 0;
details summary {
/* The tappable region of a <summary> extends across the page.
* we need to tell users that the full space is interactive.
* Use a border for that. */
border: 1px solid #999;
/* Google a11y: ensure tap targets have >=8 px space between them */
margin: .25em 0;
}
/* Prevent nested lists from overlapping */
nav li ol {
padding-top: 1em;
}
}
/* 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). */
* some spacing (partial SC 2.5.5). There should be non-interactive
* space to the left that's safe to tap. */
dd,
ol,
ul {
padding-left: 1.5em;
}
dd {
margin: 0;
padding-left: 1.625em;
}
ol ol,
ul ul {
-webkit-hyphens: auto;
hyphens: auto;
padding-left: 1em;
}
@ -116,8 +136,6 @@ nav ul {
* pixels between tap targets. */
nav ul li {
display: inline-block;
line-height: 1.75;
list-style-type: none;
margin-right: .375em;
}
@ -135,6 +153,7 @@ blockquote {
/* Narrow screens: allow hyphenating titles
* I can't add soft hyphens to these. */
h1 {
-webkit-hyphens: auto;
hyphens: auto;
}
@ -142,6 +161,7 @@ h1 {
@media (max-width: 13em) {
body {
font-size: 100%;
-webkit-hyphens: auto;
hyphens: auto;
padding: 0 5%;
}
@ -202,9 +222,7 @@ pre {
* <pre> and <code> to distinguish them in ways besides font-family.
* This is Technique C25 of SC 1.4.8 */
img,
pre,
:not(pre) > code,
:not(pre) > samp {
pre {
border: 1px solid;
}
@ -213,7 +231,7 @@ pre,
* should draw gaze. */
:not(pre) > code,
:not(pre) > samp {
border-color: #999;
border: 1px solid #999;
/* borders shouldn't touch text */
padding: 0 0.125em;
@ -239,8 +257,8 @@ img:not([itemprop="image"]) {
* Also use "content-visibility: auto" to improve performance by
* reducing the number of DOM nodes rendered at once. */
footer,
section[aria-labelledby="webmentions"],
div[role="doc-endnotes"] {
section:not([role]),
section[role="doc-endnotes"] {
border-top: 1px solid;
content-visibility: auto;
}

View file

@ -1,7 +1,7 @@
/* Print stylesheet: hide stuff that we don't need. */
@media print {
/* Currently only used for transcripts */
details,
article details,
/* Currently only used for in-page heading anchors,
* useless in printouts. */
span[aria-hidden],
@ -10,6 +10,10 @@
nav a:not([rel="home"]) span {
display: none;
}
summary {
list-style: none;
}
}
/* Print: don't orphan headings

View file

@ -5,7 +5,7 @@ outputs:
- html
- gemtext
footnote_heading: Notes
featured: true
featured: 4
title: "The right thing for the wrong reasons: FLOSS doesn't imply security"
---
I find it quite easy to handle views different from my own. I feel more troubled when I see people agree with me for the wrong reasons.

View file

@ -10,7 +10,7 @@ sitemap:
ChangeFreq: weekly
Priority: 0.7
footnote_heading: Notes
featured: true
featured: 1
title: A look at search engines with their own indexes
---
This is a cursory review of all the indexing search engines I have been able to find.

View file

@ -14,7 +14,7 @@ tags:
sitemap:
ChangeFreq: daily
Priority: 0.7
featured: true
featured: 2
title: Best practices for inclusive textual websites
---
<section role="doc-preface">

View file

@ -132,7 +132,7 @@ For the record, *I don't think Mozilla is a bad organization;* rather, I think i
### Open platforms
To prevent a network effect from turning into vendor lock-in, software that naturally encourages a network effect needs to be part of an open platform. In the case of communication/messaging software, it should be possible to make alternative clients and servers that are compatible with each other to prevent completion of user domestication's first two steps.
To prevent a network effect from turning into vendor lock-in, software that naturally encourages a network effect needs to be part of an open platform. In the case of messaging software, it should be possible to make alternative clients and servers that are compatible with each other to prevent completion of user domestication's first two steps.
#### Case study: Signal

View file

@ -11,7 +11,7 @@ tags:
- user domestication
- privacy
- platforms
featured: true
featured: 3
title: WhatsApp and the domestication of users
---
@ -125,7 +125,7 @@ For the record, **I don't think Mozilla is a bad organization;** rather, I think
### Open platforms
To prevent a network effect from turning into vendor lock-in, software that naturally encourages a network effect needs to be part of an open platform. In the case of communication/messaging software, it should be possible to make alternative clients and servers that are compatible with each other to prevent completion of user domestication's first two steps.
To prevent a network effect from turning into vendor lock-in, software that naturally encourages a network effect needs to be part of an open platform. In the case of messaging software, it should be possible to make alternative clients and servers that are compatible with each other to prevent completion of user domestication's first two steps.
#### Case study: Signal

View file

@ -1,7 +1,7 @@
name,prev,home,next
An Indieweb Webring,https://xn--sr8hvo.ws/%F0%9F%98%A9%F0%9F%9A%A3%F0%9F%8D%91/previous,https://xn--sr8hvo.ws/,https://xn--sr8hvo.ws/%F0%9F%98%A9%F0%9F%9A%A3%F0%9F%8D%91/next
Indieweb,https://xn--sr8hvo.ws/%F0%9F%98%A9%F0%9F%9A%A3%F0%9F%8D%91/previous,https://xn--sr8hvo.ws/,https://xn--sr8hvo.ws/%F0%9F%98%A9%F0%9F%9A%A3%F0%9F%8D%91/next
Fediring,https://fediring.net/previous?host=seirdy.one,https://fediring.net/,https://fediring.net/next?host=seirdy.one
The Yesterweb ring,https://webring.yesterweb.org/noJS/index.php?d=prev&url=https://seirdy.one/,https://yesterweb.org/webring/,https://webring.yesterweb.org/noJS/index.php?d=next&url=https://seirdy.one/
The Retronaut webring,https://webring.dinhe.net/prev/https://seirdy.one,https://webring.dinhe.net/,https://webring.dinhe.net/next/https://seirdy.one
Hotline Webring,https://hotlinewebring.club/seirdy/previous,https://hotlinewebring.club,https://hotlinewebring.club/seirdy/next
YesterWeb,https://webring.yesterweb.org/noJS/index.php?d=prev&url=https://seirdy.one/,https://yesterweb.org/webring/,https://webring.yesterweb.org/noJS/index.php?d=next&url=https://seirdy.one/
Retronaut,https://webring.dinhe.net/prev/https://seirdy.one,https://webring.dinhe.net/,https://webring.dinhe.net/next/https://seirdy.one
Hotline,https://hotlinewebring.club/seirdy/previous,https://hotlinewebring.club,https://hotlinewebring.club/seirdy/next
Miniclub,https://xeras.amongtech.cc/,https://forever.amongtech.cc/miniclub,https://aroace.space/

1 name prev home next
2 An Indieweb Webring Indieweb https://xn--sr8hvo.ws/%F0%9F%98%A9%F0%9F%9A%A3%F0%9F%8D%91/previous https://xn--sr8hvo.ws/ https://xn--sr8hvo.ws/%F0%9F%98%A9%F0%9F%9A%A3%F0%9F%8D%91/next
3 Fediring https://fediring.net/previous?host=seirdy.one https://fediring.net/ https://fediring.net/next?host=seirdy.one
4 The Yesterweb ring YesterWeb https://webring.yesterweb.org/noJS/index.php?d=prev&url=https://seirdy.one/ https://yesterweb.org/webring/ https://webring.yesterweb.org/noJS/index.php?d=next&url=https://seirdy.one/
5 The Retronaut webring Retronaut https://webring.dinhe.net/prev/https://seirdy.one https://webring.dinhe.net/ https://webring.dinhe.net/next/https://seirdy.one
6 Hotline Webring Hotline https://hotlinewebring.club/seirdy/previous https://hotlinewebring.club https://hotlinewebring.club/seirdy/next
7 Miniclub https://xeras.amongtech.cc/ https://forever.amongtech.cc/miniclub https://aroace.space/

View file

@ -5,18 +5,22 @@
{{- if $isStandalone }}
<main itemprop="mainEntity" class="h-feed hfeed" itemscope itemtype="https://schema.org/CompleteDataFeed">
<h1 class="p-name" itemprop="name headline" id="posts">Posts</h1>
<p>These are all of my posts, sorted by date (newest first).</p>
{{- else }}
<section class="h-feed hfeed" itemscope itemtype="https://schema.org/DataFeed">
<h2 class="p-name" itemprop="name" id="posts">Posts</h2>
<p>Here&rsquo;s a selection of my best posts. To see the rest, visit <a href="/posts.html">my Posts page</a>.</p>
<p>Here&rsquo;s a selection of my best posts, in featured order. To see the rest, visit <a href="/posts.html">my Posts page</a>.</p>
{{- end }}
<p>I edit some of these posts quite often; some are updated indefinitely. Check the &ldquo;updated&rdquo; timestamps.</p>
<p role="doc-tip">
Timestamp format: <code>YYYY-MM-DD</code>, as per <cite><a href="https://www.ietf.org/rfc/rfc3339.txt">RFC 3339</a></cite> and <cite><a href="https://xkcd.com/1179/">ISO 8601</a></cite>
</p>
<ol class="unstyled-list" reversed>
{{- range where site.RegularPages "Type" "in" site.Params.mainSections -}}
{{- if or ($isStandalone) (.Params.featured) }}
<ol>
{{- $posts := (where site.RegularPages "Type" "in" site.Params.mainSections) -}}
{{- if not $isStandalone -}}
{{- $posts = sort (where $posts "Params.featured" ">" 0) "Params.featured" -}}
{{- end -}}
{{- range $posts -}}
<li>
<article class="h-entry hentry" itemprop="dataFeedElement" itemscope itemtype="https://schema.org/BlogPosting https://schema.org/DataFeedItem">
{{ if $isStandalone -}}
@ -39,7 +43,6 @@
</article>
</li>
{{- end }}
{{- end }}
</ol>
{{ if $isStandalone -}}
</main>

View file

@ -6,16 +6,27 @@
{{- $refPol = "strict-origin" -}}
{{- end -}}
<h2 id="webrings">Webrings</h2>
<p>This site is part of some <a href="https://en.wikipedia.org/wiki/Webring">webrings</a>. A webring is a collection of sites in a circular doubly-linked list; each website links to the next and previous site in the list.</p>
{{ $webringData := after 1 (getCSV "," "/csv/webrings.csv") -}}
<p>Each of the following {{ len $webringData }} webrings has three links: the <span id="prev-name">previous site</span> in the ring, the webring homepage, and the <span id="next-name">next site</span> in the ring.</p>
<ul class="unstyled-list">
<p>This site is part of {{ len $webringData }} <a href="https://en.wikipedia.org/wiki/Webring">webrings</a>. A webring is a collection of sites in a circular doubly-linked list; each website links to the next and previous site in the list.</p>
<ol>
{{- range $i, $r := $webringData }}
<li><p>
<a href="{{- index $r 1 -}}" rel="nofollow ugc" referrerpolicy="{{ $refPol }}" aria-labelledby="prev-name"></a> ·
<a href="{{- index $r 2 -}}">{{- index $r 0 -}}</a> ·
<a href="{{- index $r 3 -}}" rel="nofollow ugc" referrerpolicy="{{ $refPol }}" aria-labelledby="next-name"></a>
</p></li>
{{- $webringName := index $r 0 }}
<li>
<details>
<summary>{{- $webringName -}}</summary>
<ol>
<li>
<a href="{{- index $r 2 -}}">{{- $webringName }} webring home</a>
</li>
<li>
<a href="{{- index $r 1 -}}" rel="nofollow ugc" referrerpolicy="{{ $refPol }}">Previous {{ $webringName }} site</a>
</li>
<li>
<a href="{{- index $r 3 -}}" rel="nofollow ugc" referrerpolicy="{{ $refPol }}">Next {{ $webringName }} site</a>
</li>
</ol>
</details>
</li>
{{- end -}}
</ul>
</ol>
<p>If you&rsquo;re part of a webring and would like me to join, just ask. I&rsquo;ll probably accept if joining only requires me to add hyperlinks to this page (no scripts, external content, or images), and if the ring doesn&rsquo;t seem to promote anything I find objectionable.</p>