Daily Dev Notes 2024/06/19

Just did some minor tweaks on the styling on this site today. I really enjoy playing with modern CSS - it's so easy to make simple but complex (if that makes sense) changes. Also, having GitHub Copilot in VS Code makes this even easier. Now, when this site is viewed on mobile, there are no more overlapping elements that overflow into the margins.

A typical workflow is this: open the CSS file and press command + / to enter a comment, then type "Reduce the padding on the nav li elements at small screen size." Then press enter and wait half a second for the code snippet to appear. Customise it a bit and hey-presto, it's done!

This is what Copilot produced.

/* Reduce padding on the nav li elements at small screen size. */
@media (max-width: 576px) {
  nav ul li {
    padding: 0.5em;
  }
}

And this is the CSS code after a bit of tweaking:

@media (max-width: 400px) {
  nav ul li {
    padding: var(--pico-nav-element-spacing-vertical) 0.25em;
  }
}

Love it! 👍