caution
/
website
5
0
Fork 0
Code Issues Pull Requests 2 Packages Projects Releases Wiki Activity

responsiveness

This commit is contained in:
Ksenia Lesko 2025-10-27 21:04:33 -04:00
parent bc4a54a893
commit 5897dee476
Signed by: xenushka
GPG Key ID: ABAFE7A50A15D386
2 changed files with 43 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_layouts/landing.html
View File

@ -6,11 +6,10 @@
<main> <main>
<section class="hero landing"> <section class="hero landing">
<div class="hero-content landing container"> <div class="hero-content container">
<h1 class="hero-title landing">Caution makes compute verifiable</h1> <h1 class="hero-title">Caution makes compute verifiable</h1>
<p class="subtext"> <p class="subtext">
You deserve to know what runs on your servers. No more black boxes. You deserve to know what runs on your servers. No more black boxes.
<br />
Caution gives you cryptographic proof, total portability, and no Caution gives you cryptographic proof, total portability, and no
complexity. complexity.
</p> </p>
@ -18,7 +17,6 @@
<a <a
href="/blog.html" href="/blog.html"
class="btn" class="btn"
aria-label="Read our blog"
title="Read our latest blog posts and updates" title="Read our latest blog posts and updates"
>Blog <span class="arrow">→</span></a >Blog <span class="arrow">→</span></a
> >

59
_sass/base.scss
View File

@ -145,7 +145,7 @@ h4 {
} }
h1 { h1 {
font-size: clamp(3.2rem, 10vw, 4.2rem); font-size: clamp(2.6rem, 10vw, 4.2rem);
line-height: 1.1; line-height: 1.1;
letter-spacing: 0.005rem; letter-spacing: 0.005rem;
word-spacing: 0.3rem; word-spacing: 0.3rem;
@ -196,14 +196,18 @@ em {
position: relative; position: relative;
} }
.hero-cta {
margin-bottom: 19rem;
}
.hero-title { .hero-title {
max-width: 45rem; max-width: 45rem;
margin-top: 25rem; margin-top: 23rem;
} }
.subtext { .subtext {
font-size: clamp(1.12rem, 2.5vw, 1.3rem); font-size: clamp(1.1rem, 2.5vw, 1.3rem);
max-width: 48rem; max-width: 47.5rem;
line-height: 1.5; line-height: 1.5;
margin: 0 0 2.5rem 0; margin: 0 0 2.5rem 0;
word-spacing: 0.05rem; word-spacing: 0.05rem;
@ -357,17 +361,17 @@ img {
/* ======== LANDING ======== */ /* ======== LANDING ======== */
.hero.landing { // .hero.landing {
min-height: 100svh; // min-height: 100svh;
background-size: 125%; // background-size: 125%;
background-position-y: 0vh; // background-position-y: 0vh;
background-repeat: no-repeat; // background-repeat: no-repeat;
display: flex; // display: flex;
position: relative; // position: relative;
background-color: var(--blue-base); /* Fallback color */ // background-color: var(--blue-base); /* Fallback color */
backface-visibility: hidden; // backface-visibility: hidden;
transform: translateZ(0); // transform: translateZ(0);
} // }
.subtext.landing { .subtext.landing {
max-width: 650px; max-width: 650px;
@ -450,7 +454,7 @@ img {
} }
.footer-middle { .footer-middle {
margin: 2.5rem auto 1.5rem auto; margin: 1rem auto 1rem auto;
padding: 0; padding: 0;
} }
@ -663,7 +667,7 @@ img {
.posts { .posts {
margin-top: 12rem; margin-top: 12rem;
margin-bottom: 41.75rem; //to be removed// margin-bottom: 34rem; //to be removed//
} }
.post p, .post p,
@ -1419,6 +1423,10 @@ li {
.open-source-content { .open-source-content {
transform: none; transform: none;
} }
.posts {
margin-top: 15rem; //to be removed//
}
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@ -1426,12 +1434,19 @@ li {
width: 90%; width: 90%;
} }
.hero-title {
margin-top: 19rem;
}
// ======= FOOTER ======= // // ======= FOOTER ======= //
.site-footer { .site-footer {
padding: 2.5rem 0 2rem 0; padding: 1.5rem 0 1.5rem 0;
} }
.footer-middle {
margin: 0 auto 0 auto;
}
.footer-mobile { .footer-mobile {
display: block; display: block;
} }
@ -1440,6 +1455,14 @@ li {
display: none; display: none;
} }
.footer-heading {
font-size: 0.95rem;
}
.hero-cta {
margin-bottom: 12rem;
}
.footer-subheading.footer-mobile { .footer-subheading.footer-mobile {
margin-bottom: 3rem; margin-bottom: 3rem;
} }