Implement new style

src/static/style.css

@@ -1,3 +1,74 @@
 body {
-   background-color: aqua;
+   background-color: white;
+   margin: 0;
+   font-family: Arial;
+}
+h1 {
+   text-align: center;
+   font-weight: 300;
+}
+
+#content {
+   border: 1px solid #80808033;
+   border-radius: 3px;
+   padding: 10px;
+   background: aliceblue;
+   position: relative;
+}
+
+@media screen and (max-width: 480px) {
+    #content {
+	margin: 5px;
+    }
+}
+
+@media screen and (min-width: 481px) {
+    #content {
+        margin: auto;
+	width: 50%;
+    }
+}
+
+
+#content select {
+    width: 100%;
+}
+
+#content .textarea {
+    padding-right: 5px;
+}
+#content textarea {
+    height: 100px;
+    width: 100%;
+    resize: vertical;
+}
+
+input[type=text]:focus {
+    border: 3px solid #555;
+} 
+
+#content label {
+    display: inline-block;
+    width: 40%;
+}
+
+#content input {
+    display: inline-block;
+    width: 50%;
+    position: absolute;
+    right: 10px;
+}
+
+#content input[hidden=true]{
+    display: none
+}
+
+#content input[type=submit]{
+    width: 100%;
+    position: relative;
+    right: 0;
+}
+
+p label {
+        text-transform: uppercase;
 }

src/templates/index.html

@@ -1,24 +1,28 @@
 {% extends "base.html" %}
 {% block body %}
 <h1>Welcome</h1>
+<div id="content">
 <p>choose an issue, fill the placeholders, enter your uni-mail, then hit send</p>
 
 <form action="send" method="post">
-<p>
+  <p>
-	<select name="issue" required onchange="selection()" id="issue">
+    <select name="issue" required onchange="selection()" id="issue">
-	<option selected disabled="true">---</option>
+    <option selected disabled="true">---</option>
 	
-        {% for issue in issues %}
+    {% for issue in issues %}
-        <option value='{{issue.value|tojson}}'>{{ issue.name }}</option>
+    <option value='{{issue.value|tojson}}'>{{ issue.name }}</option>
-        {% endfor %}
+    {% endfor %}
-	</select>
+    </select>
-</p>
+  </p>
-<p><textarea id="text" readonly required name="text"></textarea></p>
+  <p class="textarea">
-<p>
+    <textarea id="text" readonly required name="text"></textarea>
-	<label for="sender">absender:</label>
+  </p>
-	<input type="email" required="true" name="sender" id="sender" placeholder="sender email" readonly>
+  <p>
-</p>
+    <label for="sender">absender:</label>
-<div id="placeholders" ></div>
+    <input type="email" required="true" name="sender" id="sender" placeholder="sender email" readonly>
-<input type="submit">
+  </p>
+  <div id="placeholders"></div>
+  <p><input type="submit"></p>
 </form>
+</div>
 {% endblock %}