patx/demo
add jdb twitter og card
Commit 80e440f · patx · 2026-06-15T16:56:19-04:00
Comments
No comments yet.
Diff
diff --git a/docs/jdb-og.jpg b/docs/jdb-og.jpg
new file mode 100644
index 0000000..df679e9
Binary files /dev/null and b/docs/jdb-og.jpg differ
diff --git a/docs/jdb.html b/docs/jdb.html
index be503f9..24dcc3f 100644
--- a/docs/jdb.html
+++ b/docs/jdb.html
@@ -4,6 +4,19 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JDB Landscape — Burlington, ON</title>
+<meta name="description" content="JDB Landscape provides owner-operated hardscapes, lawn care, garden bed renovations, sod, mulch, clean-ups and junk removal across Burlington, Oakville, Hamilton, Mississauga, Milton and Niagara Region.">
+<meta property="og:type" content="website">
+<meta property="og:title" content="JDB Landscape — Burlington, ON">
+<meta property="og:description" content="Owner-operated landscaping, hardscapes and lawn care across Burlington and nearby service areas.">
+<meta property="og:image" content="jdb-og.jpg">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta property="og:image:alt" content="JDB Landscape services in Burlington, Ontario">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="JDB Landscape — Burlington, ON">
+<meta name="twitter:description" content="Owner-operated landscaping, hardscapes and lawn care across Burlington and nearby service areas.">
+<meta name="twitter:image" content="jdb-og.jpg">
+<meta name="twitter:image:alt" content="JDB Landscape services in Burlington, Ontario">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,600;0,700;1,300;1,600&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
@@ -30,24 +43,6 @@ body {
overflow-x: hidden;
}
-/* ─── CURSOR DOT ─── */
-.cursor {
- position: fixed; pointer-events: none; z-index: 9999;
- width: 8px; height: 8px; border-radius: 50%;
- background: var(--rust);
- transform: translate(-50%,-50%);
- transition: transform .08s, width .25s, height .25s, opacity .25s;
- mix-blend-mode: multiply;
-}
-.cursor-ring {
- position: fixed; pointer-events: none; z-index: 9998;
- width: 32px; height: 32px; border-radius: 50%;
- border: 1px solid rgba(184,92,56,.4);
- transform: translate(-50%,-50%);
- transition: transform .18s ease, width .25s, height .25s, opacity .2s;
-}
-body:hover .cursor { opacity: 1; }
-
/* ─── NAV ─── */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
@@ -837,7 +832,6 @@ footer {
@media (prefers-reduced-motion: reduce) {
.sr { opacity: 1; transform: none; transition: none; }
- .cursor, .cursor-ring { display: none; }
.hero-slide {
animation: none;
transform: scale(1.03);
@@ -959,10 +953,6 @@ footer {
</head>
<body>
-<!-- Custom cursor -->
-<div class="cursor" id="cur"></div>
-<div class="cursor-ring" id="cur-ring"></div>
-
<!-- ─── NAV ─── -->
<nav id="mainNav" aria-label="Primary navigation">
<a href="#hero" class="nav-wordmark">
@@ -1441,24 +1431,6 @@ footer {
</div>
<script>
-// ─── CURSOR ───
-const cur = document.getElementById('cur');
-const ring = document.getElementById('cur-ring');
-let mx = 0, my = 0, rx = 0, ry = 0;
-
-document.addEventListener('mousemove', e => {
- mx = e.clientX; my = e.clientY;
- cur.style.left = mx + 'px'; cur.style.top = my + 'px';
-});
-
-function animRing() {
- rx += (mx - rx) * .12;
- ry += (my - ry) * .12;
- ring.style.left = rx + 'px'; ring.style.top = ry + 'px';
- requestAnimationFrame(animRing);
-}
-animRing();
-
// ─── NAV ───
const nav = document.getElementById('mainNav');
const navToggle = document.querySelector('.nav-menu-toggle');