inherentlee/leecat.art
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

core css

Browse Source
This commit is contained in:
Lee Cattarin
2026-06-30 16:27:19 -07:00
parent 7ede08fd43
commit 8c135a09c7
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/posts/2026/2026-05-07-core-css.md → src/posts/2026/2026-06-30-core-css.md
View File

@ -15,7 +15,7 @@ Want to just see the final stylesheet? [Skip to the end of the page](#result).
## CSS resets ## CSS resets
Before we start: this isn't a CSS reset. You may want to apply it in concert with one. While writing this, a friend recommended [Josh W. Comeau's CSS Reset](https://www.joshwcomeau.com/css/custom-css-reset/){target="_blank" rel="external"}, which looks largely very solid to me. However, if using that particular reset, I would ***not*** reset default margins (rule 2). They are tremendously useful in this case, where we are unlikely to be setting margins on elements individually. I would, quite specifically, grab his rules 1 (box-sizing model) and 6 (improve media defaults). I also cover the ruleset from "improve media defaults" later under [the images section](#images), with an additional rule. Before we start: this isn't a CSS reset. You may want to apply it in concert with one. While writing this, a friend recommended [Josh W. Comeau's CSS Reset](https://www.joshwcomeau.com/css/custom-css-reset/){target="_blank" rel="external"}, which looks largely very solid to me. However, if using that particular reset, I would ***not*** reset default margins (rule 2). They are tremendously useful in this case, where we are unlikely to be setting margins on elements individually.
## color ## color
@ -40,7 +40,7 @@ body {
### accents ### accents
Skip this section and go right to [focus indication](#focus-indication) if you have never had any color vision. If you've previously had color vision, have partial color vision, etc, read on. To skip reading about accent colors, head right to [focus indication](#focus-indication).
If you have any opinions about color, you might pick accents. At the simplest level, I'd pick one for light mode and one for dark mode. [XKCD has a color sheet based on a wide survey](https://xkcd.com/color/rgb/){target="_blank" rel="external"} that is potentially useful here. Validate that the color contrast is enough with a tool like [WebAIM's Contrast Checker](https://webaim.org/resources/contrastchecker/){target="_blank" rel="external"}. You might color your headers and links. If you have any opinions about color, you might pick accents. At the simplest level, I'd pick one for light mode and one for dark mode. [XKCD has a color sheet based on a wide survey](https://xkcd.com/color/rgb/){target="_blank" rel="external"} that is potentially useful here. Validate that the color contrast is enough with a tool like [WebAIM's Contrast Checker](https://webaim.org/resources/contrastchecker/){target="_blank" rel="external"}. You might color your headers and links.