Sun, 22 Jun 2025 00:00:25 +0900

Table of Contents

Previous Day’s Work Summary

Today’s Work Plan

Today’s Work Log

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 your CSS:

@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 when the screen width is 768 pixels or larger (i.e., tablets and desktops).
• On mobile devices (narrower than 768px), the image will use the default lightbox styles, which are typically responsive and smaller.

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

---

📘 Related topics you might want to ask about:

• How to apply different image styles in dark mode
• How to override Quarto’s theme-specific image handling
• How to test breakpoints visually in a browser

Let me know if you’d like to support different styles for tablets vs desktops too.

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) is harmonized with Quarto’s responsive design. Here’s why:

---

✅ Why it’s safe and harmonized:

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

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

2. Mobile fallback remains untouched.

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

3. No layout breakage expected.

   • Your styling just constrains image size and centers it, without hardcoding height or overriding container constraints.
   • This makes it non-invasive and safe to use alongside Quarto’s default 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 or become 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.

Today’s Work Summary

Tomorrow’s Work Plan

Today’s Work Report

Closing Comment for the Day

Daily Reminders

Work-related Notes

• Start with simple tasks.
• Develop with room for improvement.
• Don’t aim for perfection from the start.
• Don’t worry too much about small details.
• Prioritize completing the overall flow first.
• Improve efficiency after things are running.
• Don’t try to write the smallest possible SQL (avoid premature optimization).
• Don’t attempt things that HTML can’t do.
• Separate tables for screen display from those required for system operation.

Technical Notes

• Write lots of SQL, lots of API code, and lots of React.js code.
• Don’t overthink—just keep moving your hands.
• Use different method names for APIs with different behaviors. Avoid putting conditional logic into APIs as much as possible.

Mental Notes

• Be mindful not to lose focus.
• Stay aware of how to boost your concentration.
• Rest before getting tired.
• Future tasks will involve repetition, so think about improving efficiency.
• Don’t let hyperfocus lead to physical burnout.