Applied itemsContainer styling from desktop to mobile as well

andromeda.css

@@ -1,3 +1,4 @@
+/* Set size of logo, depending on orientation */
 @media (orientation: landscape) {
     :root {
         --logo-width: clamp(34.08em, 40vw, 56.89em);
@@ -12,37 +13,72 @@
     }
 }
 
+/* Set size of background, depending on screen width */
+@media (max-width: 100em) {
+    /* Set static graphic width on smaller screens */
+    :root {
+        --background-width: 100rem;
+    }
+}
+@media (min-width: 100em) {
+    /* Set graphic to width of screen */
+    :root {
+        --background-width: 100%;
+    }
+}
+
 /* ============================== */
 /*  Global
 /* ============================== */
+/* Enable rem to match media queries */
+html {
+    font-size: unset !important;
+}
+body {
+    font-size: 93% !important;
+}
+
 /* Add Milky Way graphic to header */
 .skinHeader {
-    margin-top: -22.02vw;
+    /* Position graphic behind header */
+    margin-top: calc(-1 * (0.2202 * var(--background-width)));
     height: 100%;
-    padding-top: 22.02vw;
+    padding-top: calc(0.2202 * var(--background-width));
+    /* Add graphic */
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, 0) !important;
     background-image: url("https://static.zomerkoningin.nl/andromeda/images/milkyway_header.webp");
     background-repeat: no-repeat;
-    background-size: 100%;
+    background-size: var(--background-width) auto;
     background-position-x: center;
     background-position-y: top;
+    /* Pass-through clicks */
     pointer-events: none;
+    /* Keep header visible when scrolling on phone */
+    transform: unset !important;
 }
 .skinHeader > .headerTop {
     flex-grow: 0 !important;
 }
 .skinHeader > * {
+    /* Limit pass-through to graphic only */
     pointer-events: auto;
 }
+@media (min-width: 100em) {
+    /* Push content down from under graphic on wider screens */
+    div.skinBody > div.page {
+        padding-top: 15rem !important;
+    }
+}
 
 /* Add starry background */
 .backdropContainer {
     background-image: url("https://static.zomerkoningin.nl/andromeda/images/nightsky.webp");
-    background-size: 100%;
+    background-size: var(--background-width) auto;
+    background-position: center center;
 }
-.backgroundContainer:not(.withBackdrop) {
+.backgroundContainer {
-    background-color: rgba(0, 0, 0, 0) !important;
+    display: none;
 }
 
 /* Add fade-out to scrollable lists */
@@ -54,6 +90,7 @@ div:has(> div > .emby-scroller-container) {
 /* ============================== */
 /*  Homepage
 /* ============================== */
+/* Center sections on desktop */
 .layout-desktop .sections > div {
     margin-left: auto;
     margin-right: auto;
@@ -62,13 +99,25 @@ div:has(> div > .emby-scroller-container) {
     padding-right: unset !important;
 }
 
+/* Match padding to other pages on mobile */
+.layout-mobile .verticalSection > * {
+    padding-left: 5% !important;
+    padding-right: 5% !important;
+}
+
+/* Remove margin in favour of flex gap */
+.itemsContainer > * {
+    margin: unset !important;
+}
+
 /* ============================== */
 /*  Media detail page
 /* ============================== */
-/* Background */
+/* Remove backdrop used as padding on desktop */
 .layout-desktop .itemBackdrop {
     display: none;
 }
+/* Position backdrop on mobile */
 .layout-mobile .itemBackdrop {
     margin-top: unset;
 
@@ -79,29 +128,36 @@ div:has(> div > .emby-scroller-container) {
     width: 100%;
     height: 100%;
 }
-.layout-mobile .backgroundContainer {
-    background-color: rgba(0, 0, 0, 0.86);
-}
 
+/* Remove shadow in favour of starry background */
 .detailPagePrimaryContainer {
     background-color: transparent !important;
 }
 
-/* Logo */
+/* Show stars in background */
+.layout-desktop .backdropContainer > .backdropImage {
+    opacity: 0.14 !important;
+}
+.layout-mobile .itemBackdrop {
+    opacity: 0.14 !important;
+}
+
+/* Instead of an element as padding, use a pseudo-element */
 .layout-desktop .libraryPage.itemDetailPage::before {
+    /* Increase padding along screen width */
     height: calc(30vw - var(--logo-height));
     max-height: 13.35em;
 }
 .layout-mobile .libraryPage.itemDetailPage::before {
+    /* Use static padding on mobile */
     height: 10.3em;
 }
 .libraryPage.itemDetailPage::before {
     display: block;
-    height: calc(30vw - var(--logo-height));
-    max-height: 13.35em;
     content: "";
 }
 
+/* Position logo after padding */
 .layout-mobile .detailLogo {
     display: block;
 }
@@ -120,7 +176,7 @@ div:has(> div > .emby-scroller-container) {
     background-position: bottom;
 }
 
-/* Poster */
+/* Hide poster */
 .detailImageContainer {
     display: none;
 }
@@ -142,6 +198,12 @@ div:has(> div > .emby-scroller-container) {
     background: rgba(0,0,0,0) !important;
 }
 
+/* Add padding to titles on mobile */
+.layout-mobile .nameContainer > * {
+    padding-left: 5% !important;
+    padding-right: 5% !important;
+}
+
 /* Media title */
 .nameContainer h1 {
     /* Position on top of logo to keep link */
@@ -168,17 +230,20 @@ div:has(> div > .emby-scroller-container) {
     font-size: var(--logo-height);
 }
 
-/* Season */
+/* Episode title */
 .nameContainer h3.itemName.infoText.subtitle bdi {
     display: flex;
     flex-direction: column;
     place-items: center;
     gap: 1em;
+    font-size: larger;
+
+    /* Hide characters left by moving around season title */
     text-indent: -1ch;
     overflow: hidden;
-    font-size: larger;
 }
 
+/* Season title */
 .nameContainer h3.itemName.infoText.subtitle bdi [data-type="Season"] {
     text-indent: 0;
     font-size: .72em;
@@ -211,12 +276,17 @@ div:has(> div > .emby-scroller-container) {
     background: rgba(0,0,0,0);
 }
 .layout-desktop .detailPageContent {
-    padding: unset !important;
-
     width: 75%;
     margin-left: auto;
     margin-right: auto;
 }
+.layout-mobile .detailPageContent > div > * {
+    padding-left: 5% !important;
+    padding-right: 5% !important;
+}
+.detailPageContent {
+    padding: unset !important;
+}
 
 /* Disable right padding */
 .layout-desktop .detailPageContent .padded-right {
@@ -279,17 +349,17 @@ div:has(> div > .emby-scroller-container) {
 
 /* List of seasons */
 /* Replace margin with gap */
-.layout-desktop .itemsContainer {
+.itemsContainer {
+    display: flex;
     gap: 1.2em;
 }
-.layout-desktop .itemsContainer > .card > .cardBox {
+.itemsContainer > .card > .cardBox {
     margin-right: unset !important;
 }
-
+.itemsContainer.padded-right:not(.padded-left) {
-.layout-desktop .itemsContainer.padded-right:not(.padded-left) {
     padding: unset !important; /* Remove right padding if left padding is not present */
 }
-.layout-desktop .itemsContainer.vertical-wrap {
+.itemsContainer.vertical-wrap {
     justify-content: center; /* Only center if wrapping is enabled */
 }