feat: responsive to iphone XR

janleigh · Dec 8, 2023 · 7f1cea4 · 7f1cea4
1 parent 8fe612c
commit 7f1cea4
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 11 deletions.
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,8 +1,8 @@
 export function Footer() {
 	return (
-		<div id="footer" className="fixed bottom-8 flex w-11/12 justify-center">
-			<div className="mx-auto flex justify-start">
-				<span className="py-4 text-verdant-fg">
+		<div id="footer" className="flex w-full justify-center bg-verdant-bg lg:fixed lg:bottom-8 lg:w-11/12">
+			<div className="mx-auto flex justify-center">
+				<span className="px-4 py-4 text-center text-verdant-fg lg:px-0">
 					© 2023 <span className="text-verdant-blue">Jan Leigh Muñoz</span>. All Rights Reserved.
 				</span>
 			</div>

diff --git a/src/components/MainContainer.tsx b/src/components/MainContainer.tsx
@@ -1,15 +1,15 @@
 export function MainContainer() {
 	return (
-		<div id="main" className="flex w-screen justify-center bg-verdant-bg">
+		<div id="main" className="flex justify-center bg-verdant-bg">
 			<div className="flex flex-col items-center justify-center lg:flex-row">
-				<div className="mx-12 mb-8 mt-16 lg:mb-0 lg:mt-0">
+				<div className="mx-12 mb-8 mt-16 sm:mt-96 md:mt-48 lg:mb-0 lg:mt-0">
 					<img
 						src="https://github.com/janleigh.png"
 						alt="PFP"
 						className="h-60 w-60 rounded-full bg-verdant-bg-light p-4"
 					/>
 				</div>
-				<div className="mx-8 mb-12 items-center justify-center lg:mb-0">
+				<div className="mx-12 items-center justify-center lg:mx-8 lg:mb-0">
 					<div className="text-3xl font-bold text-verdant-fg">
 						Heya! I'm <span className="text-verdant-blue">Jan Leigh</span>!
 					</div>

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -6,7 +6,7 @@ export function Navbar() {
 					janleigh<span className="text-verdant-blue">.is-a.dev</span>
 				</span>
 			</div>
-			<div className="mr-6 mt-2 flex lg:mx-auto">
+			<div className="mr-6 mt-2 flex lg:mx-auto lg:my-auto">
 				<div className="flex justify-end">
 					<div className="flex lowercase">
 						<a href="https://github.com/janleigh" target="_blank" className="p-4 text-verdant-fg">
@@ -25,14 +25,14 @@ export function Navbar() {
 								/>
 							</svg>
 						</a>
-						<a href="https://ko-fi.com/janleigh" target="_blank" className="p-4 text-white">
+						{/* <a href="https://ko-fi.com/janleigh" target="_blank" className="p-4 text-white">
 							<svg xmlns="http://www.w3.org/2000/svg" height="22.5" width="22.5" viewBox="0 0 512 512">
 								<path
 									fill="#dfdddd"
 									d="M88 0C74.7 0 64 10.7 64 24c0 38.9 23.4 59.4 39.1 73.1l1.1 1C120.5 112.3 128 119.9 128 136c0 13.3 10.7 24 24 24s24-10.7 24-24c0-38.9-23.4-59.4-39.1-73.1l-1.1-1C119.5 47.7 112 40.1 112 24c0-13.3-10.7-24-24-24zM32 192c-17.7 0-32 14.3-32 32V416c0 53 43 96 96 96H288c53 0 96-43 96-96h16c61.9 0 112-50.1 112-112s-50.1-112-112-112H352 32zm352 64h16c26.5 0 48 21.5 48 48s-21.5 48-48 48H384V256zM224 24c0-13.3-10.7-24-24-24s-24 10.7-24 24c0 38.9 23.4 59.4 39.1 73.1l1.1 1C232.5 112.3 240 119.9 240 136c0 13.3 10.7 24 24 24s24-10.7 24-24c0-38.9-23.4-59.4-39.1-73.1l-1.1-1C231.5 47.7 224 40.1 224 24z"
 								/>
 							</svg>
-						</a>
+						</a> */}
 						<a href="mailto:[email protected]" target="_blank" className="p-4 text-white">
 							<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 512 512">
 								<path

diff --git a/src/pages/App.tsx b/src/pages/App.tsx
@@ -15,8 +15,10 @@ export function App() {
 				<NotFound />
 			)} */}
 			<Navbar />
-			<MainContainer />
-			<Footer />
+			<div className="flex flex-col justify-center">
+				<MainContainer />
+				<Footer />
+			</div>
 		</div>
 	);
 }