Skeuomorphic Lunar Desk Calendar

The Skeuomorphic Lunar Desk Calendar is a digital recreation of the traditional “Hardware Store Calendar”. It bridges the gap between physical paper textures and dynamic digital logic, providing users with both Gregorian and Lunar dates. Its function is to serve as a high-fidelity desktop widget that celebrates heritage design through modern CSS geometry.

Specs

• Weight: ~12 KB (CSS + JS). Zero external dependencies.
• Performance: High. Periodic updates are limited to a 1-second interval for the clock.
• Theming / Customization: Two-state design (Light/Dark). The dark mode introduces a “backlit” neon effect.
• Responsiveness: Mobile-optimized via transform: scale() for smaller viewports.
• Web APIs: Standard JavaScript Date API.
• Graceful Degradation: Fails to a static layout if JavaScript is disabled. 3D effects require CSS transform and skew support.

Anatomy

The component is built using layered logic to simulate physical mass.

• HTML (The Skeleton): A nested structure consisting of a .header (binding pins), .body (large typography), and .footer (mini-grid and lunar details).
• CSS (The Skin): Sass logic defines the 3D depth. It uses ::before and ::after pseudo-elements with skew(0, 20deg) and stacked box-shadow to create the “thickness” of a paper stack.
• JS (The Nervous System): A custom engine that calculates days in a month and processes a hexadecimal dataset (lunarData) covering the years 1900 to 2100 to derive precise lunar offsets.

Logic

The heart of the skeuomorphism is the “Paper Edge” simulation.

&::before
  box-shadow: 0 0 2px 1px #79746B, 1px*1 -22px*1 2px 1px #A07F2E, 1px*2 -22px*2 2px 1px #884940, ...

Instead of a flat border, the developer uses a single box-shadow property with 14 comma-separated values. Each value is mathematically offset by 1px to create a multicolored, layered “stack” effect. This mimics the appearance of individual colored pages pressed together, providing a tactile feel without increasing the DOM size.

Feel

Substantial and nostalgic. In light mode, it feels like a heavy block of high-quality paper sitting on a desk. Activating the “Light” switch transforms the experience: the background dims, and the typography gains a vibrant text-shadow glow.