Rework style.css and clear test entries

joaqscrisologo_reading/bookshelf/templates/bookshelf/add-author.html

@@ -18,8 +18,7 @@
 <form method="post">
 	{% csrf_token %}
 	{{ form.as_p }}
-	<br>
-	<input type="submit" value="Add Author">
+	<div class="separator-bar"></div><br>
+	<input type="submit" value="Add Author" class="spanning-button">
 </form>
-<br><hr>
 {% endblock %}
\ No newline at end of file

joaqscrisologo_reading/bookshelf/templates/bookshelf/add-book.html

@@ -18,8 +18,7 @@
 <form method="post">
 	{% csrf_token %}
 	{{ form.as_p }}
-	<br>
-	<input type="submit" value="Add Book">
+	<div class="separator-bar"></div><br>
+	<input type="submit" value="Add Book" class="spanning-button">
 </form>
-<br><hr>
 {% endblock %}
\ No newline at end of file

joaqscrisologo_reading/bookshelf/templates/bookshelf/author_detail.html

@@ -4,12 +4,14 @@
 
 {% block title %} {{object}} {% endblock %}
 {% block content %}
-<h1> {{object}} </h1><br>
+<h1> {{object}} </h1>
+<div class="separator-bar"></div>
 <ul>
 	<li> <b>Age:</b> {{object.age}} </li>
 	<li> <b>Nationality:</b> {{object.nationality}} </li>
 	<li> <b>Bio:</b> {{object.bio}} </li>
 </ul>
+<a href="./edit"> Edit Author </a>
 <br>
 <h3> Books by {{object}} I love: </h3>
 <ul>
@@ -17,6 +19,6 @@
 	<li> <a href="{{book.get_absolute_url}}">{{book}}</a> </li>
 	{% endfor %}
 </ul>
-<br><hr><br><br>
+<div class="separator-bar"></div><br>
 <a href="../../../home/">Home</a> &nbsp; <a href="../../../authors/">Authors</a> &nbsp; <a href="../../../books/">Books</a>
 {% endblock %}
\ No newline at end of file

joaqscrisologo_reading/bookshelf/templates/bookshelf/author_list.html

@@ -4,7 +4,8 @@
 
 {% block title %} My Favorite Authors {% endblock %}
 {% block content %}
-<h1> Joaqs' Favorite Authors! </h1><br>
+<h1> Joaqs' Favorite Authors! </h1>
+<div class="separator-bar"></div></div>
 <ul>
 	{% for object in object_list %}
 	<li>
@@ -12,6 +13,6 @@
 	</li>
 	{% endfor %}
 </ul>
-<br><hr><br><br>
+<div class="separator-bar"></div><br>
 <a href="../home/">Home</a> &nbsp; <a href="../books/">Books</a>
 {% endblock %}
\ No newline at end of file

joaqscrisologo_reading/bookshelf/templates/bookshelf/books_detail.html

@@ -4,7 +4,8 @@
 
 {% block title %} {{object}} {% endblock %}
 {% block content %}
-<h1> {{object}} </h1><br>
+<h1> {{object}} </h1>
+<div class="separator-bar"></div>
 <ul>
 	<li> <b>Author:</b> <a href="{{object.author.get_absolute_url}}">{{object.author}}</a> </li>
 	<li> <b>Publisher:</b> {{object.publisher}} </li>
@@ -12,6 +13,8 @@
 	<li> <b>ISBN:</b> {{object.ISBN}} </li>
 	<li> <b>Blurb:</b> {{object.blurb}} </li>
 </ul>
-<br><hr><br><br>
+<br>
+<a href="./edit"> Edit Book </a>
+<br><br><div class="separator-bar"></div><br>
 <a href="../../../home/">Home</a> &nbsp; <a href="../../../authors/">Authors</a> &nbsp; <a href="../../../books/">Books</a>
 {% endblock %}
\ No newline at end of file

joaqscrisologo_reading/bookshelf/templates/bookshelf/books_list.html

@@ -4,7 +4,9 @@
 
 {% block title %} My Favorite Books {% endblock %}
 {% block content %}
-<h1> Joaqs' Favorite Books! </h1><br>
+<h1> Joaqs' Favorite Books! </h1>
+<div class="separator-bar"></div>
+<h6> This is definitely not just the list of best-selling books on Wikipedia :> </h6>
 <ul>
 	{% for object in object_list %}
 	<li>
@@ -12,6 +14,6 @@
 	</li>
 	{% endfor %}
 </ul>
-<br><hr><br><br>
+<div class="separator-bar"></div><br>
 <a href="../home/">Home</a> &nbsp; <a href="../authors/">Authors</a>
 {% endblock %}
\ No newline at end of file

joaqscrisologo_reading/bookshelf/templates/bookshelf/edit-author.html

@@ -18,8 +18,7 @@
 <form method="post">
 	{% csrf_token %}
 	{{ form.as_p }}
-	<br>
-	<input type="submit" value="Save Changes">
+	<div class="separator-bar"></div><br>
+	<input type="submit" value="Save Changes" class="spanning-button">
 </form>
-<br><hr>
 {% endblock %}
\ No newline at end of file

joaqscrisologo_reading/bookshelf/templates/bookshelf/edit-book.html

@@ -18,8 +18,7 @@
 <form method="post">
 	{% csrf_token %}
 	{{ form.as_p }}
-	<br>
-	<input type="submit" value="Save Changes">
+	<div class="separator-bar"></div><br>
+	<input type="submit" value="Save Changes" class="spanning-button">
 </form>
-<br><hr>
 {% endblock %}
\ No newline at end of file

joaqscrisologo_reading/bookshelf/templates/bookshelf/home.html

@@ -4,10 +4,11 @@
 
 {% block title %} My Favorite Books & Authors {% endblock %}
 {% block content %}
-<h1> Welcome to Joaqs' Database of Favorite Books & Authors! </h1><h6> That is definitely not just the list of best-selling books on Wikipedia :> </h6><br>
+<h1> Welcome to Joaqs' Database of Favorite Books & Authors! </h1>
+<div class="separator-bar"></div>
 <p> Hi! My name is Joaqs! I usually like science fiction books and non-fiction books, but my favorite book series is A Song of Ice and Fire by George R. R. Martin. </p>
 <p> While I don't have a favorite author, I usually enjoy books that are experimental or have good twists. &#9786; </p> 
-<br><hr><br><br>
-<a href="../authors/">Authors</a> &nbsp; <a href="../books/">Books</a><br>
+<div class="separator-bar"></div><br>
+<a href="../authors/">Authors</a> &nbsp; <a href="../books/">Books</a><br><br>
 <a href="../authors/add">Add Author</a> &nbsp; <a href="../books/add">Add Book</a>
 {% endblock %}
\ No newline at end of file

joaqscrisologo_reading/static/style.css

 body {
-	background-image: linear-gradient(to right, #000, #333);
+	background-color: #111;
 	color: rgb(100, 100, 100);
-	font-size: 14px;
-	font-family: Garamond, serif;
+	font-size: 16px;
+	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 	
 	margin: 20px;
 }
@@ -13,16 +13,21 @@ p {
 
 a {
 	color: currentColor;
-	transition: color 0.5s;
+	transition: color 0.5s, background-color 0.5s;
+	
+	background-color: #222;
+	border-radius: 4px;
+	padding: 4px;
 }
 
 a:hover {
 	color: white;
+	background-color: #444;
 }
 	
 li {
 	transition: color 0.5s, font-size 0.5s, text-shadow 0.5s;
-	font-size: 14px;
+	font-size: 16px;
 	text-shadow: 0 0 0 currentColor;
 	list-style-type: none;
 }
@@ -39,9 +44,51 @@ li:hover {
 
 h1 {
 	color: white;
+	text-align: center;
+}
+
+h3 {
+	color: white;
 }
 
 h6 {
 	color: white;
+	text-align: center;
+}
+
+input {
+	background-color: #333;
+	border-radius: 4px;
+	border-style: none;
+	color: rgb(120, 120, 120);
+	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+	font-size: 16px;
+	padding: 4px;
+	
+	transition: color 0.5s, background-color 0.5s;
+}
+
+input:hover {
+	color: white;
+	background-color: #444;
 }
 
+input:focus {
+	color: white;
+}
+
+.separator-bar {
+	border-image: linear-gradient(to right, #A0E7E5, #FFAEBC);
+    border-image-slice: 1;
+    border-style: solid;
+    border-width: 0 0 2px 0;
+}
+
+.spanning-button {
+	width: 100%;
+}
+
+.flexed-links {
+	display: flex;
+	justify-content: space-evenly;
+}