small ui/ux changes and mobile updates (#554)

kadena-community · Oct 22, 2024 · 69acedb · 69acedb
2 parents 7065d93 + dd06d02
commit 69acedb
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 12 deletions.
diff --git a/spirekey-web/favicon.svg b/spirekey-web/favicon.svg
diff --git a/spirekey-web/index.html b/spirekey-web/index.html
@@ -7,6 +7,7 @@
     <link rel="STYLESHEET" href="style.css" type="text/css" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="icon" href="favicon.svg" type="image/svg+xml">
 
     <link
       href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,[email protected]&family=Kode+Mono:[email protected]&display=swap"
@@ -15,8 +16,8 @@
   </head>
   <body>
     <main class="card">
-      <img src="./logo.svg" width="250" class="logo" />
-      <section class="stack">
+    <img src="./logo.svg" width="250" alt="Kadena SpireKey" class="logo" />
+    <section class="stack column">
         <p class="main-text">
           Kadena SpireKey leverages WebAuthn standards to deliver a secure
           backend, enabling end users to generate and store keypairs directly on
@@ -25,9 +26,6 @@
           using the SDK package, or explore the technical documentation outlined
           in the KIPs.
         </p>
-      </section>
-
-      <section class="stack">
         <div class="section">
           <a
             class="button"
@@ -41,16 +39,16 @@
 
       <div>
         <h3>Developer Resources</h3>
-        <section class="stack">
+        <section class="stack no-gap-mobile">
           <div class="section">
             <a
-              class="link"
+              class="link code"
               href="https://github.com/kadena-io/KIPs/pull/52/files"
               target="_blank"
               >KIP-0023</a
             >
             <a
-              class="link"
+              class="link code"
               href="https://github.com/kadena-io/KIPs/pull/59/files"
               target="_blank"
               >KIP-0030</a
@@ -80,7 +78,7 @@ <h3>Demo Applications</h3>
           <div class="section">
             <div class="tile">
               <h4>
-                <a href="https://chainweaver.kadena.io" target="_blank">
+                <a href="https://chainweaver.kadena.io" class="link" target="_blank">
                   Chainweaver V3 Alpha
                 </a>
               </h4>
@@ -94,7 +92,7 @@ <h4>
           <div class="section">
             <div class="tile">
               <h4>
-                <a href="https://proof.kadena.io" target="_blank"
+                <a href="https://proof.kadena.io" class="link" target="_blank"
                   >NFT Minting</a
                 >
               </h4>

diff --git a/spirekey-web/style.css b/spirekey-web/style.css
@@ -35,7 +35,7 @@ body {
   line-height: 130%;
   font-weight: 400;
   padding-inline: 2.25rem;
-  padding-block: 1.5rem;
+  padding-block: 2.25rem;
   border-radius: 0.5rem;
   border: 1px solid #d2d4d640;
   width: 100%;
@@ -45,6 +45,12 @@ body {
 .stack {
   display: flex;
   width: 100%;
+  gap: 2.5rem;
+
+  &.column {
+    flex-direction: column;
+    gap: 1rem;
+  }
 
   & .section {
     width: 50%;
@@ -56,6 +62,12 @@ body {
 
     .link {
       margin-block-end: 1rem;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+        color: #52ffc6;
+      }
     }
   }
 }
@@ -103,10 +115,20 @@ a:not(.button) {
   color: #000;
   text-decoration: none;
 
+  &:not(.outline) {
+    &:hover {
+      background-color: #3cbc92
+    }
+  }
+
   &.outline {
     background-color: transparent;
     color: #fff;
     box-shadow: 0 0 0 1px #d2d4d640 inset;
+
+    &:hover {
+      box-shadow: 0 0 0 1px #3cbc92 inset;
+    }
   }
 }
 
@@ -125,7 +147,7 @@ h3 {
 }
 
 .logo {
-  padding-block-end: 1rem;
+  padding-block-end: 0rem;
 }
 
 .main-text {
@@ -144,10 +166,19 @@ h3 {
 }
 
 @media only screen and (max-width: 768px) {
+  body {
+    padding-inline: 0;
+    margin: 0;
+  }
+
   .stack {
     flex-direction: column;
     gap: 1.5rem;
 
+    &.no-gap-mobile {
+      gap: 0;
+    }
+
     .section {
       width: 100%;
     }
@@ -156,4 +187,21 @@ h3 {
   .main-text {
     width: 100%;
   }
+
+  main {
+    &.card {
+      margin-block-start: 0;
+      border: none;
+      border-radius: 0;
+    }
+  }
+
+  .footer {
+    padding-bottom: 2rem;
+    padding-inline: 2rem;
+  }
+
+  .action-bar {
+    justify-content: space-between;
+  }
 }