updated CSS templates and layout

rachpurisima_reading/bookshelf/templates/bookshelf/author_details.html

@@ -2,13 +2,28 @@
 {% load static %}
 
 {% block title %}{{object.first_name}} {{object.last_name}}{% endblock %}
+
+{% block header %}
+<cite><h1 class="text-center">
+People behind the Pages
+</h1></cite>
+{% endblock %}
+
+{% block subtitle %}
+<cite>
+read between their lines<br>
+-
+</cite>
+{% endblock %}
+
+
 {% block content %}
 <h1>{{object.first_name}} {{object.last_name}}</h1>
 <ul>
   Age: {{object.age}}<br>
   Nationality: {{object.nationality}}<br>
-  About the Author:<br>
-  <div class="container">
+  <br>
+  <div class="container-fluid">
     {{object.bio}}<br>
   </div>
 </ul>

rachpurisima_reading/bookshelf/templates/bookshelf/authors.html

@@ -2,18 +2,30 @@
 {% load static %}
 
 {% block title %}My Favorite Authors{% endblock %}
+{% block header %}
+<h1 class="text-center">Rachel's Favorite Authors</h1>
+{% endblock %}
+
+{% block subtitle %}
+<p class="text-center">
+  <cite>meet my current hyperfixations<br></cite>
+  -
+</p>
+{% endblock %}
+
 {% block content %}
-<h1>Rach's Favorite Authors:</h1>
-<ul>
+<div class="list-group">
 {% for object in object_list %}
-    <li>
+    <button type="button" class="list-group-item list-group-item-action">
         <a href="{{ object.get_absolute_url }}">
           {{object.first_name}} {{object.last_name}}
         </a>
-    </li>
+    </button>
 {% endfor %}
-</ul>
+</div>
 {% endblock %}
+
+
 {% block navbar %}
 <li><a href="/bookshelf/home">Home</a></li>
 <li><a href="/bookshelf/books">Books</a></li>

rachpurisima_reading/bookshelf/templates/bookshelf/book_details.html

@@ -2,6 +2,20 @@
 {% load static %}
 
 {% block title %}{{object.title}}{% endblock %}
+
+{% block header %}
+<cite><h1 class="text-center">
+Reading is what?
+</h1></cite>
+{% endblock %}
+
+{% block subtitle %}
+<cite>
+fundamental.<br>
+-
+</cite>
+{% endblock %}
+
 {% block content %}
 <h1>{{object.title}} ({{object.year_published}})</h1>
   <ul>

rachpurisima_reading/bookshelf/templates/bookshelf/books.html

@@ -2,18 +2,28 @@
 {% load static %}
 
 {% block title %}My Favorite Books{% endblock %}
+{% block header %}
+<h1 class="text-center">Rachel's Favorite Books</h1>
+{% endblock %}
+{% block subtitle %}
+<p class="text-center">
+  <cite>Welcome to my little Library<br></cite>
+  -
+</p>
+{% endblock %}
+
 {% block content %}
-<h1>Rach's Favorite Books:</h1>
-<ul>
+<div class="list-group">
 {% for object in object_list %}
-    <li>
+    <button type="button" class="list-group-item list-group-item-action">
         <a href="{{object.get_absolute_url}}">
             {{object.title}}
         </a>
-    </li>
+    </button>
 {% endfor %}
-</ul>
+</div>
 {% endblock %}
+
 {% block navbar %}
 <li><a href="/bookshelf/home">Home</a></li>
 <li><a href="#">Books</a></li>

rachpurisima_reading/bookshelf/templates/bookshelf/home.html

@@ -3,12 +3,20 @@
 
 {% block title %}My Favorite Books & Authors{% endblock %}
 
-{% block content %}
+{% block header %}
 <h1 class="text-center">Welcome to Rach's Database of Favorite Books and Authors!</h1>
+{% endblock %}
+
+{% block subtitle %}
 <p class="text-center">
-  !! Book !! Review !! I do not like reading that much but these are some of the books I would like to gatekeep.
+  !! Book !! Review !!<br>
+  -
+  <br>
+  I do not like reading that much.<br>
+  But here are some of the books I would like to <cite title="link"><a href="/bookshelf/books">gatekeep</a></cite>.
 </p>
 {% endblock %}
+
 {% block navbar %}
 <li><a href="#">Home</a></li>
 <li><a href="/bookshelf/books">Books</a></li>

rachpurisima_reading/rachpurisima_reading/settings.py

@@ -18,7 +18,6 @@ load_dotenv()
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
 
-
 # Quick-start development settings - unsuitable for production
 # See https://docs.djangoproject.com/en/3.2/howto/deployment/checklist/
 
@@ -122,7 +121,7 @@ USE_TZ = True
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/3.2/howto/static-files/
 
-STATIC_URL = '/static/'
+STATIC_URL = 'static/'
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field

rachpurisima_reading/templates/base.html

@@ -2,11 +2,19 @@
 <html lang="en">
 <head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+  <style>
+        .navbar-custom {
+            background-color: black;
+        }
+        .nav.navbar-nav.navbar-center li a {
+            color: white;
+            text-decoration-style: solid;
+        }
+  </style>
   <title>{% block title %}My amazing site{% endblock %}</title>
-  {% block styles %}{% endblock %}
-  <nav class="navbar navbar-default">
-    <div class="container-fluid">
-      <ul class="nav navbar-nav">
+  <nav class="navbar navbar-custom">
+    <div class="container">
+      <ul class="nav navbar-nav navbar-center">
       {% block navbar %}
       {% endblock %}
       </ul>
@@ -15,17 +23,23 @@
 </head>
 <body>
   <div id="content">
-    <div class="container">
-    {% block content %}{% endblock %}
-    </div>
+    <figure class="text-center">
+      <blockquote class="blockquote">
+        {% block header %}{% endblock %}
+      <figcaption class="blockquote-header">
+        {% block subtitle %}{% endblock %}
+      </figcaption>
+      </blockquote>
+      <figure class="container-fluid">
+        <div class="text-left">
+        {% block content %}{% endblock %}
+      </div>
+      </div>
+    </figure>
+  </figure>
+
   </div>
   <br><br><br>
   {% block scripts %}{% endblock %}
-  <div class="container">
-    <p class="text-centered">
-      <img src="https://media.tenor.com/l1pItZnKEsoAAAAM/funny-as-hell.gif" alt="honkhonk">
-      where he going
-    </p>
-  </div>
 </body>
 </html>