styles: refine float image layout

quartz/plugins/transformers/float-images.ts

@@ -10,22 +10,17 @@ export const FloatImages: QuartzTransformerPlugin = () => {
     textTransform: (_, src) => {
       /*
         my syntax is based on the wiki style
+        ![[https://example.com/image.png]]{float-center}
         ![[https://example.com/image.png]]{float-left}
         ![[https://example.com/image.png]]{float-right 40%}
         percentage is optional, default is 40%
         */
 
-      const regex = /!\[\[([^\]]+)\]\]\{(float-left|float-right)(?:\s+(\d+)%?)?\}/g
-      return src.replace(regex, (_, src, float, width) => {
-        width = width || "40" // default
-        const direction = float === "float-left" ? "left" : "right"
-        const margin = float === "float-left" ? "0 2rem 0 0" : "0 0 0 2rem"
-
-        // TODO YOU CAN MAKE THIS BETTER BY USING AND NOT INLINE STYLES
-
+      const regex = /!\[\[([^\]]+)\]\]\{(float-left|float-right|float-center)(?:\s+(\d+)%?)?\}/g
+      return src.replace(regex, (_, src, float, width = 40) => {
         // do NOT try to tab align the following code, otherwise it renders as code instead of html parse
         return `
-<div class="floating-image" style="float: ${direction}; margin: ${margin}; max-width: ${width}%;">
+<div class="floating-image ${float}" style="max-width: ${width}%;">
     <img style="margin: 0;" src=${src}>
     <img style="margin: 0;" src=${src}>
 </div>

quartz/styles/custom.scss

@@ -70,10 +70,25 @@
     z-index: 1;
     height: 100%;
     width: 100%;
-    filter: blur(20px) brightness(0.6);
+    filter: blur(16px) opacity(0.7);
   }
 }
 
+.float-left {
+  float: left;
+  margin: 0 2rem 0 0;
+}
+
+.float-right {
+  float: right;
+  margin: 0 0 0 2rem;
+}
+
+.float-center {
+  display: block;
+  margin: 0 auto;
+}
+
 .footer {
   font-family: var(--metaFont);
   font-size: 1.3rem;