fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-12-27 10:52:09 +00:00
Code Issues Projects Releases Wiki Activity
seirdy.one/assets/css/main.css

92 lines
2 KiB
CSS
Raw Normal View History

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
/* CSS that adds the bare minimum for a simple layout */
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
/* This site's CSS does 11 major things:
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
* 1. sans-serif instead of serif for low-res screens.
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
* 2. Consistent font size; <pre> and <code> shouldn't be smaller than regular text.
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
* 3. max text width for readability
* 4. single-row nav links widescreen, multiline nav on narrow screens
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
* 5. Bold "home" link that doubles as a site header
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
* 6. Soft border around code in case it looks too similar to regular
* text, and to show it continue across more than one line
Simplify CSS, remove unneeded rules It's even smaller now
2021-03-25 22:38:07 +00:00
* 7. Horizontally center non-inline images; left-aligned stick out.
* 8. Padding/line-height fixes so the above changes don't ruin alignment.
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
* 9. dark.css changes a few colors if the browser wants dark mode.
Simplify CSS, remove unneeded rules It's even smaller now
2021-03-25 22:38:07 +00:00
* 10. Make blockquotes stand out a little; some browsers don't make them obvious
* 11. Support unstyled lists: for webmentions, post lists, nav links.
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
* Everything else is browser defaults:
* default fonts, non-dark-mode colors, etc.
*/
Remove unneeded CSS
2020-12-27 05:04:25 +00:00
body {
Remove un-needed/duplicate CSS rules Lol why haven't I inlined my CSS yet it's like <800 bytes uncompressed now.
2021-01-27 21:36:19 +00:00
font: 16px sans-serif;
CSS: back to old line height Line height was too high before.
2021-01-28 19:00:47 +00:00
line-height: 1.5rem;
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
margin: auto;
Adjust text width/responsiveness - Text width was too wide on wide screens; reduce it. - Make the nav-links' responsive layout for narrow viewports trigger at a narrower window size. It used to trigger at 600px, but I made it trigger at 32rem instead since the nav links aren't too wide. This also handles cases where users' default sans-serif fonts are very wide: rem measures by character width instead of pixels. - Make the narrow-optimized multiline-navlinks the default, and make widescreens a special case detected with a CSS media query. Previously, widescreens were the default; however, this meant that browsers that didn't support media queries (like dillo and netsurf) couldn't switch to the multi-line navigation at narrow widths. This is a good example of progressive enhancement; modern browsers will get the same behavior as before, but the lowest common denominator will see a better experience. - Don't further reduce the max-width for narrow screens; narrow screens are already narrow. We now have one less CSS rule.
2020-12-16 07:16:22 +00:00
max-width: 50rem;
Remove unneeded CSS
2020-12-27 05:04:25 +00:00
padding: 0 5%;
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: 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 {
border-left: 6px solid #bbb;
margin-left: 0;
padding-left: 1.5rem;
}
CSS: back to old line height Line height was too high before.
2021-01-28 19:00:47 +00:00
h1,
h2,
h3 {
line-height: 1.75rem;
}
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
/* nav links should be easy to tap with fat fingers */
Remove redundant CSS selectors Thanks to YellowLabTools for pointing that out
2020-12-19 02:30:34 +00:00
nav li {
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
padding-right: 0.5rem;
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: 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
/* Lists without bullets; navlinks, posts lists, webmentions */
Indieweb: statically display webmentions Statically grab and include webmentions during Hugo builds, no JS involved. Hugo supports making web requests and parsing the resulting JSON, so there was no need to use an external program either.
2021-01-18 03:42:07 +00:00
.unstyled-list {
Chore: CSS re-org Because csslint wants CSS to be in ascending specificity.
2020-12-20 02:01:50 +00:00
padding: 0;
}
Indieweb: statically display webmentions Statically grab and include webmentions during Hugo builds, no JS involved. Hugo supports making web requests and parsing the resulting JSON, so there was no need to use an external program either.
2021-01-18 03:42:07 +00:00
.unstyled-list li {
Chore: CSS re-org Because csslint wants CSS to be in ascending specificity.
2020-12-20 02:01:50 +00:00
list-style-type: none;
Simplify CSS, remove unneeded rules It's even smaller now
2021-03-25 22:38:07 +00:00
margin-bottom: 0.5rem;
Chore: CSS re-org Because csslint wants CSS to be in ascending specificity.
2020-12-20 02:01:50 +00:00
}
Simplify CSS, remove unneeded rules It's even smaller now
2021-03-25 22:38:07 +00:00
/* Make the home link bold to serve as a site heading */
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
.home {
font-weight: bold;
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: clean up to match stylelint, csslint
2020-12-13 05:05:25 +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
/* single-line nav on widescreen, multi-line nav on narrow screens */
Simplify CSS, remove unneeded rules It's even smaller now
2021-03-25 22:38:07 +00:00
@media (min-width: 28rem) {
Remove redundant CSS selectors Thanks to YellowLabTools for pointing that out
2020-12-19 02:30:34 +00:00
nav li {
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
display: inline;
}
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
}
Size: remove some unused styles
2020-11-30 21:17:15 +00:00
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
img:not(.u-photo) {
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
display: block;
CLS: Declare original image dimensions in HTML Reduce Cumulative Layout Shift (CLS) by declaring original image dimensions in HTML before re-scaling with CSS. This tells browsers the image's aspect ratio before the image and the stylesheet load, allowing browsers to block out space accordingly to avoid making elements "jump" during loading. More info: https://web.dev/optimize-cls/
2020-12-16 07:09:45 +00:00
height: auto;
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
margin: auto;
csslint compliance and simplification
2020-12-12 10:42:45 +00:00
max-width: 100%;
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
}
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
.u-photo {
vertical-align: -0.1em;
}
csslint compliance and simplification
2020-12-12 10:42:45 +00:00
pre,
Simplify CSS, remove unneeded rules It's even smaller now
2021-03-25 22:38:07 +00:00
p code {
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: 1px solid #bbb;
Remove unneeded CSS
2020-12-27 05:04:25 +00:00
padding: 0 0.25rem;
Simplify/reduce custom colors - Make default stylesheet use browser preferred colors - Stop using css vars for better compatibility with old browsers
2020-11-25 01:09:26 +00:00
}
Size: remove some unused styles
2020-11-30 21:17:15 +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
/* Allow horizontal scroll in a pre block, but don't clip it vertically */
csslint compliance and simplification
2020-12-12 10:42:45 +00:00
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
/* csslint ignore:start */
overflow: auto visible;
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
/* csslint ignore:end */
Increase padding/tap-targets - Adding more detail to the bulleted list in /about.html makes it easier to tap links since they're further apart - Pad code frames a bit
2020-12-24 01:04:40 +00:00
padding: 0.5rem;
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