From 1e61b9fea47620522f8eeec8efe8b78853eb1393 Mon Sep 17 00:00:00 2001
From: Dominik Hebeler <dominik@suma-ev.de>
Date: Thu, 1 Dec 2022 16:53:57 +0100
Subject: [PATCH] added button to start
---
pass/public/styles/base.less | 10 ++++++++++
pass/public/styles/index.less | 19 ++++++++++---------
pass/views/index.ejs | 5 ++++-
3 files changed, 24 insertions(+), 10 deletions(-)
diff --git a/pass/public/styles/base.less b/pass/public/styles/base.less
index cd631a9..fd3cc29 100644
--- a/pass/public/styles/base.less
+++ b/pass/public/styles/base.less
@@ -53,6 +53,16 @@ button {
cursor: pointer;
}
+.button {
+ display: block;
+ border: 1px solid #777;
+ padding: 1rem;
+ color: white;
+ text-decoration: none;
+ background-color: #3a3af9;
+ width: max-content;
+}
+
nav {
@logo-break-point: 720px; // Breakpoint when nav items won't fit besides logo
@nav-items-break-point: 560px; // Breakpoint when nav items won't fit into their own row
diff --git a/pass/public/styles/index.less b/pass/public/styles/index.less
index daaf820..fb875f1 100644
--- a/pass/public/styles/index.less
+++ b/pass/public/styles/index.less
@@ -91,12 +91,6 @@ html {
grid-area: call-to-action;
align-self: center;
justify-self: end;
- display: block;
- border: 1px solid #777;
- padding: 1rem;
- color: white;
- text-decoration: none;
- background-color: #3a3af9;
margin: 1rem 0 1rem 1rem;
}
@@ -154,7 +148,7 @@ html {
#advantages {
@advantages-breakpoint: 750px;
- max-width: 1500px;
+ max-width: 1200px;
display: grid;
margin: 4rem auto;
gap: 4rem;
@@ -218,9 +212,10 @@ html {
}
}
- #no-logging {
+ #no-logging,
+ #no-tradeoff {
> img {
- max-width: 10em;
+ width: 10em;
}
}
}
@@ -287,6 +282,12 @@ html {
}
}
}
+
+ > #how-it-works-action {
+ display: flex;
+ justify-content: center;
+ padding-top: 4rem;
+ }
}
#offers,
diff --git a/pass/views/index.ejs b/pass/views/index.ejs
index 57edcfc..9ebc36e 100644
--- a/pass/views/index.ejs
+++ b/pass/views/index.ejs
@@ -21,7 +21,7 @@
</button>
</div>
</div>
- <a class="call-to-action" href="#how-it-works">So funktioniert es</a>
+ <a class="call-to-action button" href="#how-it-works">So funktioniert es</a>
</div>
</div>
<div id="advantages">
@@ -79,6 +79,9 @@
</div>
</li>
</ol>
+ <div id="how-it-works-action">
+ <a href="#" class="button">Los geht's</a>
+ </div>
</div>
<div id="offers">
<form class="offer" action="/checkout">
--
GitLab