/* * jcts-message-cards.css * * Card layout for the /Messages/{title} and /Testimony/{title} pages - the Messages and * Testimony dropdowns - and for the hand-written card grids on /Home/Events and /Home/Index. * * The filename says "message-cards" because that is where it started; it now covers all four. * The hand-written grids live in their own clearly marked block at the bottom and are opt-in * via a `jcts-card-grid` class, because their markup differs from the generated cards - see * that block's header. * * The card markup is generated into App_Data/StaticContent/*.html and injected via * @Html.Raw(ViewBag.Table) by Views/Home/Messages.cshtml and Views/Home/Testimony.cshtml, which * are the same template rendering out of the same directory. All 29 files come out of the same * generator and are structurally identical, so this sheet fixes every page at once - and it * fixes them without touching generated content that would be overwritten on the next run. * * Note the class names below say "testimony" throughout (.testimony-section, and the images' * alt='Testimony'). That is the generator's naming on *both* sets of pages, message pages * included - it is not a sign this sheet is scoped to the Testimony dropdown only. * * What was wrong, in the generated markup: * 1. The `box-shadow` is an inline style on the *grid column*, not on the card. Bootstrap * columns carry the gutter as padding, so the shadow was painted around the gutter box - * the shadows of adjacent cards butted up against each other and there was no visible gap. * 2. `.sermon-body` carries an inline `height: auto` that overrides the `height: 100%` in the * generated stylesheet, so cards in a row never matched heights and their audio players and * Share links sat at different heights. * 3. The card box had no padding, so text ran to the edge of the shadow. * 4. The image has `.rounded` but the shadowed box is square, so rounded corners sat inside * square ones. * 5. A dead `