Skip to content

Commit e8ce028

Browse files
fezcodefezcode
committed
refactor: dnd pages pt5
1 parent 541fb40 commit e8ce028

File tree

7 files changed

+76
-14
lines changed

7 files changed

+76
-14
lines changed

‎src/components/dnd/DndLayout.js‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,23 +31,43 @@ const FloatingRunes = () => {
3131
const runes = ['ᚠ', 'ᚢ', 'ᚦ', 'ᚨ', 'ᚱ', 'ᚲ', 'ᚷ', 'ᚹ', 'ᚺ', 'ᚾ', 'ᛁ', 'ᛃ', 'ᛈ', 'ᛇ', 'ᛉ', 'ᛊ', 'ᛏ', 'ᛒ', 'ᛖ', 'ᛗ', 'ᛚ', 'ᛜ', 'ᛞ', 'ᛟ'];
3232
return (
3333
<div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
34-
{[...Array(15)].map((_, i) => (
35-
<div
34+
{[...Array(20)].map((_, i) => (
35+
<motion.div
3636
key={i}
3737
className="dnd-floating-rune text-4xl"
38+
initial={{ opacity: 0.02 }}
39+
whileHover={{ opacity: 0.1, scale: 1.5, filter: 'blur(0px)' }}
3840
style={{
3941
left: `${Math.random() * 100}%`,
4042
top: `${Math.random() * 100}%`,
4143
transform: `rotate(${Math.random() * 360}deg)`,
4244
}}
4345
>
4446
{runes[Math.floor(Math.random() * runes.length)]}
45-
</div>
47+
</motion.div>
4648
))}
4749
</div>
4850
);
4951
};
5052

53+
const ViewportFrame = () => (
54+
<>
55+
<div className="dnd-viewport-frame" />
56+
<div className="fixed top-0 left-0 w-24 h-24 z-[210] pointer-events-none">
57+
<div className="absolute top-4 left-4 w-12 h-12 border-t-4 border-l-4 border-dnd-gold rounded-tl-lg" />
58+
</div>
59+
<div className="fixed top-0 right-0 w-24 h-24 z-[210] pointer-events-none">
60+
<div className="absolute top-4 right-4 w-12 h-12 border-t-4 border-r-4 border-dnd-gold rounded-tr-lg" />
61+
</div>
62+
<div className="fixed bottom-0 left-0 w-24 h-24 z-[210] pointer-events-none">
63+
<div className="absolute bottom-4 left-4 w-12 h-12 border-b-4 border-l-4 border-dnd-gold rounded-bl-lg" />
64+
</div>
65+
<div className="fixed bottom-0 right-0 w-24 h-24 z-[210] pointer-events-none">
66+
<div className="absolute bottom-4 right-4 w-12 h-12 border-b-4 border-r-4 border-dnd-gold rounded-br-lg" />
67+
</div>
68+
</>
69+
);
70+
5171
const FireParticles = () => {
5272
const colors = [
5373
'radial-gradient(circle, #ff4500 0%, #ff8c00 70%, transparent 100%)', // Red-Orange
@@ -149,6 +169,7 @@ const DndLayout = ({ children }) => {
149169

150170
return (
151171
<div className="dnd-theme-root min-h-screen flex flex-col relative overflow-x-hidden">
172+
<ViewportFrame />
152173
<Torchlight />
153174
<DiceRoller />
154175
<FireParticles />

‎src/components/dnd/DndNavbar.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ const DndNavbar = () => {
1111
};
1212

1313
return (
14-
<nav className="fixed top-0 left-0 right-0 z-[100] dnd-nav-modern border-b-2 border-dnd-gold">
14+
<nav className="fixed top-0 left-0 right-0 z-[300] dnd-nav-modern border-b-2 border-dnd-gold">
1515
{/* Top Bar: Navigation & Breadcrumbs */}
16-
<div className="bg-black/40 px-6 py-2 flex items-center justify-between border-b border-white/5">
16+
<div className="bg-black/40 px-12 py-2 flex items-center justify-between border-b border-white/5 mt-[25px]">
1717
<div className="flex items-center gap-4">
1818
<Link to="/" className="text-white hover:text-dnd-gold transition-colors">
1919
<House size={18} weight="fill" />

‎src/pages/dnd/DndBookPage.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ function DndBookPage() {
5757
<div className="flex justify-center mb-6">
5858
<BookmarkSimple size={48} className="text-dnd-gold" weight="duotone" />
5959
</div>
60-
<h1 className="text-5xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 leading-none">
60+
<h1 className="text-5xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 leading-none dnd-header-pulse">
6161
{pageTitle}
6262
</h1>
6363
<div className="h-px w-32 bg-dnd-gold mx-auto opacity-40" />

‎src/pages/dnd/DndEpisodePage.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -144,11 +144,11 @@ function DndEpisodePage() {
144144

145145
</div>
146146

147-
<h1 className="text-5xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 leading-none">
147+
<h1 className="text-5xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 leading-none dnd-header-pulse">
148148

149-
{episodeTitle}
149+
{episodeTitle}
150150

151-
</h1>
151+
</h1>
152152

153153
<div className="h-px w-32 bg-dnd-gold mx-auto opacity-40" />
154154

‎src/pages/dnd/DndLorePage.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ function DndLorePage() {
4949
<div className="flex justify-center mb-6">
5050
<Scroll size={48} className="text-dnd-gold-light drop-shadow-[0_0_8px_rgba(249,224,118,0.4)]" weight="duotone" />
5151
</div>
52-
<h1 className="text-5xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4">
52+
<h1 className="text-5xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 dnd-header-pulse">
5353
The Chronicles
5454
</h1>
5555
<p className="text-lg md:text-xl font-arvo text-gray-400 max-w-2xl mx-auto uppercase tracking-widest opacity-60">

‎src/pages/dnd/DndPage.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,9 @@ const DndPage = () => {
4040
<h1 className="text-xl md:text-2xl font-mono text-white/80 uppercase tracking-[0.5em] mb-4 drop-shadow-lg">
4141
Welcome to the
4242
</h1>
43-
<h2 className="text-6xl md:text-9xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter leading-none mb-12 drop-shadow-2xl">
44-
Great Archives
45-
</h2>
46-
43+
<h2 className="text-6xl md:text-9xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter leading-none mb-12 drop-shadow-2xl dnd-header-pulse">
44+
Great Archives
45+
</h2>
4746
<p className="text-xl md:text-2xl font-arvo text-gray-200 max-w-2xl mx-auto leading-relaxed italic opacity-90">
4847
"Every serf has a story, and every fraud a hidden truth. Step into the tapestry of our shared odyssey."
4948
</p> </motion.div>

‎src/styles/dnd-refactor.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,48 @@
201201
text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
202202
}
203203

204+
/* Global Viewport Frame */
205+
.dnd-viewport-frame {
206+
position: fixed;
207+
inset: 0;
208+
pointer-events: none;
209+
z-index: 200;
210+
border: 25px solid transparent;
211+
border-image: linear-gradient(to bottom, #2c1810, #1a0f0a) 30 stretch;
212+
box-shadow: inset 0 0 50px rgba(0,0,0,0.8);
213+
}
214+
215+
.dnd-frame-accent {
216+
position: absolute;
217+
width: 100px;
218+
height: 100px;
219+
background: var(--dnd-gold);
220+
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 L100 0 L100 100 L0 100 Z M50 10 L90 50 L50 90 L10 50 Z'/%3E%3C/svg%3E");
221+
mask-size: contain;
222+
opacity: 0.8;
223+
}
224+
225+
/* Reactive Arcane Runes */
226+
.dnd-reactive-rune {
227+
position: absolute;
228+
font-family: 'MedievalSharp', cursive;
229+
color: var(--dnd-gold);
230+
pointer-events: none;
231+
user-select: none;
232+
transition: all 0.3s ease;
233+
filter: blur(1px);
234+
}
235+
236+
/* Arcane Pulse for Headers */
237+
@keyframes arcane-glow {
238+
0%, 100% { text-shadow: 0 0 10px rgba(212, 175, 55, 0.2); }
239+
50% { text-shadow: 0 0 30px rgba(212, 175, 55, 0.6), 0 0 50px rgba(212, 175, 55, 0.2); }
240+
}
241+
242+
.dnd-header-pulse {
243+
animation: arcane-glow 4s infinite ease-in-out;
244+
}
245+
204246
/* Silk Ribbon Style */
205247
.dnd-ribbon {
206248
position: absolute;

0 commit comments

Comments
 (0)