Skip to content

Commit b6a1608

Browse files
prokopsimekprokopsimek
committed
fix: responsivity
1 parent c4c507e commit b6a1608

File tree

3 files changed

+51
-39
lines changed

3 files changed

+51
-39
lines changed

‎src/app/components/Navigation.tsx

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -10,47 +10,49 @@ export default function Navigation() {
1010
<div className="fixed bottom-0 left-0 right-0 bg-white border-t">
1111
<div className="mx-auto max-w-container px-4 py-4">
1212
<div className="flex justify-between items-center">
13-
<div className="flex gap-2">
14-
<Link
15-
href="/"
16-
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter"
17-
>
18-
Home
19-
</Link>
13+
<div className="flex gap-2 overflow-x-auto pb-2 -mb-2 scrollbar-hide">
14+
<div className="flex gap-2 min-w-max">
15+
<Link
16+
href="/"
17+
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter whitespace-nowrap"
18+
>
19+
Home
20+
</Link>
2021

21-
<Link
22-
href="/topics"
23-
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter"
24-
>
25-
Topics
26-
</Link>
22+
<Link
23+
href="/topics"
24+
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter whitespace-nowrap"
25+
>
26+
Topics
27+
</Link>
2728

28-
<Link
29-
href="/how-to"
30-
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter"
31-
>
32-
How To
33-
</Link>
29+
<Link
30+
href="/how-to"
31+
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter whitespace-nowrap"
32+
>
33+
How To
34+
</Link>
3435

35-
<Link
36-
href="/about"
37-
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter"
38-
>
39-
About
40-
</Link>
41-
</div>
36+
<Link
37+
href="/about"
38+
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter whitespace-nowrap"
39+
>
40+
About
41+
</Link>
4242

43-
<div className="flex items-center gap-4">
44-
<Link
45-
href="https://github.com/DXHeroes/1on1-cards"
46-
target="_blank"
47-
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter flex items-center gap-2"
48-
>
49-
<FaGithub className="w-4 h-4" />
50-
GitHub
51-
<HiExternalLink className="w-4 h-4" />
52-
</Link>
43+
<Link
44+
href="https://github.com/DXHeroes/1on1-cards"
45+
target="_blank"
46+
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter flex items-center gap-2 whitespace-nowrap"
47+
>
48+
<FaGithub className="w-4 h-4 flex-shrink-0" />
49+
GitHub
50+
<HiExternalLink className="w-4 h-4 flex-shrink-0" />
51+
</Link>
52+
</div>
53+
</div>
5354

55+
<div className="flex-shrink-0 ml-4">
5456
<Link href="https://dxheroes.io" target="_blank">
5557
<DxHeroesLogo className="h-8 w-auto text-stratos" />
5658
</Link>

‎src/app/globals.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,13 @@
22
@tailwind components;
33
@tailwind utilities;
44

5+
@layer utilities {
6+
.scrollbar-hide {
7+
-ms-overflow-style: none; /* IE and Edge */
8+
scrollbar-width: none; /* Firefox */
9+
}
10+
.scrollbar-hide::-webkit-scrollbar {
11+
display: none; /* Chrome, Safari and Opera */
12+
}
13+
}
14+

‎src/app/page.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,11 +67,11 @@ export default function Home() {
6767

6868
{/* CTA Button */}
6969
<div className="text-center">
70-
<div className="flex gap-4 justify-center">
70+
<div className="flex flex-col sm:flex-row gap-4 justify-center">
7171
<button
7272
type="button"
7373
onClick={() => router.push('/topics')}
74-
className="inline-flex items-center px-8 py-4 bg-gradient-to-r from-electric-violet to-purple text-white rounded-xl hover:shadow-lg hover:scale-105 transition-all duration-200 text-xl font-staatliches group"
74+
className="inline-flex items-center px-8 py-4 bg-gradient-to-r from-electric-violet to-purple text-white rounded-xl hover:shadow-lg hover:scale-105 transition-all duration-200 text-xl font-staatliches group justify-center"
7575
>
7676
Start Exploring
7777
<svg className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
@@ -82,7 +82,7 @@ export default function Home() {
8282
<button
8383
type="button"
8484
onClick={() => router.push('/how-to')}
85-
className="inline-flex items-center px-8 py-4 border-2 border-electric-violet text-electric-violet rounded-xl hover:shadow-lg hover:scale-105 transition-all duration-200 text-xl font-staatliches group"
85+
className="inline-flex items-center px-8 py-4 border-2 border-electric-violet text-electric-violet rounded-xl hover:shadow-lg hover:scale-105 transition-all duration-200 text-xl font-staatliches group justify-center"
8686
>
8787
How To Use
8888
<svg className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">

0 commit comments

Comments
 (0)