feat: rewrite templates

views/article.pug

@@ -1,6 +1,6 @@
 extends templates/base.pug
 
 block content
-  section.long_form.narrow
+  section
     h1= title
-    .card !{ content }
+    !{ content }

views/index.pug

@@ -1,76 +1,41 @@
 extends templates/base.pug
 
 block content
-  #search.form-wrapper.card
+  section#search.form-wrapper
-    h2#searchTitle View a profile
     form(action="post")
-      label#searchQuery(for="query") Query for fingerprint or email identifier
+      input#query(type="search" name="query" required placeholder="Search for a profile")
-      input#query(type="search" name="query" required placeholder="3637202523e7c1309ab79e99ef2dc5827b445f4b, test@doip.rocks" aria-labelledby="searchTitle searchQuery")
+      input(type="submit" value="Search")
-
-      input(type="submit" value="View profile")
-    p Or view a 
-      a(href="/sig") plaintext signature
-      |  profile.
-
-  if highlights.length > 0
-    h2 Highlights
-    .hcards.hcards--highlights
-      each hl in highlights
-        .card.card--small-profile
-          h3.name= hl.name
-          p
-            span.fingerprint= hl.fingerprint
-            br
-            span.details= hl.description
-          .spacer
-          p
-            a(href=`/${hl.fingerprint}`).button.full-width View profile
-      - var n = 0
-      while n < 3-highlights.length
-        .card.card--small-profile-dummy
-        - n++
 
+  section
     h2 About Keyoxide
-  .hcards.hcards--features.hcards--max-2
+    p Keyoxide is a decentralized tool to create and verify decentralized online identities.
-    .card
+    p Just like passports for real life identities, Keyoxide can be used to verify the online identity of people to make sure one is interacting with whom they intended to be and not an imposter.
-      h3 Online identity
+    p Unlike real life passports, Keyoxide works with online identities or "personas", meaning these identities can be anonymous and one can have multiple separate personas to protect their privacy, both online and in real life.
-      p Verifying online identity with cryptography. View 
-        a(href="/project@keyoxide.org") Keyoxide's profile
-        | .
-    .card
-      h3 Mobile app
-      p Available on Android and iOS. More information on 
-        a(href="https://mobile.keyoxide.org") mobile.keyoxide.org
-        | .
-    .card
-      h3 Decentralization &amp; privacy
-      p No central server or database. No collected data. Control how your data is stored and accessed.
-    .card
-      h3 Cryptography
-      p Your online identity verifiably signed with widely-used cryptographic standards (OpenPGP, others coming).
-    .card
-      h3 Open Source
-      p All Keyoxide projects are licensed under AGPL-3.0-or-later.
-    .card
-      h3 Transparent funding
-      p Funded by donations. Keyoxide stands against VC and surveillance capitalism.
-
-  h2 Community
-  .card
     p
-      | Discussion of the Keyoxide project happens primarily on the 
+      | Here is what a 
+      a(href="/project@keyoxide.org") Keyoxide profile
+      |  looks like.
+    p
+      a(href="https://docs.keyoxide.org/getting-started") Get started
+      |  and create your own!
+  section
+    h2 Community
+    p
+      | Discussion of the Keyoxide project primarily happens on the 
+      a(href="https://matrix.to/#/#keyoxide:matrix.org") #keyoxide Matrix channel
+      |  and the 
       a(href="https://community.keyoxide.org") Keyoxide Community Forum
-      | . This is the place to propose new service providers for identity verification, make feature suggestions or report bugs.
+      | . 
+      | The Matrix channel is great for troubleshooting.
+      | The forum is the place to propose new service providers for identity verification, make feature suggestions or report bugs.
     p 
       | There is also the 
       a(href="irc://irc.libera.chat/#keyoxide") #keyoxide:libera.chat IRC room
-      | , the 
-      a(href="https://matrix.to/#/#keyoxide:matrix.org") #keyoxide Matrix channel
       |  and the 
       a(href="https://lists.sr.ht/~yarmo/keyoxide-devel") keyoxide-devel mailing list
       | . The IRC room and Matrix channel are bridged together.
     p
-      | The project is also present on the fediverse as 
+      | The project is also present on the fediverse: 
       a(href="https://fosstodon.org/@keyoxide") @keyoxide@fosstodon.org
       | .
     p
@@ -79,10 +44,10 @@ block content
       | .
 
 
+  section
     h2 Fund the project
-  .card
     p
-      | The development of Keyoxide and the Decentralized OpenPGP Identity Proofs ecosystem is entirely funded by donations.
+      | The development of Keyoxide and the Decentralized Online Identity Proofs ecosystem is entirely funded by donations.
     p
       | The Keyoxide project was awarded a NGI Zero grant from the 
       a(href='https://nlnet.nl/') NLnet Foundation

views/partials/footer.pug

@@ -1,35 +1,34 @@
 footer
   .container
-    .hcards
+    p
-      div
+      | This site: 
-        h1 Keyoxide
       a(href="/") Homepage
-        br
+      |  • 
       a(href="/util") Utilities
-        br
+      |  • 
       a(href="/privacy") Privacy policy
+      br
 
-      div
+      | Keyoxide project: 
-        h1 Keyoxide project
+      a(href="https://community.keyoxide.org") Forum
-        a(href="https://keyoxide.org") Keyoxide.org
+      |  • 
-        br
-        a(href="https://community.keyoxide.org") Community forum
-        br
       a(href="https://docs.keyoxide.org") Documentation
-        br
+      |  • 
       a(href="https://blog.keyoxide.org") Blog
+      |  • 
+      a(href="https://codeberg.org/keyoxide") Source code
+      br
 
-      div
+      | Related: 
-        h1 Development
-        a(href="https://codeberg.org/keyoxide/") Source code
-        br
       a(href="https://doip.rocks") doip.rocks
-        br
+      |  • 
       a(href="https://ariadne.id") ariadne.id
 
-    p.copyright
+    p
       | Version #{meta.keyoxide.version}
       if (meta.env === "development")
         | -dev
       br
+      
       | © 2023 Keyoxide project contributors
+      

views/partials/header.pug

@@ -3,7 +3,8 @@ header
     nav
       a.logo(href='/' aria-label='Home')
         img(src='/static/img/logo_circle.png' alt='Keyoxide' aria-hidden='true')
-      a.text(href='/') Home
+        | Keyoxide
+      .links
+        a.text(href='https://docs.keyoxide.org/getting-started') Getting started
         a.text(href='https://docs.keyoxide.org') Docs
         a.text(href='https://blog.keyoxide.org') Blog
-      a.text(href='https://community.keyoxide.org') Forum

views/profile.pug

@@ -3,24 +3,38 @@ extends templates/base.pug
 mixin generatePersona(persona, isPrimary)
   h2
     if persona.email
-      span.p-email Identity claims (#{persona.email})
+      | Identity claims (
+      span.p-email #{persona.email}
+      | )
     else
-      span.p-email Identity claims
+      | Identity claims
     if isPrimary
       small.primary primary
   if persona.description
-    span.p-comment ⓘ #{persona.description}
+    span.persona__description.p-comment
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+      |  #{persona.description}
   each claim in persona.claims
     if claim.matches.length > 0
-      kx-claim.kx-item(data-claim=claim)
+      kx-claim.kx-item(data-claim=claim,data-status='running')
         details(aria-label="Claim")
           summary
             .info
-              p.subtitle= claim.display.serviceproviderName
+              p
-              p.title= claim.display.name
+                span.title= claim.display.name
+                span.subtitle-wrapper
+                  |  [
+                  span.subtitle= claim.display.serviceproviderName
+                  | ]
             .icons
-              .verificationStatus(data-value='running')
+              .verificationStatus
                 .inProgress
+                  <svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"></path></svg>
+                .success
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                .failure
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+
           .content
             .subsection
               img(src='/static/img/link.png')
@@ -59,7 +73,7 @@ block content
           a(href="https://docs.keyoxide.org/getting-started/something-went-wrong/") documentation
           |  for help.
   else
-    section.profile.narrow.h-card
+    section.profile
       noscript
         p Keyoxide requires JavaScript to function.
 
@@ -103,10 +117,12 @@ block content
             input(type='submit', name='submit', value='Generate profile')
 
       unless (isSignature && !signature)
-        #profileHeader.card.card--transparent.card--profileHeader
+        .profile__header
-          img#profileAvatar.u-logo(src=data.personas[data.primaryPersonaIndex].avatarUrl alt="avatar")
+          img.profile__avatar.u-logo(src=data.personas[data.primaryPersonaIndex].avatarUrl alt="avatar")
 
-          p#profileName.p-name= data.personas[data.primaryPersonaIndex].name
+          p.profile__name.p-name= data.personas[data.primaryPersonaIndex].name
+          if (data.personas[data.primaryPersonaIndex].description)
+            p= data.personas[data.primaryPersonaIndex].description
 
           if (enable_message_encryption || enable_signature_verification)
             .button-wrapper
@@ -115,19 +131,25 @@ block content
               if (enable_signature_verification)
                 button(onClick="document.querySelector('#dialog--verifySignature').showModal();") Verify signature
 
+        .profile__claims
           +generatePersona(data.personas[data.primaryPersonaIndex], true && data.personas.length > 1)
           each persona, index in data.personas
             unless index == data.primaryPersonaIndex
               +generatePersona(persona, false)
 
-        #profileProofs.card.card--transparent
+    section
-          h2 Key
+      h2 Profile information
+      h3 Public key
       kx-key.kx-item(data-keydata=data.publicKey)
         details(aria-label="Key")
           summary
             .info
-                  p.subtitle= data.publicKey.fetch.method
+              p
-                  p.title= data.identifier
+                span.title= data.identifier
+                span.subtitle-wrapper
+                  |  [
+                  span.subtitle= data.publicKey.fetch.method
+                  | ]
           .content
             .subsection
               img(src='/static/img/link.png')

views/util/argon2.pug

@@ -1,7 +1,7 @@
 extends ../templates/base.pug
 
 block content
-  section.narrow
+  section
     h1 Argon2 utility
 
     h2 Generate Argon2 hash

views/util/bcrypt.pug

@@ -1,7 +1,7 @@
 extends ../templates/base.pug
 
 block content
-  section.narrow
+  section
     h1 bcrypt utility
 
     h2 Generate bcrypt hash

views/util/index.pug

@@ -1,8 +1,8 @@
 extends ../templates/base.pug
 
 block content
-  section.narrow
+  section
-    h1 Keyoxide utilities
+    h2 Keyoxide utilities
     p
       a(href="/util/profile-url") Get the URL for a Keyoxide profile
     p

views/util/profile-url.pug

@@ -1,7 +1,7 @@
 extends ../templates/base.pug
 
 block content
-  section.narrow
+  section
     h1 Profile URL
     form#form-util-profile-url(method='post')
       p This tool generates an URL for your Keyoxide profile page.

views/util/qr.pug

@@ -1,7 +1,7 @@
 extends ../templates/base.pug
 
 block content
-  section.narrow
+  section
     h1 QR Code
     form#form-util-qr(method='post')
       pre

views/util/qrfp.pug

@@ -1,7 +1,7 @@
 extends ../templates/base.pug
 
 block content
-  section.narrow
+  section
     h1 QR Code
     form#form-util-qrfp(method='post')
       p

views/util/wkd.pug

@@ -1,7 +1,7 @@
 extends ../templates/base.pug
 
 block content
-  section.narrow
+  section
     h1 Web Key Directory URL generator
     form#form-util-wkd(method='post')
       p