2025/06/22

13:00:00 ± — Starting today’s work.

13:11:28 Fixed an issue that images in rhythmpedia.com are shown lager than the current screen

@media (min-width: 768px) {
  .lightbox img {
    max-width: 500px !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

Q: How can you achieve to make it only woks when it is not in the mobile mode?

.lightbox img {
  max-width: 500px !important;
  height: auto !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

It worked to change the default size in Quarto websites. Thank you very much for telling me how to achieve it.

But now I noticed that it breaks when it comes the mobile mode. How can you achieve to make it only woks when it is not in the mobile mode?

A:You can restrict the CSS rule to apply only on larger screens (non-mobile mode) by using a media query.

You can restrict the CSS rule to apply only on larger screens(non-mobile mode) by using a media query. Here’s how to modify yourCSS:

@media (min-width: 768px) {
  .lightbox img {
    max-width: 500px !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
✅ What this does:
  • The styles inside @media (min-width: 768px) will only apply whenthe screen width is 768 pixels or larger (i.e., tablets anddesktops).
  • On mobile devices (narrower than 768px), the image will use thedefault lightbox styles, which are typically responsive and smaller.

You can adjust 768px to match your design breakpoint if needed (e.g.,640px, 1024px, etc.).

Q: Will it be harmonized with Quarto’s responsive behavior

Will it be harmonized with Quarto’s responsive behavior

A:

Yes — using a media query like @media (min-width: 768px) isharmonized with Quarto’s responsive design. Here’s why:

✅ Why it’s safe and harmonized:

  1. Quarto uses Bootstrap 5 by default, which is fully responsiveand also uses standard breakpoints like 768px, 992px, etc.

    • So your @media (min-width: 768px) rule aligns exactly withBootstrap’s md breakpoint (medium devices and up).
    • This means your override will only apply on tablets andlarger, which fits well with Quarto’s layout behavior.

  2. Mobile fallback remains untouched.

    • On mobile (below 768px), your rule won’t apply, and Quarto’sbuilt-in responsive image behavior will take over. This ensuresimages remain flexible and appropriately sized.

  3. No layout breakage expected.

    • Your styling just constrains image size and centers it, withouthardcoding height or overriding container constraints.
    • This makes it non-invasive and safe to use alongside Quarto’sdefault theme logic.
🧪 You can confirm it’s working harmoniously by:
  • Opening DevTools → Emulating different screen widths
  • Checking .lightbox img computed styles at <768px vs ≥768px
  • Ensuring images stay within their container and don’t overflow orbecome blurry
Optional fine-tuning:

If you want images to scale smoothly between small and large screens,you could use a percentage-based max-width or clamp units:

@media (min-width: 768px) {
  .lightbox img {
    max-width: clamp(300px, 50%, 500px) !important;
  }
}

Let me know if you’d like to harmonize it further with other breakpoints(lg, xl, etc.) or support dark mode too.

13:21:10 Learned how to input ± in Unicode Hex Input keyboard in MacOS

Solution : Just press 00b1 after switching to Unicode Hex Input keyboard.

  • ± 00b1 Plus minus.
  • — 2014 Em dash.

13:22:16 — Starting a break.

12:00:00 — Starting lunch break.

13:00:00 — Ending lunch break.

18:30:00 — Beginning end-of-day reflection.

19:00:00 — Finishing today’s work.

目次