From a837b232717e170ffcf2361ea0c7a8c745ca3b53 Mon Sep 17 00:00:00 2001
From: David Kerkeslager <kerkeslager@gmail.com>
Date: Fri, 14 Jan 2022 14:02:09 -0500
Subject: [PATCH] Add some text and styling

---
 txt_house/templates/base.html      | 34 +++++++++++++++++++--
 txt_house/templates/clipboard.svg  |  1 +
 txt_house/templates/edit.html      | 48 ++++++++++++++++--------------
 txt_house/templates/text_file.html |  2 +-
 4 files changed, 59 insertions(+), 26 deletions(-)
 create mode 100644 txt_house/templates/clipboard.svg

diff --git a/txt_house/templates/base.html b/txt_house/templates/base.html
index a9fb172..547aeef 100644
--- a/txt_house/templates/base.html
+++ b/txt_house/templates/base.html
@@ -31,12 +31,26 @@
         max-width: 40rem;
       }
 
+      @media only screen and (max-width: 30rem) {
+        body {
+          margin: 0 2rem;
+          width: calc(100% - 4rem);
+        }
+      }
+
+      @media only screen and (max-width: 20rem) {
+        body {
+          margin: 0 1rem;
+          width: calc(100% - 2rem);
+        }
+      }
+
       nav {
         display: flex;
         flex-direction: row;
         align-items: center;
 
-        width: 40rem;
+        width: 100%;
         height: 5rem;
       }
 
@@ -51,6 +65,10 @@
         color: black;
       }
 
+      nav a:hover {
+        text-decoration-thickness: 2px;
+      }
+
       nav label {
         margin-right: 0.2rem;
       }
@@ -70,7 +88,19 @@
         align-items: center;
       }
 
-      form.editor span {
+      nav + form.editor {
+        margin-top: 2.2rem;
+      }
+
+      form.editor div.edit-key-area {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-bottom: 3.6rem;
+      }
+
+      form.editor span.field {
         display: flex;
         flex-direction: row;
         align-items: center;
diff --git a/txt_house/templates/clipboard.svg b/txt_house/templates/clipboard.svg
new file mode 100644
index 0000000..5d17a01
--- /dev/null
+++ b/txt_house/templates/clipboard.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
\ No newline at end of file
diff --git a/txt_house/templates/edit.html b/txt_house/templates/edit.html
index ba59df2..7e22641 100644
--- a/txt_house/templates/edit.html
+++ b/txt_house/templates/edit.html
@@ -2,16 +2,13 @@
 
 {% block body %}
 
-<nav>
-  <a href='{% url "index" %}' title='Home'>Home</a>
-  <a href='{{ text_file.get_view_url }}' title='View'>View</a>
-</nav>
-
 <style>
   .copy-area {
     display: flex;
     flex-direction: row;
     align-items: center;
+    flex-wrap: wrap;
+    justify-content: center;
 
     margin-top: 1.5rem;
   }
@@ -32,28 +29,33 @@
   }
 </style>
 
-{% if edit_key %}
-  <span class='copy-area'>
-    <label for='edit-key-display'>Edit key:</label>
-    <span id='edit-key-display'>{{ edit_key }}</span>
-  </span>
-  <small>Save this key in order to edit this file in the future.</small>
-{% endif %}
+<nav>
+  <a href='{% url "index" %}' title='Home'>Home</a>
+  <a href='{{ text_file.get_view_url }}' title='View'>View</a>
+</nav>
 
 <form class='editor' action='{{ text_file.get_edit_url }}' method='post'>
   {% csrf_token %}
-  {% if edit_key %}
-    <input id='edit_key' name='edit_key' type='hidden' value='{{ edit_key }}'></input>
-  {% else %}
-    <span>
-      <label for='edit_key'>Edit key:</label>
-      <input id='edit_key' name='edit_key' type='text'></input>
-    </span>
-
-    {% if incorrect_key %}
-    <span class='error'>You must enter the correct edit key to save your changes.</span>
+  <div class='edit-key-area'>
+    {% if edit_key %}
+      <span class='copy-area'>
+        <label for='edit-key-display'>Edit key:</label>
+        <span id='edit-key-display'>{{ edit_key }}</span>
+      </span>
+      <small>Save this key in order to edit this file in the future.</small>
+      <input id='edit_key' name='edit_key' type='hidden' value='{{ edit_key }}'></input>
+    {% else %}
+      <span class='field'>
+        <label for='edit_key'>Edit key:</label>
+        <input id='edit_key' name='edit_key' type='text'></input>
+      </span>
+
+      {% if incorrect_key %}
+      <span class='error'>You must enter the correct edit key to save your changes.</span>
+      {% endif %}
     {% endif %}
-  {% endif %}
+  </div>
+
   <textarea name='text'>{{ text }}</textarea>
   <input type='submit'></input>
 </form>
diff --git a/txt_house/templates/text_file.html b/txt_house/templates/text_file.html
index 6961756..ece1423 100644
--- a/txt_house/templates/text_file.html
+++ b/txt_house/templates/text_file.html
@@ -19,7 +19,7 @@
     }
 
     main {
-      max-width: 40rem;
+      width: 100%;
       white-space: pre-wrap;
       margin: 0 0 3rem;
     }
-- 
2.20.1