Updated design

assets/styles.css

@@ -5,13 +5,18 @@ body {
 	margin: 0;
     color: #333;
     font-family: sans-serif;
-	background-color: #eee;
+	background-color: #9dd3f0;
+    background-image: url('/assets/img/background.svg');
+    background-repeat: repeat;
+    background-size: 512px;
+    background-position: -16px -16px;
 }
 header {
     padding: 16px;
     margin: 0 0 48px;
     font-size: 1.1em;
     background-color: #fff;
+    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
 }
 header .container {
     display: flex;
@@ -24,6 +29,9 @@ footer {
     margin: 64px 0;
     padding: 0 32px;
 }
+footer a {
+    color: #777;
+}
 .container {
     max-width: 720px;
     width: 100%;
@@ -32,6 +40,8 @@ footer {
 .content {
     padding: 16px 32px 32px;
     background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
 }
 .spacer {
     flex: 1;
@@ -56,8 +66,9 @@ footer {
 
 h1 {
     margin: 0;
-    padding: 16px 32px;
+    padding: 0 32px 16px 32px;
-    background-color: #9dd3f0;
+    /* background-color: #9dd3f0; */
+    background-color: #fff;
     text-align: center;
     cursor: default;
 }

views/404.php

@@ -1,6 +1,6 @@
 <?php $this->layout('template.base', ['title' => $title]) ?>
 
-<h1>404</h1>
 <div class="content">
+    <h1>404</h1>
     <p>The requested page could not be found :(</p>
 </div>

views/encrypt.php

@@ -1,7 +1,7 @@
 <?php $this->layout('template.base', ['title' => $title]) ?>
 
-<h1>Encrypt</h1>
 <div class="content">
+    <h1>Encrypt</h1>
     <form id="form-encrypt" method="post">
         <h3>Recipient</h3>
         <label for="modeSelect">Mode: </label>

views/faq.php

@@ -1,7 +1,7 @@
 <?php $this->layout('template.base', ['title' => $title]) ?>
 
-<h1>FAQ</h1>
 <div class="content">
+    <h1>FAQ</h1>
     <h3 id="what-is-keyoxide"><a href="#what-is-keyoxide">#</a> What is Keyoxide?</h3>
     <p><a href="/">Keyoxide</a> is a lightweight and FOSS solution to make basic cryptography operations accessible to regular humans. It is built to be privacy friendly and secure, it can even be self-hosted.</p>
 

views/guide.php

@@ -1,7 +1,7 @@
 <?php $this->layout('template.base', ['title' => $title]) ?>
 
-<h1><?php $this->insert("guides/$id.title") ?></h1>
 <div class="content">
+    <h1><?php $this->insert("guides/$id.title") ?></h1>
     <p><a href='/guides'>Back to guides</a></p>
     <?php $this->insert("guides/$id.content") ?>
 </div>

views/guides.php

@@ -1,7 +1,7 @@
 <?php $this->layout('template.base', ['title' => $title]) ?>
 
-<h1>Guides</h1>
 <div class="content">
+    <h1>Guides</h1>
     <h3>Using Keyoxide.org</h3>
     <a href="/guides/verify">Verifying a signature</a><br>
     <a href="/guides/encrypt">Encrypting a message</a><br>

views/index.php

@@ -1,7 +1,7 @@
 <?php $this->layout('template.base', ['title' => $title]) ?>
 
-<h1>Keyoxide</h1>
 <div class="content">
+    <h1>Keyoxide</h1>
     <h2>PGP actions</h2>
     <p>
         <a class="bigBtn" href="/verify">verify signature</a>

views/proofs.php

@@ -1,7 +1,7 @@
 <?php $this->layout('template.base', ['title' => $title]) ?>
 
-<h1>Proofs</h1>
 <div class="content">
+    <h1>Proofs</h1>
     <form id="form-proofs" method="post">
         <h3>Public key</h3>
         <label for="modeSelect">Mode: </label>

views/verify.php

@@ -1,7 +1,7 @@
 <?php $this->layout('template.base', ['title' => $title]) ?>
 
-<h1>Verify</h1>
 <div class="content">
+    <h1>Verify</h1>
     <form id="form-verify" method="post">
         <h3>Signer</h3>
         <label for="modeSelect">Mode: </label>