[Functionality] Clarify Deed/Legal code labeling, relationship, and placement on `license-page` contexts

[possumbilities]

Problem

Presently the language of "deed" and "legal code" is output as part of the title styling of the page, and as such causes confusion as visitors may believe that they are part of the license title itself.

So rather than: CC BY-NC-ND 4.0

Individuals might believe the title is instead: CC BY-NC-ND 4.0 DEED or CC BY-NC-ND 4.0 LEGAL CODE.

Description

Current pages:

• deed: https://creativecommons.org/licenses/by-nc-nd/4.0/deed.en, uses walkthrough-page context
• license: https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode.en, uses default-page context

Legacy versions:

• deed: https://web.archive.org/web/20230726193257/https://creativecommons.org/licenses/by-nc-nd/4.0/deed.en
• license: https://web.archive.org/web/20230723170747/https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode.en

Alternatives

As deed and legalcode are descriptor "meta info" they should instead be placed elsewhere, and styled differently from the title itself. The previous design did a better job of creating this delineation.

Additional context

The translations strings may present a challenge in trying to create a solution here.

To resolve this item, a working current state context for the deed and legalcode license-page contexts needs to exist to work from. That work is tracked here:

• [Functionality] add localized license-page context(s) #64

Implementation

• I would be interested in implementing this feature.

[possumbilities]

One possibility

We borrow from an existing type descriptor style locally adapted to the "stand out/contrast" coloring for the header area.

On the search results page we have a post "type" descriptor that is off to the side:

Presently, the "stand out" coloring for the header area, when not a link, would follow what we've done on the person page (white):

So if we combine the descriptor "pill style" with the white "stand out" coloring, we get something like this:

deed:

legal code:

The above could be added by appending a span element around the deed and legal code words.

deed:

<h1>
CC BY-NC-ND 4.0 <span class="type">Deed</span>
</h1>

legal code:

<h1>
CC BY-NC-ND 4.0 <span class="type">Legal Code</span>
</h1>

And then, the following CSS would provide the styling as shown above:

header h1 span.type {
    padding: .5em .7em;

    font-family: 'Source Sans Pro';
    font-size: .3em;
    font-weight: 400;
    text-transform: lowercase;
    background: rgb(255, 255, 255);
    border-radius: 4px;
}

Overall, the page contexts for the licenses need some deeper work, but this would possibly correct this issue at the moment visually, while leaving room to address it more elegantly.

[possumbilities]

For a more stable proposed draft solution, see:

• App: improve clarity of legal tool title cc-legal-tools-app#455