From 458b72f377e9fee52658559ad62628c956245ecc Mon Sep 17 00:00:00 2001
From: Yarmo Mackenbach <yarmo@qivro.xyz>
Date: Thu, 25 Jun 2020 20:28:32 +0200
Subject: [PATCH] Improve button styling

---
 encrypt.html |  2 +-
 index.html   |  7 +++----
 styles.css   | 30 ++++++++++++++++--------------
 verify.html  |  2 +-
 4 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/encrypt.html b/encrypt.html
index 3eee02c..d57cfde 100644
--- a/encrypt.html
+++ b/encrypt.html
@@ -31,7 +31,7 @@
                     <h3>Result</h3>
                     <textarea name="messageEncrypted" id="messageEncrypted" readonly></textarea>
                     <p id="result"></p>
-                    <input type="submit" name="submit" value="ENCRYPT MESSAGE">
+                    <input type="submit" class="bigBtn" name="submit" value="ENCRYPT MESSAGE">
                 </form>
             </div>
 
diff --git a/index.html b/index.html
index 17db998..7f12d95 100644
--- a/index.html
+++ b/index.html
@@ -22,11 +22,10 @@
             <h1>Keyoxide</h1>
             <div class="content">
                 <p>Because SO2 + 2NaOH → Na2SO3 + H2O</p>
-                <h2>Basic PGP operations</h2>
+                <h2>PGP functions</h2>
                 <p>
-                    <a href="/verify">verify</a>
-                    <br>
-                    <a href="/encrypt">encrypt</a>
+                    <a class="bigBtn" href="/verify">verify</a>
+                    <a class="bigBtn" href="/encrypt">encrypt</a>
                 </p>
                 <h2>About</h2>
                 <p><a href="/">Keyoxide</a> is a lightweight and FOSS solution to make basic cryptography operations accessible to regular humans.</p>
diff --git a/styles.css b/styles.css
index 2542822..74647c6 100644
--- a/styles.css
+++ b/styles.css
@@ -33,6 +33,22 @@ footer {
 .spacer {
     flex: 1;
 }
+.bigBtn {
+    color: #333;
+    width: 100%;
+    padding: 8px;
+    font-size: 1.2em;
+    text-transform: uppercase;
+    text-decoration: none;
+    background-color: #c3eaff;
+    border: 1px solid #3f9acc;
+    border-radius: 3px;
+    border-bottom-width: 3px;
+    cursor: pointer;
+}
+.bigBtn:hover {
+    background-color: #9dd3f0;
+}
 
 h1 {
     margin: 0;
@@ -54,20 +70,6 @@ textarea {
 input[type="radio"] {
     vertical-align: sub;
 }
-input[type="submit"] {
-    width: 100%;
-    padding: 8px;
-    font-size: 1.2em;
-    text-transform: uppercase;
-    background-color: #c3eaff;
-    border: 1px solid #3f9acc;
-    border-radius: 3px;
-    border-bottom-width: 3px;
-    cursor: pointer;
-}
-input[type="submit"]:hover {
-    background-color: #9dd3f0;
-}
 .green {
     color: green;
 }
diff --git a/verify.html b/verify.html
index 77bdc3e..4b3aa83 100644
--- a/verify.html
+++ b/verify.html
@@ -31,7 +31,7 @@
                     <h3>Result</h3>
                     <p id="result">Click on the button below.</p>
                     <p id="resultContent"></p>
-                    <input type="submit" name="submit" value="VERIFY SIGNATURE" value="">
+                    <input type="submit" class="bigBtn" name="submit" value="VERIFY SIGNATURE" value="">
                 </form>
             </div>