updated home styling

bellapanghulan_reading/bellapanghulan_reading/settings.py

@@ -124,6 +124,7 @@ USE_TZ = True
 # https://docs.djangoproject.com/en/3.2/howto/static-files/
 
 STATIC_URL = '/static/'
+STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field

bellapanghulan_reading/bookshelf/templates/bookshelf/home.html

 {%extends 'base.html'%}
-
+{% block stylesheets %}
+    {% load static %}
+    <link rel="stylesheet" type="text/css" href="{% static 'stylesheets/home.css' %}">
+{% endblock %}
 {% block title %} My Favorite Books & Authors {% endblock %}
 
 {% block header %}
-    <h2> Welcome to Bella's Database of Favorite Books & Authors </h2>
+    <h2> Welcome to <span class="highlight">Bella's</span></h2>
+    <h2> Database of Favorite Books & Authors </h2>
 {% endblock %}
 
 {% block body %}
@@ -11,10 +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">
-            <ul>
-                <li><a href="/books/">Books</a></li>
-                <li><a href="/authors/">Authors</a></li>
-            </ul>
+                <a href="/books/" class="btn-primary">Books</a>
+                <a href="/authors/" class="btn-secondary">Authors</a>
         </div>
         {% endblock %}  
     </div>

bellapanghulan_reading/bookshelf/urls.py

@@ -8,5 +8,5 @@ urlpatterns = [
     path('authors/<int:pk>/details/', AuthorDetailView.as_view(), name='author-details'),
     path('books/', BooksListView.as_view(), name='books'),
     path('books/<int:pk>/details/', BooksDetailView.as_view(), name='book-details'),
-    path('home/', Homepage.as_view(), name='home'),
+    path('home/', views.Homepage, name='home'),
 ]
\ No newline at end of file

bellapanghulan_reading/bookshelf/views.py

@@ -6,15 +6,14 @@ from django.views.generic.list import ListView
 from django.views.generic.detail import DetailView
 
 # Create your views here.
-class Homepage(View):
-    def get(self, request):
-        books = Books.objects.all()
-        authors = Author.objects.all()
-        context = {
+def Homepage(request):
+    books = Books.objects.all()
+    authors = Author.objects.all()
+    context = {
             'books': books,
             'authors': authors,
-        }
-        return render(request, 'bookshelf/home.html', context)
+    }
+    return render(request, 'bookshelf/home.html', context)
 
 class BooksListView(ListView):
     model = Books

bellapanghulan_reading/static/stylesheets/base.css

+body {
+  padding: 0.5rem;
+}
+.container {
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+header {
+  text-align: center;
+  line-height: 0.5;
+}
+
+h2 {
+  font-size: large;
+}
+.btn-primary {
+    width: max-content;
+    display: inline-block;
+    background-color: #7448F6;
+    padding: 0.75rem 1.2rem;
+    border-radius: 0.4rem;
+    cursor: pointer;
+    border: 1px solid #7448F6;
+    transition: all 400ms ease;
+    color: white;
+  }
+
+.btn-primary:hover, .btn-secondary:hover {
+    background-color: #E9E3FE;
+    color: #7448F6;
+    border-color: transparent;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+    transform: translateY(-5px);
+}
+
+.btn-secondary {
+    width: max-content;
+    display: inline-block;
+    padding: 0.75rem 1.2rem;
+    border-radius: 0.4rem;
+    cursor: pointer;
+    border: 1px solid #7448F6;
+    background-color: transparent;
+    transition: all 400ms ease;
+    color: #7448F6;
+  }
+
+a {
+    text-decoration: none;
+}
+
+.links {
+  display: flex;
+  margin-top: 5rem;
+  margin-right: auto;
+  margin-left: auto;
+  gap: 1rem;
+}
+
+@media only screen and (max-width: 1200px) {
+  header {
+    line-height: 1;
+  }
+}
\ No newline at end of file

bellapanghulan_reading/static/stylesheets/home.css

+body {
+  display: grid;
+  grid-template-columns: 1.5fr 2fr;
+  margin-top: 10%;
+}
+
+header {
+  text-align: left;
+  margin-left: 2.5rem;
+  width: 100%;
+}
+
+.home-content {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    margin: 2.5rem;
+}
+  
+.highlight {
+    background-color: yellow;
+    font-weight: bold;
+}
+
+@media only screen and (max-width: 1200px) {
+  header {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+    justify-content: center;
+    line-height: 0.5;
+  }
+  body {
+    display: flex;
+  }
+}
\ No newline at end of file

bellapanghulan_reading/templates/base.html

@@ -6,22 +6,24 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %} {% endblock %}</title>
-    {% block style %}{% endblock %}
+    {% load static %}
+    <link rel="stylesheet" href="{% static 'stylesheets/base.css' %}" type="text/css">
+    {% block stylesheets %}{% endblock %}
 </head>
 
 <body>
-    <header>
-        {% block header %}
-        {% endblock %}
-    </header>
-    <main>
-        <div class="container">
-            {% block body %}
-                {% block content %}
-                {% endblock %}
+    <div class="container">
+        <header>
+            {% block header %}
             {% endblock %}
-        </div>
-    </main>
+        </header>
+        <main>
+                {% block body %}
+                    {% block content %}
+                    {% endblock %}
+                {% endblock %}
+        </main>
+    </div>
 </body>
 
 </html>
\ No newline at end of file