How to program a dark theme for a website. It is easier than expected with @media (prefers-color-scheme: dark) and css variables !

TL;DR; Use hsl isntead of RGB to create a gradient. This will avoid a grey zone. But using hsl is not available in CSS for now, so we can use a linear-gradient from a multiple of colors instead. Each color have to be similar to its neighbors... and it works !

and here the tool: https://www.joshwcomeau.com/gradient-generator/

Display an item on scroll.

TL;DR but still interesting. In case I need it, I know how to find it

I bookmark this post especially for this code snippet:

body {
    margin: 0 auto;
    max-width: 40rem; // can be bigger but not too much ! (<= 80 I think)
    font-size: 1.2rem;
}

It makes a HTML website directly readable :)

Now I understand how it is useful 👍‍

A minimal CSS reset with every line explained.

Why would I use this?

If you just want to launch already.
An MVP is a temporary site, it doesn't have to be and shouldn't be perfect.

Solution: Using 1 subgrid per element inside a grid.

Codepen: https://codepen.io/michellebarker/pen/JjGNdNY

In the console: $0.offsetParent → $0 is the currently set element.

Then we can use the offsetParent object property to find the closest ancestor to that element that has its position set to something other than static.

Solutions:

1. styling it manually through CSS :

   input:focus {
   outline: 2px solid deeppink;
   }

2. A keyup tab event listener. Think about adding the class through JS, that way the focus will still be accessible if JS fails to load.

3. the property ::focus-visible

The background color of checkboxes will be the one determined by accent-color. Nice !

And the surrounding stays accessible whatever this color is as the webbrowsers have their own implementation of this.

When to use the drop-shadow filter:

• on a non-rectangular shadow (or clipped elements)
• on a group of box

Limitation: it does not have the spread parameter.

A code snippet is provided for it. Well done.

A curated list of CSS named colors.

mBarker84 made a list with these names only on Github

border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999))); → maybe too clever as the line is hard to understand.

and

grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));

This is a great snippet, but there is absolutely zero chance I’m going to remember how to write it every time.

Another trick is to use a toggle value stored in a css variable.

Water.css is a drop-in collection of CSS styles to make simple websites like this just a little bit nicer.

html {
  max-width: 70ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  font-size: 1.25em;
}

and 100 more bytes:

h1,h2,h3,h4,h5,h6 {
  margin: 3em 0 1em;
}

p,ul,ol {
  margin-bottom: 2em;
  color: #1d1d1d;
  font-family: sans-serif;
}