feat: add rounded for img

content/markdown-syntax.md

@@ -5,7 +5,7 @@ description = "Sample article showcasing basic Markdown syntax and formatting fo
 [taxonomies]
 tags = ["markdown", "css", "html"]
 [extra]
-cover_image = "images/markdown-content.png"
+cover_image = "images/markdown-syntax.png"
 +++
 
 This article offers a sample of basic Markdown syntax that can be used in Zola content files, also it shows whether basic HTML elements are decorated with CSS in a Kita theme.
@@ -50,6 +50,20 @@ The blockquote element represents content that is quoted from another source, op
 
 [^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
 
+## Links
+
+To create a link, enclose the link text in brackets and then follow it immediately with the URL in parentheses.
+
+[GitHub](https://github.com)
+
+To quickly turn a URL or email address into a link, enclose it in angle brackets.
+
+<https://github.com>
+
+## Images
+
+![Markdown Guide](/images/markdown-syntax.png)
+
 ## Tables
 
 Tables aren't part of the core Markdown spec, but Zola supports supports them out-of-the-box.

static/main.css

@@ -1912,6 +1912,10 @@ article {
   border-radius: 0.5rem;
 }
 
+.prose-img\:rounded-lg :is(:where(img):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+  border-radius: 0.5rem;
+}
+
 .dark\:bg-white\/80:is(.dark *) {
   background-color: rgb(255 255 255 / 0.8);
 }

templates/index.html

@@ -6,7 +6,7 @@
     {% include "partials/header.html" %}
 
     <main
-      class="prose prose-neutral relative mx-auto min-h-[calc(100%-9rem)] max-w-3xl break-words px-4 pb-16 pt-32 dark:prose-invert prose-pre:rounded-lg"
+      class="prose prose-neutral relative mx-auto min-h-[calc(100%-9rem)] max-w-3xl break-words px-4 pb-16 pt-32 dark:prose-invert prose-pre:rounded-lg prose-img:rounded-lg"
     >
       {% block main %}
 

templates/partials/profile.html

@@ -2,7 +2,7 @@
 <div class="mb-16 flex items-start">
   {% if config.extra.profile.avatar_url %}
   <div
-    class="mr-5 shrink-0 rounded-full border-[0.5px] border-black/10 bg-white/50 p-3 shadow dark:bg-white/[15%]"
+    class="not-prose mr-5 shrink-0 rounded-full border-[0.5px] border-black/10 bg-white/50 p-3 shadow dark:bg-white/[15%]"
   >
     <img
       class="{% if config.extra.profile.avatar_invert %}dark:invert{% endif %} my-0 aspect-square w-16 rounded-full !bg-black/5 hover:animate-spin"