Fix a few mobile-view related issues

louisescher · Apr 21, 2024 · 283ee35 · 283ee35
1 parent 0474a78
commit 283ee35
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 3 deletions.
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -116,11 +116,29 @@ const titleHTML = title.split(" ").map((titlePart: string) => {
 		margin-top: 1rem;
 	}
 
+	@media screen and (max-width: 1250px) {
+		.hero {
+			flex-direction: column-reverse;
+			text-align: center
+		}
+
+		h1 {
+			gap: 0.75rem;
+			text-align: center;
+			justify-content: center;
+		}
+
+		.hero > img,
+		.hero > .hero-html {
+			order: 2;
+			width: min(100%, 25rem);
+		}
+	}
+
 	@media (min-width: 50rem) {
 		.hero {
-			grid-template-columns: 7fr 4fr;
-			gap: 3%;
-			padding: 2rem;
+			gap: 2rem;
+			padding: 1rem;
 		}
 
 		.hero > img,

diff --git a/src/styles/theme.css b/src/styles/theme.css
@@ -140,6 +140,11 @@ a:not(.sidebar a) {
   width: fit-content;
 }
 
+/* Make sure mobile links fill the entire space, not just fit the content */
+nav[aria-labelledby="starlight__on-this-page--mobile"] a {
+  width: 100% !important;
+}
+
 /* Adjust link color on footer */
 .page-footer a {
   color: var(--sl-color-gray-2);
@@ -299,4 +304,18 @@ dialog {
 /* Remove default padding on main since we have a footer */
 main:has(.page-footer) {
   padding-bottom: 0 !important;
+}
+
+@media screen and (max-width: 1250px) {
+  .card-grid {
+    display: grid;
+    grid-template-columns: 1fr !important;
+    --stagger-height: 0rem !important;
+  }
+}
+
+@media (max-width: 72rem) {
+  .main-pane {
+    width: 100% !important;
+  }
 }