From 5d3581aef7db2e1064ddec2074d90897627a3ce6 Mon Sep 17 00:00:00 2001
From: Sam Severance <swseverance@gmail.com>
Date: Sun, 10 May 2026 10:38:45 -0400
Subject: [PATCH 1/2] [site] Fix footer logos not rendering in Safari/WebKit,
 resolves #1470
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Safari requires a #fragment when referencing external SVGs via <use> —
a bare href like logo.svg is not supported. Fixed the Lit footer logo by
adding the existing #full fragment to its href.

The OpenJS logo has an additional complication: it uses a linearGradient
with url() references, which Safari cannot resolve across the <use>
shadow tree boundary even with a valid fragment. Replaced lazy-svg with
inlineSvg so the SVG becomes part of the host document, where url()
resolves correctly.
---
 packages/lit-dev-content/site/_includes/footer.html | 13 +++----------
 packages/lit-dev-content/site/css/footer.css        |  2 +-
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/packages/lit-dev-content/site/_includes/footer.html b/packages/lit-dev-content/site/_includes/footer.html
index c5558e296..5d3ee8a99 100644
--- a/packages/lit-dev-content/site/_includes/footer.html
+++ b/packages/lit-dev-content/site/_includes/footer.html
@@ -4,7 +4,7 @@
       <lazy-svg
         loading="visible"
         id="footerLitLogo"
-        href="{{ site.baseurl }}/images/logo.svg"
+        href="{{ site.baseurl }}/images/logo.svg#full"
         label="Lit"
       >
       </lazy-svg>
@@ -126,19 +126,12 @@
   <div id="footerBottom">
     <div id="footerCopyright">
       <a
+        id="footerOpenJSLogo"
         href="https://openjsf.org/"
         target="_blank"
         rel="noopener"
         title="OpenJS Foundation"
-        ><lazy-svg
-          loading="visible"
-          id="footerOpenJSLogo"
-          href="{{
-            site.baseurl
-          }}/images/openjs_foundation-logo-horizontal-color.svg"
-          label="OpenJS logo"
-        ></lazy-svg
-      ></a>
+        >{% inlineSvg 'images/openjs_foundation-logo-horizontal-color.svg', 'OpenJS logo' %}</a>
       <p>
         <a href="https://openjsf.org">The OpenJS Foundation</a> |
         <a href="https://terms-of-use.openjsf.org">Terms of Use</a> |
diff --git a/packages/lit-dev-content/site/css/footer.css b/packages/lit-dev-content/site/css/footer.css
index d26b8e5c1..19177965d 100644
--- a/packages/lit-dev-content/site/css/footer.css
+++ b/packages/lit-dev-content/site/css/footer.css
@@ -23,7 +23,7 @@
   height: 4em;
 }
 
-#footerOpenJSLogo {
+#footerOpenJSLogo svg {
   width: 10rem;
   height: 6rem;
 }

From 46a716c77c280fbd4531f32c353db9910d21cebf Mon Sep 17 00:00:00 2001
From: Sam Severance <swseverance@gmail.com>
Date: Sun, 10 May 2026 10:56:14 -0400
Subject: [PATCH 2/2] [site] Fix footerCopyright layout on mobile

Stack the OpenJS logo and links vertically on narrow screens and add
bottom margin to separate them from the copyright text below.
---
 packages/lit-dev-content/site/css/footer.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/lit-dev-content/site/css/footer.css b/packages/lit-dev-content/site/css/footer.css
index 19177965d..00c42e440 100644
--- a/packages/lit-dev-content/site/css/footer.css
+++ b/packages/lit-dev-content/site/css/footer.css
@@ -113,4 +113,9 @@
   #footerBottom {
     font-size: 0.8em;
   }
+
+  #footerCopyright {
+    flex-direction: column;
+    margin-bottom: 1rem;
+  }
 }