Added forum page layout styles

forum/templates/forum/index.html

@@ -8,9 +8,9 @@
 {% endblock %}
 
 {% block content %}
-<h1 class="forum-heading">Welcome to Widget's Forum</h1>
-<h2 class="forum-subheading">Forum posts:</h2>
-<ul class="post-list">
+<h1>Welcome to Widget's Forum</h1>
+<h2>Forum posts:</h2>
+<ul>
 {% for post in posts %}
 <li>
     <a href="/forum/{{ post.id }}/details">

forum/templates/forum/post_detail.html

@@ -8,8 +8,8 @@
 {% endblock %}
 
 {% block content %}
-<h1 class="forum-heading">{{ post.post_title }}</h1>
-<h2 class="forum-subtitle">by {{ post.author.first_name }} {{ post.author.last_name }} dated {{ post.pub_date|date:'d/m/Y' }}</h2>
+<h1 class="post-title">{{ post.post_title }}</h1>
+<h2>by {{ post.author.first_name }} {{ post.author.last_name }} dated {{ post.pub_date|date:'d/m/Y' }}</h2>
 
 <p>
   {{ post.post_body }}
@@ -17,16 +17,16 @@
 
 {% load static %}
 {% if post.id == 1 %}
-<img src="{% static 'post1.jpg' %}" class="post-image" alt="Leni Robredo">
+<img src="{% static 'post1.jpg' %}" alt="Leni Robredo">
 {% elif post.id == 2 %}
-<img src="{% static 'post2.jpg' %}" class="post-image" alt="Lady Gaga MET camp">
+<img src="{% static 'post2.jpg' %}" alt="Lady Gaga MET camp">
 {% else %}
-<img src="{% static 'post3.jpg' %}" class="post-image" alt="Bruno Mars Grammys 2022">
+<img src="{% static 'post3.jpg' %}" alt="Bruno Mars Grammys 2022">
 {% endif %}
 
-<div class="forum-reactions">
+<div>
   {% for reply in post.replies.all %}
-    <p>{{ reply.author.first_name }} {{ reply.author.last_name }}, {{ reply.pub_date|date:'d/m/Y' }}: {{ reply.reply_body }}</p>
+    <p><span class="reply-author">{{ reply.author.first_name }} {{ reply.author.last_name }}, {{ reply.pub_date|date:'d/m/Y' }}</span>: {{ reply.reply_body }}</p>
   {% endfor %}
 </div>
 {% endblock %}
\ No newline at end of file

static/forum.css

+@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');
+
+* {
+    font-family: 'Oswald', sans-serif;
+    background-color: #F4CCE1;
+}
+
+.reply-author {
+    font-weight:700;
+}
+
+.post-title {
+    text-align:center;
+}
\ No newline at end of file