chore: enhance spotlight responsiveness

Author: openscript

.changeset/pretty-oranges-kiss.md

@@ -0,0 +1,5 @@
+---
+"openscript-ch-website": patch
+---
+
+Enhance spotlight responsiveness

src/components/BackgroundIcon.astro

@@ -23,11 +23,11 @@ const { image, dominantColor, otherColor } = Astro.props;
     align-items: center;
     justify-content: flex-end;
     overflow: hidden;
-  }
 
-  .background-icon img {
-    height: 30%;
-    object-fit: contain;
-    z-index: 1;
+    img {
+      height: 30%;
+      object-fit: contain;
+      z-index: 1;
+    }
   }
 </style>

src/components/Carousel.astro

@@ -39,7 +39,6 @@ import Sprite from "./Sprite.astro";
     position: absolute;
     inset: 0;
     pointer-events: none;
-    height: 100%;
     padding: 0 calc(var(--size-carousel-buttons) + var(--size-gutter-big));
 
     > *:not(.active) {

src/layouts/sections/SpotlightSection.astro

@@ -26,15 +26,18 @@ import Carousel from "../../components/Carousel.astro";
       right: var(--size-page-padding);
     }
 
-    .active {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
+    .carousel-overlay > div {
       color: var(--color-white);
       font-size: 1.6rem;
       font-weight: bold;
+      height: 100%;
       padding: 0 var(--size-page-padding);
 
+      &.active {
+        display: flex;
+        flex-direction: column;
+      }
+
       &.align-center {
         align-items: center;
         justify-content: center;
@@ -67,5 +70,30 @@ import Carousel from "../../components/Carousel.astro";
         margin: 0;
       }
     }
+
+    @media screen and (max-width: 1025px) {
+      .background-icon {
+        align-items: flex-start;
+        justify-content: center;
+
+        img {
+          margin-inline-end: 0;
+          margin-block-start: 10%;
+        }
+      }
+      .carousel-overlay {
+        padding-block-end: 10%;
+      }
+
+      .carousel-overlay > div:is(.align-start, .align-center, .align-end) {
+        align-items: center;
+        justify-content: flex-end;
+        font-size: 1.2rem;
+
+        > * {
+          width: 90%;
+        }
+      }
+    }
   }
 </style>