updated navigation bars with css grid

gabgeraldo_reading/bookshelf/migrations/0002_alter_books_author.py

+# Generated by Django 4.2 on 2023-04-25 07:41
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('bookshelf', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='books',
+            name='author',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='books', to='bookshelf.author'),
+        ),
+    ]

gabgeraldo_reading/bookshelf/templates/bookshelf/author_details.html

@@ -29,8 +29,14 @@
         </ul>
     </section>
     <nav>
-        <a href="../../home">Home</a>
-        <a href="../../books">Books</a>
-        <a href="../">Authors</a>
+        <div>
+            <a class="primary-link" href="../../home">Home</a>
+        </div>
+        <div>
+            <a class="primary-link" href="../">Books</a>
+        </div>
+        <div>
+            <a class="primary-link" href="../../authors">Authors</a>
+        </div>
     </nav>
 {% endblock %}

gabgeraldo_reading/bookshelf/templates/bookshelf/authors.html

@@ -18,8 +18,12 @@
         </ul>
     </section>
     <nav>
-        <a href="../home">Home</a>
-        <a href="../books">Books</a>
+        <div>
+            <a class="primary-link" href="../home">Home</a>
+        </div>
+        <div>
+            <a class="primary-link" href="../books">Books</a>
+        </div>
     </nav>
 {% endblock %}
 

gabgeraldo_reading/bookshelf/templates/bookshelf/book_details.html

@@ -21,8 +21,15 @@
         </ul>
     </section>
     <nav>
-        <a href="../../home">Home</a>
-        <a href="../">Books</a>
-        <a href="../../authors">Authors</a>
+        <div>
+            <a class="primary-link" href="../../home">Home</a>
+        </div>
+        <div>
+            <a class="primary-link" href="../">Books</a>
+        </div>
+        <div>
+            <a class="primary-link" href="../../authors">Authors</a>
+        </div>
     </nav>
+    
 {% endblock %}

gabgeraldo_reading/bookshelf/templates/bookshelf/books.html

@@ -18,8 +18,12 @@
         </ul>
     </section>
     <nav>
-        <a href="../home">Home</a>
-        <a href="../authors">Authors</a>
+        <div>
+            <a class="primary-link" href="../home">Home</a>
+        </div>
+        <div>
+            <a class="primary-link" href="../authors">Authors</a>
+        </div>
     </nav>
 {% endblock %}
 

gabgeraldo_reading/bookshelf/templates/bookshelf/home.html

@@ -8,22 +8,30 @@
 {% block title %}My Favorite Books & Authors{% endblock %}
 
 {% block content %}
-<header>Welcome to {{ nickname }}'s Database of Favorite Books and Authors!</header>
-<section>
-    <p>
-        I honestly do not read much books but I really enjoy books that explore different ways of viewing the world whether it be scientific or just from a personal perspective. I think they're pieces of knowledge that allow us to view the world more fully.
-    </p>
-    <br>
-    <p>
-        DISCLAIMER: The books I put in this database are not real books. They are made by my imagination HAHA
-    </p>
-    <br>
-    <p>
-        Click the links below to go through my make-believe books.
-    </p>
-</section>
-<nav>
-    <a href="../books">Books</a>
-    <a href="../authors">Authors</a>
-</nav>
+    <header>Welcome to {{ nickname }}'s Database of Favorite Books and Authors!</header>
+    <section>
+        <p>
+            I honestly do not read much books but I really enjoy books that explore different ways of viewing the world whether it be scientific or just from a personal perspective. I think they're pieces of knowledge that allow us to view the world more fully.
+        </p>
+        <br>
+        <p>
+            DISCLAIMER: The books I put in this database are not real books. They are made by my imagination HAHA
+        </p>
+        <br>
+        <p>
+            Click the links below to go through my make-believe books.
+        </p>
+    </section>
+    <nav>
+        <div>
+            <a class="primary-link" href="../books">Books</a>
+            <br>
+            <a class="secondary-link" href="../books/add">Add Book</a>
+        </div>
+        <div>
+            <a class="primary-link" href="../authors">Authors</a>
+            <br>
+            <a class="secondary-link" href="../authors/add">Add Author</a>
+        </div>
+    </nav>
 {% endblock %}

gabgeraldo_reading/static/base.css

@@ -15,23 +15,42 @@ header {
 
 section {
     padding: 2em 0 2em 0;
-    margin: 0 30em 0 3em;
+    min-width: 80%;
+    margin: 0 3em 0 3em;
 }
 
 nav {
-    padding: 0.75em;
+    display: grid;
+    grid-template-columns: auto;
+    grid-auto-flow: column;
+    align-content: center;
+
+    padding: 1em;
     background-color: #AF9164;
-    font: bold 1em 'Inter', sans-serif;
     text-align: center;
 }
 
-nav > a {
+.primary-link {
+    padding: 1px .7em 1px .7em;
+    border-radius: 5px;
+    color: black;
+    text-decoration: none;
+    text-transform: uppercase;
+    font: bold  1.1em 'Inter', sans-serif;
+}
+
+.primary-link:hover {
     color: white;
     text-decoration: underline;
-    margin: 5em;
 }
 
-nav > a:hover {
-    color: black;
-    transition: 0.25s ease-in;
+.secondary-link {
+    color: white;
+    text-transform: lowercase;
+    text-decoration: none;
+    font: italic 1em 'Inter', sans-serif;
+}
+
+.secondary-link:hover {
+    text-decoration: underline;
 }
\ No newline at end of file

gabgeraldo_reading/templates/base.html

@@ -3,6 +3,7 @@
     <head>
         <title>{% block title %}My amazing site{% endblock %}</title>
         {% block style %}{% endblock %}
+        {% block scripts %} {% endblock %}
     </head>
     <body>
         <div id="content">