mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-09-19 20:02:10 +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
parent
40cc095291
commit
d97481f381
10 changed files with 78 additions and 42 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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/
|
||||
|
|
|
|||
|
|
|
@ -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’s a selection of my best posts. To see the rest, visit <a href="/posts.html">my Posts page</a>.</p>
|
||||
<p>Here’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 “updated” 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>
|
||||
|
|
|
|||
|
|
@ -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’re part of a webring and would like me to join, just ask. I’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’t seem to promote anything I find objectionable.</p>
|
||||
|
|
|
|||
Loading…
Reference in a new issue