From 792b4d9d6600340e1818e749a20a6f273b54e31c Mon Sep 17 00:00:00 2001
From: ruinivist <ruinivist@proton.me>
Date: Sun, 29 Mar 2026 02:11:00 +0000
Subject: [PATCH] styles: refine float image layout

---
 quartz/plugins/transformers/float-images.ts | 13 ++++---------
 quartz/styles/custom.scss                   | 17 ++++++++++++++++-
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/quartz/plugins/transformers/float-images.ts b/quartz/plugins/transformers/float-images.ts
index 23d8449..c541007 100644
--- a/quartz/plugins/transformers/float-images.ts
+++ b/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>
diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss
index 109ab23..790932d 100644
--- a/quartz/styles/custom.scss
+++ b/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;