compress images

src/components/Promo/index.jsx

@@ -25,7 +25,7 @@ const Promo = () => {
         <source src="videos/sov-animation-loop-header-transcode.mp4" />
         <source src="videos/sov-animation-loop-header-transcode.webm" />
       </video>
-      <div className="absolute top-0 bottom-0 lg:top-auto lg:bottom-auto z-1 h-[326px] flex-col justify-start items-center lg:gap-14 inline-flex">
+      <div className="absolute top-[40px] sm:top-auto sm:bottom-auto z-1 h-[326px] flex-col justify-start items-center lg:gap-14 inline-flex">
         <div className="p-10 flex-col justify-start items-center gap-4 flex rounded-[40px] promo-shadow">
           <div className="h-7 px-[7px] bg-teal-400/10 rounded-[48px] border border-solid border-green-600/70 backdrop-blur-[36px] justify-center items-center inline-flex">
             <div className="self-stretch px-1.5 justify-center items-center gap-2 flex">
@@ -41,7 +41,7 @@ const Promo = () => {
             {SUBTITLE}
           </div>
         </div>
-        <div className="justify-center items-start gap-2 inline-flex">
+        <div className="justify-center items-start gap-2 inline-flex px-5">
           <Link
             to="/sovereign"
             className={clsx(

src/css/custom.css

@@ -375,17 +375,25 @@ h2.anchor code {
 
 /* -------------------- Start New ------------------- */
 html[data-has-hydrated="true"]:not(.docs-wrapper) #__docusaurus {
-  background: url("/img/theme/astronaut.png") right -20px top 80px no-repeat,
-    url("/img/theme/ray-opaque.png") right -50px top no-repeat,
+  background: image-set(
+        url("/img/theme/astronaut.webp") 1x,
+        url("/img/theme/[email protected]") 2x
+      )
+      right -20px top 80px no-repeat,
+    url("/img/theme/ray-opaque.webp") right -50px top no-repeat,
     var(--ifm-background-color);
   background-size: 45vw, 80vw, auto;
   background-blend-mode: normal, difference, normal;
 }
 
 html[data-has-hydrated="true"][data-theme="dark"]:not(.docs-wrapper)
   #__docusaurus {
-  background: url("/img/theme/astronaut.png") right -20px top 80px no-repeat,
-    url("/img/theme/ray.png") right -50px top no-repeat,
+  background: image-set(
+        url("/img/theme/astronaut.webp") 1x,
+        url("/img/theme/[email protected]") 2x
+      )
+      right -20px top 80px no-repeat,
+    url("/img/theme/ray.webp") right -50px top no-repeat,
     var(--ifm-background-color);
   background-size: 45vw, 80vw, auto;
   background-blend-mode: normal, lighten, normal;