edited author details style

bellapanghulan_reading/bookshelf/templates/bookshelf/author_details.html

 {%extends 'base.html'%}
+{% block stylesheets %}
+    {% load static %}
+    <link rel="stylesheet" type="text/css" href="{% static 'stylesheets/author_details.css' %}">
+{% endblock %}
 
 {% block title %}{{ object }}{% endblock %}
 
@@ -9,23 +13,29 @@
 {% block body %}
     <div class="author-content">
         {% block content %}
-        <h3>{{ object.age }}</h3>
-        <h3>{{ object.nationality }}</h3>
+        <div class="author-tags">
+            <div class="author-tag">
+                <h4>Age: {{ object.age }}</h4>
+            </div>
+            <div class="author-tag">
+                <h4>Nationality: {{ object.nationality }}</h4>    
+            </div>
+        </div>
         <p>{{ object.bio }}</p>
         <h3>Books by {{ object }} I love:</h3>
         <div class="book-list">
-            <ul>
+            <ol>
                 {% for book in object.get_books %}
-                <li><a href="{{ book.get_absolute_url }}">{{ book }}</a></li>
+                <a href="{{ book.get_absolute_url }}">
+                    <li>{{ book }}</li>
+                </a>
                 {% endfor %}
-            </ul>
+            </ol>
         </div>
         <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/static/stylesheets/author_details.css

+body {
+    padding: 3.5rem;
+}
+
+header {
+    text-align: left;
+}
+
+h2 {
+    text-transform: uppercase;
+    font-size: 30px;
+}
+
+.author-tag {
+    display: inline-block;
+    margin-right: 10px;
+    background-color: #f2f2f2;
+    border-radius: 10px;
+  }
+  
+.author-tag h4 {
+    margin: 0;
+    padding: 0.5rem;
+    color: gray;
+}
+
+ol {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    column-gap: 0.5rem;
+    row-gap: 0.5rem;
+    padding: 0;
+    margin-right: auto;
+    margin-left: auto;
+    counter-reset: my-counter;
+    list-style-type: none;
+  }
+
+ol li::before {
+    content: counter(my-counter);
+    counter-increment: my-counter;
+    content: counter(my-counter, decimal-leading-zero) '\A''\A';
+    white-space: pre;
+    font-size: medium;
+    color:#7448F6;
+}
+  
+li {
+    padding: 0.80rem;
+    cursor: pointer;
+    transition: all 400ms ease;
+    text-align: center;
+    border: 1px solid #7448F6;
+    border-radius: 5px;
+    width: 50%;
+    color: black
+}
+
+li:hover {
+    background-color: #E9E3FE;
+    color: #7448F6;
+    border-color: transparent;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+    transform: translateY(-5px);
+}
\ No newline at end of file

bellapanghulan_reading/static/stylesheets/list.css

@@ -46,6 +46,7 @@ a {
     color: inherit;
     text-decoration: none;
 }
+
 li:hover {
     background-color: #E9E3FE;
     color: #7448F6;