CSS workarounds

2 files changed, 52 insertions, 32 deletions

diff --git a/src/components/landing/sections/Software.module.css b/src/components/landing/sections/Software.module.css
index 758a848..fddc727 100644
--- a/src/components/landing/sections/Software.module.css
+++ b/src/components/landing/sections/Software.module.css
@@ -29,8 +29,6 @@
   grid-row: 1 / span 2;
   min-height: 200px;
   overflow: hidden;
-  background-size: cover;
-  background-position: center center;
   --ifm-color-primary: #038a99;
   --ifm-color-primary-dark: #037c8a;
   --ifm-color-primary-darker: #037582;
@@ -73,22 +71,25 @@
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 1;
+  z-index: -1;
   object-fit: cover;
   transition: transform var(--ifm-transition-fast) ease;
 }
 
-.software--refinery:hover .refinery__background,
-.software--refinery:focus-within .refinery__background {
+.software--refinery:has(.cover-link:hover) .refinery__background,
+.software--refinery:has(.cover-link:focus) .refinery__background {
   transform: scale(140%);
 }
 
 .content {
   position: relative;
   height: 100%;
-  z-index: 99;
   display: flex;
   flex-direction: column;
+  background-size: cover;
+  background-position: center center;
+  /* Force browser rendering before transform. */
+  filter: blur(0px);
 }
 
 .content--refinery {
@@ -201,6 +202,7 @@
 
 .screenshot__backdrop {
   display: none;
+  z-index: -2;
   background-size: cover;
   background-position: center center;
 }
@@ -210,13 +212,17 @@
   display: block;
 }
 
-.screenshot, .screenshot__backdrop {
+.screenshot,
+.screenshot__backdrop {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 1;
+}
+
+.screenshot {
+  z-index: -1;
 }
 
 .content--screenshot {
@@ -336,6 +342,7 @@
 
   .software-grid {
     grid-template: min-content / 1fr;
+    gap: 1.5rem;
   }
 
   .software {
@@ -351,6 +358,7 @@
   .overlay--screenshot {
     padding: 1rem 2rem 2rem 2rem;
     font-size: 1rem;
+    transform: none;
   }
 }
 
diff --git a/src/components/landing/sections/Software.tsx b/src/components/landing/sections/Software.tsx
index 577939c..c44a6ad 100644
--- a/src/components/landing/sections/Software.tsx
+++ b/src/components/landing/sections/Software.tsx
@@ -23,10 +23,10 @@ import styles from './Software.module.css';
 import FerdiumLogo from './ferdium.svg';
 import refineryBackground from './refinery-background.png?placeholder=true&sizes[]=767&sizes[]=997&sizes[]=1534&sizes[]=1920&rl';
 import RefineryLogo from './refinery-logo.svg';
-import refineryScreenshotDark from './refinery-screenshot-dark.png?placeholder=true&sizes[]=767&sizes[]=997&sizes[]=1534&sizes[]=1920&rl';
-import refineryScreenshotLight from './refinery-screenshot-light.png?placeholder=true&sizes[]=767&sizes[]=997&sizes[]=1534&sizes[]=1920&rl';
+import refineryScreenshotDark from './refinery-screenshot-dark.png?placeholder=true&sizes[]=997&sizes[]=1920&format=png&rl';
+import refineryScreenshotLight from './refinery-screenshot-light.png?placeholder=true&sizes[]=997&sizes[]=1920&format=png&rl';
 
-function Screenshot() {
+function ScreenshotImage() {
   // Force re-render in browser.
   // https://github.com/facebook/docusaurus/blob/e012e0315862b2ca02cad40c58d11d31c319ff75/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx#L32-L36
   const isBrowser = useIsBrowser();
@@ -48,34 +48,46 @@ function Screenshot() {
     />
   );
 
+  return isBrowser ? screenshot : <noscript>{screenshot}</noscript>;
+}
+
+function Screenshot() {
   return (
     <div
-      key={String(isBrowser)}
       className={clsx(
         styles.software,
         styles['software--interactive'],
         styles['software--screenshot'],
       )}
       style={{
-        aspectRatio: refineryScreenshot.width / refineryScreenshot.height,
+        aspectRatio:
+          refineryScreenshotDark.width / refineryScreenshotDark.height,
       }}
     >
       <div className={clsx(styles.content, styles['content--screenshot'])}>
         <div
-          className={clsx(styles.screenshot__backdrop, styles['screenshot__backdrop--light'])}
+          className={clsx(
+            styles.screenshot__backdrop,
+            styles['screenshot__backdrop--light'],
+          )}
           style={{
-            aspectRatio: refineryScreenshotDark.width / refineryScreenshotDark.height,
+            aspectRatio:
+              refineryScreenshotDark.width / refineryScreenshotDark.height,
             backgroundImage: `url(${refineryScreenshotDark.placeholder})`,
           }}
         />
         <div
-          className={clsx(styles.screenshot__backdrop, styles['screenshot__backdrop--dark'])}
+          className={clsx(
+            styles.screenshot__backdrop,
+            styles['screenshot__backdrop--dark'],
+          )}
           style={{
-            aspectRatio: refineryScreenshotLight.width / refineryScreenshotLight.height,
+            aspectRatio:
+              refineryScreenshotLight.width / refineryScreenshotLight.height,
             backgroundImage: `url(${refineryScreenshotLight.placeholder})`,
           }}
         />
-        {isBrowser ? screenshot : <noscript>{screenshot}</noscript>}
+        <ScreenshotImage />
         <div
           className={clsx(
             styles.overlay,
@@ -88,7 +100,7 @@ function Screenshot() {
               href="https://refinery.services"
               className={styles.screenshot__link}
             >
-              Try Refinery in your browser!
+              Try Refinery in your browser
             </Link>
           </p>
         </div>
@@ -109,23 +121,23 @@ export default function Software() {
                 styles['software--interactive'],
                 styles['software--refinery'],
               )}
-              style={{
-                backgroundImage: `url(${refineryBackground.placeholder})`,
-              }}
             >
-              <img
-                src={refineryBackground.src}
-                srcSet={refineryBackground.srcSet}
-                width={refineryBackground.width}
-                height={refineryBackground.height}
-                sizes="(min-width: 1440px) 767px, (min-width: 1384px) 659px, (min-width: 997px) calc(60vw - 64px), calc(100vw - 32px)"
-                loading="lazy"
-                alt=""
-                className={styles.refinery__background}
-              />
               <div
                 className={clsx(styles.content, styles['content--refinery'])}
+                style={{
+                  backgroundImage: `url(${refineryBackground.placeholder})`,
+                }}
               >
+                <img
+                  src={refineryBackground.src}
+                  srcSet={refineryBackground.srcSet}
+                  width={refineryBackground.width}
+                  height={refineryBackground.height}
+                  sizes="(min-width: 1440px) 767px, (min-width: 1384px) 659px, (min-width: 997px) calc(60vw - 64px), calc(100vw - 32px)"
+                  loading="lazy"
+                  alt=""
+                  className={styles.refinery__background}
+                />
                 <h3 className={styles.refinery__heading}>
                   <RefineryLogo className={styles.refinery__logo} />
                   <Link