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

Refactor to make more body text narrow

Now more text should fall within WCAG limits.
This commit is contained in:
Rohan Kumar 2022-07-11 17:20:36 -07:00
parent 569540fd41
commit 80ef3a4a9a
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
4 changed files with 45 additions and 19 deletions

View file

@ -9,7 +9,7 @@
* *
* I also don't use any classes except for image presentation. (e.g. to * 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 * specify that an image should have pixelated rendering or be inverted
* in dark mode). * in dark mode). One exception: a class for narrow width body text.
* My HTML contains microformats2 classnames for IndieWeb parsers, but I * My HTML contains microformats2 classnames for IndieWeb parsers, but I
* don't actually use those for styling. * don't actually use those for styling.
* *
@ -59,7 +59,7 @@ html {
* viewport. This isn't for large blocks of text yet, so we don't have * viewport. This isn't for large blocks of text yet, so we don't have
* to go by SC 1.4.8. * to go by SC 1.4.8.
* 45em = lowest acceptable width for titles, nav, footers, etc */ * 45em = lowest acceptable width for titles, nav, footers, etc */
max-width: 45em; max-width: 42em;
/* Phone cases can cover the edges. Swipe-from-edge navigations /* Phone cases can cover the edges. Swipe-from-edge navigations
* should not conflict with the page elements. Focus outlines for * should not conflict with the page elements. Focus outlines for
@ -77,7 +77,9 @@ html {
/* 45em is too wide for long body text. /* 45em is too wide for long body text.
* Typically meets SC 1.4.8, plus or minus a few characters. */ * Typically meets SC 1.4.8, plus or minus a few characters. */
div[itemprop="articleBody"] { div[itemprop="articleBody"],
li[itemprop="dataFeedElement"],
.narrow {
margin: auto; margin: auto;
max-width: 35em; max-width: 35em;
} }

View file

@ -11,24 +11,14 @@ sitemap:
- Priority: 0.9 - Priority: 0.9
stype: "WebSite" stype: "WebSite"
--- ---
About me
--------
<meta itemprop="url" content="https://seirdy.one" /> <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"> <div itemprop="author" itemscope="" itemtype="https://schema.org/Person" itemid="https://seirdy.one/#seirdy" class="p-author author h-card vcard" id="seirdy">
Seirdys Home
=============
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>&#160;<span itemprop="familyName" class="p-family-name family-name">Kumar</span></span></a> (He/Him). I'm also known by my more casual online handle <span itemprop="alternateName" class="p-nickname nickname">Seirdy</span> (It/Its). 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>&#160;<span itemprop="familyName" class="p-family-name family-name">Kumar</span></span></a> (He/Him). I'm also known by my more casual online handle <span itemprop="alternateName" class="p-nickname nickname">Seirdy</span> (It/Its). Mixing them up is fine.
About this site
---------------
In addition to its [canonical url](https://seirdy.one), a "rough draft" of this website also exists on my [Tildeverse page](https://envs.net/~seirdy/ "{itemprop='sameAs' class='u-url' rel='me'}"). This site's content also appears on my [Gemini capsule](gemini://seirdy.one "{itemprop='sameAs' class='u-syndication' rel='me'}").
This is a basic [IndieWeb site](https://indieweb.org/) that contains articles, notes, and bookmarks. You can subscribe to a combined feed of my articles and notes using [the site's Atom feed](./atom.xml), or you can subscribe to sections independently. If your feed reader has problems displaying entry contents (I know Outlook does), I also have a legacy [RSS feed for the whole site](./index.xml) and for each section.
About me
--------
The Director's Cut of my bio is at my [About page](./about/ "{itemprop='subjectOf'}"). The Director's Cut of my bio is at my [About page](./about/ "{itemprop='subjectOf'}").
<div class="p-note" itemprop="description"> <div class="p-note" itemprop="description">
@ -41,8 +31,7 @@ My perspective on software freedom is a bit different from the FSF's; I've been
Git repos: [Sourcehut](https://sr.ht/~seirdy "{rel='me'}"), [GitHub](https://github.com/Seirdy "{rel='me'}"), [Codeberg](https://codeberg.org/Seirdy "{rel='me'}"), and [GitLab](https://gitlab.com/Seirdy "{rel='me'}") Git repos: [Sourcehut](https://sr.ht/~seirdy "{rel='me'}"), [GitHub](https://github.com/Seirdy "{rel='me'}"), [Codeberg](https://codeberg.org/Seirdy "{rel='me'}"), and [GitLab](https://gitlab.com/Seirdy "{rel='me'}")
Contact ### Contact
-------
Contact me via [email](mailto:seirdy@seirdy.one "{class='u-email' itemprop='email' rel='me'}") ([PGP](./publickey.asc "{rel='pgpkey authn' type='application/pgp-keys' class='u-key'}")), or on the Fediverse where I'm [@Seirdy<wbr />@pleroma<wbr />.envs.net](https://pleroma.envs.net/seirdy "{rel='me' itemprop='sameAs' class='u-url'}"). Contact me via [email](mailto:seirdy@seirdy.one "{class='u-email' itemprop='email' rel='me'}") ([PGP](./publickey.asc "{rel='pgpkey authn' type='application/pgp-keys' class='u-key'}")), or on the Fediverse where I'm [@Seirdy<wbr />@pleroma<wbr />.envs.net](https://pleroma.envs.net/seirdy "{rel='me' itemprop='sameAs' class='u-url'}").
@ -50,3 +39,31 @@ Chat with me: I'm on several IRC networks. Alternatively, I'm [@seirdy<wbr />:se
</div> </div>
About this site
---------------
This is a basic [IndieWeb site](https://indieweb.org/).
In addition to its [canonical url](https://seirdy.one), a "rough draft" of this website also exists on my [Tildeverse page](https://envs.net/~seirdy/). This site's content also appears on my [Gemini capsule](gemini://seirdy.one).
For more information about the site, [see the "meta" section](./meta/).
<details>
<summary>Feeds</summary>
I offer some feeds in Atom format:
- [Combined feed](./atom.xml)
- [Articles feed](./posts/atom.xml)
- [Notes feed](./notes/atom.xml)
If you experience issues with Atom feeds, try an RSS feed:
- [Legacy combined RSS feed](./index.xml)
- [Legacy articles feed](./posts/index.xml)
- [Legacy notes feed](./notes/index.xml)
I recommend using the Atom feeds.
</details>

View file

@ -7,5 +7,7 @@ description: "Links from around the web, curated and annotated by Rohan Kumar."
sitemap: sitemap:
- ChangeFreq: daily - ChangeFreq: daily
--- ---
Here's a filtered selection of my personal bookmarks. Using [a shell script](https://git.sr.ht/~seirdy/dotfiles/tree/master/Executables/shell-scripts/bin/buku-upload), I regularly export specially-tagged entries from my [buku](https://github.com/jarun/buku) database to [a JSON file](https://seirdy.one/data/bookmarks.json). During site rebuilds, Hugo automatically pulls content from that file to build this page. This approach allows me to use an interactive interface to build my bookmarks database without needing a dynamic site. Here's a filtered selection of my personal bookmarks.
[A shell script](https://git.sr.ht/~seirdy/dotfiles/tree/master/Executables/shell-scripts/bin/buku-upload) exports [buku](https://github.com/jarun/buku) entries to [a JSON file](https://seirdy.one/data/bookmarks.json) that populates this page. This approach lets me use an interactive interface to build my bookmarks database without needing a dynamic site.

View file

@ -1,7 +1,12 @@
{{ define "main" -}} {{ define "main" -}}
<main id="main" tabindex="-1"> <main id="main" tabindex="-1">
<h1 id="seirdys-home">Seirdys Home</h1>
<aside><p>It me.</p></aside>
<hr />
<div class="narrow">
{{ partial "processed-content.html" . }} {{ partial "processed-content.html" . }}
{{ partial "posts.html" . }} {{ partial "posts.html" . }}
{{ partial "webrings.html" . }} {{ partial "webrings.html" . }}
</div>
</main> </main>
{{ end }} {{ end }}