mirror of
https://github.com/wezm/wezm.net.git
synced 2025-04-03 02:10:42 +00:00
Add Stylus post
This commit is contained in:
parent
612226c03c
commit
8169e2d473
1 changed files with 278 additions and 0 deletions
278
v2/content/posts/2025/stylus/index.md
Normal file
278
v2/content/posts/2025/stylus/index.md
Normal file
|
|
@ -0,0 +1,278 @@
|
|||
+++
|
||||
title = "Making the Web More Readable With Stylus"
|
||||
date = 2025-02-17T10:21:22+10:00
|
||||
|
||||
[extra]
|
||||
#updated = 2025-01-15T09:51:03+10:00
|
||||
+++
|
||||
|
||||
[Stylus] is an open-source browser extension for managing and applying "user
|
||||
styles"—custom snippets of CSS—to websites. It allows you to tweak sites you
|
||||
visit to tailor them to your preferences. In this post I list the ways I use
|
||||
Stylus to make my browsing experience nicer.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
Stylus has the ability to share and use shared styles, but I just use styles
|
||||
I write myself. Styles can by applied to all sites, specific sub-domains,
|
||||
domains, or domains + paths. I note the matching rule of each style at the
|
||||
top of each entry.
|
||||
|
||||
You will probably notice that are large number of my rules are just tweaks
|
||||
to fonts. What can I say, I have opinions about fonts and I use Stylus to
|
||||
express them.
|
||||
|
||||
### Sign in with Google
|
||||
|
||||
**Applies to:** Everything
|
||||
|
||||
Hide the stupid Sign in with Google popup that appears on sites using a Log in
|
||||
with Google button, such as StackOverflow. I _never_ want to Sign in with
|
||||
Google on a third-party site.
|
||||
|
||||
```css
|
||||
#credential_picker_container:has(iframe[src*="accounts.google.com"]) {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
|
||||
### arstechnica.com
|
||||
|
||||
**Applies to:** URLs on the domain: [arstechnica.com](https://arstechnica.com)
|
||||
|
||||
Remove auto-playing videos in the middle of articles.
|
||||
|
||||
```css
|
||||
.ars-interlude-container {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
|
||||
### d-shoot.net
|
||||
|
||||
**Applies to:** URLs on the domain: [d-shoot.net](https://d-shoot.net)
|
||||
|
||||
Set a font and `max-width` more suited to reading.
|
||||
|
||||
```css
|
||||
body {
|
||||
max-width: 640px;
|
||||
font-family: sans-serif;
|
||||
margin: 0 auto;
|
||||
}
|
||||
```
|
||||
|
||||
### danluu.com
|
||||
|
||||
**Applies to:** URLs on the domain: [danluu.com](https://danluu.com)
|
||||
|
||||
Set a `max-width` more suited to reading.
|
||||
|
||||
```css
|
||||
body {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
```
|
||||
|
||||
### feedbin.com
|
||||
|
||||
**Applies to:** URLs on the domain: [feedbin.com](https://feedbin.com)
|
||||
|
||||
Put my single glyph WMAppleLogo font first in the stack so that when people use
|
||||
the Apple logo in text it appears correctly on non-Apple devices; use Muli as
|
||||
the article font.
|
||||
|
||||
On Apple devices you can type an Apple logo, which uses the Private Use Area
|
||||
code point U+F8FF. [I created a font with an Apple logo mapped to this code
|
||||
point so that posts that use it appear as intended][WMAppleLogo].
|
||||
|
||||
```css
|
||||
.font-default .content-styles {
|
||||
font-family: WMAppleLogo, Muli, sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
### github.com
|
||||
|
||||
**Applies to:** URLs on the domain: [github.com](https://github.com/)
|
||||
|
||||
Use the default `sans-serif` font for body text on GitHub. I have my system
|
||||
font set to Cantarell, which unlike many I actually like for system controls
|
||||
like menus, buttons, and titles. I don't however want to see prose written in
|
||||
it. So I override GitHub's use of `system-ui`.
|
||||
|
||||
```css
|
||||
body, .markdown-body {
|
||||
font-family: sans-serif; /* Use sans-serif font instead of system UI font */
|
||||
}
|
||||
```
|
||||
|
||||
### gkeenan.co
|
||||
|
||||
**Applies to:** URLs on the domain: [gkeenan.co](https://gkeenan.co)
|
||||
|
||||
This blog uses a typewriter font for body text which I don't like visually,
|
||||
nor find particularly easy to read. Replace it with [Work Sans], which still
|
||||
fits the vibe of the site.
|
||||
|
||||
```css
|
||||
html {
|
||||
font-family: Work Sans, sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
### goughlui.com
|
||||
|
||||
**Applies to:** URLs on the domain: [goughlui.com](https://goughlui.com)
|
||||
|
||||
Uses a Times New Roman font by default, which it a bit ugly on my system.
|
||||
Replace with a nicer serif font.
|
||||
|
||||
```css
|
||||
body,
|
||||
input,
|
||||
textarea,
|
||||
.page-title span,
|
||||
.pingback a.url {
|
||||
font-family: "TeX Gyre Pagella", serif
|
||||
}
|
||||
```
|
||||
|
||||
### lwn.net
|
||||
|
||||
**Applies to:** URLs on the domain: [lwn.net](https://lwn.net)
|
||||
|
||||
LWN allows you to choose from a selection of fonts, but I still chose to
|
||||
override it with the [Source Sans 3] variable font. I also adjust the headings
|
||||
to be less bold and also constrain the article text width.
|
||||
|
||||
```css
|
||||
body {
|
||||
font-family: SourceSans3VF, sans-serif;
|
||||
}
|
||||
h1,h2,h3, b {
|
||||
font-weight: 600
|
||||
}
|
||||
DIV.PageHeadline,
|
||||
DIV.ArticleText {
|
||||
max-width: 800px;
|
||||
}
|
||||
```
|
||||
|
||||
### news.ycombinator.com
|
||||
|
||||
**Applies to:** URLs on the domain: [news.ycombinator.com](https://news.ycombinator.com)
|
||||
|
||||
The post text in Hacker News self-posts like "Ask HN" posts is shown in light grey.
|
||||
Fix this.
|
||||
|
||||
```css
|
||||
/* Make HN post text readable */
|
||||
.toptext {
|
||||
color: #333;
|
||||
}
|
||||
.toptext a {
|
||||
color: #1973c2;
|
||||
}
|
||||
```
|
||||
|
||||
### https://okmij.org/ftp/papers/DreamOSPaper.html
|
||||
|
||||
**Applies to:** URLs starting with: <https://okmij.org/ftp/papers/DreamOSPaper.html>
|
||||
|
||||
Readable `max-width`.
|
||||
|
||||
```css
|
||||
body {
|
||||
max-width: 640px;
|
||||
margin: 1em auto;
|
||||
}
|
||||
```
|
||||
|
||||
### phanpy.social
|
||||
|
||||
**Applies to:** URLs on the domain: [phanpy.social](https://phanpy.social)
|
||||
|
||||
Custom font.
|
||||
|
||||
```css
|
||||
body {
|
||||
font-family: Figtree, sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
### thingspool.net
|
||||
|
||||
**Applies to:** URLs on the domain: [thingspool.net](https://thingspool.net)
|
||||
|
||||
Readable `max-width`.
|
||||
|
||||
```css
|
||||
body {
|
||||
max-width: 700px;
|
||||
}
|
||||
```
|
||||
|
||||
### wikipedia.org
|
||||
|
||||
**Applies to:** URLs on the domain: [wikipedia.org](https://wikipedia.org)
|
||||
|
||||
Better font on desktop.
|
||||
|
||||
```css
|
||||
html, body {
|
||||
font-family: 'Lato', sans-serif; /* Lato is used by m.wikipedia */
|
||||
}
|
||||
```
|
||||
|
||||
### www.bleepingcomputer.com
|
||||
|
||||
**Applies to:** URLs on the domain: [www.bleepingcomputer.com](https://www.bleepingcomputer.com)
|
||||
|
||||
Nicer font.
|
||||
|
||||
```css
|
||||
.bc_main_content p,
|
||||
.bc_main_content li
|
||||
{
|
||||
font-family: Figtree, sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
```
|
||||
|
||||
### yeslogic.element.io
|
||||
|
||||
**Applies to:** URLs on the domain: yeslogic.element.io
|
||||
|
||||
This is a hosted Matrix instance using the Element client.
|
||||
|
||||
* Use the system emoji font ([JoyPixels]) instead of the heinous Noto Color Emoji.
|
||||
* Use the system monospace font ([PragmataPro]) instead of a custom one.
|
||||
* Reduce line height of monospace text to match other places monospace text shown on my system.
|
||||
* Hide the space wasting "Spaces" bar.
|
||||
|
||||
```css
|
||||
body {
|
||||
font-family: Inter, sans-serif;
|
||||
/* Make it use system emoji font */
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body code,
|
||||
.mx_EventTile_content .markdown-body pre {
|
||||
font-family: monospace !important;
|
||||
}
|
||||
.mx_EventTile_content .markdown-body pre {
|
||||
line-height: 1.3;
|
||||
}
|
||||
*[aria-label="Spaces"] {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
|
||||
[WMAppleLogo]: https://mastodon.decentralised.social/@wezm/109827184573904673
|
||||
[Stylus]: https://github.com/openstyles/stylus
|
||||
[Work Sans]: https://github.com/weiweihuanghuang/Work-Sans
|
||||
[Source Sans 3]: https://github.com/adobe-fonts/source-sans
|
||||
[JoyPixels]: https://joypixels.com/
|
||||
[PragmataPro]: https://fsd.it/shop/fonts/pragmatapro/
|
||||
Loading…
Reference in a new issue