From ef4c4ffb5f1395e20db61e42aa71ee786341134a Mon Sep 17 00:00:00 2001
From: Bart Feenstra <bart@mynameisbart.com>
Date: Wed, 27 Nov 2024 09:05:35 +0000
Subject: [PATCH] meh

---
 .../src/css/components/image.scss             | 82 +++++++++++++++++++
 raspberry-mint-dev/src/css/custom.scss        |  3 +-
 raspberry-mint-dev/src/www/index.html         | 13 +++
 3 files changed, 97 insertions(+), 1 deletion(-)
 create mode 100644 raspberry-mint-dev/src/css/components/image.scss

diff --git a/raspberry-mint-dev/src/css/components/image.scss b/raspberry-mint-dev/src/css/components/image.scss
new file mode 100644
index 000000000..ba5c39864
--- /dev/null
+++ b/raspberry-mint-dev/src/css/components/image.scss
@@ -0,0 +1,82 @@
+
+// @todo - Rename this so it's specific to vectors (SVGs?)
+// @todo - Also add similar classes for bitmaps.
+// @todo - What about adding classes to constrain widths OR heights? Then images could scale in the other dimension based
+// @todo    on their source files
+// @todo
+// @todo
+.image-focus {
+  // @todo Confirm we use all of these!
+  --betty-image-focus-height: calc(var(--betty-image-focus-bottom) - var(--betty-image-focus-top));
+  --betty-image-focus-width: calc(var(--betty-image-focus-right) - var(--betty-image-focus-left));
+  // @todo Check this again
+  --betty-image-focus-ratio: min(calc(100 / var(--betty-image-focus-height)), calc(100 / var(--betty-image-focus-width)));
+  --betty-image-focus-center-x: calc(var(--betty-image-focus-width) / 2 + var(--betty-image-focus-left));
+  --betty-image-focus-center-y: calc(var(--betty-image-focus-height) / 2 + var(--betty-image-focus-top));
+
+  container-type: size;
+  display: inline-block;
+  // @todo reenable this
+  //overflow: hidden;
+  position: relative;
+
+  // @todo remove this
+  border: 5px solid red;
+
+  &::before {
+    aspect-ratio: 1;
+    // @todo remove this
+    background-color: blue;
+    background-image: var(--betty-image-focus-url);
+    background-position: center;
+    background-repeat: no-repeat;
+    //background-size: calc(10% * var(--betty-image-focus-ratio)) calc(10% * var(--betty-image-focus-ratio));
+    background-size: 100%;
+    border: 3px solid green;
+    content: "";
+    display: block;
+    position: absolute;
+    // @todo Redo this and the aspect ratio. 
+    width: 100%;
+    z-index: -999;
+
+    // @todo
+    transform: translate(-50%, -50%);
+    //top: calc(1% * (100 - var(--betty-image-focus-center-y)));
+    //left: calc(1% * (100 - var(--betty-image-focus-center-x)));
+  }
+
+  img {
+    object-position: 999999999px 999999999px;
+  }
+}
+
+@mixin image-focus-ratio-portrait {
+
+}
+
+@mixin image-focus-ratio-landscape {
+
+}
+
+// @todo What we really need to know is the ratio of the focus box to the <img> box
+// @todo - We can calculate the focus box ratio in Python and render it in HTML/CSS
+// @todo - How would we get the <img> ratio?
+// @todo - And when we have both, how do we compare them?
+// @todo
+// @todo
+// @todo
+// @todo
+@container (aspect-ratio >= var(--betty-image-focus-ratio)) {
+  .image-focus {
+    // @todo remove this
+    border-color: green;
+  }
+}
+
+@container (aspect-ratio < var(--betty-image-focus-ratio)) {
+  .image-focus {
+    // @todo remove this
+    border-color: purple;
+  }
+}
\ No newline at end of file
diff --git a/raspberry-mint-dev/src/css/custom.scss b/raspberry-mint-dev/src/css/custom.scss
index dcc7b56f2..42a2e5ee1 100644
--- a/raspberry-mint-dev/src/css/custom.scss
+++ b/raspberry-mint-dev/src/css/custom.scss
@@ -23,10 +23,11 @@
 @import "./components/form";
 @import "./components/form-check";
 @import "./components/form-control-text";
+@import "./components/image";
 @import "./components/modal";
 @import "./components/permalink";
 @import "./components/references";
 @import "./components/section";
 
 /* @todo Do not migrate this to the final product! */
-@import "./dev";
\ No newline at end of file
+@import "./dev";
diff --git a/raspberry-mint-dev/src/www/index.html b/raspberry-mint-dev/src/www/index.html
index 5a3e471fa..3a840eb53 100644
--- a/raspberry-mint-dev/src/www/index.html
+++ b/raspberry-mint-dev/src/www/index.html
@@ -333,6 +333,19 @@ <h4 class="card-title">Cyrillic (Ukrainian)</h4>
         </section>
     </section>
 
+    <section id="image-focus" class="section mb-5">
+        <h2>Image focus areas <sup><a href="#image-focus" title="Permanent link to this section."
+                                      class="permalink"><span
+                class="permalink-wrapper"><span
+                class="visually-hidden">Permanent link to this section.</span></span></a></sup></h2>
+        <div>
+            <span class="image-focus"
+                  style="--betty-image-focus-url: url('https://upload.wikimedia.org/wikipedia/commons/0/03/MenAtWorkDiamond.svg'); --betty-image-focus-left: 40; --betty-image-focus-top: 15; --betty-image-focus-right: 100; --betty-image-focus-bottom: 85; height: 200px; width: 400px;">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/0/03/MenAtWorkDiamond.svg">
+            </span>
+        </div>
+    </section>
+
     <section id="components" class="section mb-5">
         <h2>Components <sup><a href="#components" title="Permanent link to this section."
                                class="permalink"><span