Skip to content

Commit 30afc5b

Browse files
KristjanESPERANTOkhassel
KristjanESPERANTO
and
khassel
authored
Modernize MagicMirror² Website (#22)
* Add favicon * Upgrade FontAwesome from 4.6.3 to 6.5.1 - 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 * Remove jQuery and Bootstrap dependencies - 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 * Fix fade-in animation for feature boxes 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 * Add fade-in animations to sections * Modernize CSS with auto-fit grid and fluid typography - 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 * Add dark mode with theme toggle and extract JS to ES module - 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 - 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 * Add demo GIF section with modal functionality * Add root index.html for GitHub pages * Remove Snyk badge We removed Snyk 2020 from the projects repository: MagicMirrorOrg/MagicMirror@40886bc * Use better MagPi image in dark mode * Enhance navbar and MagPi image styles for improved layout and responsiveness * Make demo max-width 100% on small screens --------- Co-authored-by: Karsten Hassel <hassel@gmx.de>
1 parent 90fc155 commit 30afc5b

5 files changed

Lines changed: 636 additions & 285 deletions

File tree

‎index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="refresh" content="0; url=public/index.html">
6+
<link rel="canonical" href="public/index.html">
7+
<script>window.location.replace("public/index.html");</script>
8+
</head>
9+
<body>
10+
<p>Redirecting to <a href="public/index.html">MagicMirror²</a>...</p>
11+
</body>
12+
</html>

‎public/img/favicon.svg‎

Lines changed: 5 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)