jon/bmthTech-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix drone dark mode regression and add devkit video

Browse Source 
- Apply filter:invert(1) to the SVG element directly instead of the wrapper div,
  with explicit background:#000 on the container in dark mode — more reliable than
  inverting the whole div and avoids edge cases with the white background trick
- Replace devkits img-slot placeholder with droneRun.webm autoplay loop video

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jon
2026-07-13 23:46:02 +01:00
parent 308ea34fb5
commit f487bb2d95
2 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@@ -280,9 +280,9 @@
<a href="devkits.html" class="btn btn-dark btn-lg">Buy a devkit</a> <a href="devkits.html" class="btn btn-dark btn-lg">Buy a devkit</a>
</div> </div>
</div> </div>
<div class="img-slot" style="height:clamp(360px,42vw,520px);" role="img" aria-label="Devkit photo"> <video style="width:100%;height:clamp(360px,42vw,520px);object-fit:cover;border-radius:22px;display:block;" autoplay muted loop playsinline>
Drop a devkit / PCB photo here <source src="droneRun.webm" type="video/webm">
</div> </video>
</div> </div>
</div> </div>
</section> </section>

3
style.css
View File

@@ -257,7 +257,8 @@ img { display: block; max-width: 100%; }
height: clamp(360px, 48vw, 640px); height: clamp(360px, 48vw, 640px);
} }
html.dark .drone-vision-bg { filter: invert(1); } html.dark .drone-vision-bg { background: #000; }
html.dark .drone-vision-bg svg { filter: invert(1); }
.hero-caps-strip { .hero-caps-strip {
background: rgba(255,255,255,0.86); background: rgba(255,255,255,0.86);