Spaces:
Running
Running
Commit ·
dd2cdc3
1
Parent(s): 39c63ec
Make ambient emoji layer org-card-safe under HTML sanitization
Browse filesThe HF org-card renderer sanitizes index.html and strips the <style>
block, so position:fixed/width rules do not apply there. Moved the
emoji layer to the end of <body> and added explicit width/height=64
attributes so that, with CSS removed, the emojis fall to the page
bottom at small size instead of rendering at native 512px over the
banner. On the live Space front-door the <style> rules still apply and
the emojis float around the edges as designed. Banner untouched.
Signed-off-by: Stephen P. Lutar Jr. <stephenlutar2@gmail.com>
- index.html +14 -11
index.html
CHANGED
|
@@ -172,17 +172,6 @@
|
|
| 172 |
<body>
|
| 173 |
<a href="#main" class="skip">Skip to main content</a>
|
| 174 |
|
| 175 |
-
<!-- AMBIENT EMOJI LAYER (Wave4, additive) — 5 character emojis hanging around
|
| 176 |
-
the page edges. Decorative (aria-hidden), does not cover the banner,
|
| 177 |
-
animation gated behind prefers-reduced-motion: no-preference. -->
|
| 178 |
-
<div class="emoji-layer" aria-hidden="true">
|
| 179 |
-
<span class="ambient-emoji ae-a11oy"><img class="ae-inner" src="https://huggingface.co/spaces/SZLHOLDINGS/README/resolve/main/assets/emoji/a11oy_emoji.png" alt=""/></span>
|
| 180 |
-
<span class="ambient-emoji ae-rosie"><img class="ae-inner" src="https://huggingface.co/spaces/SZLHOLDINGS/README/resolve/main/assets/emoji/rosie_emoji.png" alt=""/></span>
|
| 181 |
-
<span class="ambient-emoji ae-amaru"><img class="ae-inner" src="https://huggingface.co/spaces/SZLHOLDINGS/README/resolve/main/assets/emoji/amaru_emoji.png" alt=""/></span>
|
| 182 |
-
<span class="ambient-emoji ae-sentra"><img class="ae-inner" src="https://huggingface.co/spaces/SZLHOLDINGS/README/resolve/main/assets/emoji/sentra_emoji.png" alt=""/></span>
|
| 183 |
-
<span class="ambient-emoji ae-vessels"><img class="ae-inner" src="https://huggingface.co/spaces/SZLHOLDINGS/README/resolve/main/assets/emoji/vessels_emoji.png" alt=""/></span>
|
| 184 |
-
</div>
|
| 185 |
-
|
| 186 |
<nav aria-label="Main navigation">
|
| 187 |
<div class="nav-inner">
|
| 188 |
<div class="nav-logo">🧬 SZL Holdings</div>
|
|
@@ -363,5 +352,19 @@
|
|
| 363 |
</div>
|
| 364 |
</footer>
|
| 365 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 366 |
</body>
|
| 367 |
</html>
|
|
|
|
| 172 |
<body>
|
| 173 |
<a href="#main" class="skip">Skip to main content</a>
|
| 174 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 175 |
<nav aria-label="Main navigation">
|
| 176 |
<div class="nav-inner">
|
| 177 |
<div class="nav-logo">🧬 SZL Holdings</div>
|
|
|
|
| 352 |
</div>
|
| 353 |
</footer>
|
| 354 |
|
| 355 |
+
<!-- AMBIENT EMOJI LAYER (Wave4, additive) — 5 character emojis hanging around
|
| 356 |
+
the page edges via position:fixed. Decorative (aria-hidden), placed at the
|
| 357 |
+
end of <body> so that if a host strips the <style> block (e.g. the HF org-card
|
| 358 |
+
HTML sanitizer), these small 64px images fall to the page bottom instead of
|
| 359 |
+
overlaying content; explicit width/height attributes keep them small even
|
| 360 |
+
with CSS removed. Animation is gated behind prefers-reduced-motion: no-preference. -->
|
| 361 |
+
<div class="emoji-layer" aria-hidden="true">
|
| 362 |
+
<span class="ambient-emoji ae-a11oy"><img class="ae-inner" width="64" height="64" src="https://huggingface.co/spaces/SZLHOLDINGS/README/resolve/main/assets/emoji/a11oy_emoji.png" alt=""/></span>
|
| 363 |
+
<span class="ambient-emoji ae-rosie"><img class="ae-inner" width="64" height="64" src="https://huggingface.co/spaces/SZLHOLDINGS/README/resolve/main/assets/emoji/rosie_emoji.png" alt=""/></span>
|
| 364 |
+
<span class="ambient-emoji ae-amaru"><img class="ae-inner" width="64" height="64" src="https://huggingface.co/spaces/SZLHOLDINGS/README/resolve/main/assets/emoji/amaru_emoji.png" alt=""/></span>
|
| 365 |
+
<span class="ambient-emoji ae-sentra"><img class="ae-inner" width="64" height="64" src="https://huggingface.co/spaces/SZLHOLDINGS/README/resolve/main/assets/emoji/sentra_emoji.png" alt=""/></span>
|
| 366 |
+
<span class="ambient-emoji ae-vessels"><img class="ae-inner" width="64" height="64" src="https://huggingface.co/spaces/SZLHOLDINGS/README/resolve/main/assets/emoji/vessels_emoji.png" alt=""/></span>
|
| 367 |
+
</div>
|
| 368 |
+
|
| 369 |
</body>
|
| 370 |
</html>
|