Improve responsive design

- Give content more space on tablet - Fix text width to 80 characters - Fix title linebreak in hero
bespinian · Nov 26, 2024 · 06159d3 · 06159d3
1 parent 6935f5c
commit 06159d3
Show file tree

Hide file tree

Showing 11 changed files with 15 additions and 11 deletions.
diff --git a/src/routes/Contact.svelte b/src/routes/Contact.svelte
@@ -6,7 +6,7 @@
 
 <section id="contact" class="section">
 	<div class="columns is-centered columns-section">
-		<div class="column is-half">
+		<div class="column is-two-thirds is-half-widescreen">
 			<h3 class="title is-2 is-spaced">{$_('contact.title')}</h3>
 			<p>{$_('contact.body')}</p>
 			<form

diff --git a/src/routes/Customers.svelte b/src/routes/Customers.svelte
@@ -41,7 +41,7 @@
 
 <section id="customers" class="section">
 	<div class="columns is-centered columns-section">
-		<div class="column is-half">
+		<div class="column is-two-thirds is-half-widescreen">
 			<h3 class="title is-2 is-spaced">{$_('customers.title')}</h3>
 			<p>{$_('customers.body')}:</p>
 			<br />

diff --git a/src/routes/Hero.svelte b/src/routes/Hero.svelte
@@ -7,11 +7,11 @@
 	<div class="hero-body">
 		<div class="container container-cloud-city">
 			<div class="columns">
-				<div class="column is-offset-1-desktop column-main-title">
+				<div class="column is-offset-1-widescreen column-main-title">
 					<h1 class="title is-1 is-spaced">bespinian</h1>
 					<h2 class="subtitle is-4">{$_('subtitle')}</h2>
 				</div>
-				<div class="column is-offset-4-desktop has-text-centered">
+				<div class="column is-offset-4-widescreen has-text-centered">
 					<img class="cloud-city" src={cloudCity} alt="Cloud City" />
 				</div>
 			</div>

diff --git a/src/routes/Mission.svelte b/src/routes/Mission.svelte
@@ -8,7 +8,7 @@
 
 <section id="mission" class="section">
 	<div class="columns is-centered columns-section">
-		<div class="column is-half">
+		<div class="column is-two-thirds is-half-widescreen">
 			<h3 class="title is-2 is-spaced">{$_('mission.title')}</h3>
 			<p>{$_('mission.body')}</p>
 			<div class="content team-content">

diff --git a/src/routes/Partners.svelte b/src/routes/Partners.svelte
@@ -45,7 +45,7 @@
 
 <section id="partners" class="section">
 	<div class="columns is-centered columns-section">
-		<div class="column is-half">
+		<div class="column is-two-thirds is-half-widescreen">
 			<h3 class="title is-2 is-spaced">{$_('partners.title')}</h3>
 			<p>{$_('partners.body')}:</p>
 			<br />

diff --git a/src/routes/Services.svelte b/src/routes/Services.svelte
@@ -36,7 +36,7 @@
 
 <section id="services" class="section">
 	<div class="columns is-centered columns-section">
-		<div class="column is-half">
+		<div class="column is-two-thirds is-half-widescreen">
 			<h3 class="title is-2 is-spaced">{$_('services.title')}</h3>
 			<p>{$_('services.body')}</p>
 			<div class="content team-content">

diff --git a/src/routes/Team.svelte b/src/routes/Team.svelte
@@ -127,7 +127,7 @@
 
 <section id="team" class="section">
 	<div class="columns is-centered columns-section">
-		<div class="column is-half">
+		<div class="column is-two-thirds is-half-widescreen">
 			<h3 class="title is-2 is-spaced">{$_('team.title')}</h3>
 			<p>{$_('team.body')}</p>
 			<div class="content team-content">

diff --git a/src/routes/Tech.svelte b/src/routes/Tech.svelte
@@ -26,7 +26,7 @@
 
 <section id="tech" class="section">
 	<div class="columns is-centered columns-section">
-		<div class="column is-half">
+		<div class="column is-two-thirds is-half-widescreen">
 			<h3 class="title is-2 is-spaced">{$_('technologies.title')}</h3>
 			<p>
 				{$_('technologies.platforms.body.intro')}

diff --git a/src/routes/customers/[slug]/+page.svelte b/src/routes/customers/[slug]/+page.svelte
@@ -47,7 +47,7 @@
 <section class="section customer-story">
 	{#if customer}
 		<div class="columns is-centered columns-section">
-			<div class="column is-half">
+			<div class="column is-two-thirds is-half-widescreen">
 				<h2 class="title is-2 is-spaced">
 					{customer.title}
 				</h2>

diff --git a/src/routes/jobs/+page.svelte b/src/routes/jobs/+page.svelte
@@ -40,7 +40,7 @@
 <br />
 <section class="section">
 	<div class="columns is-centered columns-section">
-		<div class="column is-half">
+		<div class="column is-two-thirds is-half-widescreen">
 			<h3 class="title is-2 is-spaced">Cloud Solutions Engineer 60-100%</h3>
 			<p>
 				We are looking to extend our team of software engineers and architects. They each advise

diff --git a/src/routes/styles.css b/src/routes/styles.css
@@ -14,6 +14,10 @@ body {
 	font-family: var(--font-body);
 }
 
+section.section > * > * {
+	max-width: 80ch;
+}
+
 .sc-carousel__carousel-container.has-text-centered {
 	flex-direction: column;
 }