calum/rda-v3
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Remove winter wish-list banner from site header

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Calum Muir 2026-03-14 11:13:13 +00:00
parent a1aacb72b0
commit 897544d20d
1 changed files with 0 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
src/components/SiteHeader.astro
View file

@ -78,29 +78,6 @@ const lineClass = isDark ? "bg-white" : "bg-black";
</nav>
</div>
<div
class="pony-banner w-full border-b border-black/10 bg-gradient-to-r from-[#e6f4ff] via-[#cfe2f4] to-[#eaf6ff] shadow-[0_10px_20px_-16px_rgba(0,0,0,0.5)]"
role="region"
aria-label="Winter wish-list banner"
>
<div
class={`mx-auto flex w-full items-center justify-center px-4 py-2 text-center text-sm font-semibold text-[#1f2d3d] sm:px-6 sm:text-base ${className}`.trim()}
>
<a
class="inline-flex items-center gap-2 rounded-full px-3 py-1 transition hover:brightness-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f7fb1]"
href="https://www.amazon.co.uk/hz/wishlist/ls/2B4R5YZQ8U4B2?ref_=wl_share"
target="_blank"
rel="noreferrer"
>
<span aria-hidden="true">❄️🐴</span>
<span>
The ponies have been chatting and put together a little winter
wish-list… take a look
</span>
</a>
</div>
</div>
<header class={`relative w-full ${className}`.trim()}>
<div
class="flex flex-row items-start justify-between gap-3 pt-3 sm:pt-4 sm:h-[108px]"
@ -168,47 +145,6 @@ const lineClass = isDark ? "bg-white" : "bg-black";
</div>
</header>
<style>
.pony-banner {
animation: pony-drop 900ms cubic-bezier(0.18, 0.88, 0.35, 1) both;
}
.pony-banner a {
animation: pony-glow 2.8s ease-in-out infinite;
}
@keyframes pony-drop {
0% {
opacity: 0;
transform: translateY(-100%);
}
70% {
opacity: 1;
transform: translateY(6px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pony-glow {
0%,
100% {
box-shadow: 0 0 0 rgba(255, 255, 255, 0);
}
50% {
box-shadow: 0 0 22px rgba(255, 255, 255, 0.55);
}
}
@media (prefers-reduced-motion: reduce) {
.pony-banner,
.pony-banner a {
animation: none;
}
}
</style>
<script>
const menu = document.getElementById("mobile-menu");