From 3613fe57ecbb85fa523a90cd7bedb234ad997a13 Mon Sep 17 00:00:00 2001
From: xemeds <xemeds@protonmail.com>
Date: Thu, 20 Aug 2020 09:43:52 +0300
Subject: [PATCH] Improved the overall responsiveness and the styling of the
 pages

---
 tiny0/static/style.css      | 61 +++++++++++++++++++------------------
 tiny0/templates/donate.html |  8 ++---
 tiny0/templates/error.html  |  4 +--
 tiny0/templates/index.html  | 16 +++++-----
 tiny0/templates/layout.html |  2 +-
 tiny0/templates/url.html    | 10 +++---
 6 files changed, 50 insertions(+), 51 deletions(-)

diff --git a/tiny0/static/style.css b/tiny0/static/style.css
index ec2ded1..fb1ee8d 100644
--- a/tiny0/static/style.css
+++ b/tiny0/static/style.css
@@ -33,37 +33,33 @@ body {
 }
 
 .desc {
+    font-size: 25px;
+    font-weight: bold;
     color: #ffffff;
 }
 
-.container {
-    position: absolute;
-    left: 0;
-    right: 0;
+.url-form {
     z-index: 100;
     background-color: #2c2c2c;
     border-radius: 8px;
-    padding: 30px 0px;
+    padding: 30px;
     box-shadow: 0px 10px 20px #000000;
-    width: 80vw;
-    height: 100px;
-    margin: 35vh auto 0 auto;
+    margin: 35vh 10vw 0 10vw;
 }
 
-.inputs {
-    display: flex;
-    justify-content: center;
-    height: 50px;
-    margin-top: 25px;
+.input-list {
+    width: 100%;
+    list-style: none;
+    text-align: center;
 }
 
 .url {
+    width: 80%;
+    padding: 10px;
     background: #121212;
     border: 2px solid #bb86fc;
     color: #ffffff;
-    width: 60%;
-    padding: 10px 10px;
-    
+    margin-bottom: 2vh;
 }
 
 .url:focus {
@@ -71,15 +67,13 @@ body {
 }
 
 .button {
+    width: 100px;
     background: #bb86fc;
     border: 2px solid #bb86fc;
     border-radius: 3px;
+    padding: 10px;
     color: #000000;
     font-weight: bold;
-    display: inline-block;
-    padding: 0 1vw 0 1vw;
-    margin-left: 1vw;
-    width: auto;
 }
 
 .button:hover {
@@ -90,18 +84,15 @@ body {
 .url-error-message {
     color: #ffffff;
     text-align: center;
-    font-size: 100%;
-    margin: 2vh 0 0 0;
+    margin: -1vh 0 2vh 0;
 }
 
 .error-message {
-    position: absolute;
-    left: 0;
-    right: 0;
-    color: #ffffff;
     text-align: center;
-    margin: 40vh auto 0 auto;
-    font-size: 30px;
+    color: #ffffff;
+    font-size: 50px;
+    font-weight: bold;
+    margin: 35vh auto 0 auto;
 }
 
 .donation {
@@ -115,11 +106,21 @@ body {
     margin: 30vh auto 0 auto;
 }
 
-.donation h1 {
+.donation-title {
+    font-size: 40px;
+    font-weight: bold;
     margin-bottom: 2vh;
 }
 
-.donation h4 {
+.donation-patreon {
+    font-size: 30px;
+    font-weight: bold;
+    margin-bottom: 5vh;
+}
+
+.donation-bitcoin {
+    font-size: 16px;
+    font-weight: bold;
     margin-bottom: 4vh;
 }
 
diff --git a/tiny0/templates/donate.html b/tiny0/templates/donate.html
index 03a917b..a12fa2f 100644
--- a/tiny0/templates/donate.html
+++ b/tiny0/templates/donate.html
@@ -2,9 +2,9 @@
 
 {% block body %}
 	<ul class="donation">
-		<li><h1>Bitcoin Address</h1></li>
-		<li><h4>1Mg55rPVuQ2P8zKsCcLdsmgqH24uLXfLbR</h4></li>
-		<li><h1>Patreon</h1></li>
-		<li><a href="https://www.patreon.com/xemeds" target="_blank"><h3>patreon.com/xemeds</h3></a></li>
+		<li><p class="donation-title">Patreon</p></li>
+		<li><a href="https://www.patreon.com/xemeds" target="_blank"><p class="donation-patreon">patreon.com/xemeds</p></a></li>
+		<li><p class="donation-title">Bitcoin</p></li>
+		<li><p class="donation-bitcoin">1Mg55rPVuQ2P8zKsCcLdsmgqH24uLXfLbR</p></li>
 	</ul>
 {% endblock %}
diff --git a/tiny0/templates/error.html b/tiny0/templates/error.html
index 2b9148b..5046227 100644
--- a/tiny0/templates/error.html
+++ b/tiny0/templates/error.html
@@ -2,7 +2,7 @@
 
 {% block body %}
 	<ul class="error-message">
-		<li><h1>{{ error_code }}</h1></li>
-		<li><h1>{{ error_message }}</h1></li>
+		<li><p>{{ error_code }}</p></li>
+		<li><p>{{ error_message }}</p></li>
 	</ul>
 {% endblock %}
\ No newline at end of file
diff --git a/tiny0/templates/index.html b/tiny0/templates/index.html
index 0fe832c..a138205 100644
--- a/tiny0/templates/index.html
+++ b/tiny0/templates/index.html
@@ -1,18 +1,16 @@
 {% extends "layout.html" %}
 
 {% block body %}
-	<div class="container">
-		<form method="POST" action="">
-			{{ form.hidden_tag() }}
-			<div class="inputs">
-				{{ form.url(placeholder="Enter the URL here", autofocus=true, class="url") }}
-				{{ form.submit(class="button") }}
-			</div>
+	<form method="POST" action="" class="url-form">
+		{{ form.hidden_tag() }}
+		<ul class='input-list'>
 			{% if form.url.errors %}
 				{% for error in form.url.errors %}
 					<p class="url-error-message">{{ error }}</p>
 				{% endfor %}
 			{% endif %}
-		</form>
-	</div>
+			<li>{{ form.url(placeholder="Enter the URL here", autofocus=true, class="url") }}</li>
+			<li>{{ form.submit(class="button") }}</li>
+		</ul>
+	</form>
 {% endblock %}
diff --git a/tiny0/templates/layout.html b/tiny0/templates/layout.html
index 069c673..d33049e 100644
--- a/tiny0/templates/layout.html
+++ b/tiny0/templates/layout.html
@@ -18,7 +18,7 @@
 				<body onload="typeTitle()">
 					<div class="headers">
 						<a class="title" id="title" href="{{ url_for('index') }}"></a>
-						<h1 id="desc" class="desc"></h1>
+						<p id="desc" class="desc"></p>
 					</div>
 				{% else %}
 				<body>
diff --git a/tiny0/templates/url.html b/tiny0/templates/url.html
index 386f8c7..450343c 100644
--- a/tiny0/templates/url.html
+++ b/tiny0/templates/url.html
@@ -1,10 +1,10 @@
 {% extends "layout.html" %}
 
 {% block body %}
-	<div class="container">
-		<div class="inputs">
-			<input type="text" value="{{ url }}" id="url" class="url" readonly>
-			<button onclick="copyURL()" class="button">Copy</button>
-		</div>
+	<div class="url-form">
+		<ul class='input-list'>
+			<li><input type="text" value="{{ url }}" id="url" class="url" readonly></li>
+			<li><button onclick="copyURL()" class="button">Copy</button></li>
+		</ul>
 	</div>
 {% endblock %}