Skip to content

Commit e5b12cd

Browse files
committed
refactor(dnd): mobile responsiveness
1 parent 92b9e26 commit e5b12cd

File tree

13 files changed

+108
-62
lines changed

13 files changed

+108
-62
lines changed

src/components/dnd/DndCard.jsx

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,18 @@ const DndCard = ({
1212
<motion.div
1313
whileHover={{ y: -10 }}
1414
transition={{ type: 'spring', stiffness: 300 }}
15+
className="h-full"
1516
>
1617
<Link
1718
to={link}
18-
className="block group relative p-12 dnd-fantasy-card text-center h-full min-h-[450px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden"
19+
className="block group relative p-6 md:p-12 dnd-fantasy-card text-center h-full min-h-[300px] md:min-h-[450px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden"
1920
>
2021
{/* Silk Ribbon */}
21-
<div className="dnd-ribbon transition-transform duration-500 group-hover:translate-y-2" />
22+
<div className="dnd-ribbon transition-transform duration-500 group-hover:translate-y-2 hidden md:block" />
2223

2324
{/* Background Runes */}
24-
<div className="dnd-card-rune top-12 left-12 -rotate-12"></div>
25-
<div className="dnd-card-rune bottom-12 right-12 rotate-12"></div>
25+
<div className="dnd-card-rune top-4 md:top-12 left-4 md:left-12 -rotate-12"></div>
26+
<div className="dnd-card-rune bottom-4 md:bottom-12 right-4 md:right-12 rotate-12"></div>
2627

2728
{/* Ink Splatters */}
2829
<div className="dnd-ink-splatter w-8 h-8 top-1/4 right-8" />
@@ -36,32 +37,32 @@ const DndCard = ({
3637
<div className="absolute inset-6 border border-dnd-gold/10 pointer-events-none group-hover:border-dnd-gold/20 transition-colors" />
3738

3839
{/* Ornate corners - larger and more detailed */}
39-
<div className="absolute top-6 left-6 w-12 h-12 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" />
40-
<div className="absolute top-6 right-6 w-12 h-12 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" />
41-
<div className="absolute bottom-6 left-6 w-12 h-12 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" />
42-
<div className="absolute bottom-6 right-6 w-12 h-12 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" />
40+
<div className="absolute top-4 md:top-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" />
41+
<div className="absolute top-4 md:top-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" />
42+
<div className="absolute bottom-4 md:bottom-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" />
43+
<div className="absolute bottom-4 md:bottom-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" />
4344

44-
<div className="mb-10 text-dnd-crimson/60 group-hover:text-dnd-crimson group-hover:scale-125 transition-all duration-700 drop-shadow-[0_0_15px_rgba(74,4,4,0.2)] relative z-10">
45+
<div className="mb-6 md:mb-10 text-dnd-crimson/60 group-hover:text-dnd-crimson group-hover:scale-125 transition-all duration-700 drop-shadow-[0_0_15px_rgba(74,4,4,0.2)] relative z-10">
4546
{icon}
4647
</div>
4748

48-
<h3 className="text-4xl md:text-5xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-6 transition-transform duration-500 group-hover:-translate-y-1 relative z-10">
49+
<h3 className="text-3xl md:text-5xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-4 md:mb-6 transition-transform duration-500 group-hover:-translate-y-1 relative z-10">
4950
{title}
5051
</h3>
5152

52-
<p className="text-lg font-arvo text-black/70 group-hover:text-black transition-all duration-500 leading-relaxed max-w-[280px] relative z-10">
53+
<p className="text-sm md:text-lg font-arvo text-black/70 group-hover:text-black transition-all duration-500 leading-relaxed max-w-[280px] relative z-10">
5354
{description}
5455
</p>
5556

5657
{/* Mini Wax Seal at bottom */}
57-
<div className="absolute bottom-12 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-all duration-1000 translate-y-4 group-hover:translate-y-0 pointer-events-none scale-50">
58+
<div className="absolute bottom-12 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-all duration-1000 translate-y-4 group-hover:translate-y-0 pointer-events-none scale-50 hidden md:block">
5859
<div className="dnd-wax-seal">
5960
<span className="dnd-wax-seal-inner text-sm">SF</span>
6061
</div>
6162
</div>
6263

6364
{/* Interaction hint - refined and darker */}
64-
<div className="mt-10 pt-8 border-t border-black/10 w-full flex flex-col items-center gap-2 opacity-0 group-hover:opacity-100 transition-all duration-700 transform translate-y-4 group-hover:translate-y-0 relative z-10">
65+
<div className="mt-6 md:mt-10 pt-4 md:pt-8 border-t border-black/10 w-full flex flex-col items-center gap-2 opacity-0 group-hover:opacity-100 transition-all duration-700 transform translate-y-4 group-hover:translate-y-0 relative z-10">
6566
<div className="flex items-center gap-4">
6667
<div className="h-px w-8 bg-dnd-crimson/20" />
6768
<div className="w-1.5 h-1.5 bg-dnd-gold rounded-full animate-pulse shadow-[0_0_8px_var(--dnd-gold)]" />

src/components/dnd/DndFooter.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ const DndFooter = () => {
66
const { bgImageName } = useContext(DndContext);
77

88
return (
9-
<footer className="relative mt-24 border-t-2 border-dnd-gold bg-dnd-crimson/95 py-16 px-6 text-white">
10-
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-12 items-center text-center md:text-left">
9+
<footer className="relative mt-12 md:mt-24 border-t-2 border-dnd-gold bg-dnd-crimson/95 py-12 md:py-16 px-6 text-white">
10+
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 items-center text-center md:text-left">
1111
<div className="space-y-4">
1212
<div className="flex justify-center md:justify-start">
1313
<span className="text-4xl font-playfairDisplay font-black uppercase tracking-tighter dnd-gold-gradient-text">

src/components/dnd/DndLayout.jsx

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -256,16 +256,19 @@ const DndLayout = ({ children }) => {
256256

257257
return (
258258
<div className="dnd-theme-root min-h-screen flex flex-col relative overflow-x-hidden">
259-
<ViewportFrame />
260-
<Lightning />
261-
<LootDiscovery />
262-
<FireplaceAudio />
263-
<FireOverlay />
264-
<Torchlight />
265-
<DiceRoller />
266-
<FireParticles />
267-
<DustMotes />
268-
<FloatingRunes />
259+
<div className="hidden md:block">
260+
<ViewportFrame />
261+
<Lightning />
262+
<LootDiscovery />
263+
<FireplaceAudio />
264+
<FireOverlay />
265+
<Torchlight />
266+
<DiceRoller />
267+
<FireParticles />
268+
<DustMotes />
269+
<FloatingRunes />
270+
</div>
271+
269272
{/* Immersive Background */}
270273
<div className="fixed inset-0 z-0">
271274
<div

src/components/dnd/DndNavbar.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@ const DndNavbar = () => {
1313
return (
1414
<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-12 py-2 flex items-center justify-between border-b border-white/5 mt-[25px]">
16+
<div className="bg-black/40 px-4 md:px-12 py-2 flex items-center justify-between border-b border-white/5 md: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" />
2020
</Link>
2121

2222
{breadcrumbs && breadcrumbs.length > 0 && (
23-
<div className="flex items-center gap-2 font-mono text-[9px] uppercase tracking-[0.2em]">
23+
<div className="hidden sm:flex items-center gap-2 font-mono text-[9px] uppercase tracking-[0.2em]">
2424
{breadcrumbs.map((crumb, index) => (
2525
<React.Fragment key={crumb.path || index}>
2626
<CaretRight size={10} className="text-white/40" />

src/components/dnd/DndSearchInput.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { MagnifyingGlass } from '@phosphor-icons/react';
33

44
const DndSearchInput = ({ value, onChange, placeholder = "Search the archives..." }) => {
55
return (
6-
<div className="relative max-w-md mx-auto mb-16 group">
6+
<div className="relative max-w-md mx-auto mb-8 md:mb-16 group">
77
<div className="absolute inset-0 bg-dnd-gold/20 blur-xl rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
88
<div className="relative flex items-center">
99
<div className="absolute left-5 text-dnd-gold">

src/pages/dnd/DndAuthorsPage.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ function DndAuthorsPage() {
7878
<div className="flex justify-center mb-6">
7979
<Users size={48} className="text-dnd-gold-light drop-shadow-[0_0_8px_rgba(249,224,118,0.4)]" weight="duotone" />
8080
</div>
81-
<h1 className="text-5xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 leading-none">
81+
<h1 className="text-4xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 leading-none">
8282
The Scribes
8383
</h1>
8484
<p className="text-lg md:text-xl font-arvo text-gray-400 max-w-2xl mx-auto uppercase tracking-widest opacity-60 mb-12">

src/pages/dnd/DndBookPage.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,12 @@ function DndBookPage() {
5252

5353
return (
5454
<DndLayout>
55-
<div className="max-w-7xl mx-auto px-6 py-12">
56-
<header className="text-center mb-24">
55+
<div className="max-w-7xl mx-auto px-4 md:px-6 py-8 md:py-12">
56+
<header className="text-center mb-12 md:mb-24">
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 dnd-header-pulse">
60+
<h1 className="text-4xl 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" />
@@ -67,7 +67,7 @@ function DndBookPage() {
6767
<motion.div
6868
initial={{ opacity: 0, y: 30 }}
6969
animate={{ opacity: 1, y: 0 }}
70-
className="dnd-parchment-container p-12 md:p-24 shadow-2xl border-2 border-black/10 dnd-parchment-glow relative"
70+
className="dnd-parchment-container p-6 md:p-24 shadow-2xl border-2 border-black/10 dnd-parchment-glow relative"
7171
>
7272
{/* Scroll Ornaments */}
7373
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-8 bg-dnd-crimson/5 rounded-b-full blur-xl dnd-scroll-accent" />

src/pages/dnd/DndCharactersPage.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,10 @@ function DndCharactersPage() {
6060
<div className="flex justify-center mb-6">
6161
<UsersThree size={48} className="text-dnd-gold-light drop-shadow-[0_0_8px_rgba(249,224,118,0.4)]" weight="duotone" />
6262
</div>
63-
<h1 className="text-5xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 dnd-header-pulse">
63+
<h1 className="text-4xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 dnd-header-pulse">
6464
Dramatis Personae
6565
</h1>
66-
<p className="text-lg md:text-xl font-arvo text-gray-400 max-w-2xl mx-auto uppercase tracking-widest opacity-60 mb-12">
66+
<p className="text-base md:text-xl font-arvo text-gray-400 max-w-2xl mx-auto uppercase tracking-widest opacity-60 mb-12 px-4">
6767
The heroes, villains, and bystanders of our tales.
6868
</p>
6969

src/pages/dnd/DndEpisodePage.jsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -136,15 +136,15 @@ function DndEpisodePage() {
136136

137137
<div className="max-w-7xl mx-auto px-6 py-12">
138138

139-
<header className="text-center mb-24">
139+
<header className="text-center mb-12 md:mb-24 px-4">
140140

141141
<div className="flex justify-center mb-6">
142142

143143
<Scroll size={48} className="text-dnd-gold-light drop-shadow-[0_0_8px_rgba(249,224,118,0.4)]" weight="duotone" />
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 dnd-header-pulse">
147+
<h1 className="text-4xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 leading-none dnd-header-pulse">
148148

149149
{episodeTitle}
150150

@@ -172,7 +172,7 @@ function DndEpisodePage() {
172172

173173
{/* Hidden message in sidebar */}
174174

175-
<div className="absolute -bottom-8 left-0 w-full text-center opacity-0 group-hover:opacity-100 transition-opacity duration-1000">
175+
<div className="absolute -bottom-8 left-0 w-full text-center opacity-0 group-hover:opacity-100 transition-opacity duration-1000 hidden md:block">
176176

177177
<span className="dnd-secret-text text-[8px] uppercase tracking-[0.2em]">Don't believe the scribes</span>
178178

@@ -262,19 +262,19 @@ function DndEpisodePage() {
262262

263263
animate={{ opacity: 1, y: 0 }}
264264

265-
className="lg:col-span-4 dnd-parchment-container p-8 md:p-24 shadow-2xl border-2 border-black/10 min-h-[60vh] flex flex-col relative dnd-parchment-glow"
265+
className="lg:col-span-4 dnd-parchment-container p-6 md:p-24 shadow-2xl border-2 border-black/10 min-h-[60vh] flex flex-col relative dnd-parchment-glow"
266266

267267
>
268268

269269
{/* Secret Inscriptions */}
270270

271-
<div className="absolute top-1/4 -left-4 -rotate-90 pointer-events-none">
271+
<div className="absolute top-1/4 -left-4 -rotate-90 pointer-events-none hidden md:block">
272272

273273
<span className="dnd-secret-text text-[10px] uppercase tracking-[1em]">The walls have eyes</span>
274274

275275
</div>
276276

277-
<div className="absolute bottom-1/4 -right-4 rotate-90 pointer-events-none">
277+
<div className="absolute bottom-1/4 -right-4 rotate-90 pointer-events-none hidden md:block">
278278

279279
<span className="dnd-secret-text text-[10px] uppercase tracking-[1em]">History is written by survivors</span>
280280

@@ -286,13 +286,13 @@ function DndEpisodePage() {
286286

287287
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-64 h-8 bg-dnd-crimson/5 rounded-t-full blur-xl dnd-scroll-accent" />
288288

289-
<div className="dnd-ornate-corner dnd-ornate-corner-tl !w-20 !h-20" />
289+
<div className="dnd-ornate-corner dnd-ornate-corner-tl !w-12 md:!w-20 !h-12 md:!h-20" />
290290

291-
<div className="dnd-ornate-corner dnd-ornate-corner-tr !w-20 !h-20" />
291+
<div className="dnd-ornate-corner dnd-ornate-corner-tr !w-12 md:!w-20 !h-12 md:!h-20" />
292292

293-
<div className="dnd-ornate-corner dnd-ornate-corner-bl !w-20 !h-20" />
293+
<div className="dnd-ornate-corner dnd-ornate-corner-bl !w-12 md:!w-20 !h-12 md:!h-20" />
294294

295-
<div className="dnd-ornate-corner dnd-ornate-corner-br !w-20 !h-20" />
295+
<div className="dnd-ornate-corner dnd-ornate-corner-br !w-12 md:!w-20 !h-12 md:!h-20" />
296296

297297
<div className="relative z-10 prose prose-lg prose-stone max-w-none dnd-body-text dnd-drop-cap flex-grow">
298298

@@ -306,9 +306,9 @@ function DndEpisodePage() {
306306

307307
{/* Scribe Signature at the bottom of the parchment */}
308308

309-
<div className="mt-20 pt-12 border-t border-black/5 relative z-10 flex flex-col items-end opacity-60">
309+
<div className="mt-12 md:mt-20 pt-8 md:pt-12 border-t border-black/5 relative z-10 flex flex-col items-end opacity-60">
310310

311-
<span className="font-playfairDisplay italic text-2xl text-dnd-crimson mb-2">{currentEpisode.author}</span>
311+
<span className="font-playfairDisplay italic text-xl md:text-2xl text-dnd-crimson mb-2">{currentEpisode.author}</span>
312312

313313
<div className="h-px w-32 bg-dnd-crimson/20 mb-1" />
314314

src/pages/dnd/DndItemsPage.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,10 @@ function DndItemsPage() {
6060
<div className="flex justify-center mb-6">
6161
<Sword size={48} className="text-dnd-gold-light drop-shadow-[0_0_8px_rgba(249,224,118,0.4)]" weight="duotone" />
6262
</div>
63-
<h1 className="text-5xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 dnd-header-pulse">
63+
<h1 className="text-4xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 dnd-header-pulse">
6464
The Armory
6565
</h1>
66-
<p className="text-lg md:text-xl font-arvo text-gray-400 max-w-2xl mx-auto uppercase tracking-widest opacity-60 mb-12">
66+
<p className="text-base md:text-xl font-arvo text-gray-400 max-w-2xl mx-auto uppercase tracking-widest opacity-60 mb-12 px-4">
6767
Artifacts, curiosities, and tools of the trade.
6868
</p>
6969

0 commit comments

Comments
 (0)