Adding support for mobile

Author: abdonmorales

src/components/ContactCTA.astro

@@ -16,8 +16,8 @@ import Icon from './Icon.astro';
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		gap: 2.5rem;
-		padding: clamp(3rem, 5vw, 4.25rem) clamp(1.5rem, 3vw, 2.75rem);
+		gap: 2.25rem;
+		padding: clamp(2.5rem, 5vw, 3.75rem) clamp(1.25rem, 4vw, 2.5rem);
 		border-radius: 1.75rem;
 		box-shadow: var(--glass-shadow-medium);
 		backdrop-filter: var(--glass-blur-medium);

src/components/Nav.astro

@@ -172,9 +172,9 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
 		z-index: 9999;
 		position: relative;
 		font-family: var(--font-brand);
-		width: min(100%, calc(var(--page-max-width) + 3rem));
+		width: min(calc(100% - 1rem), var(--page-max-width));
 		margin-inline: auto;
-		padding: clamp(0.75rem, 2vw, 1.25rem);
+		padding: clamp(0.5rem, 2vw, 1.25rem);
 		display: flex;
 		flex-direction: column;
 		gap: 0.75rem;
@@ -344,6 +344,36 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
 		margin-left: auto;
 	}
 
+	@media (max-width: 40em) {
+		nav {
+			border-radius: 1rem;
+			gap: 0.5rem;
+		}
+
+		.menu-header {
+			padding: 0.25rem 0.35rem 0.25rem 0.5rem;
+		}
+
+		.menu-button {
+			font-size: 1.15rem;
+			padding: 0.45rem;
+		}
+
+		.nav-items {
+			padding: 1rem 1.25rem;
+		}
+
+		.menu-footer {
+			padding: 0.75rem 1rem 1rem;
+			flex-wrap: wrap;
+			gap: 0.5rem;
+		}
+
+		.theme-toggle {
+			margin-left: 0;
+		}
+	}
+
 	@media (min-width: 50em) {
 		nav {
 			display: grid;

src/components/PortfolioPreview.astro

@@ -49,6 +49,21 @@ const { data, slug } = Astro.props.project;
 		will-change: transform, box-shadow;
 	}
 
+	@media (max-width: 40em) {
+		.card {
+			height: 10rem;
+			padding: 0.6rem;
+		}
+
+		.title {
+			font-size: var(--text-md);
+		}
+
+		img {
+			border-radius: 0.8rem;
+		}
+	}
+
 	.card:hover {
 		box-shadow: var(--glass-shadow-medium);
 		transform: translateY(-2px);

src/components/Skills.astro

@@ -34,7 +34,7 @@ const { class: className } = Astro.props;
 	.skills {
 		display: flex;
 		flex-direction: column;
-		gap: 3rem;
+		gap: 2.5rem;
 	}
 
 	@supports (content-visibility: auto) {

src/pages/index.astro

@@ -95,8 +95,8 @@ const projects = (await getCollection('work'))
 		display: grid;
 		grid-template-columns: 1fr;
 		align-items: center;
-		gap: 1.75rem;
-		padding: clamp(1.75rem, 3vw, 2.75rem);
+		gap: 1.5rem;
+		padding: clamp(1.5rem, 4vw, 2.5rem);
 		border-radius: 1.75rem;
 		margin: 1rem 0;
 		backdrop-filter: var(--glass-blur-light);
@@ -117,7 +117,7 @@ const projects = (await getCollection('work'))
 		aspect-ratio: 5 / 4;
 		object-fit: cover;
 		object-position: top;
-		border-radius: 1.25rem;
+		border-radius: 1rem;
 		box-shadow: var(--glass-shadow-medium);
 	}
 
@@ -148,7 +148,7 @@ const projects = (await getCollection('work'))
 		display: grid;
 		gap: 2.25rem;
 		position: relative;
-		padding: clamp(1.75rem, 3vw, 2.75rem);
+		padding: clamp(1.5rem, 4vw, 2.5rem);
 		border-radius: 1.5rem;
 	}
 

src/styles/global.css

@@ -296,7 +296,7 @@ h5 {
 	width: 100%;
 	max-width: var(--page-max-width);
 	margin-inline: auto;
-	padding-inline: 1.5rem;
+	padding-inline: clamp(1rem, 4vw, 1.5rem);
 }
 
 .liquid-glass {