From 5bd9e33b8fafc2a408db5dc5070ad4601e817783 Mon Sep 17 00:00:00 2001
From: Andrew Minion <andrew@andrewrminion.com>
Date: Tue, 13 Sep 2016 14:02:15 -0400
Subject: [PATCH 1/5] tweak CSS

---
 index.html | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index c3b08bb..e6ddabb 100644
--- a/index.html
+++ b/index.html
@@ -27,15 +27,22 @@
         div{margin:15px 0px;}
         .error{color:#ff1111;}
         .field{width:100%;max-width:600px;}
-        body{background-color:#fafafa;}
+        body{background-color:#fafafa;margin:1em auto;max-width:600px;padding:0 1em;font-family:Helvetica,Verdana,sans-serif;font-size:18px;line-height:1.4;}
+        hr{border-bottom: #f9f9f9;}
         li{margin-bottom:10px;}
         h1{border-bottom:solid black 1px;padding-bottom:15px;}
+        h1,h2{font-weight: normal; color: #195f91;}
         input[type="text"]{width:100%;}
+        input,textarea{font-size:.8em;margin-bottom:.5em;}
+        input[type="text"]:not(#email),textarea{font-family:monospace;}
         textarea{width:100%;height:120px;white-space:pre;}
-        .help{float:right;font-size:12px;text-decoration:underline;cursor:pointer;}
+        a{color:steelblue;}
+        a:hover{text-decoration:none;}
+        p{text-align:justify;}
+        .help{float:right;font-size:12px;cursor:pointer;}
         .help-checkbox{display:none;}
         .help-checkbox:checked + .help-content{display:inline-block;}
-        .help-content{display:none;width:100%;max-width:600px;margin:5px 0px 10px 0px;padding:10px;background-color:#eeeeee;border:2px solid #bbbbbb;}
+        .help-content{display:none;width:100%;margin:5px 0px 10px 0px;padding:10px;background-color:#eeeeee;border:2px solid #bbbbbb;font-size:.8em;}
         code{display:inline-block;margin:5px 0px;padding:5px;background-color:#ffffff;}
         pre{margin:5px 0px;padding:5px;overflow:auto;background-color:#ffffff;}
         .tabs > label{display:inline-block;margin:0px;padding:6px 12px;font-size:13px;text-decoration:underline;cursor:pointer;}
@@ -544,4 +551,4 @@ <h2>Step 5: Install Certificate (<span id="step5_pending">waiting...</span>)</h2
     </div>
     <script src="js/index.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file

From b11cdb811d531b549dab064ccee096c3a0d41a52 Mon Sep 17 00:00:00 2001
From: Andrew Minion <andrew@andrewrminion.com>
Date: Tue, 13 Sep 2016 14:02:31 -0400
Subject: [PATCH 2/5] improve typography

---
 index.html | 94 +++++++++++++++++++++++++++---------------------------
 1 file changed, 47 insertions(+), 47 deletions(-)

diff --git a/index.html b/index.html
index e6ddabb..d15ecb5 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
 Welcome to the source code for gethttpsforfree.com!
 
 This is an open source website that is meant to be auditable. Please read
-through the code to see what's going on!
+through the code to see what’s going on!
 
 Original files:
     /index.html - This page
@@ -69,12 +69,12 @@
     <h1>Get HTTPS for free!</h1>
     <h2 id="digest_error" class="error" style="display:none;">
         ERROR: Your browser is not compatible with this website (this website
-        needs WebCryptoAPI's crypto.subtle.digest()). Please upgrade to a modern
+        needs WebCryptoAPI’s crypto.subtle.digest()). Please upgrade to a modern
         browser (Firefox, Chrome, Safari, IE 11+).
     </h2>
     <div>
         You can now get free https certificates from the non-profit certificate
-        authority <a href="https://letsencrypt.org/" target="_blank">Let's Encrypt</a>!
+        authority <a href="https://letsencrypt.org/" target="_blank">Let’s Encrypt</a>!
         This is a website that will take you through the manual steps to get your free
         https certificate so you can make your own website use https! This website is
         <a href="https://github.com/diafygi/howtogetfreehttps" target="_blank">open source</a>
@@ -87,8 +87,8 @@ <h2 id="digest_error" class="error" style="display:none;">
 
     <div>
         <b>NOTE: This website is for people who know how to generate certificate signing
-        requests (CSRs)!</b> If you're not familiar with how to do this, please use the
-        official Let's Encrypt <a href="https://github.com/letsencrypt/letsencrypt" target="_blank">client</a>
+        requests (CSRs)!</b> If you’re not familiar with how to do this, please use the
+        official Let’s Encrypt <a href="https://github.com/letsencrypt/letsencrypt" target="_blank">client</a>
         that can automatically issue and install https certificates for you. This
         website is designed for people who know what they are doing and just want to get
         their free https certificate.
@@ -101,11 +101,11 @@ <h2 id="digest_error" class="error" style="display:none;">
     <!--############################-->
     <h2>Step 1: Account Info</h2>
     <div>
-        Let's Encrypt requires that you register an account email and public key before
+        Let’s Encrypt requires that you register an account email and public key before
         issuing a certificate. The email is so that they can contact you if needed, and
         the public key is so you can securely sign your requests to issue/revoke/renew
         your certificates. <i><b>Keep your account private key secret!</b> Anyone who has it
-        can impersonate you when making requests to Let's Encrypt!</i>
+        can impersonate you when making requests to Let’s Encrypt!</i>
     </div>
 
     <div class="field">
@@ -120,7 +120,7 @@ <h2>Step 1: Account Info</h2>
             How to generate a new account keypair using openssl:<br/>
             <ol>
                 <li>
-                    Generate an account private key if you don't have one:<br/>
+                    Generate an account private key if you don’t have one:<br/>
                     (KEEP ACCOUNT.KEY SECRET!)<br/>
                     <code>openssl genrsa 4096 > account.key</code>
                 </li>
@@ -134,7 +134,7 @@ <h2>Step 1: Account Info</h2>
             </ol>
         </div>
         <label for="pubkey">Account Public Key:</label><br/>
-        <textarea id="pubkey" placeholder="-----BEGIN PUBLIC KEY----- ..."></textarea>
+        <textarea id="pubkey" placeholder="-----BEGIN PUBLIC KEY----- …"></textarea>
     </div>
 
     <div class="field">
@@ -149,7 +149,7 @@ <h2>Step 1: Account Info</h2>
     <!--###########################################-->
     <h2>Step 2: Certificate Signing Request</h2>
     <div>
-        This is the certificate signing request (CSR) that you send to Let's Encrypt
+        This is the certificate signing request (CSR) that you send to Let’s Encrypt
         in order to issue you a signed certificate. It contains the website domains you
         want to issue certs for and the public key of your TLS private key. <i><b>Keep your
         TLS private key secret!</b> Anyone who has it can man-in-the-middle your website!</i>
@@ -162,16 +162,16 @@ <h2>Step 2: Certificate Signing Request</h2>
             How to generate a new Certificate Signing Request (CSR):<br/>
             <ol>
                 <li>
-                    Generate a TLS private key if you don't have one:<br/>
+                    Generate a TLS private key if you don’t have one:<br/>
                     (KEEP DOMAIN.KEY SECRET!)<br/>
                     <code>openssl genrsa 4096 > domain.key</code>
                 </li>
                 <li>
                     Generate a CSR for your the domains you want certs for:</br>
-                    (replace "foo.com" with your domain)</br>
+                    (replace “foo.com” with your domain)</br>
                     Linux:
                     <pre>
-#change "/etc/ssl/openssl.cnf" as needed:
+#change “/etc/ssl/openssl.cnf” as needed:
 #  Debian: /etc/ssl/openssl.cnf
 #  RHEL and CentOS: /etc/pki/tls/openssl.cnf
 #  Mac OSX: /System/Library/OpenSSL/openssl.cnf
@@ -187,7 +187,7 @@ <h2>Step 2: Certificate Signing Request</h2>
             </ol>
         </div>
         <label for="csr">Certificate Signing Request:</label><br/>
-        <textarea id="csr" placeholder="-----BEGIN CERTIFICATE REQUEST----- ..."></textarea>
+        <textarea id="csr" placeholder="-----BEGIN CERTIFICATE REQUEST----- …"></textarea>
     </div>
 
     <div class="field">
@@ -200,10 +200,10 @@ <h2>Step 2: Certificate Signing Request</h2>
     <!--#############################-->
     <!--##  Step 3: Sign Requests  ##-->
     <!--#############################-->
-    <h2>Step 3: Sign API Requests<span id="step3_pending"> (waiting...)</span></h2>
+    <h2>Step 3: Sign API Requests<span id="step3_pending"> (waiting…)</span></h2>
     <div id="step3" style="display:none;">
         <div>
-            Let's Encrypt requires that you sign all of your requests to them with your
+            Let’s Encrypt requires that you sign all of your requests to them with your
             account private key. Below are the requests that you will need to sign. The
             commands to do this are generated below so you can copy-and-paste them into your
             terminal. <i>Be sure to change the account private key location so it points to
@@ -218,7 +218,7 @@ <h2>Step 3: Sign API Requests<span id="step3_pending"> (waiting...)</span></h2>
                 <ol>
                     <li>
                         Copy and paste each command below into your terminal (if your
-                        account private key isn't at "./account.key", change "./account.key"
+                        account private key isn’t at “./account.key”, change “./account.key”
                         in the command to wherever it exists).
                     </li>
                     <li>
@@ -231,8 +231,8 @@ <h2>Step 3: Sign API Requests<span id="step3_pending"> (waiting...)</span></h2>
             <span id="step3_commands">
             </span>
             <span id="signing_template" style="display:none;">
-                <input type="text" value="echo ..." readonly/><br/>
-                <input id="challenge_sig_foobar_com" type="text" placeholder='Paste the hex output here (e.g. "(stdin)= f2cf67e4...")'/><br/>
+                <input type="text" value="echo …" readonly/><br/>
+                <input id="challenge_sig_foobar_com" type="text" placeholder='Paste the hex output here (e.g. "(stdin)= f2cf67e4…")'/><br/>
             </span>
         </div>
 
@@ -247,15 +247,15 @@ <h2>Step 3: Sign API Requests<span id="step3_pending"> (waiting...)</span></h2>
     <!--##########################-->
     <!--##  Step 4: Challenges  ##-->
     <!--##########################-->
-    <h2>Step 4: Verify Ownership<span id="step4_pending"> (waiting...)</span></h2>
+    <h2>Step 4: Verify Ownership<span id="step4_pending"> (waiting…)</span></h2>
     <div id="step4" style="display:none;">
         <div>
-            Let's Encrypt requires you prove you own the domains you have in your CSR. You
+            Let’s Encrypt requires you prove you own the domains you have in your CSR. You
             can do this by serving a specific file at a specific url under your domains.
             Below are the files you need to serve along with some copy-and-paste commands
             you can run on your website to start serving the file. Once you are serving
-            the file on your website, click "I'm now running this on...". After that, you
-            need to tell Let's Encrypt to check the above files to verify ownership of your
+            the file on your website, click “I’m now running this on…”. After that, you
+            need to tell Let’s Encrypt to check the above files to verify ownership of your
             domains. This request needs to be signed with your account private key. Below
             are the verification requests that you will need to sign. The commands to do
             this are generated below so you can copy-and-paste them into your terminal.
@@ -281,7 +281,7 @@ <h3>Domain: <span class="domain">foobar.com</span></h3>
                         </li>
                         <li>
                             Copy and paste each command below into your terminal (if your
-                            account private key isn't named "account.key", change "account.key"
+                            account private key isn’t named “account.key”, change “account.key”
                             in the command to whatever you named it).
                         </li>
                         <li>
@@ -326,19 +326,19 @@ <h3>Domain: <span class="domain">foobar.com</span></h3>
                                 challenge response. You only need to keep this running briefly.
                             </li>
                             <li>
-                                Open the link in a new window to make sure it's working:<br/>
+                                Open the link in a new window to make sure it’s working:<br/>
                                 <a target="_blank"></a>
                             </li>
                             <li>
-                                Click "I'm now running this command..." button when the file is being
+                                Click “I’m now running this command…” button when the file is being
                                 served on your domain.
                             </li>
                         </ol>
                     </div>
-                    <label>Run this command on <span class="domain">foobar.com</span>'s server:</label><br/>
+                    <label>Run this command on <span class="domain">foobar.com</span>’s server:</label><br/>
                     <textarea readonly></textarea>
                     <div>
-                        <input type="submit" value="I'm now running this command on foobar.com"/>
+                        <input type="submit" value="I’m now running this command on foobar.com"/>
                         <span style="display:none;"></span>
                     </div>
                 </div>
@@ -355,25 +355,25 @@ <h3>Domain: <span class="domain">foobar.com</span></h3>
                                 <pre class="ssh">ssh ubuntu@foobar.com</pre>
                             </li>
                             <li>
-                                Create the ".well-known/acme-challenge/" directory
-                                in your webserver's static file path:<br/>
+                                Create the “.well-known/acme-challenge/” directory
+                                in your webserver’s static file path:<br/>
                                 <pre class="wwwdir">mkdir -p /path/to/www/.well-known/acme-challenge/</pre>
                             </li>
                             <li>
-                                Add the static folder to your webserver's config
-                                (if you haven't already):<br/>
-                                <pre class="nginx_location">server {...</pre>
+                                Add the static folder to your webserver’s config
+                                (if you haven’t already):<br/>
+                                <pre class="nginx_location">server {…</pre>
                             </li>
                             <li>
                                 Create the file with the necessary contents:<br/>
-                                <pre class="file_cmd">echo ...</pre>
+                                <pre class="file_cmd">echo …</pre>
                             </li>
                             <li>
-                                Open the link in a new window to make sure it's working:<br/>
+                                Open the link in a new window to make sure it’s working:<br/>
                                 <a target="_blank"></a>
                             </li>
                             <li>
-                                Click "I'm now serving this file..." button when the file is being
+                                Click “I’m now serving this file…” button when the file is being
                                 served on your domain.
                             </li>
                         </ol>
@@ -385,7 +385,7 @@ <h3>Domain: <span class="domain">foobar.com</span></h3>
                         <input type="text" class="file_data" value="" readonly/>
                     </div>
                     <div>
-                        <input type="submit" class="file_submit" value="I'm now serving this file on foobar.com"/>
+                        <input type="submit" class="file_submit" value="I’m now serving this file on foobar.com"/>
                         <span style="display:none;"></span>
                     </div>
                 </div>
@@ -398,10 +398,10 @@ <h3>Domain: <span class="domain">foobar.com</span></h3>
     <!--#################################-->
     <!--##  Step 5: Issue Certificate  ##-->
     <!--#################################-->
-    <h2>Step 5: Install Certificate (<span id="step5_pending">waiting...</span>)</h2>
+    <h2>Step 5: Install Certificate (<span id="step5_pending">waiting…</span>)</h2>
     <div id="step5" style="display:none;">
         <div>
-            Congratulations! Let's Encrypt has issued you a certificate for your domains!
+            Congratulations! Let’s Encrypt has issued you a certificate for your domains!
             Below is the signed certificate you can use for your website.
         </div>
 
@@ -413,21 +413,21 @@ <h2>Step 5: Install Certificate (<span id="step5_pending">waiting...</span>)</h2
                 <ol>
                     <li>
                         Copy and paste both the below domain certificate and the below
-                        intermediate certificate into the same text file called "chained.pem".
+                        intermediate certificate into the same text file called “chained.pem”.
                     </li>
                     <li>
                         If not done already, generate non-default dhparams.<br/>
                         <code>openssl dhparam -out dhparam.pem 4096</code>
                     </li>
                     <li>
-                        Copy "chained.pem" and "dhparam.pem" to /etc/ssl/certs/.<br/>
+                        Copy “chained.pem” and “dhparam.pem” to /etc/ssl/certs/.<br/>
                         <pre>
 scp chained.pem root@foo.com:/etc/ssl/certs/chained.pem
 scp dhparam.pem root@foo.com:/etc/ssl/certs/dhparam.pem
 </pre>
                     </li>
                     <li>
-                        Copy "domain.key" /etc/ssl/private/.<br/>
+                        Copy “domain.key” /etc/ssl/private/.<br/>
                         <code>scp domain.key root@foo.com:/etc/ssl/private/domain.key</code><br/>
                     </li>
                     <li>
@@ -457,20 +457,20 @@ <h2>Step 5: Install Certificate (<span id="step5_pending">waiting...</span>)</h2
                 Apache installation instructions:<br/>
                 <ol>
                     <li>
-                        Copy and paste the below domain certificate into file "domain.crt".
+                        Copy and paste the below domain certificate into file “domain.crt”.
                     </li>
                     <li>
-                        Copy and paste the below intermediate certificate into file "intermediate.pem".
+                        Copy and paste the below intermediate certificate into file “intermediate.pem”.
                     </li>
                     <li>
-                        Copy "domain.crt" and "intermediate.pem" to /etc/ssl/certs/.<br/>
+                        Copy “domain.crt” and “intermediate.pem” to /etc/ssl/certs/.<br/>
                         <pre>
 scp domain.crt root@foo.com:/etc/ssl/certs/domain.crt
 scp intermediate.pem root@foo.com:/etc/ssl/certs/intermediate.pem
 </pre>
                     </li>
                     <li>
-                        Copy "domain.key" /etc/ssl/private/.<br/>
+                        Copy “domain.key” /etc/ssl/private/.<br/>
                         <code>scp domain.key root@foo.com:/etc/ssl/private/domain.key</code><br/>
                     </li>
                     <li>
@@ -546,7 +546,7 @@ <h2>Step 5: Install Certificate (<span id="step5_pending">waiting...</span>)</h2
     <hr/>
 
     <div class="footer">
-        This website is static, so it can be saved and loaded locally. Just right-click and "Save Page As.."!<br/>
+        This website is static, so it can be saved and loaded locally. Just right-click and “Save Page As…”!<br/>
         Released under MIT license | Source code: <a href="https://github.com/diafygi/gethttpsforfree" target="_blank">https://github.com/diafygi/gethttpsforfree</a>
     </div>
     <script src="js/index.js"></script>

From e01763257f0eac1b37ff506eb7e727cf203a3213 Mon Sep 17 00:00:00 2001
From: Andrew Minion <andrew@andrewrminion.com>
Date: Tue, 13 Sep 2016 14:15:49 -0400
Subject: [PATCH 3/5] make more semantic

---
 index.html | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index d15ecb5..5f4d37a 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <!--
 Welcome to the source code for gethttpsforfree.com!
 
@@ -72,7 +72,7 @@ <h2 id="digest_error" class="error" style="display:none;">
         needs WebCryptoAPI’s crypto.subtle.digest()). Please upgrade to a modern
         browser (Firefox, Chrome, Safari, IE 11+).
     </h2>
-    <div>
+    <p>
         You can now get free https certificates from the non-profit certificate
         authority <a href="https://letsencrypt.org/" target="_blank">Let’s Encrypt</a>!
         This is a website that will take you through the manual steps to get your free
@@ -83,16 +83,16 @@ <h2 id="digest_error" class="error" style="display:none;">
         <!--TODO-->
         <!--<a href="renew.html">Click here</a> to renew certs.-->
         <!--<a href="revoke.html">Click here</a> to revoke certs.-->
-    </div>
+    </p>
 
-    <div>
+    <p>
         <b>NOTE: This website is for people who know how to generate certificate signing
         requests (CSRs)!</b> If you’re not familiar with how to do this, please use the
         official Let’s Encrypt <a href="https://github.com/letsencrypt/letsencrypt" target="_blank">client</a>
         that can automatically issue and install https certificates for you. This
         website is designed for people who know what they are doing and just want to get
         their free https certificate.
-    </div>
+    </p>
 
     <hr/>
 
@@ -100,13 +100,13 @@ <h2 id="digest_error" class="error" style="display:none;">
     <!--##  Step 1: Account Info  ##-->
     <!--############################-->
     <h2>Step 1: Account Info</h2>
-    <div>
+    <p>
         Let’s Encrypt requires that you register an account email and public key before
         issuing a certificate. The email is so that they can contact you if needed, and
         the public key is so you can securely sign your requests to issue/revoke/renew
         your certificates. <i><b>Keep your account private key secret!</b> Anyone who has it
         can impersonate you when making requests to Let’s Encrypt!</i>
-    </div>
+    </p>
 
     <div class="field">
         <label for="email">Account Email:</label><br/>
@@ -148,12 +148,12 @@ <h2>Step 1: Account Info</h2>
     <!--##  Step 2: Certificate Signing Request  ##-->
     <!--###########################################-->
     <h2>Step 2: Certificate Signing Request</h2>
-    <div>
+    <p>
         This is the certificate signing request (CSR) that you send to Let’s Encrypt
         in order to issue you a signed certificate. It contains the website domains you
         want to issue certs for and the public key of your TLS private key. <i><b>Keep your
         TLS private key secret!</b> Anyone who has it can man-in-the-middle your website!</i>
-    </div>
+    </p>
 
     <div class="field">
         <label for="howto_csr" class="help">(how do I generate this?)</label>
@@ -167,8 +167,8 @@ <h2>Step 2: Certificate Signing Request</h2>
                     <code>openssl genrsa 4096 > domain.key</code>
                 </li>
                 <li>
-                    Generate a CSR for your the domains you want certs for:</br>
-                    (replace “foo.com” with your domain)</br>
+                    Generate a CSR for your the domains you want certs for:<br/>
+                    (replace “foo.com” with your domain)<br/>
                     Linux:
                     <pre>
 #change “/etc/ssl/openssl.cnf” as needed:
@@ -202,13 +202,13 @@ <h2>Step 2: Certificate Signing Request</h2>
     <!--#############################-->
     <h2>Step 3: Sign API Requests<span id="step3_pending"> (waiting…)</span></h2>
     <div id="step3" style="display:none;">
-        <div>
+        <p>
             Let’s Encrypt requires that you sign all of your requests to them with your
             account private key. Below are the requests that you will need to sign. The
             commands to do this are generated below so you can copy-and-paste them into your
             terminal. <i>Be sure to change the account private key location so it points to
             your real private key.</i>
-        </div>
+        </p>
 
         <div class="field">
             <label for="howto_sign1" class="help">(how do I do this?)</label>
@@ -249,7 +249,7 @@ <h2>Step 3: Sign API Requests<span id="step3_pending"> (waiting…)</span></h2>
     <!--##########################-->
     <h2>Step 4: Verify Ownership<span id="step4_pending"> (waiting…)</span></h2>
     <div id="step4" style="display:none;">
-        <div>
+        <p>
             Let’s Encrypt requires you prove you own the domains you have in your CSR. You
             can do this by serving a specific file at a specific url under your domains.
             Below are the files you need to serve along with some copy-and-paste commands
@@ -261,7 +261,7 @@ <h2>Step 4: Verify Ownership<span id="step4_pending"> (waiting…)</span></h2>
             this are generated below so you can copy-and-paste them into your terminal.
             <i>Be sure to change the account private key location so it points to your real
             private key.</i>
-        </div>
+        </p>
 
         <div id="challenge_domains">
         </div>
@@ -400,16 +400,16 @@ <h3>Domain: <span class="domain">foobar.com</span></h3>
     <!--#################################-->
     <h2>Step 5: Install Certificate (<span id="step5_pending">waiting…</span>)</h2>
     <div id="step5" style="display:none;">
-        <div>
+        <p>
             Congratulations! Let’s Encrypt has issued you a certificate for your domains!
             Below is the signed certificate you can use for your website.
-        </div>
+        </p>
 
         <div class="field">
             <label for="howto_install" class="help">(how do I install this?)</label>
             <input id="howto_install" type="checkbox" class="help-checkbox"/>
             <div class="help-content">
-                Nginx installation instructions:<br/>
+                <h3>Nginx installation instructions:</h3>
                 <ol>
                     <li>
                         Copy and paste both the below domain certificate and the below
@@ -454,7 +454,7 @@ <h2>Step 5: Install Certificate (<span id="step5_pending">waiting…</span>)</h2
 </pre>
                     </li>
                 </ol>
-                Apache installation instructions:<br/>
+                <h3>Apache installation instructions:</h3>
                 <ol>
                     <li>
                         Copy and paste the below domain certificate into file “domain.crt”.

From 11898a39c33b9c86022768d3f582d8986ec28c81 Mon Sep 17 00:00:00 2001
From: Andrew Minion <andrew@andrewrminion.com>
Date: Tue, 13 Sep 2016 14:42:57 -0400
Subject: [PATCH 4/5] slightly refactor CSS

---
 index.html | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 5f4d37a..10376ba 100644
--- a/index.html
+++ b/index.html
@@ -25,13 +25,13 @@
     <style>
         *{box-sizing:border-box;}
         div{margin:15px 0px;}
-        .error{color:#ff1111;}
+        .error{color:#f11;}
         .field{width:100%;max-width:600px;}
         body{background-color:#fafafa;margin:1em auto;max-width:600px;padding:0 1em;font-family:Helvetica,Verdana,sans-serif;font-size:18px;line-height:1.4;}
-        hr{border-bottom: #f9f9f9;}
+        hr{border:none;border-bottom:1px solid steelblue;}
         li{margin-bottom:10px;}
         h1{border-bottom:solid black 1px;padding-bottom:15px;}
-        h1,h2{font-weight: normal; color: #195f91;}
+        h1,h2{font-weight:normal;color:steelblue;}
         input[type="text"]{width:100%;}
         input,textarea{font-size:.8em;margin-bottom:.5em;}
         input[type="text"]:not(#email),textarea{font-family:monospace;}
@@ -42,17 +42,17 @@
         .help{float:right;font-size:12px;cursor:pointer;}
         .help-checkbox{display:none;}
         .help-checkbox:checked + .help-content{display:inline-block;}
-        .help-content{display:none;width:100%;margin:5px 0px 10px 0px;padding:10px;background-color:#eeeeee;border:2px solid #bbbbbb;font-size:.8em;}
-        code{display:inline-block;margin:5px 0px;padding:5px;background-color:#ffffff;}
-        pre{margin:5px 0px;padding:5px;overflow:auto;background-color:#ffffff;}
+        .help-content{display:none;width:100%;margin:5px 0px 10px 0px;padding:10px;background-color:#eee;border:2px solid #bbb;font-size:.8em;}
+        code,pre{margin:5px 0;padding:5px;background-color:#fff;}
+        code{display:inline-block;}
+        pre{overflow:auto;}
         .tabs > label{display:inline-block;margin:0px;padding:6px 12px;font-size:13px;text-decoration:underline;cursor:pointer;}
         .tabs input[type=radio]{display:none;}
-        .tabs input[type=radio]:checked + label{background-color:#eeeeee;}
-        .tab{display:none;background-color:#eeeeee;padding:15px 15px 1px 15px;margin:0px 0px 15px 0px;}
-        .tab .help-content{background-color:#ffffff;}
+        .tabs input[type=radio]:checked + label{background-color:#eee;}
+        .tab{display:none;background-color:#eee;padding:15px 15px 1px 15px;margin:0px 0px 15px 0px;}
+        .tab .help-content{background-color:#fff;}
         .tab .help-content a{display:inline-block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
-        .tab code{background-color:#eeeeee;}
-        .tab pre{background-color:#eeeeee;}
+        .tab code,.tab pre{background-color:#eee;}
         .tab textarea{height:105px;}
         .footer{font-size:12px;}
     </style>

From 1e5ee9a8a780c358996e7ab78168469ec5037ff2 Mon Sep 17 00:00:00 2001
From: Andrew Minion <andrew@andrewrminion.com>
Date: Tue, 13 Sep 2016 15:06:40 -0400
Subject: [PATCH 5/5] add some renewal notes to the existing page

---
 index.html | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/index.html b/index.html
index 10376ba..e59a87b 100644
--- a/index.html
+++ b/index.html
@@ -107,6 +107,10 @@ <h2>Step 1: Account Info</h2>
         your certificates. <i><b>Keep your account private key secret!</b> Anyone who has it
         can impersonate you when making requests to Let’s Encrypt!</i>
     </p>
+    <h4>Renewal Note</h4>
+    <p>
+        If you’re renewing a certificate, use the same account email and public key as you did for the initial certificate request.
+    </p>
 
     <div class="field">
         <label for="email">Account Email:</label><br/>
@@ -154,6 +158,10 @@ <h2>Step 2: Certificate Signing Request</h2>
         want to issue certs for and the public key of your TLS private key. <i><b>Keep your
         TLS private key secret!</b> Anyone who has it can man-in-the-middle your website!</i>
     </p>
+    <h4>Renewal Note</h4>
+    <p>
+        If you’re renewing a certificate, you can use the same CSR as you did for the original request, or create a new one.
+    </p>
 
     <div class="field">
         <label for="howto_csr" class="help">(how do I generate this?)</label>
@@ -262,6 +270,10 @@ <h2>Step 4: Verify Ownership<span id="step4_pending"> (waiting…)</span></h2>
             <i>Be sure to change the account private key location so it points to your real
             private key.</i>
         </p>
+        <h4>Renewal Note</h4>
+        <p>
+            If you’re renewing a certificate, previously used the file-based method, and did not delete the verification file from your server, you should not need to regenerate the signature but can simply verify using the existing file.
+        </p>
 
         <div id="challenge_domains">
         </div>
@@ -455,6 +467,7 @@ <h3>Nginx installation instructions:</h3>
                     </li>
                 </ol>
                 <h3>Apache installation instructions:</h3>
+                <p><b>Renewal note:</b> if you did not change the private key or CSR, then you only need to replace the “domain.crt” file described below.</p>
                 <ol>
                     <li>
                         Copy and paste the below domain certificate into file “domain.crt”.