Skip to content

Commit 8dd000f

Browse files
XY56L7XY56L7
committed
Optimize the responsiveness
1 parent bf000a2 commit 8dd000f

File tree

4 files changed

+25
-25
lines changed

4 files changed

+25
-25
lines changed

‎app/lessons/[lessonId]/page.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default async function LessonPage({ params }: LessonPageProps) {
4545
</Link>
4646
</div>
4747

48-
<div className="relative bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 mb-6 border border-gray-100 dark:border-gray-700 overflow-hidden">
48+
<div className="relative bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-4 sm:p-6 md:p-8 mb-6 border border-gray-100 dark:border-gray-700 overflow-hidden">
4949
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-orange-500 via-orange-400 to-orange-500"></div>
5050

5151
<div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-orange-50/50 to-transparent dark:from-orange-900/10 rounded-full blur-3xl -z-0"></div>
@@ -78,20 +78,20 @@ export default async function LessonPage({ params }: LessonPageProps) {
7878
</div>
7979
</div>
8080

81-
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 mb-6 border border-gray-100 dark:border-gray-700">
81+
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-4 sm:p-6 md:p-8 mb-6 border border-gray-100 dark:border-gray-700">
8282
<MarkdownContent content={lesson.content} />
8383
</div>
8484

8585
{lesson.codeExamples && lesson.codeExamples.length > 0 && (
8686
<div className="mb-6">
87-
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
87+
<h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-4">
8888
Code Examples
8989
</h2>
9090
<div className="space-y-4">
9191
{lesson.codeExamples.map((example) => (
9292
<div
9393
key={example.id}
94-
className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 border border-gray-100 dark:border-gray-700"
94+
className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-3 sm:p-4 md:p-6 border border-gray-100 dark:border-gray-700"
9595
>
9696
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
9797
{example.title}

‎components/Chatbot.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export default function Chatbot() {
4949
{/* Chat Button */}
5050
<button
5151
onClick={() => setIsOpen(!isOpen)}
52-
className={`fixed bottom-8 right-8 z-50 w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white rounded-full shadow-2xl shadow-orange-500/50 hover:shadow-orange-500/70 flex items-center justify-center transform hover:scale-110 transition-all duration-300 ${
52+
className={`fixed bottom-4 right-4 md:bottom-8 md:right-8 z-[60] w-14 h-14 md:w-16 md:h-16 bg-gradient-to-br from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white rounded-full shadow-2xl shadow-orange-500/50 hover:shadow-orange-500/70 flex items-center justify-center transform hover:scale-110 transition-all duration-300 ${
5353
isOpen ? 'rotate-90' : ''
5454
}`}
5555
aria-label={isOpen ? 'Close chat' : 'Open chat'}
@@ -77,7 +77,7 @@ export default function Chatbot() {
7777

7878
{/* Chat Window */}
7979
{isOpen && (
80-
<div className="fixed bottom-24 right-8 z-50 w-96 h-[600px] bg-white dark:bg-gray-900 rounded-2xl shadow-2xl border border-gray-200 dark:border-gray-800 flex flex-col overflow-hidden backdrop-blur-xl bg-white/95 dark:bg-gray-900/95 animate-in slide-in-from-bottom-4 duration-300">
80+
<div className="fixed inset-x-4 bottom-24 md:inset-x-auto md:bottom-24 md:right-8 md:w-96 h-[calc(100vh-8rem)] md:h-[600px] max-h-[600px] bg-white dark:bg-gray-900 rounded-2xl shadow-2xl border border-gray-200 dark:border-gray-800 flex flex-col overflow-hidden backdrop-blur-xl bg-white/95 dark:bg-gray-900/95 z-[55]">
8181
{/* Header */}
8282
<div className="bg-gradient-to-r from-orange-500 to-orange-600 text-white p-4 flex items-center justify-between">
8383
<div className="flex items-center gap-3">

‎components/CodeBlock.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -21,56 +21,56 @@ export default function CodeBlock({ code, language }: CodeBlockProps) {
2121
};
2222

2323
return (
24-
<div className="relative group">
24+
<div className="relative group w-full">
2525
<div className="absolute -inset-0.5 bg-gradient-to-r from-orange-500 to-orange-600 rounded-xl opacity-0 group-hover:opacity-30 blur-xl transition-opacity duration-500"></div>
2626

27-
<div className="relative bg-gradient-to-br from-gray-800 via-gray-850 to-gray-900 rounded-xl shadow-2xl overflow-hidden border border-gray-700/50 backdrop-blur-sm">
28-
<div className="flex items-center justify-between bg-gradient-to-r from-gray-800/95 via-gray-850/95 to-gray-900/95 backdrop-blur-md px-4 py-3 border-b border-gray-700/50">
29-
<div className="flex items-center gap-3">
30-
<div className="flex gap-1.5">
31-
<div className="w-3 h-3 rounded-full bg-red-500 shadow-lg shadow-red-500/50"></div>
32-
<div className="w-3 h-3 rounded-full bg-yellow-500 shadow-lg shadow-yellow-500/50"></div>
33-
<div className="w-3 h-3 rounded-full bg-green-500 shadow-lg shadow-green-500/50"></div>
27+
<div className="relative bg-gradient-to-br from-gray-800 via-gray-850 to-gray-900 rounded-xl shadow-2xl overflow-hidden border border-gray-700/50 backdrop-blur-sm w-full">
28+
<div className="flex items-center justify-between bg-gradient-to-r from-gray-800/95 via-gray-850/95 to-gray-900/95 backdrop-blur-md px-2 py-1.5 sm:px-3 sm:py-2 md:px-4 md:py-3 border-b border-gray-700/50 flex-wrap gap-2">
29+
<div className="flex items-center gap-1.5 sm:gap-2 md:gap-3 min-w-0 flex-shrink-0">
30+
<div className="flex gap-0.5 sm:gap-1 md:gap-1.5 flex-shrink-0">
31+
<div className="w-2 h-2 sm:w-2.5 sm:h-2.5 md:w-3 md:h-3 rounded-full bg-red-500 shadow-lg shadow-red-500/50"></div>
32+
<div className="w-2 h-2 sm:w-2.5 sm:h-2.5 md:w-3 md:h-3 rounded-full bg-yellow-500 shadow-lg shadow-yellow-500/50"></div>
33+
<div className="w-2 h-2 sm:w-2.5 sm:h-2.5 md:w-3 md:h-3 rounded-full bg-green-500 shadow-lg shadow-green-500/50"></div>
3434
</div>
35-
<span className="text-sm font-mono text-gray-300 font-semibold tracking-wide">{language.toUpperCase()}</span>
35+
<span className="text-[10px] sm:text-xs md:text-sm font-mono text-gray-300 font-semibold tracking-wide truncate">{language.toUpperCase()}</span>
3636
</div>
3737
<button
3838
onClick={copyToClipboard}
39-
className="group/btn relative px-4 py-1.5 bg-gray-700/60 hover:bg-gradient-to-r hover:from-orange-500 hover:to-orange-600 rounded-lg text-sm text-gray-300 hover:text-white transition-all duration-300 flex items-center gap-2 border border-gray-600/50 hover:border-orange-500/50 hover:shadow-lg hover:shadow-orange-500/25 transform hover:scale-105"
39+
className="group/btn relative px-2 py-1 sm:px-3 sm:py-1.5 md:px-4 md:py-1.5 bg-gray-700/60 hover:bg-gradient-to-r hover:from-orange-500 hover:to-orange-600 rounded-lg text-[10px] sm:text-xs md:text-sm text-gray-300 hover:text-white transition-all duration-300 flex items-center gap-1 sm:gap-1.5 md:gap-2 border border-gray-600/50 hover:border-orange-500/50 hover:shadow-lg hover:shadow-orange-500/25 transform hover:scale-105 flex-shrink-0"
4040
title="Copy to clipboard"
4141
>
4242
<svg
43-
className={`w-4 h-4 transition-all duration-300 ${copied ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100'}`}
43+
className={`w-3 h-3 sm:w-4 sm:h-4 transition-all duration-300 flex-shrink-0 ${copied ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100'}`}
4444
fill="none"
4545
stroke="currentColor"
4646
viewBox="0 0 24 24"
4747
>
4848
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
4949
</svg>
5050
<svg
51-
className={`absolute w-4 h-4 text-green-400 transition-all duration-300 ${copied ? 'scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'}`}
51+
className={`absolute w-3 h-3 sm:w-4 sm:h-4 text-green-400 transition-all duration-300 flex-shrink-0 ${copied ? 'scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'}`}
5252
fill="none"
5353
stroke="currentColor"
5454
viewBox="0 0 24 24"
5555
>
5656
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
5757
</svg>
58-
<span className={`transition-all duration-300 ${copied ? 'opacity-0 scale-95' : 'opacity-100 scale-100'}`}>
58+
<span className={`hidden sm:inline transition-all duration-300 ${copied ? 'opacity-0 scale-95' : 'opacity-100 scale-100'}`}>
5959
{copied ? 'Copied!' : 'Copy'}
6060
</span>
6161
</button>
6262
</div>
6363

64-
<div className="relative overflow-x-auto">
65-
<pre className="p-6 m-0 bg-transparent">
66-
<code className="font-mono text-sm leading-relaxed text-gray-100 block whitespace-pre">
64+
<div className="relative overflow-x-auto w-full">
65+
<pre className="p-2 sm:p-3 md:p-6 m-0 bg-transparent overflow-x-auto">
66+
<code className="font-mono text-[11px] sm:text-xs md:text-sm leading-relaxed text-gray-100 block whitespace-pre overflow-x-auto min-w-full">
6767
{code}
6868
</code>
6969
</pre>
7070

71-
<div className="absolute left-0 top-0 bottom-0 w-12 bg-gray-800/30 border-r border-gray-700/50 pointer-events-none"></div>
71+
<div className="absolute left-0 top-0 bottom-0 w-6 sm:w-8 md:w-12 bg-gray-800/30 border-r border-gray-700/50 pointer-events-none"></div>
7272

73-
<div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-gray-900 via-gray-900/50 to-transparent pointer-events-none"></div>
73+
<div className="absolute bottom-0 left-0 right-0 h-6 sm:h-8 md:h-12 bg-gradient-to-t from-gray-900 via-gray-900/50 to-transparent pointer-events-none"></div>
7474
</div>
7575
</div>
7676
</div>

‎components/Navbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export default function Navbar() {
8787
</div>
8888

8989
{mobileMenuOpen && (
90-
<div className="md:hidden py-4 border-t border-gray-200 dark:border-gray-800 animate-in slide-in-from-top">
90+
<div className="md:hidden py-4 border-t border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl animate-in slide-in-from-top">
9191
<div className="flex flex-col gap-4">
9292
<Link
9393
href="/"

0 commit comments

Comments
 (0)