fix mobile design

andrecasal · Jul 31, 2023 · 9f02734 · 9f02734
1 parent abcee23
commit 9f02734
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 23 deletions.
diff --git a/app/components/CoursePresentation.tsx b/app/components/CoursePresentation.tsx
@@ -21,7 +21,7 @@ export const CoursePresentation = ({
 	}
 }) => {
 	return (
-		<div className="relative isolate mx-auto flex max-w-2xl flex-col gap-16 bg-foreground/5 px-6 py-16 ring-1 ring-foreground/10 sm:rounded-3xl sm:p-8 lg:mx-0 lg:max-w-none lg:flex-row lg:py-20 xl:gap-x-20 xl:px-20">
+		<div className="relative isolate mx-auto flex max-w-2xl flex-col gap-16 bg-foreground/5 px-6 py-16 ring-1 ring-foreground/10 rounded-3xl sm:p-8 lg:mx-0 lg:max-w-none lg:flex-row lg:py-20 xl:gap-x-20 xl:px-20">
 			<img className="w-full flex-none rounded-2xl object-cover shadow-xl lg:aspect-square lg:h-auto lg:max-w-sm" src={img} alt="" />
 			<div className="w-full flex-auto">
 				<Text heading="h2" size="3xl" className="sm:text-size-4xl">

diff --git a/app/components/footer.tsx b/app/components/footer.tsx
@@ -126,7 +126,7 @@ const Footer = () => {
 									))}
 								</ul>
 							</div>
-							<div className="mt-10 md:mt-0">
+							<div className="xl:mt-10 md:mt-0">
 								<Text heading="h3" size="sm" className="font-semibold tracking-normal text-muted-900">
 									Courses
 								</Text>

diff --git a/app/routes/_marketing+/components/bg-square-lines.tsx b/app/routes/_marketing+/components/bg-square-lines.tsx
@@ -16,12 +16,9 @@ const BackgroundSquareLines = ({ children, ...props }: PropsWithChildren<HTMLAtt
 					</svg>
 					<rect width="100%" height="100%" strokeWidth={0} fill="url(#square-pattern)" />
 				</svg>
-				<div
-					className="absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)]"
-					aria-hidden="true"
-				>
+				<div className="absolute inset-0 -z-10 transform-gpu blur-3xl h-full w-full" aria-hidden="true">
 					<div
-						className="aspect-[1108/632] w-[69.25rem] bg-gradient-to-r from-brand-muted to-brand opacity-20"
+						className="w-full bg-gradient-to-r from-brand-muted to-brand opacity-20"
 						style={{
 							clipPath:
 								'polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)',

diff --git a/app/routes/_marketing+/components/hero-andre.tsx b/app/routes/_marketing+/components/hero-andre.tsx
@@ -12,19 +12,17 @@ const HeroAndre = () => {
 			<Container className="py-32 sm:py-40">
 				<div className="lg:grid lg:grid-cols-2 lg:gap-x-10">
 					<div className="mx-auto max-w-2xl lg:mx-0">
-						<div className="flex">
-							<a href="https://github.com/epicweb-dev/epic-stack" target="_blank" className="inline-flex space-x-6" rel="noreferrer">
-								<Badge variant="info" size="md">
-									What's new
-								</Badge>
-								<Text size="sm" asChild>
-									<span className="inline-flex items-center space-x-2 text-size-sm font-medium text-muted-600">
-										<span>Epic Stack collab with Kent C. Dodds</span>
-										<Icon name="rocket" className="h-5 w-5 text-muted-400" aria-hidden="true" />
-									</span>
-								</Text>
-							</a>
-						</div>
+						<a href="https://github.com/epicweb-dev/epic-stack" target="_blank" className="inline-flex gap-6 flex-wrap" rel="noreferrer">
+							<Badge variant="info" size="md" className="whitespace-nowrap">
+								What's new
+							</Badge>
+							<Text size="sm" asChild>
+								<span className="inline-flex items-center space-x-2 text-size-sm font-medium text-muted-600 whitespace-nowrap">
+									<span>Epic Stack collab with Kent C. Dodds</span>
+									<Icon name="rocket" className="h-5 w-5 text-muted-400" aria-hidden="true" />
+								</span>
+							</Text>
+						</a>
 						<Text heading="h1" size="4xl" className="mt-10 sm:text-size-6xl">
 							Hi! I'm André Casal and I'm a full-stack web dev mentor.
 						</Text>

diff --git a/app/routes/_marketing+/courses+/mastery-for-vs-code.tsx b/app/routes/_marketing+/courses+/mastery-for-vs-code.tsx
@@ -229,7 +229,7 @@ const MasteryForVSCode = () => {
 	return (
 		<>
 			<BackgroundSquareLines>
-				<Container>
+				<Container className="overflow-x-hidden">
 					<div className="pb-24 pt-10 sm:pb-40 lg:flex lg:pt-40">
 						<div className="mx-auto max-w-2xl flex-shrink-0 lg:mx-0 lg:max-w-xl lg:pt-8">
 							{/* <div className="mt-24 sm:mt-32 lg:mt-16">
@@ -456,7 +456,7 @@ const MasteryForVSCode = () => {
 							</div>
 						</div>
 						<div className="mt-16 sm:mt-24 lg:mt-0">
-							<img src="/img/andre.jpg" alt="André Casal" className="aspect-[6/5] h-full rounded-2xl object-cover" />
+							<img src="/img/andre.jpg" alt="André Casal" className="aspect-[6/5] rounded-2xl object-cover" />
 						</div>
 					</div>
 				</Container>
@@ -607,7 +607,7 @@ const MasteryForVSCode = () => {
 			</Container>
 			<Container>
 				<div className="mx-auto max-w-7xl py-24 sm:px-6 sm:py-32 lg:px-8 ">
-					<div className="relative isolate overflow-hidden bg-muted-50 px-6 py-24 text-center shadow-2xl sm:rounded-3xl sm:px-16">
+					<div className="relative isolate overflow-hidden bg-muted-50 px-6 py-24 text-center shadow-2xl rounded-3xl sm:px-16">
 						<BackgroundRadial>
 							<Text heading="h2" size="3xl" className="mt-2 sm:text-size-4xl">
 								Boost your VS Code productivity today.