diff --git a/PlotLine/wwwroot/css/onboarding.css b/PlotLine/wwwroot/css/onboarding.css index a88e86d..517c104 100644 --- a/PlotLine/wwwroot/css/onboarding.css +++ b/PlotLine/wwwroot/css/onboarding.css @@ -597,11 +597,32 @@ } .story-live-progress { - max-width: 980px; + width: min(1180px, 100%); + max-width: none; + padding: clamp(1.25rem, 2vw, 1.75rem); } .story-live-hero h1 { - font-size: clamp(2.4rem, 5vw, 4rem); + white-space: nowrap; + font-size: clamp(2.6rem, 4vw, 3.6rem); +} + +.story-live-hero { + max-width: none; + margin-bottom: 1rem; +} + +.story-live-hero p:not(.eyebrow) { + max-width: 780px; +} + +.story-live-progress > .alert { + margin-bottom: .85rem; + padding: .65rem .9rem; +} + +.story-live-progress > .alert-info { + white-space: nowrap; } .story-live-progress-card, @@ -616,8 +637,8 @@ .story-live-progress-card { display: grid; - gap: 1rem; - padding: 1.2rem; + gap: .65rem; + padding: .9rem; } .story-live-progress-heading, @@ -630,7 +651,7 @@ .story-live-progress-heading strong { display: block; - font-size: clamp(2rem, 5vw, 3.5rem); + font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1; } @@ -652,7 +673,11 @@ .story-review-scene-panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: .75rem; + gap: .65rem; +} + +.story-live-stats { + grid-template-columns: repeat(5, minmax(0, 1fr)); } .story-live-stats div, @@ -661,7 +686,7 @@ min-width: 0; border: 1px solid rgba(31, 42, 68, .1); border-radius: 8px; - padding: .8rem; + padding: .65rem .75rem; background: rgba(255, 255, 255, .58); } @@ -681,15 +706,17 @@ display: block; margin-top: .15rem; font-size: 1.12rem; + line-height: 1.2; + white-space: nowrap; } .story-live-current, .story-live-feed-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); - gap: 1rem; - margin-top: 1rem; - padding: 1rem; + gap: .85rem; + margin-top: .75rem; + padding: .9rem; } .story-live-current h2, @@ -700,9 +727,33 @@ } .story-live-feed-grid { + grid-template-columns: 1fr; align-items: start; } +.story-live-feed-grid > div { + min-width: 0; +} + +.story-live-feed-grid h2 { + margin-bottom: .55rem; +} + +.story-latest-summary[data-story-latest-summary] { + padding: 1.1rem 1.15rem; + border-left-width: 6px; + font-size: 1.12rem; + line-height: 1.55; +} + +.story-live-feed-grid [data-story-latest-empty] { + margin: 0; + padding: 1rem 1.1rem; + border-left: 6px solid #2f6f63; + border-radius: 8px; + background: rgba(47, 111, 99, .08); +} + .story-review-page { display: grid; gap: 1rem; @@ -1140,6 +1191,12 @@ flex-direction: column; } + .story-live-hero h1, + .story-live-progress > .alert-info, + .story-live-stats strong { + white-space: normal; + } + .onboarding-build-panel, .onboarding-success-heading { grid-template-columns: 1fr;