Create CSS for Banner styling.

[carltongibson]

For things like the JetBrains promotion, and the #BLM banner, we added HTML looking like this:

    <div id="billboard" style="background: #0C4B33; color: #FFF;">{% block billboard %}
        <div style="text-align:center; padding: 1em 3em; max-width: 60em; margin: 0 auto;">
       ...

We should have a CSS declared for such, so we don't have to go looking through the history for the HTML.

Refs #1004, where @collinanderson suggested the line length limit.

[dougmellon]

Do you mind if I take this?

[carltongibson]

HI @dougmellon, please do yes. Thanks.

[sksankarraj]

Seems like this has been fixed.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[carltongibson]

I looked at this for #1227 — I still think this would be a good idea, but I was a bit put-off by the existing CSS (relative to the head-space I had for it this morning.)

Taking in the rule for limiting the width (as per above here) just needs a bit of double-checking, but if we could just apply (say) a .banner class that would be great.

[Maniktherana]

Can I try this?

[carltongibson]

Please do.

It's a case of translating the inline styles, and documenting (in a comment at least) the HTML (with billboard class) for the banner.

[Maniktherana]

@carltongibson Just confirming: These are the inline styles to be implemented right? As currently theres no styles there anymore: https://github.com/django/djangoproject.com/blob/c83141092375a774fe9a3fd0c26732040ccf2c2a/djangoproject/templates/base.html#L72

[dassudip2001]

it is fixed or still pending

[carltongibson]

@dassudip2001 I think the PR is just waiting for a last tweak from @Maniktherana (or reviewer) to merge.

[mks2002]

I want to work on this issue please assign me this issue.

[carltongibson]

There's a PR for this by @Maniktherana in #1302. It's just waiting for some edits from the reviews. You could ask there if they be happy for you to take it over and update, using Co-authored-by: … in the commit message if so.

[kaushal-malpure]

@carltongibson @pauloxnet Can I try solving this issue?

[carltongibson]

@kaushal-malpure Yes, please do! There's a previous PR to look at. (IIRC it needed adjustments.)

The task here is to create the CSS selectors, and then make sure the (commented) markup is correct, so that someone can quickly add the banner text.

Thanks!

[kaushal-malpure]

@pauloxnet @carltongibson I have worked on the issue and have added the CSS selectors for banner styling. #1422