diff --git a/styles/ringbrp.css b/styles/ringbrp.css index da70305..94abe80 100644 --- a/styles/ringbrp.css +++ b/styles/ringbrp.css @@ -139,12 +139,36 @@ Header — identity ============================================================ */ +/* Two columns: who they are on the left, how they are on the right. + The vitals row is the widest thing in the right column, so the derived numbers + and the readied weapons stack underneath it and take their width from it. That + is what fills the header — it used to be one flex row with the vitals pinned to + the top, which left the whole area under them empty. It also puts damage + modifier and readied weapons next to hit points, where they are actually read. */ .rb-header { - display: flex; gap: 14px; align-items: flex-start; + display: grid; + grid-template-columns: minmax(320px, 1fr) minmax(0, 1.6fr); + gap: 10px 14px; align-items: start; padding: 12px 14px 10px; background: transparent; border-bottom: 3px solid var(--rb-yellow); } +.rb-ident { display: flex; gap: 14px; align-items: flex-start; min-width: 0; } +.rb-status { display: flex; flex-direction: column; gap: 8px; min-width: 0; } +/* Inside the header these two are panels, not full-width bands, so they lose the + page-width padding and rule and gain a border of their own. */ +.rb-status > .rb-derived, +.rb-status > .rb-weaponstrip { + padding: 6px 10px; border: 1px solid var(--rb-hairline); + /* width:0 + min-width:100% keeps these OUT of the auto track's max-content + measurement, so the column is sized by the vitals row and these stretch to + match it. Without it the readied-weapons line — which is as long as the + weapon names happen to be — sets the column width and crushes the portrait + and name into a 190px gutter. */ + width: 0; min-width: 100%; +} +.rb-status > .rb-derived { gap: 14px; } +.rb-status > .rb-weaponstrip { gap: 12px; } .rb-portrait { width: 84px; height: 84px; flex: 0 0 84px; object-fit: cover; border: 1px solid var(--rb-line); background: var(--rb-void); @@ -179,7 +203,7 @@ } /* --- vitals: HP reads as one expression --- */ -.rb-vitals { display: flex; gap: 8px; align-items: stretch; } +.rb-vitals { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; } .rb-vitals > div { min-width: 78px; padding: 6px 10px; text-align: center; background: var(--rb-void); border: 1px solid var(--rb-line); diff --git a/templates/character-sheet.hbs b/templates/character-sheet.hbs index 3fb2a61..da31033 100644 --- a/templates/character-sheet.hbs +++ b/templates/character-sheet.hbs @@ -1,6 +1,7 @@