caution
/
website
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

changed background to image

This commit is contained in:
Ksenia Lesko 2025-06-09 14:04:31 -04:00
parent 0c47ba351a
commit 6e3100fba0
Signed by: xenushka
GPG Key ID: 812A8E51AD475267
9 changed files with 73 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

@ -19,4 +19,4 @@ _site: build
.PHONY: serve .PHONY: serve
serve: build serve: build
# Run Docker container with listener for current dir and port mapping # Run Docker container with listener for current dir and port mapping
docker run --rm -p 0.0.0.0:4000:80 -it distrust-co docker run --rm -p 0.0.0.0:4000:80 -it distrust-co

6
_config.yml
View File

@ -1,9 +1,9 @@
title: Caution title: Caution
email: info@caution.co email: info@caution.co
description: Security without blind trust. description: The first open source platform for encrypted data recovery and escrow.
baseurl: "" baseurl: ""
url: "https://caution.co" url: "https://caution.co"
banner: "https://distrust.co/assets/base/distrust-thumbnail.png" banner: "https://caution.co/assets/base/caution-thumbnail.png"
header_pages: header_pages:
- index.md - index.md
@ -11,7 +11,7 @@ header_pages:
style: dark style: dark
listen_for_clients_preferred_style: false listen_for_clients_preferred_style: false
footer: '© 2025 Caution SEZC' footer: '© 2025 Caution'
theme: jekyll-theme-console theme: jekyll-theme-console

6
_includes/head.html
View File

@ -2,9 +2,9 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/Group 57.png"> <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="96x96" href="/assets/favicons/Group 57.png"> <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicons/favicon-caution-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/Group 57.png"> <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-caution-96x96.png">
<title>{{ page.title }}</title> <title>{{ page.title }}</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<meta content="{{ site.title }}" property="og:site_name" /> <meta content="{{ site.title }}" property="og:site_name" />

16
_layouts/landing.html
View File

@ -3,12 +3,12 @@
{%- include head.html -%} {%- include head.html -%}
<div class="video-background-container"> <!-- <div class="video-background-container">
<video autoplay muted loop playsinline class="video-background"> <video autoplay muted loop playsinline class="video-background">
<source src="assets/videos/caution-waitlist.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="assets/videos/caution-waitlist.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="assets/videos/caution-waitlist.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="assets/videos/caution-waitlist.webm" type='video/webm; codecs="vp8, vorbis"' />
</video> </video>
</div> </div> -->
@ -16,23 +16,23 @@
<section class="logo-section center"> <section class="logo-section center">
<div class="logo"> <div class="logo fade-in">
<a href="/"> <a href="/">
<img src="/assets/base/caution-logo/caution-logo-text-black.svg" alt="Caution logo" style="height: clamp(1.5rem, 10vw, 2.2rem); opacity: 0.8"> <img src="/assets/base/caution-logo/caution-logo-text-black.svg" alt="Caution logo" style="height: clamp(1.5rem, 10vw, 2rem); opacity: 0.8">
</a> </a>
</div> </div>
<div class="heading center"> <div class="heading center fade-in">
<h1>Join the waitlist</h1> <h1>Join the waitlist</h1>
<p class="subtext center"> <p class="subtext center delay-1">
The first open source platform for encrypted data recovery and escrow. Built by the security engineers behind <a rel=”noopener noreferrer” target="_blank" href="https://distrust.co/" class="distrust-link-subtext">Distrust</a>, formerly at BitGo, Unit410, and Turnkey. The first open source platform for encrypted data recovery and escrow. Built by the security engineers behind <a rel=”noopener noreferrer” target="_blank" href="https://distrust.co/" class="distrust-link-subtext">Distrust</a>, formerly at BitGo, Unit410, and Turnkey.
</p> </p>
</div> </div>
</section> </section>
<div class="info-block"> <div class="info-block fade-in delay-2">
<span class="spaced-text">GET</span> <span class="spaced-text">GET</span>
<span class="spaced-text">EARLY</span> <span class="spaced-text">EARLY</span>
<span class="spaced-text">ACCESS</span><br> <span class="spaced-text">ACCESS</span><br>
@ -58,7 +58,7 @@
</form> </form>
</div> </div>
<div class="footer"> <div class="footer fade-in delay-3">
<p>No spam – we'll only email you about Caution.</p> <p>No spam – we'll only email you about Caution.</p>
</div> </div>
<div class="footer-mobile"> <div class="footer-mobile">

8
_layouts/thankyou.html
View File

@ -3,12 +3,12 @@
{%- include head.html -%} {%- include head.html -%}
<div class="video-background-container"> <!-- <div class="video-background-container">
<video autoplay muted loop playsinline class="video-background"> <video autoplay muted loop playsinline class="video-background">
<source src="assets/videos/caution-waitlist.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="assets/videos/caution-waitlist.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="assets/videos/caution-waitlist.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="assets/videos/caution-waitlist.webm" type='video/webm; codecs="vp8, vorbis"' />
</video> </video>
</div> </div> -->
<body> <body>
@ -17,7 +17,7 @@
<div class="logo"> <div class="logo">
<a href="/"> <a href="/">
<img src="/assets/base/caution-logo/caution-logo-text-black.svg" alt="Caution logo" style="height: clamp(1.5rem, 10vw, 2.2rem); opacity: 0.8"> <img src="/assets/base/caution-logo/caution-logo-text-black.svg" alt="Caution logo" style="height: clamp(1.5rem, 10vw, 2rem); opacity: 0.8">
</a> </a>
</div> </div>
@ -29,7 +29,7 @@
</div> </div>
</section> </section>
<div class="info-block-thanks"> <div class="info-block-thanks fade-in delay-4">
<span class="spaced-text">SOMETHING</span> <span class="spaced-text">SOMETHING</span>
<span class="spaced-text">EXCITING</span> <span class="spaced-text">EXCITING</span>
<span class="spaced-text">IS</span> <span class="spaced-text">IS</span>

59
_sass/base.scss
View File

@ -23,8 +23,24 @@ html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: url('/assets/base/waitlist-static.jpeg') no-repeat center center;
background-size: cover;
transform: scaleX(-1);
z-index: -1;
opacity: 0.9; /* Optional: slightly fade background */
}
body { body {
background-color: var(--ghost-white); position: relative;
background-color: var(--ghost-white);
margin: 0 auto; margin: 0 auto;
padding: 0 auto; padding: 0 auto;
font-family: $base-font-family; font-family: $base-font-family;
@ -80,11 +96,44 @@ h1 {
margin-top: 0rem; margin-top: 0rem;
color: #242526; color: #242526;
} }
.fade-in {
opacity: 0;
animation: fadeIn ease 1.1s forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(7px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.delay-1 {
animation-delay: 0.1s;
}
.delay-2 {
animation-delay: 0.2s;
}
.delay-3 {
animation-delay: 0.3s;
}
.delay-4 {
animation-delay: 0.3s;
}
.subtext, .subtext-thanks { .subtext, .subtext-thanks {
font-size: clamp(1.1rem, 2vw, 1.25rem); font-size: clamp(1.1rem, 2vw, 1.25rem);
color: white; background: rgba(232, 246, 253, 0.6);
mix-blend-mode: difference; border-radius: 1rem;
box-shadow: 0 0 30px 20px rgba(232, 246, 253, 0.7);
} }
.subtext { .subtext {
@ -101,7 +150,7 @@ h1 {
font-size: 1rem; font-size: 1rem;
text-transform: uppercase; text-transform: uppercase;
max-width: 300px; max-width: 300px;
margin-right: 24rem; margin-right: 25rem;
} }
.info-block { .info-block {
@ -198,7 +247,7 @@ h1 {
} }
.distrust-link-subtext:hover { .distrust-link-subtext:hover {
color: #0FB74A; color: var(--pink); //#0FB74A//;
} }
.distrust-link-footer:hover { .distrust-link-footer:hover {

BIN
assets/base/caution-thumbnail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
assets/base/waitlist-static.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 MiB

BIN
assets/base/waitlist.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 159 KiB