From 325129c261d092f7083b68046e7bfecbedeaa12b Mon Sep 17 00:00:00 2001
From: Anton Livaja <anton@livaja.me>
Date: Sat, 15 Mar 2025 14:13:57 -0700
Subject: [PATCH] add some mobile responsiveness
---
_includes/head.html | 7 ++---
_layouts/contact.html | 4 +--
_layouts/landing.html | 2 +-
_layouts/roadmap.html | 4 +--
_layouts/services.html | 4 +--
_sass/base.scss | 58 ++++++++++++++++++++++++++++++++++++++++++
6 files changed, 67 insertions(+), 12 deletions(-)
diff --git a/_includes/head.html b/_includes/head.html
index 9cefebd..10454f2 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -80,16 +80,13 @@
<div class="menu-content" style="display: none">
<div class="inner-menu-content">
<div>
- <a href="/index.html">Home</a>
- </div>
- <div>
- <a href="/about.html">About</a>
+ <a href="/company.html">Company</a>
</div>
<div>
<a href="/services.html">Services</a>
</div>
<div>
- <a href="/projects.html">Projects</a>
+ <a href="/roadmap.html">Roadmap</a>
</div>
<div>
<a href="/contact.html">Contact</a>
diff --git a/_layouts/contact.html b/_layouts/contact.html
index 737f0f5..c43e000 100644
--- a/_layouts/contact.html
+++ b/_layouts/contact.html
@@ -5,13 +5,13 @@
{%- include header.html -%}
<div class="container">
<main>
- <section style="margin-bottom: 80px; margin-top: 100px">
+ <section class="capsule-section">
<div class="center">
<div class="capsule">contact</div>
</div>
<br>
<br>
- <h2 style="height: 180px; font-weight: 600 !important" class="gradient-text center">tell us about your biggest security challenges</h2>
+ <h2 class="gradient-text center contact-header">tell us about your biggest security challenges</h2>
<br>
<p class="hero-p center" style="filter: brightness(70%)">Fill out the form below to start the conversation about how we can help you eliminate single points of failure and build security that doesn't rely on blind trust.</p>
</section>
diff --git a/_layouts/landing.html b/_layouts/landing.html
index 2fbb888..ab54e97 100644
--- a/_layouts/landing.html
+++ b/_layouts/landing.html
@@ -8,7 +8,7 @@
<section class="flex-container">
<div class="flex-container-inner">
<div class="text-well">
- <h1 class="gradient-text" style="min-height: 320px">security without blind trust</h1>
+ <h1 class="gradient-text hero-header">security without blind trust</h1>
<p class="hero-p">Eliminate single points of failure. Distrust applies a first principles approach to securing mission critical infrastructure. No guessing, no shortcuts, only verifiable security.</p>
<br />
<a href="/contact.html" class="mega button">Work with us</a>
diff --git a/_layouts/roadmap.html b/_layouts/roadmap.html
index 3f9f3c1..dac3951 100644
--- a/_layouts/roadmap.html
+++ b/_layouts/roadmap.html
@@ -21,13 +21,13 @@
<div class="container">
<main>
- <section class="flex-container" style="margin-top: 100px; margin-bottom: 30px">
+ <section class="flex-container capsule-header">
<div class="flex-container-inner" style="padding-top: 0px">
<div class="text-well center">
<div class="capsule">roadmap</div>
<br>
<br>
- <h1 style="height: 310px">building verifiable security without single points of failure</h1>
+ <h1 class="hero-header">building verifiable security without single points of failure</h1>
<br>
<br>
<p class="hero-p center">Most systems today still rely on single individuals or computers, unverifiable software, and opaque processes. We’re redesigning security from the ground up.</p>
diff --git a/_layouts/services.html b/_layouts/services.html
index 8c2bd29..b6ea5ba 100644
--- a/_layouts/services.html
+++ b/_layouts/services.html
@@ -5,7 +5,7 @@
{%- include header.html -%}
<div class="container">
<main>
- <section class="flex-container" style="margin-top: 100px">
+ <section class="flex-container capsule-header">
<div class="flex-container-inner">
<div class="text-well center">
<div class="text-well" style="text-align: center; margin: auto">
@@ -13,7 +13,7 @@
</div>
<br>
<br>
- <h1 class="hero-title gradient-text" style="height: 320px">hire Distrust to solve your hardest security challenges</h1>
+ <h1 class="hero-title gradient-text hero-header">hire Distrust to solve your hardest security challenges</h1>
<br>
<br>
<p class="hero-p center">Built by the team behind BitGo, Unit410, and Turnkey, we appy hard-earned lessons from securing critical infrastructure to build transparent, resilient, and universally applicable security solutions.</p>
diff --git a/_sass/base.scss b/_sass/base.scss
index b3b6247..6cd2682 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -130,6 +130,20 @@ a:hover {
max-width: 800px;
}
+.hero-header {
+ height: 320px;
+}
+
+.capsule-header {
+ margin-top: 100px;
+ margin-bottom: 30px;
+}
+
+.contact-header {
+ height: 180px;
+ margin-top: 100px;
+}
+
.card {
border: 1px solid gainsboro;
border-radius: 20px;
@@ -416,6 +430,7 @@ footer {
text-decoration: none;
margin-left: 20px;
transition: transform 0.5s ease !important;
+ min-width: 200px;
}
.footer-link:hover {
@@ -1396,9 +1411,18 @@ pre {
/**
* media queries
*/
+
+@media (max-width: 1380px) {
+ .vertical-line-container {
+ display: none;
+ }
+}
+
@media (max-width: 1020px) {
.flex-container-inner {
width: 100% !important;
+ margin: 0;
+ margin-bottom: 50px;
}
.flex-container {
@@ -1415,6 +1439,11 @@ pre {
}
@media (max-width: 600px) {
+ section {
+ margin-top: 80px;
+ margin-bottom: 80px;
+ }
+
.companies {
flex-wrap: wrap;
}
@@ -1429,5 +1458,34 @@ pre {
padding-top: 50px;
padding-left: 10px;
}
+
+ .hero-header {
+ height: unset !important;
+ }
+
+ .contact-header {
+ margin-top: 50px;
+ height: unset;
+ }
+
+ .capsule-header {
+ height: unset;
+ margin-top: 30px;
+ margin-bottom: 30px;
+ }
+
+ .footer-link {
+ margin-bottom: 20px;
+ }
+
+ h1 {
+ font-size: 70px !important;
+ line-height: 70px !important;
+ }
+
+ h2 {
+ font-size: 50px !important;
+ line-height: 50px !important;
+ }
}