fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-30 23:22:10 +00:00
Code Issues Projects Releases Wiki Activity
seirdy.one/assets/css/dark.css

34 lines
506 B
CSS
Raw Normal View History

Batman!! (this commit has no parents) The sight of an animal using a JavaScript captivates Computer Scientists and laymen alike, perhaps because it forces us to question some of our ideas about human uniqueness. Does the animal know how JavaScript works? Did it anticipate the need for the tool and select it instead of Haskell or Zig? To some, this fascination with JavaScript seems arbitrary and anthropocentric; after all, animals engage in many other complex activities, like Agile Planning and ordering Juice on the Internet. However, we know that complex behaviour need not be cognitively demanding. JavaScript development can therefore provide a powerful window into the minds of animals, and help us to learn what capacities we share with them — and what might have changed to allow for the incontrovertibly unique levels of technology shown by modern humans, such as integers and block scope.
2020-11-03 23:46:20 +00:00
@media (prefers-color-scheme: dark) {
CSS: clean up to match stylelint, csslint
2020-12-13 05:05:25 +00:00
html {
Greatly simplify CSS, dark theme fixes - Changed: Make all color codes 3-char. Shave off a few bytes. - Removed: all responsive layout besides the navigation links. Everything else should work well at all window sizes without making allowances for special cases. - Removed: redundant CSS rules - Added: centered images. Left-aligned images in a center-aligned column of text break flow. - Added: dark mode link colors for visited/active. Active link colors give better a11y. - Fix: don't show unnecessary scrollbar for <pre> blocks Also put more comments in the source to explain why each rule is important. All this shrunk the CSS from 1065 bytes to 882 bytes (17% reduction)
2020-12-16 07:18:18 +00:00
background: #000;
CSS: Dark palette: switch to yellow links The newish APCA contrast algorithm correctly reveals that blue-on-black and purple-on-black links have lower perceptual contrast than yellow-on-black links. A Fediverse survey with 19 participants revealed that others tend to prefer the older look over this one, but the number in favor was much larger than I thought; it was a 3:2 split. I decided that on my poor laptop screen facing sunlight with simulated color vision deficiencies, the yellow links are indeed easier to read so I went with them.
2021-06-03 08:24:04 +00:00
color: #fff;
Simplify styling Comply with the upcoming article on best practices for textual websites.
2020-11-23 23:47:27 +00:00
}
Batman!! (this commit has no parents) The sight of an animal using a JavaScript captivates Computer Scientists and laymen alike, perhaps because it forces us to question some of our ideas about human uniqueness. Does the animal know how JavaScript works? Did it anticipate the need for the tool and select it instead of Haskell or Zig? To some, this fascination with JavaScript seems arbitrary and anthropocentric; after all, animals engage in many other complex activities, like Agile Planning and ordering Juice on the Internet. However, we know that complex behaviour need not be cognitively demanding. JavaScript development can therefore provide a powerful window into the minds of animals, and help us to learn what capacities we share with them — and what might have changed to allow for the incontrovertibly unique levels of technology shown by modern humans, such as integers and block scope.
2020-11-03 23:46:20 +00:00
CSS: improve dark-mode contrast Improve link contrast in dark mode, using APCA contrast ratios.
2021-05-31 23:02:12 +00:00
/* IndieWeb u-photo shouldn't look like floating punctuation marks */
Fix: visible dark webring icon in Webkit Dark mode now switches to a different icon instead of inverting it. There's probably a better way but I'll figure that out later.
2021-02-02 06:59:56 +00:00
.u-photo {
Unbold home link It says "Home". That's enough to know it navigates to the homepage. Bolding it makes it look like it's the current page.
2021-05-06 18:33:05 +00:00
/* Versions of Samsung Internet released recently as 2017 need this
* prefix, along with Qt4-based QtWebkit used in e.g. rekonq */
Massively shrink uncompressed CSS assets 6 bytes This is a good use of my time.
2021-02-12 21:43:30 +00:00
-webkit-filter: invert(1);
filter: invert(1);
Indieweb: add u-photo and h-entry where relevant Inspired by the h-entry implementation on Charlie Owen's personal website: https://whalecoiner.com The u-photo re-uses the 32px favicon that the browser has already cached, so it shouldn't bloat up the page anymore. These changes required a bit of additional CSS. I snuck in come color changes too.
2020-12-29 21:12:57 +00:00
}
CSS: navbar tweaks (responsiveness + color) - Dark mode: make navbar links the same color as regular links so as to not hide the fact that they are links. - Make navbar reflow at narrow window sizes
2020-11-26 06:19:52 +00:00
a {
CSS: Dark palette: switch to yellow links The newish APCA contrast algorithm correctly reveals that blue-on-black and purple-on-black links have lower perceptual contrast than yellow-on-black links. A Fediverse survey with 19 participants revealed that others tend to prefer the older look over this one, but the number in favor was much larger than I thought; it was a 3:2 split. I decided that on my poor laptop screen facing sunlight with simulated color vision deficiencies, the yellow links are indeed easier to read so I went with them.
2021-06-03 08:24:04 +00:00
color: #ed5;
Simplify styling Comply with the upcoming article on best practices for textual websites.
2020-11-23 23:47:27 +00:00
}
Batman!! (this commit has no parents) The sight of an animal using a JavaScript captivates Computer Scientists and laymen alike, perhaps because it forces us to question some of our ideas about human uniqueness. Does the animal know how JavaScript works? Did it anticipate the need for the tool and select it instead of Haskell or Zig? To some, this fascination with JavaScript seems arbitrary and anthropocentric; after all, animals engage in many other complex activities, like Agile Planning and ordering Juice on the Internet. However, we know that complex behaviour need not be cognitively demanding. JavaScript development can therefore provide a powerful window into the minds of animals, and help us to learn what capacities we share with them — and what might have changed to allow for the incontrovertibly unique levels of technology shown by modern humans, such as integers and block scope.
2020-11-03 23:46:20 +00:00
Greatly simplify CSS, dark theme fixes - Changed: Make all color codes 3-char. Shave off a few bytes. - Removed: all responsive layout besides the navigation links. Everything else should work well at all window sizes without making allowances for special cases. - Removed: redundant CSS rules - Added: centered images. Left-aligned images in a center-aligned column of text break flow. - Added: dark mode link colors for visited/active. Active link colors give better a11y. - Fix: don't show unnecessary scrollbar for <pre> blocks Also put more comments in the source to explain why each rule is important. All this shrunk the CSS from 1065 bytes to 882 bytes (17% reduction)
2020-12-16 07:18:18 +00:00
a:visited {
CSS: Dark palette: switch to yellow links The newish APCA contrast algorithm correctly reveals that blue-on-black and purple-on-black links have lower perceptual contrast than yellow-on-black links. A Fediverse survey with 19 participants revealed that others tend to prefer the older look over this one, but the number in favor was much larger than I thought; it was a 3:2 split. I decided that on my poor laptop screen facing sunlight with simulated color vision deficiencies, the yellow links are indeed easier to read so I went with them.
2021-06-03 08:24:04 +00:00
color: #ddc;
Greatly simplify CSS, dark theme fixes - Changed: Make all color codes 3-char. Shave off a few bytes. - Removed: all responsive layout besides the navigation links. Everything else should work well at all window sizes without making allowances for special cases. - Removed: redundant CSS rules - Added: centered images. Left-aligned images in a center-aligned column of text break flow. - Added: dark mode link colors for visited/active. Active link colors give better a11y. - Fix: don't show unnecessary scrollbar for <pre> blocks Also put more comments in the source to explain why each rule is important. All this shrunk the CSS from 1065 bytes to 882 bytes (17% reduction)
2020-12-16 07:18:18 +00:00
}
a:active {
CSS: Dark palette: switch to yellow links The newish APCA contrast algorithm correctly reveals that blue-on-black and purple-on-black links have lower perceptual contrast than yellow-on-black links. A Fediverse survey with 19 participants revealed that others tend to prefer the older look over this one, but the number in favor was much larger than I thought; it was a 3:2 split. I decided that on my poor laptop screen facing sunlight with simulated color vision deficiencies, the yellow links are indeed easier to read so I went with them.
2021-06-03 08:24:04 +00:00
color: #c80;
Simplify styling Comply with the upcoming article on best practices for textual websites.
2020-11-23 23:47:27 +00:00
}
CSS: clean up to match stylelint, csslint
2020-12-13 05:05:25 +00:00
CSS: blockquotes, re-use unstyled-list class - Make blockquotes look like blockquotes - Make the nav links use the unstyled-list class to avoid re-writing
2021-01-29 20:01:58 +00:00
blockquote,
Simplify CSS, remove unneeded rules It's even smaller now
2021-03-25 22:38:07 +00:00
p code,
CSS: blockquotes, re-use unstyled-list class - Make blockquotes look like blockquotes - Make the nav links use the unstyled-list class to avoid re-writing
2021-01-29 20:01:58 +00:00
hr,
pre {
Greatly simplify CSS, dark theme fixes - Changed: Make all color codes 3-char. Shave off a few bytes. - Removed: all responsive layout besides the navigation links. Everything else should work well at all window sizes without making allowances for special cases. - Removed: redundant CSS rules - Added: centered images. Left-aligned images in a center-aligned column of text break flow. - Added: dark mode link colors for visited/active. Active link colors give better a11y. - Fix: don't show unnecessary scrollbar for <pre> blocks Also put more comments in the source to explain why each rule is important. All this shrunk the CSS from 1065 bytes to 882 bytes (17% reduction)
2020-12-16 07:18:18 +00:00
border-color: #333;
Simplify styling Comply with the upcoming article on best practices for textual websites.
2020-11-23 23:47:27 +00:00
}
Batman!! (this commit has no parents) The sight of an animal using a JavaScript captivates Computer Scientists and laymen alike, perhaps because it forces us to question some of our ideas about human uniqueness. Does the animal know how JavaScript works? Did it anticipate the need for the tool and select it instead of Haskell or Zig? To some, this fascination with JavaScript seems arbitrary and anthropocentric; after all, animals engage in many other complex activities, like Agile Planning and ordering Juice on the Internet. However, we know that complex behaviour need not be cognitively demanding. JavaScript development can therefore provide a powerful window into the minds of animals, and help us to learn what capacities we share with them — and what might have changed to allow for the incontrovertibly unique levels of technology shown by modern humans, such as integers and block scope.
2020-11-03 23:46:20 +00:00
}
Reference in a new issue Copy permalink