UI Fixes and updates

src/accounts/views.py

@@ -28,8 +28,8 @@ class AccountDetailView(LoginRequiredMixin, DetailView):
 
     def get_context_data(self, *args, **kwargs):
         context = super().get_context_data(*args, **kwargs)
-        context['posts'] = Post.objects.filter(author=self.object).order_by('-created_at')
+        context['posts'] = Post.objects.filter(author=self.object).order_by('-updated_at')[:10]
-        context['comments'] = Comment.objects.filter(author=self.object).order_by('-created_at')
+        context['comments'] = Comment.objects.filter(author=self.object).order_by('-updated_at')[:10]
 
         return context
 

src/core/views.py

@@ -81,6 +81,17 @@ class TopicDetailView(LoginRequiredMixin, DetailView):
     model = Topic
     pk_url_kwarg = 'topic_pk'
 
+    def get_queryset(self):
+        queryset = Topic.objects.all().prefetch_related(
+            models.Prefetch(
+                'post_set',
+                queryset=Post.objects.filter(
+                    topic=self.kwargs['topic_pk']
+                ).order_by('-created_at').prefetch_related('comments')
+            )
+        )
+        return queryset
+
 
 class TopicUpdateView(LoginRequiredMixin, SuccessMessageMixin, UpdateView):
     model = Topic

src/static/styles/main.css

@@ -24,6 +24,7 @@ body {
 p {
     margin-top: 0;
     margin-bottom: 1rem;
+    text-rendering: optimizeLegibility;
 }
 a {
     color: inherit;
@@ -41,6 +42,7 @@ h5 {
     text-transform: uppercase;
     font-weight: 700;
     line-height: 1.3;
+    text-rendering: optimizeLegibility;
 }
 h1 {
     margin-top: 0;
@@ -144,11 +146,11 @@ textarea {
     box-sizing: border-box;
     font: inherit;
     font-family: 'PT Mono', monospace;
-    font-size: 2rem;
+    font-size: 2.5rem;
     padding: 0.5rem 1rem;
     width: 100%;
     resize: vertical;
-    line-height: 1.75;
+    line-height: 1.5;
 }
 
 
@@ -167,8 +169,11 @@ input[type=submit],
     display: inline-block;
 }
 
+button:hover,
+input[type=submit]:hover,
 .action-button:hover {
     background-color: var(--color-highlight);
+    color: var(--color-blue);
 }
 
 
@@ -181,6 +186,10 @@ main {
     padding: 0 1rem;
 }
 
+article {
+    margin-bottom: 1rem;
+}
+
 
 /* ==========================================================================
    Header
@@ -226,6 +235,10 @@ main {
     font-weight: bold;
 }
 
+.messages {
+    font-weight: bold;
+}
+
 
 /* Breadcrumbs
    ========================================================================== */
@@ -267,11 +280,24 @@ main {
     justify-content: space-between;
     margin-bottom: 2rem;
 }
+
+@media screen and (max-width: 600px) {
+    .post__header {
+        flex-direction: column;
+    }
+}
+
 .post__content {
-    font-family: 'STIX Two Text';
+    font-family: 'STIX Two Text', serif;
-    font-size: 2rem;
+    font-size: 2.5rem;
     margin-bottom: 4rem;
-    line-height: 1.75;
+    line-height: 1.5;
+}
+
+@media screen and (max-width: 600px) {
+    .post__content {
+        font-size: 1.75rem;
+    }
 }
 
 .post__content h1,
@@ -279,7 +305,7 @@ main {
 .post__content h3,
 .post__content h4,
 .post__content h5 {
-    font-family: 'STIX Two Text';
+    font-family: 'STIX Two Text', serif;
     text-transform: unset;
     margin: 2em 0 1em;
 }
@@ -303,7 +329,7 @@ main {
 .post__content blockquote {
     font-size: 0.875em;
     max-width: 80%;
-    margin: 0 auto 1rem;
+    margin: 0 auto 1em;
 }
 
 
@@ -312,29 +338,42 @@ main {
    Comments
    ========================================================================== */
 .comment {
-    margin: 2rem 0;
+    margin: 2em 0;
     background-color: var(--color-lightgrey);
-    padding: 1rem;
+    padding: 1em;
 }
 
 .comment__header {
     display: flex;
     justify-content: space-between;
-    line-height: 1.3;
+    line-height: 1.5;
+}
+
+@media screen and (max-width: 600px) {
+    .comment__header {
+        flex-direction: column;
+        margin-bottom: 1rem;
+    }
 }
 
 .comment__content {
-    font-family: 'STIX Two Text';
+    font-family: 'STIX Two Text', serif;
-    font-size: 2rem;
+    font-size: 2.5rem;
     /*max-width: 64ch;*/
 }
 
+@media screen and (max-width: 600px) {
+    .comment__content {
+        font-size: 1.75rem;
+    }
+}
+
 .comment__content h1,
 .comment__content h2,
 .comment__content h3,
 .comment__content h4,
 .comment__content h5 {
-    font-family: 'STIX Two Text';
+    font-family: 'STIX Two Text', serif;
     text-transform: unset;
     margin: 2em 0 1em;
 }
@@ -358,19 +397,25 @@ main {
 .comment__content blockquote {
     font-size: 1.75rem;
     max-width: 80%;
-    margin: 0 auto 1rem;
+    margin: 0 auto 1em;
 }
 
 .comment p {
-    line-height: 1.75;
+    line-height: 1.5;
 }
 .comment ul {
-    line-height: 1.75;
+    line-height: 1.5;
 }
 
 
 .comments__form textarea {
     font-family: 'PT Mono';
-    font-size: 2rem;
+    font-size: 2.5rem;
-    line-height: 1.75;
+    line-height: 1.5;
+}
+
+@media screen and (max-width: 600px) {
+    .comments__form textarea {
+        font-size: 1.75rem;
+    }
 }

src/templates/base.html

@@ -14,7 +14,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,700;0,900;1,400;1,700;1,900&family=PT+Mono&family=STIX+Two+Text:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
 
     {% compress css %}
-    <link rel="stylesheet" type="text/css" href="{% static "styles/main.css" %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'styles/main.css' %}">
     {% endcompress %}
 
     <script type="module" defer src="{% static 'scripts/timezone.js' %}"></script>