Merge 36ef5f9 into db53c80

.changeset/many-suits-compare.md

@@ -0,0 +1,5 @@
+---
+"@sites/twind.style": patch
+---
+
+crop sponsors padding on mobile

documentation/introduction.md

@@ -59,7 +59,7 @@ This project is kindly sponsored by <a href="https://www.kenoxa.com" target="_bl
 
 Thank you to all our sponsors!
 
-<object data="/sponsors.svg" type="image/svg+xml">
+<object class="sponsors" data="/sponsors.svg" type="image/svg+xml">
   <img src="/sponsors.png" />
 </object>
 

sites/twind.style/src/lib/template/head.svelte

@@ -78,5 +78,22 @@
     href="https://imagedelivery.net/clgAS5HJ8HoJM1G5J8tcLA/ad127ccc-64a5-4460-d429-39ba2ab6ea00/180x180"
   />
 
+  <style>
+    /* fix for sponsors on mobile viewports */
+    /* the "sponsors" node is object with svg and img fallback */
+    /* those assets have doubled width, this logic will resize and crop it */
+    @media screen and (max-width: 1024px) {
+      .sponsors {
+        /* ancient syntax of getting center */
+        position: relative;
+        left: 50%;
+        transform: translateX(-50%);
+
+        /* scale to be 2 times bigger than parent, parent has overflow-hidden at this breakpoint */
+        width: 200%;
+      }
+    }
+  </style>
+
   <slot />
 </svelte:head>

sites/twind.style/src/routes/+page.svelte

@@ -104,7 +104,7 @@
 </section>
 
 <section
-  class="mt-4 lg:mt-8 prose prose-headings:scroll-mt-24 &>nav:hidden max-w-xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8"
+  class="mt-4 lg:mt-8 prose prose-headings:scroll-mt-24 &>nav:hidden max-w-xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8 overflow-hidden lg:overflow-visible"
 >
   {@html data.content}
 </section>