Skip to content

Commit 2794fce

Browse files
ringoldsdevringoldsdev
committed
fix: scrolling, sizing, and menu
1 parent 0999e62 commit 2794fce

File tree

1 file changed

+85
-87
lines changed

1 file changed

+85
-87
lines changed

‎src/pages/test.astro

Lines changed: 85 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -24,21 +24,29 @@ import "../styles/global.css";
2424
.text-darker-gray {
2525
color: hsl(0, 0%, 7%); /* Darker text color */
2626
}
27-
.rotate-45 {
28-
transform: rotate(45deg);
27+
.no-scroll {
28+
overflow: hidden;
2929
}
3030
[x-cloak] {
3131
display: none !important;
3232
}
3333
</style>
3434
</head>
35-
<body x-data="{ scrollPosition: 0 }" @scroll.window="scrollPosition = window.scrollY" class="bg-white">
36-
<!-- Black background section -->
37-
<div class="absolute top-0 left-0 w-full h-[70vh] bg-black z-behind-2"></div>
38-
39-
<div class="relative" x-data="{ mobileMenuOpen: false }">
35+
<body x-data="{ scrollPosition: 0, mobileMenuOpen: false }" @scroll.window="scrollPosition = window.scrollY" class="bg-white" :class="{ 'no-scroll': mobileMenuOpen }">
36+
<!-- Black background section with relative positioning -->
37+
<div class="relative bg-black w-full pb-40 overflow-hidden">
38+
<!-- Text overlay as background texture with parallax effect -->
39+
<div class="absolute inset-0 w-full h-full overflow-hidden">
40+
<div
41+
class="text-darker-gray text-[25vw] font-black font-display leading-[0.9] text-center uppercase absolute top-1/2 left-1/2 w-[150%]"
42+
x-bind:style="'transform: translate(-50%, -50%) rotate(45deg) translateY(' + scrollPosition * 0.6 + 'px)'"
43+
>
44+
Some blog entry headline thats quite long
45+
</div>
46+
</div>
47+
4048
<!-- Navigation Bar with transparent background -->
41-
<div class="flex justify-center text-white px-8 sm:px-20" id="navigation">
49+
<div class="relative z-10 flex justify-center text-white px-8 sm:px-20">
4250
<nav class="flex justify-between items-center py-6 w-full max-w-screen-md">
4351
<div class="text-2xl font-bold">LOGO</div>
4452

@@ -60,95 +68,85 @@ import "../styles/global.css";
6068
</button>
6169
</nav>
6270
</div>
63-
64-
<!-- Text overlay as background texture with parallax effect and 45-degree rotation -->
65-
<div class="absolute top-0 left-0 w-full h-[70vh] flex justify-center items-center overflow-hidden z-behind-1" style="will-change: transform;">
66-
<div
67-
class="text-darker-gray font-display text-[33vw] sm:text-[25vw] font-black leading-[0.9] text-center uppercase w-[150%] origin-center rotate-45"
68-
x-bind:style="'transform: translateY(' + scrollPosition * 0.6 + 'px)'"
69-
>
70-
Some blog entry headline thats quite long
71-
</div>
72-
</div>
73-
74-
<!-- Mobile Menu (Full Screen) - No transitions -->
75-
<div
76-
x-cloak
77-
x-show="mobileMenuOpen"
78-
class="fixed inset-0 bg-black z-50"
79-
>
80-
<div class="px-8 sm:px-20 max-w-screen-md mx-auto">
81-
<!-- Mobile Menu Header with Close Button -->
82-
<div class="flex justify-between items-center py-6">
83-
<div class="text-2xl font-bold text-white">LOGO</div>
84-
<!-- Close Button in same position as hamburger -->
85-
<button
86-
class="text-white focus:outline-none"
87-
@click="mobileMenuOpen = false"
88-
>
89-
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
90-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
91-
</svg>
92-
</button>
93-
</div>
94-
</div>
95-
96-
<!-- Mobile Menu Links -->
97-
<div class="flex flex-col items-center justify-center h-[80vh] space-y-8 text-xl">
98-
<a href="#" class="text-white hover:text-gray-300" @click="mobileMenuOpen = false">Link 1</a>
99-
<a href="#" class="text-white hover:text-gray-300" @click="mobileMenuOpen = false">Link 2</a>
100-
<a href="#" class="text-white hover:text-gray-300" @click="mobileMenuOpen = false">Link 3</a>
101-
</div>
102-
</div>
10371

10472
<!-- Headline with same padding as content -->
105-
<div class="text-center text-white max-w-screen-md mx-auto px-8 sm:px-20">
106-
<div class="py-10 sm:py-20">
107-
<h1 class="text-4xl sm:text-6xl font-display font-bold leading-tight">
73+
<div class="relative z-10 text-center text-white max-w-screen-md mx-auto px-8 sm:px-20">
74+
<div class="py-15 sm:py-20">
75+
<h1 class="text-4xl sm:text-6xl font-bold font-display leading-tight">
10876
Some blog entry headline that's quite long
10977
</h1>
11078
</div>
11179
</div>
80+
</div>
11281

113-
<!-- Content Box with responsive padding -->
114-
<div class="max-w-screen-md mx-auto bg-white text-black p-8 sm:p-20">
115-
<p class="mb-6">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>
116-
117-
<p class="mb-6">Ut aliquam sollicitudin iaculis. Praesent ac semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus eget tempor dolor.</p>
118-
119-
<p class="mb-6">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>
120-
121-
<p class="mb-6">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>
122-
123-
<p class="mb-6">Sed turpis tincidunt, lacinia velit tempus, efficitur nisl. Nunc at risus sed metus eleifend commodo. Duis vel sem ut eros sodales venenatis.</p>
124-
125-
<p class="mb-6">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>
126-
127-
<p class="mb-6">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>
128-
129-
<p class="mb-6">Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
130-
131-
<!-- Extra paragraphs to enable scrolling for parallax effect -->
132-
<p class="mb-6">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>
133-
134-
<p class="mb-6">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>
135-
136-
<p class="mb-6">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>
82+
<!-- Mobile Menu (Full Screen) - No transitions -->
83+
<div
84+
x-cloak
85+
x-show="mobileMenuOpen"
86+
class="fixed inset-0 bg-black z-50"
87+
>
88+
<div class="px-8 sm:px-20 max-w-screen-md mx-auto">
89+
<!-- Mobile Menu Header with Close Button -->
90+
<div class="flex justify-between items-center py-6">
91+
<div class="text-2xl font-bold text-white">LOGO</div>
92+
<!-- Close Button in same position as hamburger -->
93+
<button
94+
class="text-white focus:outline-none"
95+
@click="mobileMenuOpen = false"
96+
>
97+
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
98+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
99+
</svg>
100+
</button>
101+
</div>
102+
</div>
103+
104+
<!-- Mobile Menu Links -->
105+
<div class="flex flex-col items-center justify-center h-[80vh] space-y-8 text-xl">
106+
<a href="#" class="text-white hover:text-gray-300" @click="mobileMenuOpen = false">Link 1</a>
107+
<a href="#" class="text-white hover:text-gray-300" @click="mobileMenuOpen = false">Link 2</a>
108+
<a href="#" class="text-white hover:text-gray-300" @click="mobileMenuOpen = false">Link 3</a>
137109
</div>
110+
</div>
111+
112+
<!-- Content Box with responsive padding -->
113+
<div class="max-w-screen-md mx-auto bg-white text-black p-8 sm:p-20 -mt-40 relative z-10">
114+
<p class="mb-6">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>
115+
116+
<p class="mb-6">Ut aliquam sollicitudin iaculis. Praesent ac semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus eget tempor dolor.</p>
117+
118+
<p class="mb-6">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>
119+
120+
<p class="mb-6">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>
121+
122+
<p class="mb-6">Sed turpis tincidunt, lacinia velit tempus, efficitur nisl. Nunc at risus sed metus eleifend commodo. Duis vel sem ut eros sodales venenatis.</p>
123+
124+
<p class="mb-6">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>
138125

139-
<!-- Black Footer with smaller navigation (always visible) -->
140-
<footer class="bg-black text-white py-10">
141-
<div class="flex justify-center px-8 sm:px-20">
142-
<div class="flex justify-between items-center w-full max-w-screen-md">
143-
<div class="text-lg font-bold">LOGO</div>
144-
<div class="flex space-x-4 sm:space-x-6 text-xs sm:text-sm">
145-
<a href="#" class="hover:text-gray-300">Link 1</a>
146-
<a href="#" class="hover:text-gray-300">Link 2</a>
147-
<a href="#" class="hover:text-gray-300">Link 3</a>
148-
</div>
126+
<p class="mb-6">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>
127+
128+
<p class="mb-6">Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
129+
130+
<!-- Extra paragraphs to enable scrolling for parallax effect -->
131+
<p class="mb-6">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>
132+
133+
<p class="mb-6">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>
134+
135+
<p class="mb-6">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>
136+
</div>
137+
138+
<!-- Black Footer with smaller navigation (always visible) -->
139+
<footer class="bg-black text-white py-10 mt-20">
140+
<div class="flex justify-center px-8 sm:px-20">
141+
<div class="flex justify-between items-center w-full max-w-screen-md">
142+
<div class="text-lg font-bold">LOGO</div>
143+
<div class="flex space-x-4 sm:space-x-6 text-xs sm:text-sm">
144+
<a href="#" class="hover:text-gray-300">Link 1</a>
145+
<a href="#" class="hover:text-gray-300">Link 2</a>
146+
<a href="#" class="hover:text-gray-300">Link 3</a>
149147
</div>
150148
</div>
151-
</footer>
152-
</div>
149+
</div>
150+
</footer>
153151
</body>
154152
</html>

0 commit comments

Comments
 (0)