home
NOTE: Under Construction - I'm in the middle of upgrading my site and lots of stuff is kinda broken. Please forgive the mess.

Review: Stop Over-Engineering Your CSS - Kevin Powell (4min)

3 out of 3 starts: ✭✭✭

This is great. A couple dozen lines of CSS and you have a responsive site with automatic dark mode that doesn't look half bad.

July 2023
Code
img { 
  max-width: 100%;
  display: block;
}
Code
img, 
svg, 
video { 
  max-width: 100%;
  display: block;
}
Code
body {
  font-family: system-ui;
  font-size: 1.125rem;
  line-height: 1.5;
}
Code
html {
  color-scheme: light dark;
}
Code
main {
  width: min(70ch, 100% - 3rem);
  margin-inline: auto;
}

And that's it, short sweet and very well done.

═══ § ═══