patx/afterdarklabs
fix hero text spacing on small screens
Commit f7a73a8 · patx · 2026-08-26T19:05:04-04:00
Comments
No comments yet.
Diff
diff --git a/docs/index.html b/docs/index.html
index 8498fa8..d8be5a2 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -230,22 +230,25 @@
@media (max-width: 767px) {
#hero {
+ --mobile-nav-height: 5.75rem;
+ --mobile-ticker-height: 3.4rem;
box-sizing: border-box;
height: var(--mobile-hero-height, 100svh);
min-height: var(--mobile-hero-height, 100svh);
- align-items: flex-start;
- padding-top: 5.75rem;
- padding-bottom: 3.75rem;
+ align-items: stretch;
+ padding-top: var(--mobile-nav-height);
+ padding-bottom: var(--mobile-ticker-height);
}
.hero-content {
+ align-content: center;
gap: 0;
- padding-top: clamp(1.25rem, 4svh, 2rem);
- padding-bottom: 1rem;
+ padding-block: clamp(1.25rem, 4svh, 2rem);
}
.hero-content h1 {
- font-size: clamp(3.25rem, 17vw, 4.5rem);
+ font-size: clamp(2.75rem, 17vw, 4.5rem);
+ font-size: clamp(2.75rem, min(17vw, 9.5svh), 4.5rem);
}
.hero-ticker-group {
@@ -503,14 +506,6 @@
<div class="work-stage">
<div class="work-stage-content">
<div id="work-scroller" class="no-scrollbar flex snap-x snap-mandatory gap-5 overflow-x-auto scroll-smooth pb-2">
- <article class="w-[82vw] shrink-0 snap-start overflow-hidden rounded-3xl bg-zinc-950 sm:w-[28rem] md:w-[38rem]">
- <a href="https://vegy.app/" target="_blank" rel="noopener noreferrer" class="block w-full overflow-hidden rounded-t-3xl text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-[#17212b]" aria-label="Visit Vegy website">
- <img src="https://afterdarklabs.io/vegy.webp?v=1" width="1200" height="702" loading="lazy" decoding="async" class="aspect-video w-full object-cover" alt="Vegy wholesale ordering platform project by After Dark Labs">
- </a>
- <div class="p-6">
- <p class="text-sm font-medium text-[#ccff00]">Vegy • SaaS Platform • Wholesale ordering, AI and email integrations, real-time updates, and advanced analytics</p>
- </div>
- </article>
<article class="w-[82vw] shrink-0 snap-start overflow-hidden rounded-3xl bg-zinc-950 sm:w-[28rem] md:w-[38rem]">
<a href="https://gardenfreshwholesale.com" target="_blank" rel="noopener noreferrer" class="block w-full overflow-hidden rounded-t-3xl text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-[#17212b]" aria-label="Visit Garden Fresh Wholesale website">
<img src="https://afterdarklabs.io/gardenfresh.webp?v=2" width="1200" height="702" loading="lazy" decoding="async" class="aspect-video w-full object-cover" alt="Garden Fresh Wholesale ecommerce web app project by After Dark Labs">
@@ -519,14 +514,6 @@
<p class="text-sm font-medium text-[#ccff00]">Garden Fresh Wholesale • Business Website • Local SEO strategy that increased customer acquisition by 50%</p>
</div>
</article>
- <article class="w-[82vw] shrink-0 snap-start overflow-hidden rounded-3xl bg-zinc-950 sm:w-[28rem] md:w-[38rem]">
- <a href="https://invoiceotter.com" target="_blank" rel="noopener noreferrer" class="block w-full overflow-hidden rounded-t-3xl text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-[#17212b]" aria-label="Visit Invoice Otter website">
- <img src="https://afterdarklabs.io/invoiceotter.webp?v=1" width="1200" height="673" loading="lazy" decoding="async" class="aspect-video w-full object-cover" alt="Invoice Otter SaaS project by After Dark Labs">
- </a>
- <div class="p-6">
- <p class="text-sm font-medium text-[#ccff00]">Invoice Otter • Mobile App • Subscriptions, integrated payments, a custom AI chatbot, and per-user customization</p>
- </div>
- </article>
<article class="w-[82vw] shrink-0 snap-start overflow-hidden rounded-3xl bg-zinc-950 sm:w-[28rem] md:w-[38rem]">
<a href="https://miadruck.com" target="_blank" rel="noopener noreferrer" class="block w-full overflow-hidden rounded-t-3xl text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-[#17212b]" aria-label="Visit Mia Druck website">
<img src="https://afterdarklabs.io/miadruck.webp?v=3" width="1200" height="681" loading="lazy" decoding="async" class="aspect-video w-full object-cover" alt="Mia Druck real estate website project by After Dark Labs">
@@ -567,6 +554,22 @@
<p class="text-sm font-medium text-[#ccff00]">Vold Services • Business Website • Scroll-animated hero and an owner-managed photo gallery</p>
</div>
</article>
+ <article class="w-[82vw] shrink-0 snap-start overflow-hidden rounded-3xl bg-zinc-950 sm:w-[28rem] md:w-[38rem]">
+ <a href="https://invoiceotter.com" target="_blank" rel="noopener noreferrer" class="block w-full overflow-hidden rounded-t-3xl text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-[#17212b]" aria-label="Visit Invoice Otter website">
+ <img src="https://afterdarklabs.io/invoiceotter.webp?v=1" width="1200" height="673" loading="lazy" decoding="async" class="aspect-video w-full object-cover" alt="Invoice Otter SaaS project by After Dark Labs">
+ </a>
+ <div class="p-6">
+ <p class="text-sm font-medium text-[#ccff00]">Invoice Otter • Mobile App • Subscriptions, integrated payments, a custom AI chatbot, and per-user customization</p>
+ </div>
+ </article>
+ <article class="w-[82vw] shrink-0 snap-start overflow-hidden rounded-3xl bg-zinc-950 sm:w-[28rem] md:w-[38rem]">
+ <a href="https://vegy.app/" target="_blank" rel="noopener noreferrer" class="block w-full overflow-hidden rounded-t-3xl text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-[#17212b]" aria-label="Visit Vegy website">
+ <img src="https://afterdarklabs.io/vegy.webp?v=1" width="1200" height="702" loading="lazy" decoding="async" class="aspect-video w-full object-cover" alt="Vegy wholesale ordering platform project by After Dark Labs">
+ </a>
+ <div class="p-6">
+ <p class="text-sm font-medium text-[#ccff00]">Vegy • SaaS Platform • Wholesale ordering, AI and email integrations, real-time updates, and advanced analytics</p>
+ </div>
+ </article>
<article class="w-[82vw] shrink-0 snap-start overflow-hidden rounded-3xl bg-zinc-950 sm:w-[28rem] md:w-[38rem]">
<a href="https://gitman.io" target="_blank" rel="noopener noreferrer" class="block w-full overflow-hidden rounded-t-3xl text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-[#17212b]" aria-label="Visit GitMan.io website">
<img src="gitman.webp" width="1200" height="702" loading="lazy" decoding="async" class="aspect-video w-full object-cover" alt="GitMan.io open-source Git repository hosting platform by After Dark Labs">
@@ -625,6 +628,8 @@
const hero = document.getElementById('hero');
if (!hero) return;
+ const nav = document.querySelector('nav');
+ const ticker = hero.querySelector('.hero-ticker');
const mobileLayout = window.matchMedia('(max-width: 767px)');
let lockedWidth = 0;
let resizeFrame = 0;
@@ -634,10 +639,17 @@
if (!mobileLayout.matches) {
hero.style.removeProperty('--mobile-hero-height');
+ hero.style.removeProperty('--mobile-nav-height');
+ hero.style.removeProperty('--mobile-ticker-height');
lockedWidth = 0;
return;
}
+ const navHeight = Math.round(nav?.getBoundingClientRect().height || 0);
+ const tickerHeight = Math.round(ticker?.getBoundingClientRect().height || 0);
+ if (navHeight) hero.style.setProperty('--mobile-nav-height', `${navHeight}px`);
+ if (tickerHeight) hero.style.setProperty('--mobile-ticker-height', `${tickerHeight}px`);
+
const layoutWidth = Math.round(document.documentElement.clientWidth);
if (Math.abs(layoutWidth - lockedWidth) < 2) return;