Focus on content

htdocs/static/home.css

@@ -217,6 +217,7 @@ main {
 .hero-inner {
     position: relative;
     z-index: 1;
+    min-width: 0;
     max-width: 780px;
 }
 
@@ -353,7 +354,9 @@ main {
 }
 
 .intro-section,
-.featured-section {
+.featured-section,
+.films-section,
+.services-section {
     max-width: 1600px;
     margin-inline: auto;
 }
@@ -414,6 +417,23 @@ main {
     border-top: 3px solid var(--blue);
 }
 
+.path-game {
+    border-top: 3px solid var(--red);
+}
+
+.path-grid,
+.gaming-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.gaming-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.gaming-grid .project-card:last-child {
+    grid-column: auto;
+}
+
 .path-play {
     border-top: 3px solid var(--peach);
 }
@@ -446,6 +466,156 @@ main {
     padding-top: 2rem;
 }
 
+.film-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1.5rem;
+}
+
+.media-card {
+    padding: 0;
+    overflow: hidden;
+}
+
+.media-image {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    background: var(--page-deep);
+    isolation: isolate;
+}
+
+.media-image img {
+    display: block;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+}
+
+.media-label {
+    position: absolute;
+    right: 1rem;
+    bottom: 1rem;
+    left: 1rem;
+    width: fit-content;
+    max-width: calc(100% - 2rem);
+    padding: 0.45rem 0.8rem;
+    color: #cdd6f4;
+    background: #181825;
+    border: 1px solid #45475a;
+    border-radius: 0.5rem;
+    font-size: 0.8rem;
+    font-weight: 750;
+}
+
+.media-copy {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    padding: clamp(1.35rem, 2.5vw, 2rem);
+}
+
+.media-copy > .text-link {
+    margin-top: auto;
+}
+
+.music-section {
+    display: block;
+    background: var(--page-deep);
+    border-block: 1px solid var(--border);
+}
+
+.music-copy {
+    max-width: 650px;
+    margin-bottom: 2rem;
+}
+
+.music-copy > p:not(.eyebrow) {
+    font-size: 1.05rem;
+}
+
+.music-feature {
+    border: 1px solid var(--border);
+    border-radius: 1.1rem;
+}
+
+.latest-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.feed-status {
+    font-size: 0.85rem;
+    color: var(--muted);
+}
+
+.feed-empty {
+    grid-column: 1 / -1;
+    padding: 1.5rem;
+    border: 1px solid var(--border);
+    border-radius: 0.75rem;
+}
+
+.media-card .media-image {
+    aspect-ratio: 16 / 9;
+}
+
+.media-copy time {
+    margin-block: 0.25rem 1rem;
+    color: var(--muted);
+    font-size: 0.85rem;
+}
+
+.collection-controls {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.8rem 1.25rem;
+    margin-bottom: 1.25rem;
+}
+
+.collection-controls label {
+    font-weight: 700;
+}
+
+.collection-controls select {
+    max-width: 100%;
+    min-width: 0;
+    padding: 0.8rem;
+    color: var(--text);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    font: inherit;
+}
+
+.collection-controls select:focus-visible {
+    outline: 3px solid var(--peach);
+    outline-offset: 4px;
+}
+
+.workshop-recordings {
+    margin-top: 3rem;
+}
+
+.project-card h3 {
+    overflow-wrap: anywhere;
+}
+
+.project-meta {
+    color: var(--muted);
+    font-size: 0.85rem;
+}
+
+.project-summary {
+    padding-left: 0.8rem;
+    border-left: 2px solid var(--accent);
+}
+
+.project-empty {
+    grid-column: 1 / -1;
+}
+
 .service-mark img {
     width: 2rem;
     height: 2rem;
@@ -621,6 +791,7 @@ main {
 }
 
 .support-copy {
+    min-width: 0;
     max-width: 620px;
 }
 
@@ -749,13 +920,13 @@ main {
         font-size: 0.76rem;
     }
 
-    .home-menu .pure-menu-item:nth-child(3) {
+    .home-menu .nav-about {
         display: none;
     }
 
     .hero {
         min-height: auto;
-        grid-template-columns: 1fr;
+        grid-template-columns: minmax(0, 1fr);
         padding: 4.5rem 1.35rem 3.5rem;
     }
 
@@ -794,7 +965,9 @@ main {
     }
 
     .path-grid,
-    .project-grid {
+    .project-grid,
+    .film-grid,
+    .music-section {
         grid-template-columns: 1fr;
     }
 
@@ -835,7 +1008,7 @@ main {
     }
 
     .support-section {
-        grid-template-columns: 1fr;
+        grid-template-columns: minmax(0, 1fr);
         gap: 1.5rem;
         padding: 3.5rem 1.25rem;
     }
@@ -855,7 +1028,12 @@ main {
 }
 
 @media (max-width: 380px) {
-    .home-menu .pure-menu-item:nth-child(2) {
+    .home-menu .pure-menu-link {
+        padding-inline: 0.3rem;
+        font-size: 0.72rem;
+    }
+
+    .home-menu .pure-menu-item:nth-child(3) {
         display: none;
     }
 }