patx/miadruck
Refine property popup dismissal and label
Commit 0fae874 · patx · 2026-08-27T20:56:16-04:00
Comments
No comments yet.
Diff
diff --git a/docs/404.html b/docs/404.html
index 219fa9e..27f4931 100644
--- a/docs/404.html
+++ b/docs/404.html
@@ -10,8 +10,8 @@
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<script>document.documentElement.classList.add('js')</script>
-<link rel="stylesheet" href="/assets/site.css?v=20260827-popup">
-<script src="/assets/site.js?v=20260827-popup" defer></script>
+<link rel="stylesheet" href="/assets/site.css?v=20260827-popup2">
+<script src="/assets/site.js?v=20260827-popup2" defer></script>
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
diff --git a/docs/assets/site.css b/docs/assets/site.css
index 25076fb..395f8d2 100644
--- a/docs/assets/site.css
+++ b/docs/assets/site.css
@@ -980,31 +980,25 @@ body.property-promo-open{ overflow:hidden; }
min-height:480px;
overflow:hidden;
background:var(--sand);
- padding-right:38px;
}
.property-promo-media img{
width:100%;
height:100%;
object-fit:cover;
}
-.property-promo-spine{
+.property-promo-label{
position:absolute;
top:0;
- right:0;
- bottom:0;
- display:flex;
- width:38px;
- align-items:center;
- justify-content:center;
+ left:0;
background:var(--brass);
color:#fff;
font-family:var(--sans);
- font-size:10px;
+ font-size:11px;
font-weight:600;
- letter-spacing:.2em;
+ letter-spacing:.16em;
+ line-height:1;
+ padding:10px 15px;
text-transform:uppercase;
- writing-mode:vertical-rl;
- transform:rotate(180deg);
}
.property-promo-body{
align-self:center;
diff --git a/docs/assets/site.js b/docs/assets/site.js
index 1e47b0b..5219b20 100644
--- a/docs/assets/site.js
+++ b/docs/assets/site.js
@@ -272,7 +272,7 @@
'aria-labelledby="propertyPromoTitle" aria-describedby="propertyPromoDetails" tabindex="-1">' +
'<div class="property-promo-media">' +
'<img width="560" height="420">' +
- '<span class="property-promo-spine" aria-hidden="true">Mia\'s spotlight</span>' +
+ '<span class="property-promo-label">Featured listing</span>' +
'</div>' +
'<div class="property-promo-body">' +
'<p class="eyebrow property-promo-status"></p>' +
@@ -332,11 +332,6 @@
}
function onKeydown(event) {
- if (event.key === 'Escape') {
- event.preventDefault();
- closePopup();
- return;
- }
if (event.key !== 'Tab') return;
var focusable = Array.prototype.slice.call(
dialog.querySelectorAll('a[href],button:not([disabled])')
@@ -353,9 +348,6 @@
layer.querySelector('.property-promo-continue').addEventListener('click', closePopup);
view.addEventListener('click', closePopup);
- layer.addEventListener('click', function (event) {
- if (event.target === layer) closePopup();
- });
document.addEventListener('keydown', onKeydown);
document.body.appendChild(layer);
document.body.classList.add('property-promo-open');
diff --git a/docs/boca-raton-real-estate/index.html b/docs/boca-raton-real-estate/index.html
index 5f4d11e..7322a40 100644
--- a/docs/boca-raton-real-estate/index.html
+++ b/docs/boca-raton-real-estate/index.html
@@ -32,8 +32,8 @@
<link rel="manifest" href="/site.webmanifest">
<link rel="preload" href="/assets/fonts/fraunces-latin-var.woff2" as="font" type="font/woff2" crossorigin>
<script>document.documentElement.classList.add('js')</script>
-<link rel="stylesheet" href="/assets/site.css?v=20260827-popup">
-<script src="/assets/site.js?v=20260827-popup" defer></script>
+<link rel="stylesheet" href="/assets/site.css?v=20260827-popup2">
+<script src="/assets/site.js?v=20260827-popup2" defer></script>
</head>
<body>
diff --git a/docs/fort-lauderdale-real-estate/index.html b/docs/fort-lauderdale-real-estate/index.html
index 59e9272..564ebed 100644
--- a/docs/fort-lauderdale-real-estate/index.html
+++ b/docs/fort-lauderdale-real-estate/index.html
@@ -32,8 +32,8 @@
<link rel="manifest" href="/site.webmanifest">
<link rel="preload" href="/assets/fonts/fraunces-latin-var.woff2" as="font" type="font/woff2" crossorigin>
<script>document.documentElement.classList.add('js')</script>
-<link rel="stylesheet" href="/assets/site.css?v=20260827-popup">
-<script src="/assets/site.js?v=20260827-popup" defer></script>
+<link rel="stylesheet" href="/assets/site.css?v=20260827-popup2">
+<script src="/assets/site.js?v=20260827-popup2" defer></script>
</head>
<body>
diff --git a/docs/index.html b/docs/index.html
index f885194..a8938d7 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -45,8 +45,8 @@
imagesrcset="/assets/img/hero-fort-lauderdale-640w.webp 640w, /assets/img/hero-fort-lauderdale-960w.webp 960w, /assets/img/hero-fort-lauderdale.webp 1280w"
imagesizes="100vw" fetchpriority="high">
<script>document.documentElement.classList.add('js')</script>
-<link rel="stylesheet" href="/assets/site.css?v=20260827-popup">
-<script src="/assets/site.js?v=20260827-popup" defer></script>
+<link rel="stylesheet" href="/assets/site.css?v=20260827-popup2">
+<script src="/assets/site.js?v=20260827-popup2" defer></script>
</head>
<body>
diff --git a/docs/lighthouse-point-real-estate/index.html b/docs/lighthouse-point-real-estate/index.html
index 4986564..84de345 100644
--- a/docs/lighthouse-point-real-estate/index.html
+++ b/docs/lighthouse-point-real-estate/index.html
@@ -32,8 +32,8 @@
<link rel="manifest" href="/site.webmanifest">
<link rel="preload" href="/assets/fonts/fraunces-latin-var.woff2" as="font" type="font/woff2" crossorigin>
<script>document.documentElement.classList.add('js')</script>
-<link rel="stylesheet" href="/assets/site.css?v=20260827-popup">
-<script src="/assets/site.js?v=20260827-popup" defer></script>
+<link rel="stylesheet" href="/assets/site.css?v=20260827-popup2">
+<script src="/assets/site.js?v=20260827-popup2" defer></script>
</head>
<body>
diff --git a/docs/pompano-beach-real-estate/index.html b/docs/pompano-beach-real-estate/index.html
index 29ade06..7b070af 100644
--- a/docs/pompano-beach-real-estate/index.html
+++ b/docs/pompano-beach-real-estate/index.html
@@ -32,8 +32,8 @@
<link rel="manifest" href="/site.webmanifest">
<link rel="preload" href="/assets/fonts/fraunces-latin-var.woff2" as="font" type="font/woff2" crossorigin>
<script>document.documentElement.classList.add('js')</script>
-<link rel="stylesheet" href="/assets/site.css?v=20260827-popup">
-<script src="/assets/site.js?v=20260827-popup" defer></script>
+<link rel="stylesheet" href="/assets/site.css?v=20260827-popup2">
+<script src="/assets/site.js?v=20260827-popup2" defer></script>
</head>
<body>