isaacclad/ladill-qr-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move bookshop title and tagline above author card on mobile.
Deploy Ladill QR Plus / deploy (push) Successful in 1m11s
Details

Browse Source 
On small screens the hero only shows the cover; title and sub sit above
the author card. Desktop still places them on the cover.
This commit is contained in:
isaacclad
2026-07-16 21:42:30 +00:00
parent 349a65c3ed
commit 8e5574cb52
1 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/public/qr/landing.blade.php
+14 -5
View File
@@ -1213,23 +1213,32 @@
]; ];
@endphp @endphp
<div class="min-h-screen bg-stone-100 pb-12"> <div class="min-h-screen bg-stone-100 pb-12">
<div class="relative h-48 overflow-hidden"> <div class="relative h-40 overflow-hidden sm:h-48">
@if($aCover) @if($aCover)
<img src="{{ $aCover }}" alt="" class="absolute inset-0 h-full w-full object-cover"> <img src="{{ $aCover }}" alt="" class="absolute inset-0 h-full w-full object-cover">
<div class="absolute inset-0 bg-gradient-to-b from-black/20 to-black/60"></div> <div class="absolute inset-0 bg-gradient-to-b from-black/10 to-black/40 sm:from-black/20 sm:to-black/60"></div>
@else @else
<div class="absolute inset-0" style="background: linear-gradient(145deg, {{ $aColor }}, {{ $aColor }}99);"></div> <div class="absolute inset-0" style="background: linear-gradient(145deg, {{ $aColor }}, {{ $aColor }}99);"></div>
@endif @endif
<div class="absolute inset-x-0 bottom-0 px-5 pb-5 text-white"> {{-- Desktop: title stays on the cover --}}
<div class="absolute inset-x-0 bottom-0 hidden px-5 pb-5 text-white sm:block">
<h1 class="text-2xl font-bold">{{ $aName }}</h1> <h1 class="text-2xl font-bold">{{ $aName }}</h1>
@if($aTagline) @if($aTagline)
<p class="mt-1 truncate text-sm text-white/90 sm:whitespace-normal sm:overflow-visible">{{ $aTagline }}</p> <p class="mt-1 text-sm text-white/90">{{ $aTagline }}</p>
@endif @endif
</div> </div>
</div> </div>
<div class="mx-auto max-w-md px-4"> <div class="mx-auto max-w-md px-4">
<div class="relative -mt-8 rounded-3xl bg-white p-5 shadow-xl"> {{-- Mobile: title + sub sit above the author card --}}
<div class="mb-3 mt-4 sm:hidden">
<h1 class="truncate text-xl font-bold text-slate-900">{{ $aName }}</h1>
@if($aTagline)
<p class="mt-0.5 truncate text-sm text-slate-600">{{ $aTagline }}</p>
@endif
</div>
<div class="relative rounded-3xl bg-white p-5 shadow-xl sm:-mt-8">
<div class="flex items-start gap-3"> <div class="flex items-start gap-3">
<div class="flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-2xl border-2 border-white shadow" style="background: {{ $aColor }};"> <div class="flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-2xl border-2 border-white shadow" style="background: {{ $aColor }};">
@if($aAvatar) @if($aAvatar)