edited list style

bellapanghulan_reading/bookshelf/templates/bookshelf/authors.html

 {%extends 'base.html'%}
-
+{% block stylesheets %}
+    {% load static %}
+    <link rel="stylesheet" type="text/css" href="{% static 'stylesheets/list.css' %}">
+{% endblock %}
 {% block title %} My Favorite Authors {% endblock %}
 
 {% block header %}
@@ -10,19 +13,17 @@
     <div class="authors-content">
         {% block content %}
         <div class="list">
-            <ul>
+            <ol>
                 {% for object in object_list %}
                 <li>
                     <a href="{{ object.get_absolute_url }}">{{ object }}</a>
                 </li>
                 {% endfor %}
-            </ul>
+            </ol>
         </div>
         <div class="links">
-            <ul>
-                <li><a href="/home/">Home</a></li>
-                <li><a href="/books/">Books</a></li>
-            </ul>
+            <a href="/home/" class="btn-primary">Home</a>
+            <a href="/books/" class="btn-secondary">Books</a>
         </div>
         {% endblock %}  
     </div>

bellapanghulan_reading/bookshelf/templates/bookshelf/books.html

 {%extends 'base.html'%}
+{% block stylesheets %}
+    {% load static %}
+    <link rel="stylesheet" type="text/css" href="{% static 'stylesheets/list.css' %}">
+{% endblock %}
+
 
 {% block title %} My Favorite Books {% endblock %}
 
@@ -10,19 +15,17 @@
     <div class="books-content">
         {% block content %}
         <div class="list">
-            <ul>
+            <ol>
                 {% for object in object_list %}
                 <li>
                     <a href="{{ object.get_absolute_url }}">{{ object.title }}</a>                    
                 </li>
                 {% endfor %}
-            </ul>
+            </ol>
         </div>
         <div class="links">
-            <ul>
-                <li><a href="/home/">Home</a></li>
-                <li><a href="/authors/">Authors</a></li>
-            </ul>
+            <a href="/home/" class="btn-primary">Home</a>
+            <a href="/authors/" class="btn-secondary">Authors</a>
         </div>        
         {% endblock %}  
     </div>

bellapanghulan_reading/static/stylesheets/base.css

-body {
-  padding: 0.5rem;
-}
 .container {
     font-family: Verdana, Geneva, Tahoma, sans-serif;
 }
@@ -13,6 +10,7 @@ header {
 h2 {
   font-size: large;
 }
+
 .btn-primary {
     width: max-content;
     display: inline-block;
@@ -49,6 +47,10 @@ a {
   text-decoration: none;
 }
 
+a:visited {
+  text-decoration: none;
+}
+
 .links {  
   display: flex;
   margin-top: 5rem;

bellapanghulan_reading/static/stylesheets/list.css

+body{
+    background-image: url('../assets/list_bg.png');
+}
+
+.list {
+    border-radius: 0.5rem;
+}
+
+h2 {
+    padding-left: 2.5rem;
+    padding-bottom: 1rem;
+    font-size: xx-large;
+    border-bottom: 1px solid white;
+}
+
+ol {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    column-gap: 1rem;
+    row-gap: 1rem;
+    padding: 0;
+    width: 80%;
+    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: large;
+    color:#7448F6;
+}
+  
+li {
+    padding: 0.80rem;
+    cursor: pointer;
+    transition: all 400ms ease;
+    text-align: center;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}
+li:hover {
+    background-color: #E9E3FE;
+    color: #7448F6;
+    border-color: transparent;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+    transform: translateY(-5px);
+}
+
+.book {
+    display: flex;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+@media only screen and (max-width: 780px) {
+    ol {
+        display: grid;
+        grid-template-columns: 1fr;
+    }
+}
\ No newline at end of file