Skip to content

Commit 1b7d042

Browse files
ringoldsdevringoldsdev
committed
chore: added test page for blog
1 parent 38b44fe commit 1b7d042

File tree

4 files changed

+168
-11
lines changed

4 files changed

+168
-11
lines changed

‎src/content.config.ts

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,7 @@ const blog = defineCollection({
99
}),
1010
});
1111

12-
const tags = defineCollection({
13-
schema: z.object({
14-
title: z.string(),
15-
layout: z.string(),
16-
tags: z.array(z.string()),
17-
date: z.string(),
18-
image: z.string().optional(),
19-
}),
20-
});
21-
2212
// Ensure MDX files are included in the content collection
2313
export const collections = {
2414
blog,
25-
tags,
2615
};

‎src/pages/index.astro

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
88
<nav class="flex space-x-4">
99
<a href="/blog/">Blog</a>
1010
<a href="/tags/">Tags</a>
11+
<a href="/test/">Test</a>
1112
</nav>
1213

1314
<div x-data="{ count: 0 }" class="p-4 border rounded">

‎src/pages/test.astro

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
---
2+
import "../styles/global.css";
3+
---
4+
5+
<!DOCTYPE html>
6+
<html lang="en">
7+
<head>
8+
<meta charset="UTF-8">
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10+
<title>Blog Layout</title>
11+
<style>
12+
/* Only keeping CSS that can't be easily converted to Tailwind */
13+
body {
14+
margin: 0;
15+
padding: 0;
16+
background-color: white;
17+
}
18+
.z-behind-2 {
19+
z-index: -2;
20+
}
21+
.z-behind-1 {
22+
z-index: -1;
23+
}
24+
.text-darker-gray {
25+
color: hsl(0, 0%, 7%); /* Darker text color */
26+
}
27+
.rotate-45 {
28+
transform: rotate(45deg);
29+
}
30+
[x-cloak] {
31+
display: none !important;
32+
}
33+
</style>
34+
</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 }">
40+
<!-- Navigation Bar with transparent background -->
41+
<div class="flex justify-center text-white px-8 sm:px-20" id="navigation">
42+
<nav class="flex justify-between items-center py-6 w-full max-w-screen-md">
43+
<div class="text-2xl font-bold">LOGO</div>
44+
45+
<!-- Desktop Navigation -->
46+
<div class="hidden sm:flex space-x-8">
47+
<a href="#" class="hover:text-gray-300">Link 1</a>
48+
<a href="#" class="hover:text-gray-300">Link 2</a>
49+
<a href="#" class="hover:text-gray-300">Link 3</a>
50+
</div>
51+
52+
<!-- Mobile Hamburger Button -->
53+
<button
54+
class="sm:hidden text-white focus:outline-none"
55+
@click="mobileMenuOpen = true"
56+
>
57+
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
58+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
59+
</svg>
60+
</button>
61+
</nav>
62+
</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-[25vw] 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>
103+
104+
<!-- 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-6xl font-display font-bold leading-tight">
108+
Some blog entry headline that's quite long
109+
</h1>
110+
</div>
111+
</div>
112+
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>
137+
</div>
138+
139+
<!-- Black Footer with smaller navigation (always visible) -->
140+
<footer class="bg-black text-white py-10 mt-20">
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>
149+
</div>
150+
</div>
151+
</footer>
152+
</div>
153+
</body>
154+
</html>

‎src/styles/global.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@
2323
font-style: normal;
2424
}
2525

26+
@font-face {
27+
font-family: "Raleway";
28+
src: url("/fonts/Raleway-Black.ttf") format("truetype");
29+
font-weight: 900;
30+
font-style: normal;
31+
}
32+
2633
@font-face {
2734
font-family: "Raleway";
2835
src: url("/fonts/Raleway-Italic.ttf") format("truetype");
@@ -112,3 +119,9 @@
112119
--tw-prose-bold-font-weight: 600; /* Adjust bold text font weight */
113120
--tw-prose-strong-font-weight: 600; /* Adjust strong text font weight */
114121
}
122+
123+
@layer base {
124+
:root {
125+
--breakpoint-md: 52rem;
126+
}
127+
}

0 commit comments

Comments
 (0)