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

Style: reduce horizontal scroll, element borders

All pages should now look good on screens 230px wide (DPR=1), inc. most
feature-phones running e.g. KaiOS.

Add borders to images so they look distinct from the surrounding page.
This commit is contained in:
Rohan Kumar 2022-02-26 17:18:44 -08:00
parent 0fc698cdff
commit 14f2053fc1
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
6 changed files with 36 additions and 24 deletions

View file

@ -7,11 +7,6 @@
color: #ececec; color: #ececec;
} }
/* IndieWeb u-photo shouldn't look like floating punctuation marks */
.u-photo {
border: 1px solid #ddc;
}
a { a {
color: #ed7; color: #ed7;
} }
@ -27,6 +22,7 @@
blockquote, blockquote,
:not(pre) > code, :not(pre) > code,
hr, hr,
img,
pre { pre {
border-color: #333; border-color: #333;
} }

View file

@ -6,14 +6,19 @@
* regular text. * regular text.
* 3. max text width for readability * 3. max text width for readability
* 4. single-row nav links widescreen, multiline nav on narrow screens * 4. single-row nav links widescreen, multiline nav on narrow screens
* 5. Soft border around code in case it looks too similar to regular * 5. Soft border around code and images to disginguish from the
* text, and to show it continue across more than one line * surrounding page. Images with white/black or transparent
* backgrounds should have clear dimensions, and multiple consecutive
* inline <code> spans should look separate. A <code> span that
* continues across multiple lines should not look like multiple different
* spans.
* 6. Increase the line-spacing a bit so users on mobile devices can * 6. Increase the line-spacing a bit so users on mobile devices can
* tap links more easily. * tap links more easily.
* 7. Horizontally center non-inline images; left-aligned stick out. * 7. Horizontally center non-inline images; left-aligned stick out.
* 8. dark.css changes a few colors if the browser wants dark mode. * 8. dark.css changes a few colors if the browser wants dark mode.
* 9. Support unstyled lists: for webmentions, post lists, nav links. * 9. Support unstyled lists: for webmentions, post lists, nav links.
* 10. Make blockquotes look okay on narrow screens. * 10. Narrow screen optimization: less-indented blockquotes, overflow
* behavior for <pre>.
* Everything else is browser defaults: * Everything else is browser defaults:
* default fonts, non-dark-mode colors, etc. * default fonts, non-dark-mode colors, etc.
*/ */
@ -61,6 +66,13 @@ img:not(.u-photo) {
max-width: 100%; max-width: 100%;
} }
/* Distinguish images from the background in case their color is
* too similar to the page background color */
img,
pre {
border: 1px solid #bbb;
}
code, code,
pre { pre {
/* browsers make <pre> small for some dumb legacy reason /* browsers make <pre> small for some dumb legacy reason
@ -72,12 +84,16 @@ pre {
/* stylelint-enable */ /* stylelint-enable */
} }
pre,
/* don't put a border around code within a <pre> block, /* don't put a border around code within a <pre> block,
* just put the border around the <code> */ * just put the border around the <code> */
:not(pre) > code { :not(pre) > code {
border: 1px solid #bbb; border: 1px solid #bbb;
padding: 0 0.1em; padding: 0 0.1em;
overflow-wrap: break-word;
}
li.u-comment.h-cite {
overflow-wrap: break-word;
} }
/* Allow horizontal scroll in a pre block, but don't clip it vertically */ /* Allow horizontal scroll in a pre block, but don't clip it vertically */

View file

@ -1,15 +1,14 @@
--- ---
date: "2021-02-23T11:54:00-08:00" date: "2021-02-23T11:54:00-08:00"
description: "How open platforms become closed, and how standards-driven development description: "How open platforms become closed, and how standards-driven development can prevent it from happening."
can prevent it from happening."
footnote_heading: "Notes" footnote_heading: "Notes"
outputs: outputs:
- html - html
- gemtext - gemtext
tags: tags:
- free software - free software
- user domestication - user domestication
- platforms - platforms
title: Keeping platforms open title: Keeping platforms open
--- ---
This article is the second entry of series of posts exploring situations in which <abbr title="free, libre, and open-source software">FLOSS</abbr> alone isn't enough to secure user freedom. This article is the second entry of series of posts exploring situations in which <abbr title="free, libre, and open-source software">FLOSS</abbr> alone isn't enough to secure user freedom.
@ -124,8 +123,8 @@ The standards- and consensus-driven approach to platform development and the ine
Perhaps the biggest benefit to abandoning the "move fast and break things" mindset is that in addition to making it hard to rapidly improve a service, abandoning the mindset also makes it hard to rapidly worsen a service. Perhaps the biggest benefit to abandoning the "move fast and break things" mindset is that in addition to making it hard to rapidly improve a service, abandoning the mindset also makes it hard to rapidly worsen a service.
Acknowledgements Acknowledge&shy;ments
---------------- ---------------------
{{<indieweb-person first-name="Denver" last-name="Gingerich" url="https://ossguy.com/">}} helped me brainstorm early in the writing process and provided useful information for the section on XMPP. {{<indieweb-person first-name="Denver" last-name="Gingerich" url="https://ossguy.com/">}} helped me brainstorm early in the writing process and provided useful information for the section on XMPP.
@ -144,3 +143,4 @@ Thanks to {{<indieweb-person first-name="Barna" last-name="Zsombor" url="https:/
[^6]: I decided against using the cheeky sub-heading "Scaling considered harmful" because I worried that readers on a certain orange-colored website might take the joke too seriously. [^6]: I decided against using the cheeky sub-heading "Scaling considered harmful" because I worried that readers on a certain orange-colored website might take the joke too seriously.

View file

@ -239,8 +239,8 @@ One well-known approach to calculating physical limits of computation is [Bremer
[A publication](https://arxiv.org/abs/quant-ph/9908043)[^5] by Seth Lloyd from MIT further explores limits to computation speed on an ideal 1-kilogram computer. [A publication](https://arxiv.org/abs/quant-ph/9908043)[^5] by Seth Lloyd from MIT further explores limits to computation speed on an ideal 1-kilogram computer.
Acknowledgements Acknowledge&shy;ments
---------------- ---------------------
Thanks to [Barna Zsombor](https://bzsombor.web.elte.hu/) and [Ryan Coyler](https://rcolyer.net/) for helping me over IRC with my shaky physics and pointing out the caveats of my approach. u/RisenSteam on Reddit also corrected an incorrect reference to AES-256 encryption by bringing up salts. Thanks to [Barna Zsombor](https://bzsombor.web.elte.hu/) and [Ryan Coyler](https://rcolyer.net/) for helping me over IRC with my shaky physics and pointing out the caveats of my approach. u/RisenSteam on Reddit also corrected an incorrect reference to AES-256 encryption by bringing up salts.

View file

@ -239,8 +239,8 @@ I didn't try to avoid personalization when testing engines that require account
I avoided "natural language" queries like questions, focusing instead on keyword searches and search operators. I also mostly ignored infoboxes (also known as "instant answers"). I avoided "natural language" queries like questions, focusing instead on keyword searches and search operators. I also mostly ignored infoboxes (also known as "instant answers").
Acknowledgements Acknowledge&shy;ments
---------------- ---------------------
Some of this content came from the [Search Engine Map](https://www.searchenginemap.com/) and [Search Engine Party](https://searchengine.party/). A few web directories also proved useful. Some of this content came from the [Search Engine Map](https://www.searchenginemap.com/) and [Search Engine Party](https://searchengine.party/). A few web directories also proved useful.
@ -267,6 +267,6 @@ Some of this content came from the [Search Engine Map](https://www.searchenginem
[^9]: More information can be found in [this HN subthread](https://news.ycombinator.com/item?id=27593801) and some posts on the Cliqz tech blog ([one](https://0x65.dev/blog/2019-12-06/building-a-search-engine-from-scratch.html), [two](https://0x65.dev/blog/2019-12-10/search-quality-at-cliqz.html)). [^9]: More information can be found in [this HN subthread](https://news.ycombinator.com/item?id=27593801) and some posts on the Cliqz tech blog ([one](https://0x65.dev/blog/2019-12-06/building-a-search-engine-from-scratch.html), [two](https://0x65.dev/blog/2019-12-10/search-quality-at-cliqz.html)).
[^10]: Some search engines support the `site:` search operator to limit searches to subpages/subdomains of a single site or TLD. `site:.one`, for instance, limits searches to websites with the ".one" TLD. [^10]: Some search engines support the `site:` search operator to limit searches to subpages or subdomains of a single site or TLD. `site:.one`, for instance, limits searches to websites with the ".one" TLD.

View file

@ -145,7 +145,7 @@ Food for thought
Both of the prior two case studies--Mozilla and Signal--are examples of well-meaning organizations unintentionally leaving users vulnerable to user domestication. The former represents a lack of simplicity but the presence of an open platform. The latter represents a closed platform with a higher degree of simplicity. Intent isn't in the picture when examining the three steps and countermeasures to user domestication. Both of the prior two case studies--Mozilla and Signal--are examples of well-meaning organizations unintentionally leaving users vulnerable to user domestication. The former represents a lack of simplicity but the presence of an open platform. The latter represents a closed platform with a higher degree of simplicity. Intent isn't in the picture when examining the three steps and countermeasures to user domestication.
[@paulsnar@mastodon.technology](https://mastodon.technology/@paulsnar) pointed out a potential conflict between simplicity and open platforms: [paulsnar](https://mastodon.technology/@paulsnar) pointed out a potential conflict between simplicity and open platforms:
> I feel like there's some tension between simplicity and open platforms; to take Signal, in a way it's simple precisely because it's a de-facto-closed platform, or at least so Moxie has argued. In turn, Matrix is superficially simple, but the protocol is actually (imho) fairly complex exactly because it's an open platform. > I feel like there's some tension between simplicity and open platforms; to take Signal, in a way it's simple precisely because it's a de-facto-closed platform, or at least so Moxie has argued. In turn, Matrix is superficially simple, but the protocol is actually (imho) fairly complex exactly because it's an open platform.