fix styling for mobile

bablr-lang · Oct 1, 2024 · 0a07162 · 0a07162
1 parent 409b21d
commit 0a07162
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 50 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -27,7 +27,6 @@ main {
 header {
 	display: flex;
 	padding: 0.5em;
-	width: 100%;
 	background: white;
 	justify-content: center;
 }

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -39,12 +39,14 @@ const { title } = Astro.props;
 	}
 main {
 	margin: auto;
-	max-width: 100%;
+	width: 960px;
+	max-width: calc(100% - 2rem);
 	color: Black;
 	font-size: 20px;
 }
 body {
 	margin: auto;
+	width: 100%;
 }
 html {
 	font-family: system-ui, sans-serif;
@@ -61,7 +63,4 @@ code {
 		Courier New,
 		monospace;
 }
-
-
-
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -5,52 +5,46 @@ import CTAButton from "../components/CTAButton.astro";
 ---
 
 <Layout title="Welcome">
-	<main>
-		<h1>Welcome to &lt;<span class="text-gradient">BABLR</span>&gt;</h1>
-		<div class="link-container">
-			<ul role="list" class="link-card-grid">
-				<Card
-					href="https://github.com/bablr-lang"
-					title="Github"
-					body="Learn about BABLR and its mission."
-				/>
-				<Card
-					href="https://discord.gg/pTbg4JGEZp"
-					title="Community"
-					body="Join our Discord and help with the development."
-				/>
-				<Card
-					href="/tutorials"
-					title="Getting Started"
-					body="Check out some tutorials and write your first language!"
-				/>
-				<Card
-					href="/docs"
-					title="Documentation"
-					body="Read the docs."
-				/>
-			</ul>
-		</div>
+	<h1>Welcome to &lt;<span class="text-gradient">BABLR</span>&gt;</h1>
+	<div class="link-container">
+		<ul role="list" class="link-card-grid">
+			<Card
+				href="https://github.com/bablr-lang"
+				title="Github"
+				body="Learn about BABLR and its mission."
+			/>
+			<Card
+				href="https://discord.gg/pTbg4JGEZp"
+				title="Community"
+				body="Join our Discord and help with the development."
+			/>
+			<Card
+				href="/tutorials"
+				title="Getting Started"
+				body="Check out some tutorials and write your first language!"
+			/>
+			<Card href="/docs" title="Documentation" body="Read the docs." />
+		</ul>
+	</div>
 
-		<roadmap>
-			<div class="content">
-				<div class="text-space">
-					<h2>Roadmap</h2>
-					<p>Where are we going? Where have we been?</p>
-				</div>
-				<div class="button-space">
-					<CTAButton href="/roadmap" text="explore" />
-				</div>
+	<roadmap>
+		<div class="content">
+			<div class="text-space">
+				<h2>Roadmap</h2>
+				<p>Where are we going?<br />Where have we been?</p>
+			</div>
+			<div class="button-space">
+				<CTAButton href="/roadmap" text="explore" />
 			</div>
-		</roadmap>
-	</main>
+		</div>
+	</roadmap>
 </Layout>
 
 <style>
-	main {
+	/*	main {
 		margin: auto;
 		width: 100%;
-	}
+	}*/
 	h1 {
 		font-size: 4rem;
 		font-weight: 700;
@@ -96,21 +90,20 @@ import CTAButton from "../components/CTAButton.astro";
 	}
 	.link-container {
 		padding-bottom: 4rem;
-		width: 960px;
+		max-width: calc(100% - 2rem);
 		margin: auto;
 	}
 	roadmap {
-		padding: 8rem 0;
+		padding: 4rem 0;
 		background: #eee8d5;
 		color: #268bd2;
-		width: 100%;
-		display: flex;
+		text-align: center;
+		display: block;
 	}
 	roadmap .content {
 		margin: auto;
 		font-size: x-large;
-		display: flex;
-		width: 1060px
+		max-width: calc(100% - 2rem);
 	}
 	roadmap .text-space {
 		margin: auto;
@@ -121,5 +114,27 @@ import CTAButton from "../components/CTAButton.astro";
 	}
 	roadmap h2 {
 		font-size: 3rem;
+		margin: 0;
+	}
+
+	@media screen and (min-width: 636px) {
+		roadmap {
+			padding: 4rem 0;
+			background: #eee8d5;
+			color: #268bd2;
+			display: flex;
+			width: 100%;
+		}
+		roadmap .content {
+			margin: auto;
+			font-size: x-large;
+			width: 1060px;
+			display: flex;
+		}
+		roadmap .text-space {
+			margin: auto;
+		}
+		roadmap .button-space {
+		}
 	}
 </style>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -64,4 +64,9 @@ a:focus {
     font-size: 40px;
     font-weight: 200;
   }
+  .link-container {
+    padding-bottom: 4rem;
+    width: 720px;
+    margin: auto;
+  }
 }