Merge branch 'main' into style/redesign-posts

README.md

@@ -14,7 +14,7 @@ A simple blog theme powered by [Zola](https://getzola.org). See a live preview [
 - [x] Tags.
 - [x] Social Links.
 - [X] Syntax highlighting.
-- [X] Invertable and dimmable images shortcodes.
+- [X] Invertible and dimmable images shortcodes.
 
 See the project's roadmap [here](https://github.com/users/welpo/projects/1).
 

content/markdown.md

@@ -7,16 +7,16 @@ tags = ["markdown", "test"]
 
 ## Image shortcodes
 
-### Invertable image
+### Invertible image
 
 You can use this shortcode for graphs, line drawings, diagrams…
 
-{{ invertable_image(src="$BASE_URL/img/graph.webp", alt="Invertable graph") }}
+{{ invertible_image(src="$BASE_URL/img/graph.webp", alt="Invertible graph") }}
 
 Usage:
 
 ```
-{{/* invertable_image(src="img/graph.webp", alt="Invertable graph") */}}
+{{/* invertible_image(src="img/graph.webp", alt="Invertible graph") */}}
 ```
 
 ### Dimmable image

sass/main.scss

@@ -78,7 +78,7 @@
   --accent-color: #91e0ee;
   --table-header-color: #b7e4e4;
 
-  .invertable-image {
+  .invertible-image {
     filter: invert(.88);
   }
 
@@ -95,6 +95,8 @@ html {
 body {
   margin: 0;
   padding: 0;
+align-items:center;
+justify-content:center;
 }
 .content {
   max-width: var(--max-layout-width);

templates/shortcodes/invertible_image.html

@@ -1 +1 @@
-<img class="invertable-image" {% if src %}src={{ src | safe | replace(from="$BASE_URL", to=config.base_url) }} {% endif %} {% if alt %}alt="{{ alt }}"{% endif %}/>
+<img class="invertible-image" {% if src %}src={{ src | safe | replace(from="$BASE_URL", to=config.base_url) }} {% endif %} {% if alt %}alt="{{ alt }}"{% endif %}/>