Update pages

static/styles.css

@@ -95,15 +95,11 @@ footer {
   max-width: 1440px;
   margin: 0 auto;
 }
-section.long_form {
+.narrow {
   width: 100%;
   max-width: 720px;
   margin: 0 auto;
 }
-section.profile, .demo {
-  max-width: 720px;
-  margin: 0 auto;
-}
 section.profile .card, .demo .card {
   background-color: transparent;
   border: 0;
@@ -358,6 +354,12 @@ section.profile p, .demo p {
 .buttons a:hover {
   background-color: #ccc;
 }
+.modes {
+    display: none;
+}
+.modes.modes--visible {
+    display: block;
+}
 
 h1 {
   font-size: 1.6em;
@@ -476,6 +478,15 @@ textarea {
 form {
   margin: 0 0 5.6rem;
 }
+form label {
+  margin: 0 8px 0 0;
+}
+form .modesContainer {
+  margin: 16px 0;
+}
+form .modesContainer input {
+  margin: 0 8px 0 0;
+}
 form input[type="submit"] {
   display: block;
   width: 100%;

views/encrypt.pug

@@ -0,0 +1,22 @@
+extends templates/base.pug
+
+block js
+  script(type='application/javascript' src='/static/openpgp.min.js' charset='utf-8')
+  script(type='application/javascript' src='/static/doip.js' charset='utf-8')
+  script(type='application/javascript' src='/static/scripts.js' charset='utf-8')
+
+block content
+  section.narrow
+    noscript
+      p Keyoxide requires JavaScript to function.
+
+    h1 Encrypt
+    form#form-encrypt(method='post')
+      h3 Recipient
+      label(for='modeSelect') Mode:
+      include partials/key_selector
+
+      h3 Message
+      textarea#message(name='message')
+      p#result
+      input.bigBtn(type='submit' name='submit' value='ENCRYPT MESSAGE')

views/guides.pug

@@ -1,10 +1,10 @@
 extends templates/base.pug
 
 block content
+  section.narrow
     h1 Guides
-  .hcards.hcards--guides.hcards--max-3
+    .card
-      .card.guides__section
+      h2 Using Keyoxide
-        h3 Using Keyoxide
       p
         a(href='/guides/verify') Verifying a signature
         br
@@ -16,8 +16,7 @@ block content
         br
         a(href='/guides/self-hosting-keyoxide') Self-hosting Keyoxide
 
-      .card.guides__section
+      h2 OpenPGP and identity proofs
-        h3 OpenPGP and identity proofs
       p
         a(href='/guides/openpgp-proofs') How OpenPGP identity proofs work
         br
@@ -25,8 +24,7 @@ block content
         br
         a(href='/guides/signature-profiles') Using signature profiles
 
-      .card.guides__section
+      h2 Adding proofs
-        h3 Adding proofs
       p
         a(href='/guides/devto') Dev.to
         br
@@ -56,15 +54,13 @@ block content
         br
         a(href='/guides/xmpp') XMPP+OMEMO
 
-      .card.guides__section
+      h2 Other services
-        h3 Other services
       p
         a(href='/guides/feature-comparison-keybase') Feature comparison with Keybase
         br
         a(href='/guides/migrating-from-keybase') Migrating from Keybase
 
-      .card.guides__section
+      h2 Managing proofs in GnuPG
-        h3 Managing proofs in GnuPG
       p
         a(href='/guides/managing-proofs-listing') Listing proofs
         br

views/index.pug

@@ -19,7 +19,7 @@ block content
         .card.card--small-profile-dummy
         - n++
 
-  .demo
+  .demo.narrow
     .card.card--profile
       .claim
         .claim__main

views/long-form-content.pug

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

views/partials/footer.pug

@@ -7,19 +7,19 @@ footer
         br
         a(href="/") What is Keyoxide?
         br
-        a(href="/") Getting started
+        a(href="/getting-started") Getting started
         br
-        a(href="/") Guides
+        a(href="/guides") Guides
         br
-        a(href="/") FAQ
+        a(href="/faq") FAQ
 
       div
         h1 Keyoxide project
-        a(href="/") Keyoxide.org
+        a(href="https://keyoxide.org") Keyoxide.org
         br
-        a(href="/") Keyoxide on Fediverse
+        a(href="https://fosstodon.org/@keyoxide") Keyoxide on Fediverse
         br
-        a(href="/") Key to Identity Foundation
+        a(href="https://keytoidentity.foundation") Key to Identity Foundation
 
       div
         h1 Development

views/partials/key_selector.pug

@@ -0,0 +1,24 @@
+select#modeSelect.modeSelect(name='modeSelect')
+  option(value='auto'      selected=(mode == "auto" ? true : false)) Autodetect
+  option(value='wkd'       selected=(mode == "wkd" ? true : false)) Web Key Directory
+  option(value='hkp'       selected=(mode == "hkp" ? true : false)) Keyserver
+  option(value='plaintext' selected=(mode == "plaintext" ? true : false)) Plaintext
+  option(value='keybase'   selected=(mode == "keybase" ? true : false)) Keybase
+
+.modesContainer
+  .modes.modes--auto(class=(mode == "auto" ? "modes--visible" : ""))
+    input#auto_input(type='text' name='auto_input' placeholder='Email / key id / fingerprint' value=(mode == "auto" ? input : ""))
+
+  .modes.modes--wkd(class=(mode == "wkd" ? "modes--visible" : ""))
+    input#wkd_input(type='text' name='wkd_input' placeholder='name@domain.org' value=(mode == "wkd" ? input : ""))
+
+  .modes.modes--hkp(class=(mode == "hkp" ? "modes--visible" : ""))
+    input#hkp_input(type='text' name='hkp_input' placeholder='Email / key id / fingerprint' value=(mode == "hkp" ? input : ""))
+    input#hkp_server(type='text' name='hkp_server' placeholder='https://keys.openpgp.org/ (default)')
+
+  .modes.modes--plaintext(class=(mode == "plaintext" ? "modes--visible" : ""))
+    textarea#plaintext_input(name='plaintext_input')
+
+  .modes.modes--keybase(class=(mode == "keybase" ? "modes--visible" : ""))
+    input#keybase_username(type='text' name='keybase_username' placeholder='username' value=(mode == "keybase" ? username : ""))
+    input#keybase_fingerprint(type='text' name='keybase_fingerprint' placeholder='fingerprint' value=(mode == "keybase" ? fingerprint : ""))

views/profile.pug

@@ -6,7 +6,7 @@ block js
   script(type='application/javascript' src='/static/scripts.js' charset='utf-8')
 
 block content
-  section.profile
+  section.profile.narrow
     noscript
       p Keyoxide requires JavaScript to function.
     span#profileUid(style='display: none;') #{uid}

views/verify.pug

@@ -0,0 +1,25 @@
+extends templates/base.pug
+
+block js
+  script(type='application/javascript' src='/static/openpgp.min.js' charset='utf-8')
+  script(type='application/javascript' src='/static/doip.js' charset='utf-8')
+  script(type='application/javascript' src='/static/scripts.js' charset='utf-8')
+
+block content
+  section.narrow
+    noscript
+      p Keyoxide requires JavaScript to function.
+
+    h1 Verify
+    form#form-verify(method='post')
+      h3 Signer
+      label(for='modeSelect') Mode:
+      include partials/key_selector
+
+      h3 Signature
+      textarea#signature(name='signature')
+
+      h3 Result
+      p#result
+      p#resultContent
+      input.bigBtn(type='submit' name='submit' value='VERIFY SIGNATURE')