edited book details style

bellapanghulan_reading/bookshelf/templates/bookshelf/authors.html

@@ -15,9 +15,9 @@
         <div class="list">
             <ol>
                 {% for object in object_list %}
-                <li>
-                    <a href="{{ object.get_absolute_url }}">{{ object }}</a>
-                </li>
+                    <a href="{{ object.get_absolute_url }}">
+                        <li>{{ object }}</li>
+                    </a>
                 {% endfor %}
             </ol>
         </div>

bellapanghulan_reading/bookshelf/templates/bookshelf/book_details.html

 {%extends 'base.html'%}
+{% block stylesheets %}
+    {% load static %}
+    <link rel="stylesheet" type="text/css" href="{% static 'stylesheets/book_details.css' %}">
+{% endblock %}
 
 {% block title %} {{ object.title }} {% endblock %}
 
@@ -9,16 +13,17 @@
 {% block body %}
     <div class="books-content">
         {% block content %}
-        <a href="{{ object.author.get_absolute_url }}">{{ object.author }}</a>
-        <h3>{{ object.publisher }}</h3>
-        <h3>{{ object.ISBN }}</h3>
+        <a href="{{ object.author.get_absolute_url }}" class="author">{{ object.author }}</a>
+        <div class="author-details">
+            <h3><span class="label">Publisher</span><br> {{ object.publisher }}</h3>
+            <h3><span class="label">Year Published</span><br>{{ object.year_published }}</h3>
+            <h3><span class="label">ISBN</span><br>{{ object.ISBN }}</h3>
+        </div>
         <p>{{ object.blurb }}</p>
         <div class="links">
-            <ul>
-                <li><a href="/home/">Home</a></li>
-                <li><a href="/books/">Books</a></li>
-                <li><a href="/authors/">Authors</a></li>
-            </ul>
+            <a href="/home/" class="btn-primary">Home</a>
+            <a href="/books/" class="btn-secondary">Books</a>
+            <a href="/authors/" class="btn-primary">Authors</a>
         </div>
         {% endblock %}  
     </div>

bellapanghulan_reading/bookshelf/templates/bookshelf/books.html

@@ -17,9 +17,10 @@
         <div class="list">
             <ol>
                 {% for object in object_list %}
-                <li>
-                    <a href="{{ object.get_absolute_url }}">{{ object.title }}</a>                    
-                </li>
+                    <a href="{{ object.get_absolute_url }}">                
+                        <li> {{ object.title }} </li>    
+                    </a>                    
+ 
                 {% endfor %}
             </ol>
         </div>

bellapanghulan_reading/static/stylesheets/book_details.css

+body {
+    padding: 3.5rem;
+}
+h2 {
+    text-transform: uppercase;
+    font-size: 30px;
+}
+
+.author {
+    display: block;
+    text-align: center;
+    color: black;
+}
+
+.author-details {
+    margin-top: 1.5rem;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    background-color: #b39aff;
+    border-radius: 0.4rem;
+}
+h3 {
+    font-size: medium;
+    display: block;
+    text-align: center;
+}
+
+@media only screen and (max-width: 760px) {
+    h3 {
+      font-size: small;
+      padding: 0.2rem;
+    }
+  }
\ No newline at end of file