test: approve automated portfolio visual quality

src/styles/layout.css

@@ -1,3 +1,7 @@
+:root {
+  --site-navigation-block-size: 45px;
+}
+
 .portfolio-shell {
   min-width: 0;
 }
@@ -6,7 +10,8 @@
   display: grid;
   gap: var(--space-2);
   min-width: 0;
-  padding: calc(var(--space-4) + 44px) 4vw var(--space-3);
+  padding: calc(var(--space-4) + var(--site-navigation-block-size)) 4vw
+    var(--space-3);
   border-block-end: var(--panel-border);
   background: #0b111b;
 }
@@ -24,7 +29,7 @@
   position: fixed;
   z-index: 3;
   inset: 0 0 auto;
-  min-block-size: 44px;
+  block-size: var(--site-navigation-block-size);
   border-block-end: var(--panel-border);
   background: rgb(7 13 23 / 94%);
   backdrop-filter: blur(10px);
@@ -33,6 +38,7 @@
 .site-navigation ul {
   display: grid;
   grid-template-columns: repeat(8, minmax(0, 1fr));
+  grid-auto-rows: 44px;
   gap: 0.25rem;
   max-inline-size: 90rem;
   margin: 0;
@@ -42,6 +48,7 @@
 
 .site-navigation a {
   display: inline-flex;
+  inline-size: 100%;
   align-items: center;
   min-block-size: 44px;
   justify-content: center;
@@ -51,7 +58,9 @@
   font-size: var(--step--1);
   letter-spacing: 0.04em;
   text-decoration: none;
-  transition: color var(--transition), background-color var(--transition);
+  transition:
+    color var(--transition),
+    background-color var(--transition);
 }
 
 .site-navigation a:hover,
@@ -60,6 +69,10 @@
   color: var(--text);
 }
 
+.site-navigation a:focus-visible {
+  outline-offset: -3px;
+}
+
 .portfolio-main {
   min-width: 0;
   padding-block: var(--space-4) var(--space-5);
@@ -70,12 +83,16 @@
   min-width: 0;
   margin: 0 1rem var(--space-4);
   padding: var(--space-3);
-  scroll-margin-block-start: calc(44px + var(--space-3));
+  scroll-margin-block-start: calc(
+    var(--site-navigation-block-size) + var(--space-3)
+  );
   border: var(--panel-border);
   border-radius: 2px;
   background: var(--surface);
   box-shadow: var(--panel-shadow);
-  transition: border-color var(--transition), background-color var(--transition);
+  transition:
+    border-color var(--transition),
+    background-color var(--transition);
 }
 
 .portfolio-section:hover {
@@ -96,8 +113,14 @@
 }
 
 @media (max-width: 767px) {
+  :root {
+    --site-navigation-block-size: 93px;
+  }
+
   .site-header {
-    padding-block-start: calc(var(--space-4) + 88px);
+    padding-block-start: calc(
+      var(--space-4) + var(--site-navigation-block-size)
+    );
   }
 
   .site-navigation ul {
@@ -113,7 +136,9 @@
   }
 
   .portfolio-section {
-    scroll-margin-block-start: calc(88px + var(--space-3));
+    scroll-margin-block-start: calc(
+      var(--site-navigation-block-size) + var(--space-3)
+    );
   }
 
   .project-link,

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%);
   }
 }