From 44c5e2cc6714024227839b30b9a325dc4fedad04 Mon Sep 17 00:00:00 2001
From: Anton Livaja <anton@livaja.me>
Date: Sat, 15 Mar 2025 14:46:08 -0700
Subject: [PATCH] more mobile friendliness

---
 _layouts/company.html | 10 +++++-----
 _sass/base.scss       | 29 ++++++++++++++++++++++++++++-
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/_layouts/company.html b/_layouts/company.html
index db7c74b..a1665b1 100644
--- a/_layouts/company.html
+++ b/_layouts/company.html
@@ -15,7 +15,7 @@
 
 					<br>
 					<br>
-					<div class="about-special video-content" style="width: 700px">
+					<div class="about-special video-content" style="max-width: 700px">
 						<br>
 						<h2>the world is built on blind trust. we are here to change that.</h2>
 						<br>
@@ -32,7 +32,7 @@
 					</div>
 				</section>
 
-				<section class="flex-container">
+				<section class="flex-container who-we-are-section">
 					<div class="team flex-container-inner">
 						<div class="team flex-container" style="margin-bottom: 0px">
 							<div class="flex-container-inner card">
@@ -61,7 +61,7 @@
 							</div>
 						</div>
 					</div>
-					<div class="flex-container-inner" style="margin-left: 70px">
+					<div class="flex-container-inner who-we-are">
 						<h2 class="gradient-text">who we are</h2>
 						<p class="hero-p">Distrust is made up of engineers behind some of the most security-critical projects in the world—including BitGo, Turnkey, and Unit410.</p>
 						<p class="hero-p">We’ve helped hundreds of companies by conducting security reviews, building out their security infrastructure, and aiding them in launching products which can withstand the modern threat landscape. We don’t just secure systems. We build them.</p>
@@ -71,7 +71,7 @@
 					</div>
 				</section>
 
-				<section class="flex-container" style="margin: 300px 0px;">
+				<section class="flex-container tall-section">
 					<div class="flex-container-inner">
 						<h2 class="gradient-text">our manifesto</h2>
 						<p class="hero-p">Every day, we apply these guiding principles to how we think, build, and secure systems.</p>
@@ -87,7 +87,7 @@
 					</div>
 				</section>
 
-				<section class="flex-container center" style="margin: 250px 0px 100px 0px;">
+				<section class="flex-container center tall-section">
 					<div class="flex-container-inner">
 						<h3 class="gradient-text">ready to take security serously?</h3>
 						<p class="hero-p center" style="max-width: 700px">We help organizations that can't afford to fail. If security is mission-critical for your company, let's talk.</p>
diff --git a/_sass/base.scss b/_sass/base.scss
index af8073c..dccba8d 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -915,6 +915,10 @@ section {
 	margin-bottom:150px;
 }
 
+.tall-section {
+  margin: 250px 0px;
+}
+
 .companies {
    display: flex;
    justify-content: space-between;
@@ -1407,6 +1411,10 @@ pre {
    margin-top: 10px;
 }
 
+.who-we-are {
+	margin-left: 70px;
+}
+
 /**
  * media queries
  */
@@ -1425,7 +1433,6 @@ pre {
    }
 
    .flex-container {
-      display: inline-block;
    }
 
    .hide {
@@ -1435,9 +1442,21 @@ pre {
    .show {
       display: none;
    }
+
+	 .who-we-are-section {
+			flex-direction: column-reverse;
+	 }
 }
 
 @media (max-width: 600px) {
+		.flex-container {
+			flex-direction: column;
+		}
+
+		.who-we-are-section {
+			flex-direction: column-reverse;
+		}
+
 		section {
 			margin-top: 80px;
 			margin-bottom: 80px;
@@ -1478,6 +1497,14 @@ pre {
       min-width: 200px;
 	 }
 
+   .tall-section {
+      margin: 100px 0px;
+   }
+
+   .about-special {
+      margin-top: 0px;
+   }
+
 	 h1 {
 		font-size: 70px !important;
 		line-height: 70px !important;