From c4929fcb055287b9c19bba9ac4bfba5b1cd2e453 Mon Sep 17 00:00:00 2001 From: Steven Straatemans Date: Tue, 22 Oct 2024 15:37:26 +0200 Subject: [PATCH] styling --- spirekey-web/index.html | 137 +++++++++++++++++++++++++--------------- spirekey-web/logo.svg | 6 ++ spirekey-web/style.css | 62 +++++++++++++++++- 3 files changed, 154 insertions(+), 51 deletions(-) create mode 100644 spirekey-web/logo.svg diff --git a/spirekey-web/index.html b/spirekey-web/index.html index a724a0a6..5aa03d74 100644 --- a/spirekey-web/index.html +++ b/spirekey-web/index.html @@ -15,60 +15,90 @@
-

- Kadena SpireKey leverages WebAuthn standards to deliver secure backend, - enabling end users to generate and store keypairs directly on their - hardware devices. Developers can generate keypairs using the in-browser - SDK, integrate their application with SpireKey using the SDK package, or - explore the technical documentation outlined in the KIPs. -

-
- Launch Chainweaver V3 Alpha - Install SDK Package -
+ +
+
+

+ Kadena SpireKey leverages WebAuthn standards to deliver secure + backend, enabling end users to generate and store keypairs directly + on their hardware devices. Developers can generate keypairs using + the in-browser SDK, integrate their application with SpireKey using + the SDK package, or explore the technical documentation outlined in + the KIPs. +

+
+
+
+ +
+
+ Launch Chainweaver V3 Alpha +
+
+ Install SDK Package +
+
+

Developer Resources

- KIP-0023 - KIP-0030 - SpireKey Documentation - Discord Support +
+
+ KIP-0023 + KIP-0030 +
+
+ Discord Support +
+
+

Demo Applications

-
-

- Demo Wallet -

-

- Experience Kadena SpireKey authentication showcased with wallet - functionality -

-
-
-

- Demo NFT Minting -

-

Mint your own NFT using SpireKey authentication

-
+ +
+
+

+ Demo Wallet +

+

+ Experience Kadena SpireKey authentication showcased with wallet + functionality +

+
+ +
+

+ Demo NFT Minting +

+

Mint your own NFT using SpireKey authentication

+
+

Not a developer?

@@ -79,7 +109,14 @@

diff --git a/spirekey-web/logo.svg b/spirekey-web/logo.svg new file mode 100644 index 00000000..6d83f481 --- /dev/null +++ b/spirekey-web/logo.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/spirekey-web/style.css b/spirekey-web/style.css index 5b7da236..f00ddfb3 100644 --- a/spirekey-web/style.css +++ b/spirekey-web/style.css @@ -5,6 +5,7 @@ } body { + font-size: 16px; font-family: 'Inter', sans-serif; font-optical-sizing: auto; background-color: #020e1b; @@ -26,19 +27,54 @@ body { } .card { + display: flex; + flex-direction: column; background-color: #131e2bcc; - color: #fffffff2; + color: #ffffffb3; + line-height: 130%; + font-weight: 100; padding-inline: 2.25rem; padding-block: 1.5rem; border-radius: 0.5rem; border: 1px solid #d2d4d640; width: 100%; + gap: 1rem; +} + +.stack { + display: flex; + width: 100%; + + & .section { + width: 50%; + flex: 1; + + & > a:not(.button) { + display: block; + } + + .link { + margin-block-end: 1rem; + } + } } .footer { display: flex; width: 100%; justify-content: flex-end; + gap: 1rem; + padding-block-start: 1rem; + + a { + color: #ffffff66 !important; + text-decoration: none; + font-size: 0.6875rem; + + &:hover { + text-decoration: underline; + } + } } .action-bar { @@ -72,3 +108,27 @@ a:not(.button) { box-shadow: 0 0 0 1px #d2d4d640 inset; } } + +h2, +h3, +h4, +h5 { + font-weight: 500; + margin-block: 0.4rem; + padding: 0; +} + +.logo { + padding-block-end: 1rem; +} + +@media only screen and (max-width: 768px) { + .stack { + flex-direction: column; + gap: 1rem; + + .section { + width: 100%; + } + } +}