updated css for all pages on bookshelf app

gabgeraldo_reading/bookshelf/templates/bookshelf/author_details.html

 {% extends 'base.html' %}
+{% load static %}
+
+{% block style %}
+    <link rel='stylesheet' type='text/css' href="{% static 'base.css' %}"/>
+    <link rel='stylesheet' type='text/css' href="{% static 'details.css' %}"/>
+{% endblock %}
 
 {% block title %}{{ object.first_name }} {{ object.last_name }}{% endblock %}
 
 {% block content %}
-    <h1>{{ object.first_name }} {{ object.last_name }}</h1>
-    <p>{{ object.age }}</p>
-    <p>{{ object.nationality }}</p>
-    <p>{{ object.bio}}</p>
-    <h1>Books by {{ object.first_name }} {{ object.last_name }} I love</h1>
-    <ul>
-        {% for book in object.books.all %}
-        <li>
-            <a href="{{ book.get_absolute_url }}">{{ book.title }}</a>
-        </li>
-        {% endfor %}
-    </ul>
-    <a href="../../home">Home</a>
-    <a href="../../books">Books</a>
-    <a href="../">Authors</a>
+    <header>Author Details: {{ object.first_name }} {{ object.last_name }}</header>
+    <section>
+        <ul>
+            <li class="title">{{ object.first_name }} {{ object.last_name }}</li>
+            <li class="subinfo">Age: {{ object.age }}</li>
+            <li class="subinfo">Nationality: {{ object.nationality }}</li>
+            <li class="subinfo">Bio:<br>{{ object.bio}}</li>
+        </ul>
+    </section>
+    <section>
+        <ul>
+            <li class="title">Books by {{ object.first_name }} {{ object.last_name }} I love</li>
+            {% for book in object.books.all %}
+            <li class="subinfo">
+                <a href="{{ book.get_absolute_url }}">{{ book.title }}</a>
+            </li>
+            {% endfor %}
+        </ul>
+    </section>
+    <nav>
+        <a href="../../home">Home</a>
+        <a href="../../books">Books</a>
+        <a href="../">Authors</a>
+    </nav>
 {% endblock %}

gabgeraldo_reading/bookshelf/templates/bookshelf/authors.html

 {% extends 'base.html' %}
+{% load static %}
+
+{% block style %}
+    <link rel='stylesheet' type='text/css' href="{% static 'base.css' %}"/>
+    <link rel='stylesheet' type='text/css' href="{% static 'list.css' %}"/>
+{% endblock %}
 
 {% block title %}My Favorite Authors{% endblock %}
 
 {% block content %}
-    <h1>{{ nickname }}'s Favorite Authors:</h1>
-    <ul>
-    {% for object in object_list %}
-        <li><a href="{{ object.get_absolute_url }}">{{ object.first_name }} {{object.last_name}}</a></li>
-    {% endfor %}
-    </ul>
-    <a href="../home">Home</a>
-    <a href="../books">Books</a>
+    <header>{{ nickname }}'s Favorite Authors:</header>
+    <section>
+        <ul>
+            {% for object in object_list %}
+                <li><a href="{{ object.get_absolute_url }}">{{ object.first_name }} {{object.last_name}}</a></li>
+            {% endfor %}
+        </ul>
+    </section>
+    <nav>
+        <a href="../home">Home</a>
+        <a href="../books">Books</a>
+    </nav>
 {% endblock %}
 

gabgeraldo_reading/bookshelf/templates/bookshelf/book_details.html

 {% extends 'base.html' %}
+{% load static %}
+
+{% block style %}
+    <link rel='stylesheet' type='text/css' href="{% static 'base.css' %}"/>
+    <link rel='stylesheet' type='text/css' href="{% static 'details.css' %}"/>
+{% endblock %}
 
 {% block title %}{{ object.title }}{% endblock %}
 
 {% block content %}
-    <h1>{{ object.title }}</h1>
-    <p>{{ object.author }}</p>
-    <p>{{ object.publisher }}</p>
-    <p>{{ object.year_published}}</p>
-    <p>{{ object.isbn }}</p>
-    <p>{{ object.blurb }}</p>
-    <a href="../../home">Home</a>
-    <a href="../">Books</a>
-    <a href="../../authors">Authors</a>
+    <header>Book Details: {{ object.title }}</header>
+    <section>
+        <ul>
+            <li class="title">{{ object.title }}</li>
+            <li class="subinfo">Author: {{ object.author }}</li>
+            <li class="subinfo">Publisher: {{ object.publisher }}</li>
+            <li class="subinfo">Year Published: {{ object.year_published}}</li>
+            <li class="subinfo">ISBN: {{ object.isbn }}</li>
+            <li class="subinfo">Short Description: <br>{{ object.blurb }}</li>
+        </ul>
+    </section>
+    <nav>
+        <a href="../../home">Home</a>
+        <a href="../">Books</a>
+        <a href="../../authors">Authors</a>
+    </nav>
 {% endblock %}

gabgeraldo_reading/bookshelf/templates/bookshelf/books.html

 {% extends 'base.html' %}
+{% load static %}
+
+{% block style %}
+    <link rel='stylesheet' type='text/css' href="{% static 'base.css' %}"/>
+    <link rel='stylesheet' type='text/css' href="{% static 'list.css' %}"/>
+{% endblock %}
 
 {% block title %}My Favorite Books{% endblock %}
 
 {% block content %}
-    <h1>{{ nickname }}'s Favorite Books:</h1>
-    <ul>
-    {% for object in object_list %}
-        <li><a href="{{ object.get_absolute_url }}">{{ object.title }}</a></li>
-    {% endfor %}
-    </ul>
-    <a href="../home">Home</a>
-    <a href="../authors">Authors</a>
+    <header>{{ nickname }}'s Favorite Books:</header>
+    <section>
+        <ul>
+            {% for object in object_list %}
+                <li><a href="{{ object.get_absolute_url }}">{{ object.title }}</a></li>
+            {% endfor %}
+        </ul>
+    </section>
+    <nav>
+        <a href="../home">Home</a>
+        <a href="../authors">Authors</a>
+    </nav>
 {% endblock %}
 

gabgeraldo_reading/bookshelf/templates/bookshelf/home.html

 {% extends 'base.html' %}
+{% load static %}
+
+{% block style %}
+    <link rel='stylesheet' type='text/css' href="{% static 'base.css' %}"/>
+{% endblock %}
 
 {% block title %}My Favorite Books & Authors{% endblock %}
+
 {% block content %}
-<h1>Welcome to {{ nickname }}'s Database of Favorite Books and Authors!</h1>
-<p>I really like etc and etc</p>
-<a href="../books">Books</a>
-<a href="../authors">Authors</a>
+<header>Welcome to {{ nickname }}'s Database of Favorite Books and Authors!</header>
+<section>
+    <p>
+        I honestly do not read much books but I really enjoy books that explore different ways of viewing the world whether it be scientific or just from a personal perspective. I think they're pieces of knowledge that allow us to view the world more fully.
+    </p>
+    <br>
+    <p>
+        DISCLAIMER: The books I put in this database are not real books. They are made by my imagination HAHA
+    </p>
+    <br>
+    <p>
+        Click the links below to go through my make-believe books.
+    </p>
+</section>
+<nav>
+    <a href="../books">Books</a>
+    <a href="../authors">Authors</a>
+</nav>
 {% endblock %}

gabgeraldo_reading/gabgeraldo_reading/settings.py

@@ -19,6 +19,8 @@ load_dotenv()
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
 
+STATIC_URL = 'static/'
+STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
 
 # Quick-start development settings - unsuitable for production
 # See https://docs.djangoproject.com/en/4.1/howto/deployment/checklist/

gabgeraldo_reading/static/base.css

+@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
+
+* {
+    margin: 0;
+    font-family: 'Inter', sans-serif;
+}
+
+header {
+    padding: 1em;
+    background-color: #6F1A07;
+    color: white;
+    font: bold 3em 'Inter', sans-serif;
+    text-align: center;
+}
+
+section {
+    padding: 2em 0 2em 0;
+    margin: 0 30em 0 3em;
+}
+
+nav {
+    padding: 0.75em;
+    background-color: #AF9164;
+    font: bold 1em 'Inter', sans-serif;
+    text-align: center;
+}
+
+nav > a {
+    color: white;
+    text-decoration: underline;
+    margin: 5em;
+}
+
+nav > a:hover {
+    color: black;
+    transition: 0.25s ease-in;
+}
\ No newline at end of file

gabgeraldo_reading/static/details.css

+ul {
+    list-style: none;
+}
+ul > li {
+    margin-bottom: .5em;
+}
+
+.title {
+    font-weight: 800;
+    font-size: 2em;
+}
+
+.subinfo {
+    font-style: italic;;
+}
+
+li > a:hover {
+    background-color: #6F1A07;
+    color: white;
+    transition: all 0.5s;
+}
+
+li > a {
+    color: black;
+    padding: .25em;
+}
\ No newline at end of file

gabgeraldo_reading/static/list.css

+li {
+    margin-bottom: .5em;
+}
+li > a:hover {
+    background-color: #6F1A07;
+    color: white;
+    transition: all 0.5s;
+}
+
+li > a {
+    color: black;
+    padding: .25em;
+}

gabgeraldo_reading/templates/base.html

@@ -2,11 +2,12 @@
 <html>
     <head>
         <title>{% block title %}My amazing site{% endblock %}</title>
+        {% block style %}{% endblock %}
     </head>
     <body>
         <div id="content">
             {% block content %}{% endblock %}
         </div>
-        {% block scripts %}{% endblock %}
+        
     </body>
 </html>
\ No newline at end of file