Skip to content

Commit

Permalink
styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@sstraatemans
sstraatemans committed Oct 22, 2024
1 parent fed1d4d commit c4929fc
Show file tree
Hide file tree
Showing 3 changed files with 154 additions and 51 deletions.
137 changes: 87 additions & 50 deletions spirekey-web/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,60 +15,90 @@
</head>
<body>
<main class="card">
<p>
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.
</p>
<div>
<a class="button" href="https://chainweaver.kadena.io" target="_blank"
>Launch Chainweaver V3 Alpha</a
>
<a
class="button outline"
href="https://www.npmjs.com/package/@kadena/spirekey-sdk"
target="_blank"
>Install SDK Package</a
>
</div>
<img src="./logo.svg" width="250" class="logo" />
<section class="stack">
<div class="section">
<p>
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.
</p>
</div>
<div class="section" />
</section>

<section class="stack">
<div class="section">
<a class="button" href="https://chainweaver.kadena.io" target="_blank"
>Launch Chainweaver V3 Alpha</a
>
</div>
<div class="section">
<a
class="button outline"
href="https://www.npmjs.com/package/@kadena/spirekey-sdk"
target="_blank"
>Install SDK Package</a
>
</div>
</section>

<div>
<h3>Developer Resources</h3>
<a
href="https://github.com/kadena-community/spirekey/blob/main/docs/KIP-0023/KIP-0023.md"
target="_blank"
>KIP-0023</a
>
<a
href="https://github.com/kadena-community/spirekey/blob/main/docs/KIP-0030/KIP-0030.md"
target="_blank"
>KIP-0030</a
>
<a target="_blank">SpireKey Documentation</a>
<a target="_blank">Discord Support</a>
<section class="stack">
<div class="section">
<a
class="link"
href="https://github.com/kadena-community/spirekey/blob/main/docs/KIP-0023/KIP-0023.md"
target="_blank"
>KIP-0023</a
>
<a
class="link"
href="https://github.com/kadena-community/spirekey/blob/main/docs/KIP-0030/KIP-0030.md"
target="_blank"
>KIP-0030</a
>
</div>
<div class="section">
<a
class="link"
href="https://discord.com/invite/kadena"
target="_blank"
>Discord Support</a
>
</div>
</section>
</div>
<div></div>
<div>
<h3>Demo Applications</h3>
<div>
<h4>
<a href="https://chainweaver.kadena.io" target="_blank"
>Demo Wallet</a
>
</h4>
<p>
Experience Kadena SpireKey authentication showcased with wallet
functionality
</p>
</div>
<div>
<h4>
<a href="https://proof.kadena.io" target="_blank"
>Demo NFT Minting</a
>
</h4>
<p>Mint your own NFT using SpireKey authentication</p>
</div>

<section class="stack">
<div class="section">
<h4>
<a href="https://chainweaver.kadena.io" target="_blank"
>Demo Wallet</a
>
</h4>
<p>
Experience Kadena SpireKey authentication showcased with wallet
functionality
</p>
</div>

<div class="section">
<h4>
<a href="https://proof.kadena.io" target="_blank"
>Demo NFT Minting</a
>
</h4>
<p>Mint your own NFT using SpireKey authentication</p>
</div>
</section>

<footer class="action-bar">
<p>Not a developer?</p>
Expand All @@ -79,7 +109,14 @@ <h4>
</div>
</main>
<footer class="footer">
<a>Discord</a>
<a href="https://discord.com/invite/kadena" target="_blank">Discord</a>
<a href="https://docs.kadena.io/build/authentication" target="_blank"
>Help</a
>
<a href="https://www.kadena.io/privacy-policy" target="_blank">Privacy</a>
<a href="https://www.kadena.io/terms-and-conditions" target="_blank"
>Terms</a
>
</footer>
</body>
</html>
6 changes: 6 additions & 0 deletions spirekey-web/logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
62 changes: 61 additions & 1 deletion spirekey-web/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
}

body {
font-size: 16px;
font-family: 'Inter', sans-serif;
font-optical-sizing: auto;
background-color: #020e1b;
Expand All @@ -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 {
Expand Down Expand Up @@ -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%;
}
}
}

0 comments on commit c4929fc

Please sign in to comment.