diff --git a/src/posts/2026/2026-05-07-core-css.md b/src/posts/2026/2026-06-30-core-css.md similarity index 96% rename from src/posts/2026/2026-05-07-core-css.md rename to src/posts/2026/2026-06-30-core-css.md index c7578a86..59a3680c 100644 --- a/src/posts/2026/2026-05-07-core-css.md +++ b/src/posts/2026/2026-06-30-core-css.md @@ -15,7 +15,7 @@ Want to just see the final stylesheet? [Skip to the end of the page](#result). ## 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 @@ -40,7 +40,7 @@ body { ### 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.