remove line from roadmap and make theme teal

This commit is contained in:
Anton Livaja 2025-03-17 12:52:04 -07:00
parent 30f5993f25
commit 7d5a02957a
Signed by: anton
GPG Key ID: 44A86CFF1FDF0E85
3 changed files with 26 additions and 60 deletions

View File

@ -5,19 +5,6 @@
<body>
{%- include header.html -%}
<div class="vertical-line-container">
<div class="vertical-line"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
</div>
<div class="container">
<main>
@ -31,13 +18,13 @@
<section class="flex-container capsule-header video-content" style="margin-top: 80px">
<div class="flex-container-inner" style="padding-top: 0px">
<div class="text-well center">
<div class="capsule">roadmap</div>
<div class="capsule-teal">roadmap</div>
<br>
<h1 class="hero-header">verifiable security without single points of failure</h1>
<br>
<p class="hero-p center">Most systems still rely on single individuals or computers, unverifiable software, and opaque processes. Were redesigning security for transparency from the ground up.</p>
<div class="button-container center">
<a href="#roadmap" class="mega button">View roadmap</a>
<a href="#roadmap" class="mega-teal button">View roadmap</a>
</div>
</div>
</div>
@ -307,7 +294,7 @@
<h4 class="gradient-text center" style="line-height: 50px; max-width: 600px; margin: auto;">want to help with our vision?</h4>
<p class="hero-p center" style="max-width: 600px; margin-top: 10px">If you would like to help us please sponsor our work or get involved as a contributor.</p>
<div class="button-container center">
<a href="/contact.html" class="mega button">Get in touch</a>
<a href="/contact.html" class="mega-teal button">Get in touch</a>
</div>
</section>

View File

@ -18,7 +18,8 @@
--mid-purple: #473C68;
--dark-purple: #241846;
--light-teal: #6DD4F1;
--mid-blue: #02CAF2;
--mid-teal: #02CAF2;
--dark-teal: #01586A;
--pink: #F048B5;
--light-grey: #9A9A9A;
--mid-grey: #292929;

View File

@ -196,6 +196,13 @@ a:hover {
@include capsule;
}
.capsule-teal {
color: var(--light-teal);
background: var(--dark-teal);
border: 1px solid var(--dark-teal);
@include capsule;
}
.roadmap-header {
display: flex;
justify-content: space-between;
@ -277,48 +284,6 @@ a:hover {
background-color: var(--base-color);
color: white !important;
}
/* roadmap line starts */
.vertical-line-container {
position: absolute;
top: 2050px;
right: 200px;
width: 60px;
height: 3550px;
}
.vertical-line {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 100%;
background-color: #262626;
border-radius: 10px;
}
.node {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
background-color: #262626;
border-radius: 50%;
}
.node:nth-child(2) { top: 0; }
.node:nth-child(3) { top: 470px; }
.node:nth-child(4) { top: 920px; }
.node:nth-child(5) { top: 1380px; }
.node:nth-child(6) { top: 1830px; }
.node:nth-child(7) { top: 2250px; }
.node:nth-child(8) { top: 2680px; }
.node:nth-child(9) { top: 3100px; }
.node:nth-child(10) { top: 3540px; }
/* end roadmap lines styling */
.roadmap .flex-container .flex-container-inner .text-well {
border: 1px solid grey;
@ -760,7 +725,6 @@ hr {
color: var(--base-color);
}
.mega.button {
background-color: var(--dark-purple);
color: var(--base-color);
@ -775,6 +739,20 @@ hr {
border: 2px solid var(--purple);
}
.mega-teal.button {
background-color: var(--dark-teal);
color: var(--base-color);
border: 2px solid var(--light-teal);
box-shadow: 0 0 18px rgba(42,106,255,0.6);
@include mega;
}
.mega-teal.button:hover {
background: var(--mid-teal);
color: var(--base-color);
border: 2px solid var(--mid-teal);
}
.button-container {
padding: 30px 0px;
}