Modernize MagicMirror² Website #22

KristjanESPERANTO · 2026-01-05T04:03:43Z

Live result you can checkout here: https://kristjanesperanto.github.io/MagicMirror-Website/

To compare: https://magicmirror.builders/

Major Changes

Dependencies

Remove jQuery 3.7.1, Bootstrap 3.3.7, and animate.css
Replace with vanilla JavaScript and CSS

Dark Mode

Theme toggle with localStorage → system preference → light fallback
Dynamic icon switching and smooth 0.3s transitions

Modern CSS & Responsive Design

Auto-fit grid
Fluid typography with clamp() for headings, text, and spacing
Unified 825px breakpoint for better navbar layout
Fluid jumbotron background positioning and sizing
Responsive magpi-watermark: clamp(60px, 12vw, 125px)

Visual Enhancements

FontAwesome 4.6.3 → 7.0.1
Demo GIF section with click-to-enlarge modal
SVG favicon (same as added to MagicMirror itself refactor: unify favicon for index.html and Electron MagicMirror#4006)

Deployment

Root index.html redirect for GitHub Pages support (for testing like this: https://kristjanesperanto.github.io/MagicMirror-Website/)

Benefits

Faster load times
Better accessibility (semantic HTML, ARIA labels)
Native dark mode with user preference detection
Smooth animations without libraries
Fully responsive without hard breakpoints
Easier to maintain by cutting down hidden complexity (getting rid of third-party libraries) and using vanilla JS + modern CSS

- Replace deprecated use.fontawesome.com script with cdnjs CSS link - Update all icons to FontAwesome 6 syntax (fa-solid, fa-brands) - Replace fa-diamond with fa-gem (diamond removed in FA5+) - Replace fa-simplybuilt with fa-discord for Discord link

- Replace Bootstrap with custom vanilla CSS - Remove jQuery dependency - Replace Bootstrap Grid with CSS Grid and Flexbox - Add semantic HTML5 structure (main, header, section, footer) - Maintain identical visual appearance and functionality

Implement proper scroll-triggered fadeInUp animation using Intersection Observer and vanilla CSS. The animation was previously broken due to missing JavaScript trigger - animate.css only provided the CSS but no scroll detection. - Add custom fade-in-up CSS with 30px translateY and smooth transitions - Implement Intersection Observer to trigger animation on scroll - Add staggered animation with 150ms delay between boxes - Remove animate.css dependency (67KB saved) Side effect: One less external dependency to maintain

- Replace fixed grid breakpoints with auto-fit minmax() (removed 2 media queries) - Use clamp() for fluid logo and section spacing (removed 1 media query) - Unify all breakpoints to 767px for consistency - Move media queries next to their components for better maintainability - Remove deprecated 'only screen and' syntax - Remove unnecessary !important in media queries

- CSS custom properties for light/dark themes with 0.3s transitions - Theme toggle button with localStorage → system preference → fallback logic - Extract all JavaScript to main.js ES module in <head>

- Convert fixed sizes to clamp(): h2, h3, lead, grid gap, jumbotron padding - magpi-watermark now scales with viewport - Adjust responsive breakpoint to 825px for better navbar layout"

rejas · 2026-01-05T09:49:25Z

Great incentive, I really like this modernization.

Two things though (that are already present on the current site):

snyk security badge: are we really using this? has anyone configured that? @MichMich ?
positioning of the top-pick-logo, it doesnt play well when the viewport gets smaller
coloring of the top-pick-logo, svg would be better but I couldnt find any. any idea how to make it look good on dark mode?

We removed Snyk 2020 from the projects repository: MagicMirrorOrg/MagicMirror@40886bc

…iveness

KristjanESPERANTO · 2026-01-05T15:38:57Z

Thanks for the feedback! It seems that my sleep problems have actually led to something productive 😅

Snyk: We removed Snyk 2020 from the projects repository: MagicMirrorOrg/MagicMirror@40886bc. That looks pretty clear, so I've just removed the badge here as well.
positioning of the top-pick-logo: The positioning was already like this before the PR. But I think I've found a goodsolution with the last commit.
coloring of the top-pick-logo: Fortunately, there was already a suitable image for this in the repo. I just changed it that it is now been used in dark mode.

Live preview is also updated: https://kristjanesperanto.github.io/MagicMirror-Website/

KristjanESPERANTO · 2026-01-05T15:49:26Z

@khassel Can you explain why you are in the commit? I'm not aware that I did anything special, but you are listed as the author and I'm as the committer 🤔

I would leave it as it is if you don't mind, or should I straighten it out?

rejas · 2026-01-05T15:59:26Z

Speaking of badges: I would like to get the openssf best practice badge to 100%, alas the module on bestpractices.dev is owned by @nhubbard maybe he can move it over to one of us if he sees this message?
Otherwise this PR looks fine to me

nhubbard · 2026-01-05T16:00:29Z

@rejas Wow I completely forgot about that! Let me see if I can move it.

rejas · 2026-01-05T16:01:04Z

@rejas Wow I completely forgot about that! Let me see if I can move it.

Fastest reaction I ever had from someone outside of a project :-D

nhubbard · 2026-01-05T16:04:56Z

@rejas Can you link me your BestPractices.dev profile? I'm submitting a request to see if it can be transferred. If it can, I'll have them transfer it to you. If not, I'll delete my account and see if they can move it to you.

rejas · 2026-01-05T16:18:12Z

@rejas Can you link me your BestPractices.dev profile? I'm submitting a request to see if it can be transferred. If it can, I'll have them transfer it to you. If not, I'll delete my account and see if they can move it to you.

it's https://www.bestpractices.dev/en/users/8747 thanks for your time and effort!

khassel · 2026-01-05T17:49:42Z

@khassel Can you explain why you are in the commit? I'm not aware that I did anything special, but you are listed as the author and I'm as the committer 🤔

I would leave it as it is if you don't mind, or should I straighten it out?

can't explain, don't know what you did ... I did not touch your fork. But no problem, leave it as it is.

The date of this strange commit is exactly the date of my last commit in this repo:

khassel · 2026-01-05T18:23:56Z

@rejas can we merge this or is the "not 100% badge" something we have to wait for?

nhubbard · 2026-01-07T23:33:09Z

@rejas I just finished the transfer to your BestPractices account. Apparently there was a way in the UI, but I couldn't find it anywhere when I looked for it.

rejas · 2026-01-08T06:02:51Z

@rejas I just finished the transfer to your BestPractices account. Apparently there was a way in the UI, but I couldn't find it anywhere when I looked for it.

Thanks, shows up as "owned" in my accoutn now.

KristjanESPERANTO added 11 commits January 4, 2026 18:46

Add favicon

7d3fd06

Remove jQuery and Bootstrap dependencies

897359c

- Replace Bootstrap with custom vanilla CSS - Remove jQuery dependency - Replace Bootstrap Grid with CSS Grid and Flexbox - Add semantic HTML5 structure (main, header, section, footer) - Maintain identical visual appearance and functionality

Add fade-in animations to sections

2b9baf5

Add dark mode with theme toggle and extract JS to ES module

976ea76

- CSS custom properties for light/dark themes with 0.3s transitions - Theme toggle button with localStorage → system preference → fallback logic - Extract all JavaScript to main.js ES module in <head>

Improve fluid typography and spacing

7925644

- Convert fixed sizes to clamp(): h2, h3, lead, grid gap, jumbotron padding - magpi-watermark now scales with viewport - Adjust responsive breakpoint to 825px for better navbar layout"

Update jumbotron background properties for improved responsiveness

3e72269

Add demo GIF section with modal functionality

7c50198

Add root index.html for GitHub pages

867722a

khassel and others added 3 commits January 5, 2026 14:57

Remove Snyk badge

8408369

We removed Snyk 2020 from the projects repository: MagicMirrorOrg/MagicMirror@40886bc

Use better MagPi image in dark mode

a173c2c

Enhance navbar and MagPi image styles for improved layout and respons…

62dec26

…iveness

Make demo max-width 100% on small screens

73ce1ac

rejas approved these changes Jan 5, 2026

View reviewed changes

khassel approved these changes Jan 5, 2026

View reviewed changes

rejas merged commit 30afc5b into MagicMirrorOrg:master Jan 5, 2026

Modernize MagicMirror² Website #22

Modernize MagicMirror² Website #22

Uh oh!

Conversation

KristjanESPERANTO commented Jan 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Major Changes

Benefits

Uh oh!

rejas commented Jan 5, 2026

Uh oh!

KristjanESPERANTO commented Jan 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

KristjanESPERANTO commented Jan 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rejas commented Jan 5, 2026

Uh oh!

nhubbard commented Jan 5, 2026

Uh oh!

rejas commented Jan 5, 2026

Uh oh!

nhubbard commented Jan 5, 2026

Uh oh!

rejas commented Jan 5, 2026

Uh oh!

khassel commented Jan 5, 2026

Uh oh!

khassel commented Jan 5, 2026

Uh oh!

nhubbard commented Jan 7, 2026

Uh oh!

rejas commented Jan 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

KristjanESPERANTO commented Jan 5, 2026 •

edited

Loading

KristjanESPERANTO commented Jan 5, 2026 •

edited

Loading

KristjanESPERANTO commented Jan 5, 2026 •

edited

Loading