Archives

Types
Dates
  1. I'm trying to use #Leonardo to create a real set of design tokens for the colors I currently use on https://nicolas-hoizey.photo but I didn't find how to set the background color to #292929 instead of white… 🤷‍♂️

    A screenshot of Leonardo UI with the background set to white

    https://leonardocolor.io/theme.html?name=nicolas-hoizey.photo&config={"baseScale"%3A"Gray"%2C"colorScales"%3A[{"name"%3A"Gray"%2C"colorKeys"%3A["%23000000"]%2C"colorspace"%3A"RGB"%2C"ratios"%3A["1.45"%2C"2.05"%2C"3.03"%2C"4.54"%2C"7"%2C"10.86"]%2C"smooth"%3Afalse}%2C{"name"%3A"Rebecca+Purple"%2C"colorKeys"%3A["%23663399"]%2C"colorspace"%3A"HSL"%2C"ratios"%3A["1.45"%2C"2.05"%2C"3.03"%2C"4.54"%2C"7"%2C"10.86"]%2C"smooth"%3Atrue}]%2C"lightness"%3A100%2C"contrast"%3A1.19%2C"saturation"%3A100%2C"formula"%3A"wcag2"}

  2. Navigation doesn’t have to be hidden behind a "Menu"-button. If it matters, we need to show it, and do so prominently. Some items are more important or more frequently used, so they might deserve a little bit more spotlight in your navigation.

    In addition to prominent navigation options @vitalyf shows in his thread, I really like the horizontal overflow scrolling navigation, enhanced with @LeaVerou's scrolling shadows.

  3. TIL @​media not (min-width: 60rem) { … } doesn't work in Safari, while it works in Chromium and Firefox.

    Safari requires a media type, like all.

    So here's the "right" syntax:
    @​media not all and (min-width: 60rem) { … }