feat: Add border to linked images

.gitignore

@@ -1,3 +1,3 @@
 node_modules/*
 node_modules
-.development/default/pages/.vitepress/cache
+.development/default/pages/.vitepress/cache

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ### Feature(s)
 
-- Ability to style images via the URL (with `#` + `not-rounded`, `static`, `small`, `medium`, `full`,`left`, `right`, `shadow`, `mono` `invert`)
+- Ability to style images via the URL (with `#` + `not-rounded`, `static`, `small`, `medium`, `shadow`, `mono`, `invert` `blur`, `sepia`, `transparency`)
 
 - Give a title for Table of Contents for better accessibility
 
@@ -26,6 +26,8 @@
 
 ### Cleanup(s)
 
+- Add border to link images (with the option to remove it)
+
 - Migrate the body to an grid layout
 
 - Move Layouts to their own folder

styles/common.scss

@@ -177,24 +177,12 @@ img {
 
   &[src*="#small"] {
     width: 50%;
+    margin: 0 auto;
   }
 
   &[src*="#medium"] {
     width: 75%;
-  }
-
-  &[src*="#full"] {
-    width: 100%;
-  }
-
-  &[src*="#left"] {
-    float: left;
-    margin-right: 1rem;
-  }
-
-  &[src*="#right"] {
-    float: right;
-    margin-left: 1rem;
+    margin: 0 auto;
   }
 
   &[src*="#shadow"] {
@@ -203,10 +191,44 @@ img {
 
   &[src*="#mono"] {
     filter: grayscale(100%);
+    -webkit-filter: grayscale(100%);
   }
 
   &[src*="#invert"] {
     filter: invert(100%);
+    -webkit-filter: invert(100%);
+  }
+
+  &[src*="#blur"] {
+    filter: blur(0.25rem);
+    -webkit-filter: blur(0.25rem);
+
+    &:hover {
+      filter: blur(0.5rem);
+      -webkit-filter: blur(0.5rem);
+    }
+
+    &:active {
+      filter: blur(0);
+      -webkit-filter: blur(0);
+    }
+  }
+
+  &[src*="#sepia"] {
+    filter: sepia(100%);
+    -webkit-filter: sepia(100%);
+  }
+
+  &[src*="#transparency"] {
+    opacity: 0.5;
+  }
+}
+
+a img {
+  border: 1px solid var(--color-accent);
+
+  &[src*="#no-border"] {
+    border: 0;
   }
 }