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,20 +15,18 @@
     <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>
+                    <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>
-        </div>
+            <a href="/home/" class="btn-primary">Home</a>
+            <a href="/authors/" class="btn-secondary">Authors</a>
+        </div>        
         {% endblock %}  
     </div>
 {% endblock %}
\ No newline at end of file

bellapanghulan_reading/bookshelf/templates/bookshelf/home.html

@@ -15,8 +15,8 @@
         {% block content %}
         <p> Personally, I used to be more interested in movies and series than reading books. Reading books always felt like a chore to me, and I struggled to find books that kept me engaged and interested. However, over time, I discovered the world of self-help books and found myself drawn to the practical advice and guidance they offered. These books helped me learn new skills, gain new perspectives, and develop a better understanding of myself and the world around me. My favorite books include: Ikigai: The Japanese Secret to a Long and Happy Life and The Subtle Art of Not Giving a F*ck. </p>        
         <div class="links">
-                <a href="/books/" class="btn-primary">Books</a>
-                <a href="/authors/" class="btn-secondary">Authors</a>
+            <a href="/books/" class="btn-primary">Books</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;
@@ -46,10 +44,14 @@ h2 {
   }
 
 a {
-    text-decoration: none;
+  text-decoration: none;
+}
+
+a:visited {
+  text-decoration: none;
 }
 
-.links {
+.links {  
   display: flex;
   margin-top: 5rem;
   margin-right: auto;

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

bellapanghulan_reading/templates/base.html

@@ -18,10 +18,10 @@
             {% endblock %}
         </header>
         <main>
-                {% block body %}
-                    {% block content %}
-                    {% endblock %}
+            {% block body %}
+                {% block content %}
                 {% endblock %}
+            {% endblock %}
         </main>
     </div>
 </body>