creativecommons/index-prototype

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

possumbilities opened this issue · 2 comments

possumbilities commented

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:

Legacy versions:

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:

Implementation

  • I would be interested in implementing this feature.
possumbilities commented

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:

Screen Shot 2024-05-29 at 9 59 48 AM

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

Screen Shot 2024-05-29 at 10 00 59 AM

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

deed:
Screen Shot 2024-05-29 at 9 57 20 AM

legal code:
Screen Shot 2024-05-29 at 9 57 08 AM

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 commented

For a more stable proposed draft solution, see: