test: approve automated portfolio visual quality

src/styles/world.css

@@ -28,9 +28,23 @@
 .journey-poster {
   object-fit: cover;
   background:
-    radial-gradient(circle at 50% 53%, rgb(247 105 115 / 82%) 0 7%, transparent 7.3%),
-    linear-gradient(165deg, transparent 0 60%, rgb(73 198 215 / 34%) 60.2% 60.5%, transparent 60.7%),
-    linear-gradient(195deg, transparent 0 60%, rgb(73 198 215 / 34%) 60.2% 60.5%, transparent 60.7%),
+    radial-gradient(
+      circle at 50% 53%,
+      rgb(247 105 115 / 82%) 0 7%,
+      transparent 7.3%
+    ),
+    linear-gradient(
+      165deg,
+      transparent 0 60%,
+      rgb(73 198 215 / 34%) 60.2% 60.5%,
+      transparent 60.7%
+    ),
+    linear-gradient(
+      195deg,
+      transparent 0 60%,
+      rgb(73 198 215 / 34%) 60.2% 60.5%,
+      transparent 60.7%
+    ),
     linear-gradient(180deg, #050817 0 48%, #24142c 67%, #080c17 100%);
 }
 
@@ -121,7 +135,7 @@
   color: var(--text);
 }
 
-.drive-controls input[type='range'] {
+.drive-controls input[type="range"] {
   inline-size: 7rem;
   accent-color: var(--cyan);
 }
@@ -157,13 +171,6 @@
     scroll-margin-block-end: 11rem;
   }
 
-  .journey-hud {
-    inset: 0.5rem 0.5rem auto auto;
-    min-inline-size: 0;
-    padding: 0.5rem;
-    font-size: 0.72rem;
-  }
-
   .journey-hud__quality {
     display: none;
   }
@@ -181,6 +188,75 @@
   }
 }
 
+@media (max-width: 1024px) and (min-height: 421px) {
+  .site-header {
+    padding-block-start: calc(
+      var(--space-4) + var(--site-navigation-block-size) + 32px
+    );
+  }
+
+  .journey-hud {
+    inset: var(--site-navigation-block-size) 0 auto;
+    display: flex;
+    min-block-size: 32px;
+    min-inline-size: 0;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.6rem;
+    padding: 0.35rem 0.75rem;
+    border-inline: 0;
+    font-size: 0.7rem;
+  }
+
+  .journey-hud__arrival {
+    grid-column: auto;
+  }
+}
+
+@media (max-width: 420px) and (min-height: 421px) {
+  .drive-controls {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    inline-size: calc(100% - 1rem);
+    gap: 0.35rem;
+    font-size: 0.72rem;
+  }
+
+  .drive-controls__audio-start,
+  .drive-controls__audio {
+    display: contents;
+  }
+
+  .drive-controls > button,
+  .drive-controls__audio-start button,
+  .drive-controls__audio button {
+    inline-size: 100%;
+    padding-inline: 0.45rem;
+  }
+
+  .drive-controls__audio-start span,
+  .drive-controls__audio > label {
+    grid-column: 1 / -1;
+  }
+
+  .drive-controls > label {
+    min-inline-size: 0;
+    gap: 0.25rem;
+    white-space: nowrap;
+  }
+
+  .drive-controls > label select {
+    inline-size: 4.6rem;
+    min-inline-size: 0;
+  }
+
+  .drive-controls__status {
+    grid-column: 2;
+    margin: 0;
+    align-self: center;
+  }
+}
+
 @media (max-height: 420px) {
   .journey-hud {
     display: none;
@@ -201,7 +277,11 @@
 @media (prefers-reduced-motion: reduce) {
   .journey-poster {
     background:
-      radial-gradient(circle at 50% 53%, rgb(247 105 115 / 48%) 0 7%, transparent 7.3%),
+      radial-gradient(
+        circle at 50% 53%,
+        rgb(247 105 115 / 48%) 0 7%,
+        transparent 7.3%
+      ),
       linear-gradient(180deg, #050817 0 48%, #24142c 67%, #080c17 100%);
   }
 }