Skip to content

Commit 2c62faf

Browse files
committed
deploy: e1105b7
1 parent 1deab40 commit 2c62faf

File tree

1 file changed

+1
-1
lines changed

1 file changed

+1
-1
lines changed

test/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55
const t={preserveBehavior:!1},e=e=>{if("string"==typeof e)return[e,t];const[n,r=t]=e;return[n,{...t,...r}]},n=Object.freeze((t=>{const e=new Set;let n=[];do{Object.getOwnPropertyNames(n).forEach((t=>{"function"==typeof n[t]&&e.add(t)}))}while((n=Object.getPrototypeOf(n))!==Object.prototype);return Array.from(e)})());!function(t,r,o,i,a,s,c,l,d,p,u=t,f){function h(){f||(f=1,"/"==(c=(s.lib||"/~partytown/")+(s.debug?"debug/":""))[0]&&(d=r.querySelectorAll('script[type="text/partytown"]'),i!=t?i.dispatchEvent(new CustomEvent("pt1",{detail:t})):(l=setTimeout(v,(null==s?void 0:s.fallbackTimeout)||1e4),r.addEventListener("pt0",w),a?y(1):o.serviceWorker?o.serviceWorker.register(c+(s.swPath||"partytown-sw.js"),{scope:c}).then((function(t){t.active?y():t.installing&&t.installing.addEventListener("statechange",(function(t){"activated"==t.target.state&&y()}))}),console.error):v())))}function y(e){p=r.createElement(e?"script":"iframe"),t._pttab=Date.now(),e||(p.style.display="block",p.style.width="0",p.style.height="0",p.style.border="0",p.style.visibility="hidden",p.setAttribute("aria-hidden",!0)),p.src=c+"partytown-"+(e?"atomics.js?v=0.11.0":"sandbox-sw.html?"+t._pttab),r.querySelector(s.sandboxParent||"body").appendChild(p)}function v(n,o){for(w(),i==t&&(s.forward||[]).map((function(n){const[r]=e(n);delete t[r.split(".")[0]]})),n=0;n<d.length;n++)(o=r.createElement("script")).innerHTML=d[n].innerHTML,o.nonce=s.nonce,r.head.appendChild(o);p&&p.parentNode.removeChild(p)}function w(){clearTimeout(l)}s=t.partytown||{},i==t&&(s.forward||[]).map((function(r){const[o,{preserveBehavior:i}]=e(r);u=t,o.split(".").map((function(e,r,o){var a;u=u[o[r]]=r+1<o.length?u[o[r]]||(a=o[r+1],n.includes(a)?[]:{}):(()=>{let e=null;if(i){const{methodOrProperty:n,thisObject:r}=((t,e)=>{let n=t;for(let t=0;t<e.length-1;t+=1)n=n[e[t]];return{thisObject:n,methodOrProperty:e.length>0?n[e[e.length-1]]:void 0}})(t,o);"function"==typeof n&&(e=(...t)=>n.apply(r,...t))}return function(){let n;return e&&(n=e(arguments)),(t._ptf=t._ptf||[]).push(o,arguments),n}})()}))})),"complete"==r.readyState?h():(t.addEventListener("DOMContentLoaded",h),t.addEventListener("load",h))}(window,document,navigator,top,window.crossOriginIsolated);;(e=>{e.addEventListener("astro:before-swap",e=>{let r=document.body.querySelector("iframe[src*='/~partytown/']");if(r)e.newDocument.body.append(r)})})(document);</script></head> <body x-data="{ scrollPosition: 0, mobileMenuOpen: false }" @scroll.window="scrollPosition = window.scrollY" class="bg-white" :class="{ 'no-scroll': mobileMenuOpen }" data-astro-cid-6d7mwtum> <!-- Black background section with relative positioning --> <div class="relative bg-black w-full sm:pb-40 overflow-hidden" data-astro-cid-6d7mwtum> <!-- Text overlay as background texture with parallax effect --> <div class="absolute inset-0 w-full h-full overflow-hidden" data-astro-cid-6d7mwtum> <div class="text-darker-gray text-[33vw] sm:text-[25vw] font-black font-display leading-[0.9] text-center uppercase absolute top-1/2 left-1/2 w-[150%] select-none" x-bind:style="'transform: translate(-50%, -50%) rotate(45deg) translateY(' + scrollPosition * 0.6 + 'px)'" data-astro-cid-6d7mwtum>
66
Some blog entry headline thats quite long
77
</div> </div> <!-- Red blob with horizontal parallax effect - positioned directly in the header -->'
8-
<div class="absolute top-0 bottom-0 left-0 right-0" data-astro-cid-6d7mwtum> <div class="max-w-[68rem] mx-auto h-full flex justify-end items-end " data-astro-cid-6d7mwtum> <img src="/images/example.png" class=" select-none h-[67%] sm:h-[87%]" x-bind:style="'transform: translateY(' + scrollPosition * 0.67 + 'px)'" data-astro-cid-6d7mwtum> </div> </div> <!-- Navigation Bar with transparent background --> <div class="relative z-10 flex justify-center text-white px-8 sm:px-20" data-astro-cid-6d7mwtum> <nav class="flex justify-between items-center py-6 w-full max-w-screen-md" data-astro-cid-6d7mwtum> <div class="text-2xl font-bold" data-astro-cid-6d7mwtum>LOGO</div> <!-- Desktop Navigation --> <div class="hidden sm:flex space-x-8" data-astro-cid-6d7mwtum> <a href="#" class="hover:text-gray-300" data-astro-cid-6d7mwtum>Link 1</a> <a href="#" class="hover:text-gray-300" data-astro-cid-6d7mwtum>Link 2</a> <a href="#" class="hover:text-gray-300" data-astro-cid-6d7mwtum>Link 3</a> </div> <!-- Mobile Hamburger Button --> <button class="sm:hidden text-white focus:outline-none" @click="mobileMenuOpen = true" data-astro-cid-6d7mwtum> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" data-astro-cid-6d7mwtum> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" data-astro-cid-6d7mwtum></path> </svg> </button> </nav> </div> <!-- Headline with same padding as content --> <div class="relative z-10 text-white max-w-screen-md mx-auto px-8 sm:px-20" data-astro-cid-6d7mwtum> <div class="py-15 sm:py-20 max-w-[70%] sm:max-w-[80%]" data-astro-cid-6d7mwtum> <h1 class="text-2xl sm:text-4xl lg:text-6xl font-bold font-display leading-tight" data-astro-cid-6d7mwtum>
8+
<div class="absolute top-0 bottom-0 left-0 right-0" data-astro-cid-6d7mwtum> <div class="max-w-[68rem] mx-auto h-full flex justify-end items-end " data-astro-cid-6d7mwtum> <img src="/images/example.png" class=" select-none h-[67%] sm:h-[87%]" x-bind:style="'transform: translateY(' + scrollPosition * 0.67 + 'px)'" data-astro-cid-6d7mwtum> </div> </div> <!-- Navigation Bar with transparent background --> <div class="relative z-10 flex justify-center text-white px-8 sm:px-20" data-astro-cid-6d7mwtum> <nav class="flex justify-between items-center py-6 w-full max-w-screen-md" data-astro-cid-6d7mwtum> <div class="text-2xl font-bold" data-astro-cid-6d7mwtum>LOGO</div> <!-- Desktop Navigation --> <div class="hidden sm:flex space-x-8" data-astro-cid-6d7mwtum> <a href="#" class="hover:text-gray-300" data-astro-cid-6d7mwtum>Link 1</a> <a href="#" class="hover:text-gray-300" data-astro-cid-6d7mwtum>Link 2</a> <a href="#" class="hover:text-gray-300" data-astro-cid-6d7mwtum>Link 3</a> </div> <!-- Mobile Hamburger Button --> <button class="sm:hidden text-white focus:outline-none" @click="mobileMenuOpen = true" data-astro-cid-6d7mwtum> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" data-astro-cid-6d7mwtum> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" data-astro-cid-6d7mwtum></path> </svg> </button> </nav> </div> <!-- Headline with same padding as content --> <div class="relative z-10 text-white max-w-screen-md mx-auto px-8 sm:px-20" data-astro-cid-6d7mwtum> <div class="py-15 sm:py-20 max-w-[70%] sm:max-w-[80%]" data-astro-cid-6d7mwtum> <h1 class="text-3xl sm:text-4xl lg:text-6xl font-bold font-display leading-tight" data-astro-cid-6d7mwtum>
99
Some blog entry headline that's quite long
1010
</h1> </div> </div> </div> <!-- Mobile Menu (Full Screen) - No transitions --> <div x-cloak x-show="mobileMenuOpen" class="fixed inset-0 bg-black z-50" data-astro-cid-6d7mwtum> <div class="px-8 sm:px-20 max-w-screen-md mx-auto" data-astro-cid-6d7mwtum> <!-- Mobile Menu Header with Close Button --> <div class="flex justify-between items-center py-6" data-astro-cid-6d7mwtum> <div class="text-2xl font-bold text-white" data-astro-cid-6d7mwtum>LOGO</div> <!-- Close Button in same position as hamburger --> <button class="text-white focus:outline-none" @click="mobileMenuOpen = false" data-astro-cid-6d7mwtum> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" data-astro-cid-6d7mwtum> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" data-astro-cid-6d7mwtum></path> </svg> </button> </div> </div> <!-- Mobile Menu Links --> <div class="flex flex-col items-center justify-center h-[80vh] space-y-8 text-xl" data-astro-cid-6d7mwtum> <a href="#" class="text-white hover:text-gray-300" @click="mobileMenuOpen = false" data-astro-cid-6d7mwtum>Link 1</a> <a href="#" class="text-white hover:text-gray-300" @click="mobileMenuOpen = false" data-astro-cid-6d7mwtum>Link 2</a> <a href="#" class="text-white hover:text-gray-300" @click="mobileMenuOpen = false" data-astro-cid-6d7mwtum>Link 3</a> </div> </div> <!-- Content Box with responsive padding --> <div class="max-w-screen-md mx-auto bg-white text-black p-8 sm:p-20 -mt-5 sm:-mt-40 relative z-10" data-astro-cid-6d7mwtum> <p class="mb-6" data-astro-cid-6d7mwtum>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p> <p class="mb-6" data-astro-cid-6d7mwtum>Ut aliquam sollicitudin iaculis. Praesent ac semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus eget tempor dolor.</p> <p class="mb-6" data-astro-cid-6d7mwtum>Donec ut libero pretium, efficitur nisl vel, sagittis elit. Fusce a est in odio vehicula fermentum eu vel diam. Etiam non magna id nunc tempus scelerisque.</p> <p class="mb-6" data-astro-cid-6d7mwtum>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec pharetra, magna vestibulum aliquet ultrices, erat tortor sollicitudin mi, sit amet lobortis sapien sapien non mi.</p> <p class="mb-6" data-astro-cid-6d7mwtum>Sed turpis tincidunt, lacinia velit tempus, efficitur nisl. Nunc at risus sed metus eleifend commodo. Duis vel sem ut eros sodales venenatis.</p> <p class="mb-6" data-astro-cid-6d7mwtum>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> <p class="mb-6" data-astro-cid-6d7mwtum>Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p class="mb-6" data-astro-cid-6d7mwtum>Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> <!-- Extra paragraphs to enable scrolling for parallax effect --> <p class="mb-6" data-astro-cid-6d7mwtum>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p class="mb-6" data-astro-cid-6d7mwtum>Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p class="mb-6" data-astro-cid-6d7mwtum>Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p> </div> <!-- Black Footer with smaller navigation (always visible) --> <footer class="bg-black text-white py-10" data-astro-cid-6d7mwtum> <div class="flex justify-center px-8 sm:px-20" data-astro-cid-6d7mwtum> <div class="flex justify-between items-center w-full max-w-screen-md" data-astro-cid-6d7mwtum> <div class="text-lg font-bold" data-astro-cid-6d7mwtum>LOGO</div> <div class="flex space-x-4 sm:space-x-6 text-xs sm:text-sm" data-astro-cid-6d7mwtum> <a href="#" class="hover:text-gray-300" data-astro-cid-6d7mwtum>Link 1</a> <a href="#" class="hover:text-gray-300" data-astro-cid-6d7mwtum>Link 2</a> <a href="#" class="hover:text-gray-300" data-astro-cid-6d7mwtum>Link 3</a> </div> </div> </div> </footer> </body></html>

0 commit comments

Comments
 (0)