feat: Update docs

content/_index.md

@@ -16,14 +16,14 @@ jgs~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~
 
 Edit a bit of metadata and tweak some of the included graphics and have a blog up in minutes!
 
-- Pretty, yet lightweight. No JavaScript is used (except for comments, heh)
+- Pretty, yet lightweight. No JavaScript is used (except for comments, heh).
-- Colors are tinted with the user-selected primary color for a pleasent look
+- Colors are tinted with the user-selected primary color for a pleasent look.
 - ~50kB in size; take that, 12MB Medium!
-- Uses system fonts for blazingly fast loading
+- Uses system fonts for blazingly fast loading.
-- Mobile friendly, with a proper dark variant
+- Mobile friendly, with a proper dark variant.
-- Proper favicon for modern browsers and Apple device icons
+- Proper favicon for modern browsers and Apple device icons.
-- Twitter, Mastodon and other social media meta cards for easy sharing. Try [Share Preview](https://apps.gnome.org/SharePreview/) to test
+- Twitter, Mastodon and other social media meta cards for easy sharing. Try [Share Preview](https://apps.gnome.org/SharePreview/) to test.
-- [Mastodon-powered comments](https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/); comment using compatible ActivityPub server by replying to a Mastodon post
+- [Mastodon-powered comments](https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/); comment using compatible ActivityPub server by replying to a Mastodon post.
 
 > Duckquill is made based on needs of [my website](https://daudix.codeberg.page), if you need some feature/configuration that doesn't exist feel free to open an issue or better yet, pull request!
 
@@ -103,6 +103,6 @@ If you want to improve Duckquill in any way, feel free to open an issue, or bett
 
 ## Thanks to ♥
 
-- [Jakub Steiner](https://jimmac.eu) for the [OS Component Website](https://jimmac.github.io/os-component-website), on top of which this whole thing is built
+- [Jakub Steiner](https://jimmac.eu) for the [OS Component Website](https://jimmac.github.io/os-component-website), on top of which this whole thing is built.
-- [Carl Schwan](https://carlschwan.eu) for the [Mastodon-powered Comments](https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/)
+- [Carl Schwan](https://carlschwan.eu) for the [Mastodon-powered Comments](https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/).
 - Everyone who supported me and said good stuff <3

content/demo/index.md

@@ -5,10 +5,10 @@ title = "Demo Page"
 archive = "This page is, in fact, not archived, meaning it will receive content updates."
 trigger = "This page contains blackjack and hookers, and bad jokes such as this one."
 disclaimer = """
-- All tricks in this page are performed by the lab boys, don't try this at home.
+- All tricks in this page are performed by the lab boys, don't try this at home
-- Don't expose yourself to 4000° kelvin.
+- Don't expose yourself to 4000° kelvin
-- Don't take party escort submission position.
+- Don't take party escort submission position
-- Don't interact with asbestos and moon rocks.
+- Don't interact with asbestos and moon rocks
 """
 +++
 
@@ -161,7 +161,9 @@ Available variables are:
 - `full`: Forces image/video to be full-width.
 - `pixels`: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.
 - `transparent`: Removes rounded corners and shadow, useful for transparent images.
+- `inline`: Allows putting image inline, e.g for putting multiple images next to each one.
 - `no_hover`: Removes zoom on hover.
+- `no_margin`: Removes margins.
 
 Variables should be comma-separated and be inside the brackets.
 

sass/_media.scss

@@ -5,6 +5,27 @@ video {
   display: block;
   margin: 2rem auto;
   max-width: 100%;
+
+  &.full {
+    width: 100%;
+  }
+  
+  &.pixels {
+    image-rendering: pixelated;
+  }
+  
+  &.transparent {
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  &.inline {
+    display: inline;
+  }
+
+  &.no-margin {
+    margin: 0;
+  }
 }
 
 img {
@@ -21,15 +42,3 @@ img {
   }
 }
 
-.full {
-  width: 100%;
-}
-
-.pixels {
-  image-rendering: pixelated;
-}
-
-.transparent {
-  border-radius: 0;
-  box-shadow: none;
-}

templates/shortcodes/image.html

@@ -4,7 +4,9 @@
       {% if full %}full{% endif %}
       {% if pixels %}pixels{% endif %}
       {% if transparent %}transparent{% endif %}
+      {% if inline %}inline{% endif %}
       {% if no_hover %}no-hover{% endif %}
+      {% if no_margin %}no-margin{% endif %}
     "
     {% if alt %}alt="{{alt}}"{% endif %}
     src="{% if url_min %}{{url_min}}{% else %}{{url}}{% endif %}"

templates/shortcodes/video.html

@@ -3,6 +3,8 @@
     {% if full %}full{% endif %}
     {% if pixels %}pixels{% endif %}
     {% if transparent %}transparent{% endif %}
+    {% if inline %}inline{% endif %}
+    {% if no_margin %}no-margin{% endif %}
   "
   {% if alt %}alt="{{alt}}"{% endif %}
   controls