Add responsive styles and theme detection

[furkantokkan]

Enhance Pomodoro Timer Responsiveness and Visual Adaptability

This pull request enhances the Pomodoro Timer’s responsiveness, visual adaptability, and overall user experience, especially for mobile users and those with dark mode preferences. The improvements primarily focus on refining CSS for responsiveness, detecting theme preferences dynamically, and optimizing layout consistency.

Responsive Design and Layout Improvements:

• Introduced responsive CSS rules in style.css to ensure the timer adapts well to small screens. This includes adjustments to padding, font sizes, flex directions, and container widths.
• Updated layout-related styles for .clock-container, #root, and other elements to incorporate box-sizing: border-box, flexible sizing, and spacing for enhanced alignment and scaling.
  • Related Changes: [1] [2] [3]

Theme and Accessibility Enhancements:

• Added a JavaScript script to detect the user's color scheme preference (dark or light mode) and dynamically adjust the background color for a smoother integration with environments like Notion.
• Set the body background to transparent in style.css to support the JavaScript-driven theme detection.

Mobile Optimization:

• Included the viewport meta tag in index.html to ensure proper scaling and rendering on mobile devices.

Minor Usability Tweaks:

• Applied cursor: pointer to interactive buttons for clearer feedback and improved user interactivity.

Bug Fixes:

• Fixed background color issues when the timer is embedded in Notion, ensuring correct display in both light and dark modes.
• Ensured that the responsive design works properly on mobile devices and prevents layout breaks.

Other Changes:

• Adjusted container sizing to avoid overflow issues.
• Optimized layout for compatibility with the Notion widget.

Images

Responsive Layout Example

Dark Mode Layout

Light Mode Layout