Redesign Calendar Event Card for Responsive View

[risushi]

The current mobile event card provides great info but could be refined to improve hierarchy, readability, and visual consistency for smaller screens. Here's an idea to better align with the rest of the site’s UI style.

Design Goals

• Improve information hierarchy for quick scanning (title → host → date/time → content → action).
• Create clearer visual separation between metadata (host/date) and details (description, agenda).
• Make the “View event details” button stand out as the primary call to action.

Proposed Design Updates
Header Section

• Background gradient or solid color block under title to distinguish title from host/date and body. (play with gradient colors perhaps?)
• Rounded 8px corners to better match button style and community feel
• Host name, date and time in medium font weight, 14px min font size (I'd try something larger and see how it looks first to decide)

Body Section

• Use a white bg with rounded corners (border-radius: 8px) and shadow for depth to help body stand out and blend with card header

Additional Context

• Must allow for markdown to display correctly first
• Truncate description after 7 lines OR create a card with variable height
• Use multiples of 8px for spacing. Less for related pieces, more for different sections.

Call to Action

• Add a new seconday button labeled “View event details” or other microcopy that clearly indicates where user is going
• Include an arrow-up-right-from-square Font Awesome icon to indicate it opens externally
• New secondary button uses dark site color, as the inverse of the primary button, for use on light backgrounds

Accessibility

• Ensure text contrast meets WCAG AA standards.
• Button and card elements must be keyboard-focusable.

[MegTheDev]

Thanks for documenting this!