This is the official website for Naposobulung HKBP Mustikajaya (NHKBP MJ), a youth community at HKBP Mustikajaya church.
- Built with: HTML, CSS (Tailwind), JavaScript
- Purpose: Share information about the youth community, events, gallery, and contact details.
- Deployed at: https://nhkbpmj.vercel.app
Recent enhancements focused on accessibility, consistency, and theming:
Defined in src/style.css under :root and overridden in .dark:
--primary / --primary-hover
--secondary
--accent / --accent-hover
--surface / --surface-alt
--border
--shadow-color
--text / --text-muted
--focus-ring
Use these variables for new components instead of hardcoded colors.
Toggle buttons (#theme-toggle, #theme-toggle-mobile) persist preference via localStorage (theme-preference).
Implementation adds/removes dark class on <html> (document.documentElement).
- Added
role="dialog",aria-modal="true", and labels for modals/lightbox. - Added focus outline via
:focus-visibleand consistent ring styling. - Navigation has
role="navigation"and proper labeling.
- Logo now has explicit
width/heightto reduce layout shift. - Reduced motion users get minimized animations via
prefers-reduced-motion.
When adding new interactive elements:
- Prefer buttons with
aria-labelfor icon-only actions. - Reuse
.theme-toggle-btnpattern for compact controls. - Use token-based colors and transitions with
var(--transition-base).
Open index.html via a simple static server (optional for local testing of routing/hash behavior):
python3 -m http.server 8080Visit http://localhost:8080/src/index.html
- Componentize repeated card patterns.
- Add semantic landmarks (
<main>) wrapper. - Integrate service worker for asset caching if needed.