3 files changed, 41 insertions(+), 31 deletions(-)

M articles/static/style.css
M articles/templates/articles/article_detail.html
A articles/templates/articles/comment_snippet.html

@@ 229,6 229,14 @@ textarea, input {
     color: var(--main3);
 }
 
+.comment:target {
+    background-color: var(--warning-background);
+}
+
+.permalink {
+    font-size: 80%;
+}
+
 /* MESSAGES */
 .messages p {
     background-color: var(--background2);

@@ 11,35 11,5 @@
             {{ article.get_formatted_content|safe }}
         </div>
     </article>
-    <section class="comments">
-        <h2>Comments</h2>
-        {% for comment in comments %}
-            <article id="{{ comment.id }}" class="comment">
-                <p class="metadata">
-                    <span class="username">{{ comment.username }}</span> |
-                    <time datetime="{{ comment.created_at|date:'c' }}">
-                        {{ comment.created_at|date:"DATETIME_FORMAT" }}
-                    </time>
-                    {% include "articles/admin_link_snippet.html" with article=comment %}
-                </p>
-                <p class="content">
-                    {{ comment.content|linebreaksbr }}
-                </p>
-            </article>
-        {% empty %}
-            No reaction yet, write your own!
-        {% endfor %}
-        <form id="comment-form" action="{% url 'create-comment' slug=article.slug %}" method="post">
-            {% csrf_token %}
-            <table>
-                {{ form.as_table }}
-            </table>
-            <button type="submit">Submit</button>
-            <p class="helptext">
-                Your comment may not be approved if it's not respectful, on topic or spammy.
-                If you feel I've made a mistake with your comment, please
-                <a href="/about-me/">send me a message</a>!
-            </p>
-        </form>
-    </section>
+    {% include 'articles/comment_snippet.html' %}
 {% endblock %}

@@ 0,0 1,32 @@
+<section class="comments">
+    <h2>Comments</h2>
+    {% for comment in comments %}
+        <article id="{{ comment.id }}" class="comment">
+            <p class="metadata">
+                <a class="permalink" title="Permalink" href="#{{ comment.id }}">🔗</a>
+                <span class="username">{{ comment.username }}</span> |
+                <time datetime="{{ comment.created_at|date:'c' }}">
+                    {{ comment.created_at|date:"DATETIME_FORMAT" }}
+                </time>
+                {% include "articles/admin_link_snippet.html" with article=comment %}
+            </p>
+            <p class="content">
+                {{ comment.content|linebreaksbr }}
+            </p>
+        </article>
+    {% empty %}
+        No reaction yet, write your own!
+    {% endfor %}
+    <form id="comment-form" action="{% url 'create-comment' slug=article.slug %}" method="post">
+        {% csrf_token %}
+        <table>
+            {{ form.as_table }}
+        </table>
+        <button type="submit">Submit</button>
+        <p class="helptext">
+            Your comment may not be approved if it's not respectful, on topic or spammy.
+            If you feel I've made a mistake with your comment, please
+            <a href="/about-me/">send me a message</a>!
+        </p>
+    </form>
+</section>