applied basic CSS styling to all pages

nishaespera_reading/bookshelf/models.py

@@ -48,5 +48,8 @@ class Books(models.Model):
     def __str__(self):
         return self.title
     
+    def get_author(self):
+        return self.author
+    
     def get_absolute_url(self):
         return reverse('bookshelf:book_details', kwargs={'pk': self.pk})
\ No newline at end of file

nishaespera_reading/bookshelf/templates/bookshelf/author_details.html

@@ -3,7 +3,9 @@
 {% extends 'base.html' %}
 {% block title %} {{ object }} {% endblock %}
 {% block header %} 
-    <h2> {{ object }} </h2> 
+    <div class="title">
+    <h1> {{ object }} </h1> 
+    </div>
 {% endblock %}
     
 {% block body %}
@@ -22,10 +24,9 @@
         </li>
         {% endfor %}
     </ul>
-<div>
-    <h5> <a href="/home/"> Home </a>
-        <a href="/books/"> Books </a>
-        <a href="/authors/"> Authors </a>
-    </h5>
-</div>
+    <div class="btns">
+        <a href="/home/" class="btn"> Home </a>
+        <a href="/books/" class="btn"> Books </a>
+        <a href="/authors/" class="btn"> Authors </a>
+    </div>
     {% endblock %}
\ No newline at end of file

nishaespera_reading/bookshelf/templates/bookshelf/authors.html

@@ -3,7 +3,10 @@
 {% extends 'base.html' %}
 {% block title %} My Favorite Authors {% endblock %}
 {% block header %}
+<div class="title">
     <h1> Nisha's Favorite Authors </h1>
+</div>
+    
 {% endblock %}
 
 {% block content %}
@@ -18,5 +21,8 @@
             {% endfor %}
         </ul>
     </div>
-    <h5> <a href="/home/"> Home </a> <a href="/books/"> Books </a></h5>
+    <div class="btns">
+        <center><a href="/home/" class="btn"> Home </a>
+        <a href="/books/" class="btn"> Books </a> </center>
+    </div>
 {% endblock %}
\ No newline at end of file

nishaespera_reading/bookshelf/templates/bookshelf/book_details.html

@@ -3,17 +3,25 @@
 {% extends 'base.html' %}
 {% block title %} {{ object.title }} {% endblock %}
 {% block header %}
-    <h2> {{ object.title }} </h2>
+<div class="title">
+    <h1> {{ object.title }} </h1>
+</div>
+    
 {% endblock %}
 
 {% block body %}
-   
-    <h4> {{ object.publisher }} </h4>
-    <h4> {{ object.year_published }} </h4>
-    <h4> {{ object.ISBN }} </h4>
-    <h4> {{ object.blurb }} </h4>
-    <h5> <a href="/home/"> Home </a>
-        <a href="/books/"> Books </a>
-        <a href="/authors/"> Authors </a>
-    </h5>
+    <h4> Author:
+        <a href="{{ object.get_author.get_absolute_url }}">
+            {{ object.get_author }}
+        </a>
+    </h4>
+    <h4> Publisher: {{ object.publisher }} </h4>
+    <h4> Year published: {{ object.year_published }} </h4>
+    <h4> ISBN: {{ object.ISBN }} </h4>
+    <p> Blurb: {{ object.blurb }} </p>
+    <div class="btns">
+        <a href="/home/" class="btn"> Home </a>
+        <a href="/books/" class="btn"> Books </a>
+        <a href="/authors/" class="btn"> Authors </a>
+    </div>
     {% endblock %}
\ No newline at end of file

nishaespera_reading/bookshelf/templates/bookshelf/books.html

@@ -2,7 +2,10 @@
 {% extends 'base.html' %}
 {% block title %} My Favorite Books {% endblock %}
 {% block header %}
+<div class="title">
     <h1> Nisha's Favorite Books </h1>
+</div>
+    
 {% endblock %}
 
 {% block content %}
@@ -17,5 +20,8 @@
             {% endfor %}
         </ul>
     </div>
-    <h5> <a href="/home/"> Home </a> <a href="/authors/"> Authors </a></h5>
+    <div class="btns">
+        <a href="/home/" class="btn"> Home </a>
+        <a href="/authors/" class="btn"> Authors </a>
+    </div>
 {% endblock %}
\ No newline at end of file

nishaespera_reading/bookshelf/templates/bookshelf/home.html

 {% extends 'base.html' %}
 {% block title %} My Favorite Books & Authors {% endblock %}
+{% block header %}
+<div class="home-title">
+    <h1> Welcome to Nisha's Database of <br> Favorite Books and Authors! </h1>
+</div>
+    
+{% endblock %}
 {% block body %}
-    <h3><center> Welcome to Nisha's Database of <br> Favorite Books and Authors! </center></h3>
+<div class="home-body">
     <p> The genres I usually enjoy include mystery, romance, and fantasy. From narratives
         that revolve around crimes to supernatural elements in a fictional world, I find each
         scene interesting. I enjoyed books written by J.K Rowling, specifically, Harry Potter due 
@@ -9,5 +15,9 @@
         emotional and engaging storytelling. The characters in her book are deeply relatable and 
         she's able to move her readers through genuine dialogues.
     </p>
-        <a href="/books/"> Books </a> <a href="/authors/"> Authors </a></h5>
+</div>
+    <div class="btns">
+        <a href="/books/" class="btn"> Books </a>
+        <a href="/authors/" class="btn"> Authors </a>
+    </div>    
 {% endblock %}
\ No newline at end of file

nishaespera_reading/nishaespera_reading/settings.py

@@ -120,6 +120,7 @@ USE_TZ = True
 # https://docs.djangoproject.com/en/3.2/howto/static-files/
 
 STATIC_URL = '/static/'
+STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field

nishaespera_reading/static/base.css

+.btn {
+    background-color: lightblue;
+    color: white;
+    border-radius: 2px;
+    padding: 4px;
+    margin-right: 100px;
+    font-family: "Montserrat";
+}
+
+.btns {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+h1 {
+    color: white;
+    font-family: "Montserrat";
+    text-align: center;
+}
+
+body {
+    font-family: "Montserrat";
+    padding: 50px;
+}
+
+.title {
+    background-color: pink;
+}
+
+.home-title {
+    background: -webkit-linear-gradient(to top, pink, lightblue);
+    background: linear-gradient(to top, pink, lightblue);
+}
+
+.home-body {
+    display: flex;
+    text-align: center;
+}

nishaespera_reading/templates/base.html

@@ -5,7 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %} {% endblock %}</title>
-    
+    {% load static %}
+    <link rel="stylesheet" href="{% static 'base.css' %}" type="text/css">
     {% block styles %}{% endblock %}
 </head>
 <body>