gator/trekmap-preorder
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Polish: favicon, equal-height SKU cards, mobile nav + legend

Browse source
This commit is contained in:
gator 2026-07-29 23:07:04 +00:00
parent b5225a2ac2
commit ef4e0c6b96
1 changed files with 11 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
index.html
View file

@ -6,6 +6,7 @@
<title>TrekMap — Wish It. Time It. Make It Happen.</title> <title>TrekMap — Wish It. Time It. Make It Happen.</title>
<meta name="description" content="A travel bucket list that lives on a world map — and an LED map on your wall that glows with everywhere you've been and everywhere you're going."> <meta name="description" content="A travel bucket list that lives on a world map — and an LED map on your wall that glows with everywhere you've been and everywhere you're going.">
<meta name="theme-color" content="#001F3F"> <meta name="theme-color" content="#001F3F">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%23001F3F'/%3E%3Ccircle cx='16' cy='16' r='6' fill='%23E6B800'/%3E%3Ccircle cx='7' cy='9' r='2' fill='%23E6B800' opacity='.5'/%3E%3Ccircle cx='25' cy='23' r='2' fill='%23E6B800' opacity='.5'/%3E%3C/svg%3E">
<meta property="og:title" content="TrekMap"> <meta property="og:title" content="TrekMap">
<meta property="og:description" content="A travel bucket list you can hang on the wall."> <meta property="og:description" content="A travel bucket list you can hang on the wall.">
<style> <style>
@ -58,7 +59,7 @@
.hint b{color:var(--gold); font-weight:600} .hint b{color:var(--gold); font-weight:600}
/* ── sections ── */ /* ── sections ── */
section{padding:104px 0; border-top:1px solid rgba(255,255,255,.05)} section{padding:104px 0; scroll-margin-top:72px; border-top:1px solid rgba(255,255,255,.05)}
.sec-head{max-width:40rem; margin-bottom:52px} .sec-head{max-width:40rem; margin-bottom:52px}
.sec-head h2{font-size:clamp(1.9rem,4vw,2.7rem); margin:14px 0 14px} .sec-head h2{font-size:clamp(1.9rem,4vw,2.7rem); margin:14px 0 14px}
@ -79,17 +80,18 @@
.pipe div span{color:var(--gold); font-size:.7rem; letter-spacing:.14em; font-weight:800} .pipe div span{color:var(--gold); font-size:.7rem; letter-spacing:.14em; font-weight:800}
/* ── hardware ── */ /* ── hardware ── */
.skus{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; align-items:start} .skus{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; align-items:stretch}
.sku{background:var(--nightsky); border:1px solid var(--line); border-radius:18px; padding:28px; position:relative} .sku{background:var(--nightsky); border:1px solid var(--line); border-radius:18px; padding:28px; position:relative; display:flex; flex-direction:column; height:100%}
.sku.featured{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 24px 60px -30px rgba(230,184,0,.5)} .sku.featured{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 24px 60px -30px rgba(230,184,0,.5)}
.sku .tag{position:absolute; top:-11px; left:28px; background:var(--gold); color:#00162e; .sku .tag{position:absolute; top:-11px; left:28px; background:var(--gold); color:#00162e;
font-size:.66rem; font-weight:800; letter-spacing:.12em; padding:4px 10px; border-radius:100px} font-size:.66rem; font-weight:800; letter-spacing:.12em; padding:4px 10px; border-radius:100px}
.sku h3{font-size:1.3rem} .sku h3{font-size:1.3rem}
.sku .price{font-size:2.4rem; font-weight:800; margin:12px 0 2px; letter-spacing:-.03em} .sku .price{font-size:2.4rem; font-weight:800; margin:12px 0 2px; letter-spacing:-.03em}
.sku .price small{font-size:.8rem; font-weight:600; color:var(--muted); letter-spacing:0} .sku .price small{font-size:.8rem; font-weight:600; color:var(--muted); letter-spacing:0}
.sku p{color:var(--muted); font-size:.92rem; margin:12px 0 18px; min-height:3.2em} .sku p{color:var(--muted); font-size:.92rem; margin:12px 0 18px}
.sku ul{list-style:none; padding:0; margin:0 0 22px; font-size:.88rem; color:#B7C6D6} .sku ul{list-style:none; padding:0; margin:0 0 22px; flex:1 0 auto; font-size:.88rem; color:#B7C6D6}
.sku li{padding:7px 0 7px 22px; position:relative; border-top:1px solid rgba(255,255,255,.05)} .sku li{padding:7px 0 7px 22px; position:relative; border-top:1px solid rgba(255,255,255,.05)}
.sku .btn{margin-top:auto; text-align:center}
.sku li::before{content:"◆"; position:absolute; left:0; color:var(--gold); font-size:.62rem; top:9px} .sku li::before{content:"◆"; position:absolute; left:0; color:var(--gold); font-size:.62rem; top:9px}
.mini{display:grid; grid-template-columns:repeat(14,1fr); gap:3px; margin-bottom:20px} .mini{display:grid; grid-template-columns:repeat(14,1fr); gap:3px; margin-bottom:20px}
.mini i{aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.07)} .mini i{aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.07)}
@ -135,6 +137,9 @@
} }
@media (max-width:720px){ @media (max-width:720px){
nav .links{display:none} nav .links{display:none}
nav .btn{margin-left:auto}
.hint{flex-wrap:wrap; row-gap:4px}
.hint .touch-hide{display:none}
section{padding:76px 0} section{padding:76px 0}
.sku p{min-height:0} .sku p{min-height:0}
} }
@ -167,7 +172,7 @@
<a class="btn" href="#reserve">Reserve a unit</a> <a class="btn" href="#reserve">Reserve a unit</a>
<a class="btn ghost" href="https://trekmap.co">Open the app</a> <a class="btn ghost" href="https://trekmap.co">Open the app</a>
</div> </div>
<p class="hint"><b>&#9679;</b> bright = been there &nbsp;&middot;&nbsp; <b style="opacity:.45">&#9679;</b> dim = on the list &nbsp;&middot;&nbsp; move your cursor across the map</p> <p class="hint"><b>&#9679;</b> bright = been there <span aria-hidden="true">&nbsp;&middot;&nbsp;</span> <b style="opacity:.45">&#9679;</b> dim = on the list <span class="touch-hide">&nbsp;&middot;&nbsp; move your cursor across the map</span></p>
</div> </div>
</section> </section>