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

Restructure hero: SVG full-width block, copy flows below

Browse Source 
Removes the absolute-positioned overlay layout. The drone AI vision SVG now sits as a full-width block element sized by CSS height (clamp 360px–640px), with the Build/Share/Deploy copy in normal document flow beneath it.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jon
2026-06-15 17:17:07 +01:00
parent ae4ce55f2f
commit 8c5fbc4668
2 changed files with 27 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
index.html
View File

@@ -103,7 +103,7 @@
<!-- AI vision drone graphic (z-index 1) -->
<div class="drone-vision-bg" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1800 860" preserveAspectRatio="xMidYMid slice" style="width:100%;height:100%;display:block;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1800 860" preserveAspectRatio="xMidYMid slice">
<defs>
<radialGradient id="rotorG" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#0A0A0A" stop-opacity="0.16"/><stop offset="60%" stop-color="#0A0A0A" stop-opacity="0.06"/><stop offset="100%" stop-color="#0A0A0A" stop-opacity="0"/></radialGradient>
<linearGradient id="armG" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#3a3a3a"/><stop offset="100%" stop-color="#101010"/></linearGradient>
@@ -180,25 +180,23 @@
</svg>
</div>
<!-- Copy: left-aligned, z-index 3 -->
<div style="position:relative;z-index:3;flex:1;padding-top:clamp(72px,10vw,130px);">
<div class="container">
<div style="max-width:540px;">
<div class="eyebrow">Drone development kits · Open source</div>
<h1 style="font-size:clamp(46px,5.6vw,88px);letter-spacing:-0.045em;line-height:0.9;margin:18px 0 0;text-align:left;">Build.<br>Share.<br>Deploy.</h1>
<p style="font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--ink-2);max-width:480px;margin:24px 0 0;">Hardware devkits, open-source drone software, and integrated consultancy for domestic and industrial solutions.</p>
<div class="hero-ctas" style="justify-content:flex-start;margin-top:32px;">
<a href="devkits.html" class="btn btn-dark btn-lg">Buy a devkit · from £1,999</a>
<a href="videos.html" class="btn btn-outline btn-lg">
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
Watch videos
</a>
</div>
<div class="hero-links" style="justify-content:flex-start;">
<a href="opensource.html">Docs ↗</a>
<a href="opensource.html">GitHub ↗</a>
<a href="https://www.youtube.com/@JonStarkeyfilms">YouTube ↗</a>
</div>
<!-- Copy below the vision graphic -->
<div style="position:relative;z-index:3;">
<div class="container" style="padding-top:48px;padding-bottom:52px;">
<div class="eyebrow">Drone development kits · Open source</div>
<h1 style="margin-top:14px;">Build.<br>Share.<br>Deploy.</h1>
<p style="max-width:520px;margin-top:20px;">Hardware devkits, open-source drone software, and integrated consultancy for domestic and industrial solutions.</p>
<div class="hero-ctas">
<a href="devkits.html" class="btn btn-dark btn-lg">Buy a devkit · from £1,999</a>
<a href="videos.html" class="btn btn-outline btn-lg">
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
Watch videos
</a>
</div>
<div class="hero-links">
<a href="opensource.html">Docs ↗</a>
<a href="opensource.html">GitHub ↗</a>
<a href="https://www.youtube.com/@JonStarkeyfilms">YouTube ↗</a>
</div>
</div>
</div>

15
style.css
View File

@@ -235,9 +235,6 @@ img { display: block; max-width: 100%; }
.hero {
position: relative;
overflow: hidden;
min-height: clamp(640px, 90vh, 940px);
display: flex;
flex-direction: column;
}
.hero-bg {
@@ -247,10 +244,16 @@ img { display: block; max-width: 100%; }
}
.drone-vision-bg {
position: absolute;
inset: 0;
position: relative;
z-index: 1;
pointer-events: none;
width: 100%;
line-height: 0;
}
.drone-vision-bg svg {
display: block;
width: 100%;
height: clamp(360px, 48vw, 640px);
}
html.dark .drone-vision-bg svg { filter: invert(1); }