Skip to content

Commit 7aede10

Browse files
gottasellemall69gottasellemall69
committed
hh
1 parent 8eaa89b commit 7aede10

3 files changed

Lines changed: 143 additions & 93 deletions

File tree

‎components/Navigation/SideNav.js‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -121,25 +121,29 @@ export default function SideNav() {
121121
const isActive = activeHref === item.href;
122122

123123
return (
124-
<li key={ item.href } className="navButton max-w-prose text-nowrap">
124+
<li key={ item.href } className="navButton">
125125
<Link
126126
href={ item.href }
127127
title={ item.title }
128128
className={ `navLink${ isActive ? " navLink-active" : "" }` }
129129
onClick={ () => setActiveHref( item.href ) }
130130
aria-current={ isActive ? "page" : undefined }
131131
>
132-
<span className="navLink-circle">
133-
<Image
134-
src={ item.icon }
135-
alt={ `${ item.label } icon` }
136-
width={ 32 }
137-
height={ 32 }
138-
className="navLink-iconImage object-center object-cover rounded-2xl bg-clip-text"
139-
/>
132+
<span className="navLink-circle" aria-hidden="true">
133+
<span className="navLink-circleInner">
134+
<Image
135+
src={ item.icon }
136+
alt=""
137+
width={ 32 }
138+
height={ 32 }
139+
className="navLink-iconImage object-center object-contain"
140+
/>
141+
</span>
140142
</span>
141-
<span className="navLink-label w-fit text-nowrap">
142-
{ item.label }
143+
<span className="navLink-label">
144+
<span className="navLink-labelText" data-label={ item.label }>
145+
{ item.label }
146+
</span>
143147
</span>
144148
</Link>
145149
</li>

‎pages/yugioh/sets/[letter]/[setName].js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1840,7 +1840,7 @@ const CardsInSetPage = ( { initialSetName = "", setNameId = null } ) => {
18401840
) }
18411841
</div>
18421842

1843-
<div className="mt-6 grid gap-4 grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 w-fit">
1843+
<div className="mt-6 grid gap-4 grid-cols-1 sm:grid-cols-3 xl:grid-cols-5 w-full">
18441844
<div className="md:col-span-2 lg:col-span-2">
18451845
<div className="rounded-xl border border-white/10 bg-white/10 p-1 shadow-inner backdrop-blur">
18461846
<YugiohSearchBar onSearch={ setSearchTerm } />
@@ -1992,7 +1992,7 @@ const CardsInSetPage = ( { initialSetName = "", setNameId = null } ) => {
19921992
) : viewMode === "grid" ? (
19931993
<>
19941994
<div className="w-auto overflow-hidden rounded-3xl border border-white/10 bg-black/40 shadow-2xl">
1995-
<div className=" grid grid-cols-1 border-l border-white/5 sm:mx-0 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
1995+
<div className=" grid grid-cols-1 border-l border-white/5 sm:mx-0 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
19961996
{ paginatedGridCards.map( ( cardItem ) => renderGridCard( cardItem ) ) }
19971997
</div>
19981998
</div>

‎styles/globals.css‎

Lines changed: 126 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -102,34 +102,30 @@ img:hover
102102
{
103103
display: flex;
104104
justify-content: flex-start;
105-
overflow: hidden;
105+
padding-block: clamp(0.05rem, 0.45vw, 0.35rem);
106106
}
107107

108108
.navLink
109109
{
110-
--nav-icon-size: clamp(3.2rem, 5.8vw, 3.6rem);
111-
--nav-icon-offset: clamp(0px, calc((100% - var(--nav-icon-size)) / 2), 12rem);
112-
--nav-expanded-padding-start: clamp(0.2rem, 0.6vw, 0.45rem);
113-
--nav-padding-end: clamp(0.25rem, 0.7vw, 0.5rem);
114-
--nav-expanded-gap: clamp(0.22rem, 0.6vw, 0.4rem);
115-
--nav-label-padding-y: clamp(0.25rem, 0.65vw, 0.42rem);
116-
--nav-label-padding-x: clamp(0.3rem, 0.9vw, 0.52rem);
110+
--nav-icon-size: clamp(2.9rem, 5.4vw, 3.5rem);
117111
position: relative;
118112
display: flex;
119113
align-items: center;
120114
width: 100%;
121-
gap: 0;
122-
padding-block: clamp(0.6rem, 1.6vw, 0.9rem);
123-
padding-inline-start: var(--nav-icon-offset);
124-
padding-inline-end: var(--nav-padding-end);
115+
gap: clamp(0.68rem, 1.5vw, 1.05rem);
116+
padding: clamp(0.55rem, 1.35vw, 0.88rem) clamp(0.74rem, 1.8vw, 1.12rem);
117+
border-radius: clamp(1rem, 3vw, 1.4rem);
125118
color: var(--text-primary);
126-
letter-spacing: 0.01em;
119+
letter-spacing: 0.02em;
127120
text-align: left;
128-
overflow: hidden;
129-
transition: color var(--transition-slow),
130-
transform var(--transition-slow),
131-
padding-inline-start var(--transition-slow),
132-
gap var(--transition-slow);
121+
background: transparent;
122+
border: none;
123+
text-decoration: none;
124+
overflow: visible;
125+
isolation: isolate;
126+
transition:
127+
color var(--transition-slow),
128+
transform 220ms ease;
133129
}
134130

135131
.navLink:focus-visible
@@ -142,116 +138,166 @@ img:hover
142138
.navLink:focus-visible,
143139
.navLink.navLink-active
144140
{
145-
padding-inline-start: var(--nav-expanded-padding-start);
146-
gap: var(--nav-expanded-gap);
141+
color: var(--text-secondary);
142+
transform: translateX(2px);
147143
}
148144

149145
.navLink-circle
150146
{
151147
position: relative;
152-
display: flex;
153-
align-items: center;
154-
justify-content: center;
148+
display: grid;
149+
place-items: center;
155150
flex-shrink: 0;
156151
width: var(--nav-icon-size);
157152
height: var(--nav-icon-size);
158-
border-radius: 80%;
159-
background: linear-gradient(135deg, rgba(99, 102, 241, 0.95), rgba(14, 116, 144, 0.72));
160-
color: inherit;
161-
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
162-
transition: transform 320ms ease, box-shadow 320ms ease;
163-
z-index: 0;
153+
border-radius: 50%;
154+
background: rgba(10, 16, 30, 0.9);
155+
box-shadow:
156+
inset 0 0 0 1px rgba(148, 163, 184, 0.24),
157+
inset 0 -10px 12px rgba(2, 6, 23, 0.9);
158+
transition: transform 380ms ease, box-shadow 420ms ease;
159+
overflow: visible;
164160
}
165161

166162
.navLink-circle::before
167163
{
168164
content: "";
169165
position: absolute;
170166
inset: 0;
171-
border-radius: 60%;
172-
background: rgba(139, 92, 246, 0.28);
167+
border-radius: 50%;
168+
background: rgba(99, 102, 241, 0.32);
173169
transform: scale(0.88);
174170
transition: transform 460ms ease, box-shadow 520ms ease;
175171
z-index: -1;
176172
}
177173

174+
.navLink-circleInner
175+
{
176+
position: relative;
177+
display: grid;
178+
place-items: center;
179+
width: 70%;
180+
height: 70%;
181+
border-radius: 50%;
182+
background: radial-gradient(circle at 35% 30%, rgba(99, 102, 241, 0.22), transparent 72%);
183+
z-index: 0;
184+
}
185+
178186
.navLink-iconImage
179187
{
180-
width: var(--nav-icon-size);
181-
height: var(--nav-icon-size);
182-
object-fit: cover;
183-
filter: brightness(0) saturate(100%) invert(100%) drop-shadow(0 8px 18px rgba(15, 23, 42, 0.45));
184-
transition: filter 320ms ease;
188+
width: 100%;
189+
height: 100%;
190+
object-fit: contain;
191+
filter: brightness(0) saturate(100%) invert(98%) drop-shadow(0 0 6px rgba(99, 102, 241, 0.35));
192+
transition: filter 360ms ease;
185193
}
186194

187195
.navLink-label
188196
{
189197
position: relative;
190-
box-sizing: border-box;
191198
display: flex;
192199
align-items: center;
193-
justify-content: flex-start;
194200
flex: 1 1 auto;
195201
min-width: 0;
196-
max-width: 0;
197-
padding: 0;
198-
border-radius: 20%;
199-
background: linear-gradient(135deg, rgba(99, 102, 241, 0.32), rgba(14, 116, 144, 0.2));
200-
border: 0px solid rgba(148, 163, 184, 0.2);
201-
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
202-
backdrop-filter: blur(18px);
203-
font-size: 1rem;
204-
font-weight: 600;
205-
line-height: 1.4;
206-
color: var(--text-primary);
207-
text-shadow: 0 0 8px rgba(99, 102, 241, 0.25);
208-
opacity: 0;
209-
overflow: hidden;
210-
white-space: nowrap;
211-
transform-origin: left;
212-
transform: translateX(-45%);
213-
transition:
214-
max-width var(--transition-slow),
215-
padding 220ms ease,
216-
opacity 180ms ease,
217-
transform var(--transition-slow),
218-
box-shadow 320ms ease,
219-
border-color 320ms ease,
220-
color var(--transition-slow),
221-
text-shadow var(--transition-slow);
222-
text-align: left;
202+
max-width: 100%;
203+
white-space: normal;
204+
overflow: visible;
205+
}
206+
207+
.navLink-labelText
208+
{
209+
position: relative;
210+
display: inline-block;
211+
width: 100%;
212+
font-size: clamp(0.8rem, 1.95vw, 0.94rem);
213+
font-weight: 700;
214+
line-height: 1.32;
215+
color: inherit;
216+
letter-spacing: 0.04em;
217+
filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.12));
218+
overflow-wrap: anywhere;
219+
transition: color var(--transition-slow), filter 320ms ease;
220+
}
221+
222+
.navLink-labelText::before,
223+
.navLink-labelText::after
224+
{
225+
content: attr(data-label);
226+
position: absolute;
227+
inset: 0;
228+
color: transparent;
229+
white-space: inherit;
230+
pointer-events: none;
231+
transition: -webkit-text-stroke-color var(--transition-slow), filter 320ms ease, opacity var(--transition-slow);
232+
}
233+
234+
.navLink-labelText::before
235+
{
236+
z-index: -1;
237+
-webkit-text-stroke-width: 1.6px;
238+
-webkit-text-stroke-color: rgba(99, 102, 241, 0.45);
239+
filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.28));
240+
opacity: 0.85;
241+
}
242+
243+
.navLink-labelText::after
244+
{
245+
z-index: -2;
246+
-webkit-text-stroke-width: 8px;
247+
-webkit-text-stroke-color: rgba(17, 24, 39, 0.85);
248+
filter: blur(18px);
249+
opacity: 0.7;
223250
}
224251

225252
.navLink:hover .navLink-circle::before,
226253
.navLink:focus-visible .navLink-circle::before,
227254
.navLink.navLink-active .navLink-circle::before
228255
{
229-
transform: scale(1.1);
256+
transform: scale(1.08);
230257
box-shadow: 0 0 26px rgba(99, 102, 241, 0.6);
231258
}
232259

233260
.navLink:hover .navLink-circle,
234261
.navLink:focus-visible .navLink-circle,
235262
.navLink.navLink-active .navLink-circle
236263
{
237-
transform: translateY(-4px);
238-
box-shadow: 0 22px 38px -18px rgba(99, 102, 241, 0.65);
264+
transform: translateY(-2px);
265+
box-shadow:
266+
0 0 0 2px rgba(99, 102, 241, 0.3),
267+
0 20px 38px -18px rgba(2, 6, 23, 0.92);
239268
}
240269

241-
.navLink:hover .navLink-label,
242-
.navLink:focus-visible .navLink-label,
243-
.navLink.navLink-active .navLink-label
270+
.navLink:hover .navLink-iconImage,
271+
.navLink:focus-visible .navLink-iconImage,
272+
.navLink.navLink-active .navLink-iconImage
273+
{
274+
filter: brightness(0) saturate(100%) invert(88%) sepia(16%) saturate(1403%) hue-rotate(193deg) brightness(118%) contrast(103%);
275+
}
276+
277+
.navLink:hover .navLink-labelText,
278+
.navLink:focus-visible .navLink-labelText,
279+
.navLink.navLink-active .navLink-labelText
244280
{
245-
flex: 1 1 auto;
246-
max-width: calc(100% - var(--nav-expanded-padding-start) - var(--nav-padding-end));
247-
padding: var(--nav-label-padding-y) var(--nav-label-padding-x);
248-
opacity: 1;
249-
transform: translateX(0);
250-
white-space: nowrap;
251-
box-shadow: 0 20px 35px -18px rgba(0, 0, 0, 0.6), 0 0 14px rgba(99, 102, 241, 0.4);
252-
border-color: rgba(148, 163, 184, 0);
253281
color: var(--text-secondary);
254-
text-shadow: 0 0 14px rgba(0, 0, 0, 0.6);
282+
filter: drop-shadow(0 0 14px rgba(99, 102, 241, 0.4));
283+
}
284+
285+
.navLink:hover .navLink-labelText::before,
286+
.navLink:focus-visible .navLink-labelText::before,
287+
.navLink.navLink-active .navLink-labelText::before
288+
{
289+
-webkit-text-stroke-color: rgba(148, 163, 184, 0.85);
290+
filter: drop-shadow(0 0 22px rgba(99, 102, 241, 0.5));
291+
opacity: 1;
292+
}
293+
294+
.navLink:hover .navLink-labelText::after,
295+
.navLink:focus-visible .navLink-labelText::after,
296+
.navLink.navLink-active .navLink-labelText::after
297+
{
298+
-webkit-text-stroke-color: rgba(99, 102, 241, 0.48);
299+
filter: blur(22px);
300+
opacity: 0.95;
255301
}
256302

257303
:root

0 commit comments

Comments
 (0)