Implement full node content widths to match designs

Reviewers please test the following:

Review the previous issues for teasers and the layout.css file on the MRs https://www.drupal.org/project/drupal_cms/issues/3491807 📌 Style blog/news teaser as cards Active and https://www.drupal.org/project/drupal_cms/issues/3491817 📌 Implement designs for event teaser/listing page within Olivero Active

Check the teaser pages (e.g. events teasers, blog teasers) with various numbers of items. The CSS change for this issue should retain the layouts applied by the two above issues to teaser cards.

Check full node content in CKEditor with a blockquote and images to the side of text . Confirm that the narrower width is restored and matches the designs as intended (see the related issues #3491813, #3491811, #3491814 and #3491816 for the designs). The quotation mark of the blockquote should break out of the container to the left.

Generally check that layouts look good.

@tonypaulbarker tested but I'm seeing that with basic page, the title area is restricted but everything else is wide, and for e.g. blog everything is wide if there are teaser cards but otherwise narrow (including blockquote etc). This does match what I would expect based on the CSS change.

@pameeela it seemed to work for me for basic pages. I did expect that if teaser cards were present that it would not be narrow with these rules. I’ll see what we can do and I’ll have a deeper look across all the contexts.

Have pushed work in progress that targets grid column rules at the blocks. Haven't tested yet so leaving marked as 'needs work'.

A more robust way to accomplish this might be to unset the parent grid and then use layout builder section layouts.

Note to self: The blockquote breaking out of the container seems to kick in only when using ‘narrow’ instead of ‘medium’ layout class and that breaks some other stuff.

I agree with reverting the override I did in layout.css, but I don't think the other stuff will work.

Because these full page displays are setup using layout builder we really should be using layout builder to manage these different widths.

From what I can see Olivero has 3 widths, `layout--content-medium` and `layout--content-narrow` and the `wide-content` class (which has a big negative margin).

Since medium is set on the region it's essentially the default width. We just need a layout option for narrow and wide.

When building out the blog full page layout (for example) we can put the feature image in a wide section, the content in a narrow section (the blockquotes etc should still work), tags and related blog view in wide sections, etc. Rather than having everything in one section and trying to massage the different widths in via css/preprocess/twig etc.

I'd question where the layout config should live and how it should be done... 2 new single column layouts is probably the simplest approach. Ideally though they would be layout modifiers that all the layouts can use.

That said, I can get this working by not changing much and just preprocessing in some classes :) so I guess the question do we think it's worth investing time to do it the right way or is it ok to just get it working for now...

Sounds like a quick solution is all that's needed so I've pushed some class preprocessing and removed layout.css

Manually tested and this looks good to me :)

BTW, @rikki_iki and I chatted in Slack and agreed the quick way is better for now. We don't expect that sites will actually use this theme much, so are OK with it being a bit special. Layout builder in general is a temporary solution, so we don't want to invest more time in the implementation.

Love this solution. Thanks @rikki_iki

Merged into 1.x, thanks!

Automatically closed - issue fixed for 2 weeks with no activity.