🔧 Remove image-freem it's a bad idea

index.html

@@ -312,6 +312,27 @@
                     </p>
                 </section>
             </div>
+            <h2>
+                Images
+            </h2>
+            <section>
+                <h3>
+                    Default images
+                </h3>
+                <p>
+                    Bluelib centers and automatically resizes images to fit the panel they are contained in.
+                </p>
+                <img src="https://i.imgur.com/tpC5y1N.png" alt="Uno reverse card reverses water"/>
+            </section>
+            <section>
+                <h3>
+                    Limited images
+                </h3>
+                <p>
+                    Images can be "limited", so that they never occupy too much screen real estate, especially if they're very tall.
+                </p>
+                <img class="image-limited" src="https://i.redd.it/0b2r669b73f41.jpg" alt="USB key in a bottle"/>
+            </section>
             <h2>
                 Formatting
             </h2>

src/rules/skeleton.less

@@ -212,7 +212,7 @@
         border-color: @bA;
     }
 
-    /// --- Images ---
+    /// ===== Images =====
     /// Images are changed to block elements and are automatically centered.
 
     @{image} {
@@ -226,12 +226,6 @@
         object-fit: contain;
     }
 
-    // Allow an image to grow to its real size
-    @{image-free} {
-        max-width: unset;
-        max-height: unset;
-    }
-
     // Limit even further the size of an image based on the size of the screen
     @{image-limited} {
         max-height: max(37.5vw, 66.6vh);

src/targets/paper.module.css

@@ -289,10 +289,6 @@
   margin-right: auto;
   object-fit: contain;
 }
-.bluelib .image-free {
-  max-width: unset;
-  max-height: unset;
-}
 .bluelib .image-limited {
   max-height: max(37.5vw, 66.6vh);
 }

src/targets/paper.root.css

@@ -375,11 +375,6 @@ body .image,
   margin-right: auto;
   object-fit: contain;
 }
-body .image-free,
-.bluelib .image-free {
-  max-width: unset;
-  max-height: unset;
-}
 body .image-limited,
 .bluelib .image-limited {
   max-height: max(37.5vw, 66.6vh);

src/targets/royalblue.module.css

@@ -289,10 +289,6 @@
   margin-right: auto;
   object-fit: contain;
 }
-.bluelib .image-free {
-  max-width: unset;
-  max-height: unset;
-}
 .bluelib .image-limited {
   max-height: max(37.5vw, 66.6vh);
 }

src/targets/royalblue.root.css

@@ -375,11 +375,6 @@ body .image,
   margin-right: auto;
   object-fit: contain;
 }
-body .image-free,
-.bluelib .image-free {
-  max-width: unset;
-  max-height: unset;
-}
 body .image-limited,
 .bluelib .image-limited {
   max-height: max(37.5vw, 66.6vh);

src/vars/module.less

@@ -22,7 +22,6 @@
 @separator-heavy: ~".separator-heavy";
 
 @image: ~"img, .image";
-@image-free: ~".image-free";
 @image-limited: ~".image-limited";
 
 @status-disabled: ~".status-disabled";

src/vars/root.less

@@ -22,7 +22,6 @@
 @separator-heavy: ~".separator-heavy";
 
 @image: ~"img, .image";
-@image-free: ~".image-free";
 @image-limited: ~".image-limited";
 
 @status-disabled: ~"[disabled], .status-disabled";