Improve sections scale on large screens (#222)

EmeraldHQ · Mar 18, 2024 · 649ad44 · 649ad44
1 parent 107485e
commit 649ad44
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -297,7 +297,7 @@
 		<div class="flex flex-col gap-16 xl:flex-row xl:gap-0">
 			<a
 				href={i18n.resolveRoute("/")}
-				class="w-fit transition-opacity duration-300 hover:opacity-70"
+				class="size-fit transition-opacity duration-300 hover:opacity-70"
 			>
 				<img src="/logo-title.svg" alt={m.a11yAltLogo()} width="174" height="56" />
 			</a>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -472,7 +472,7 @@
 </Section>
 
 <!-- Values -->
-<Section id="values" title={m.homeValuesTitle()} class="relative py-20">
+<Section id="values" title={m.homeValuesTitle()} class="relative mx-auto py-20 xl:max-w-6xl">
 	<div class="flex items-center justify-between">
 		<div class="grid gap-x-16 gap-y-12 pb-8 pt-4 sm:grid-cols-2">
 			{#each valuesSections as value}
@@ -491,7 +491,11 @@
 </Section>
 
 <!-- Technologies -->
-<Section id="technologies" title={m.homeTechnologiesTitle()}>
+<Section
+	id="technologies"
+	title={m.homeTechnologiesTitle()}
+	class="mx-auto xl:max-w-6xl xxl:max-w-4xl"
+>
 	<div class="flex flex-col items-center gap-8 max-sm:!mx-8 sm:flex-row">
 		<!-- Left part -->
 		<div
@@ -544,7 +548,7 @@
 </Section>
 
 <!-- About us -->
-<Section id="about-us" title={m.homeAboutUsTitle()}>
+<Section id="about-us" title={m.homeAboutUsTitle()} class="mx-auto xl:max-w-6xl xxl:max-w-5xl">
 	<div class="flex items-center justify-center pb-10">
 		<div
 			class="flex min-w-full flex-col gap-4 rounded-3xl border border-white border-opacity-25 bg-glass p-8 backdrop-blur backdrop-filter max-sm:!-mx-8"
@@ -568,7 +572,7 @@
 		<p class="text-lg text-gray-400 xs:text-2xl">
 			{m.homeBottomCtaSubtitle()}
 		</p>
-		<h3 class="mx-10 mb-16 mt-4 text-center text-3xl font-medium xs:text-5xl">
+		<h3 class="mx-10 mb-16 mt-4 max-w-screen-xs text-center text-3xl font-medium xs:text-5xl">
 			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 			{@html c(m.homeBottomCtaTitle())}
 		</h3>