creativecommons / index-prototype

This is the UX frontend prototyping repository for the new creativecommons.org website build, inspired by the Vocabulary design system.
https://creativecommons-prototype.netlify.app/
Creative Commons Zero v1.0 Universal
5 stars 9 forks source link

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

Open possumbilities opened 1 month ago

possumbilities commented 1 month ago

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

possumbilities commented 1 month ago

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 1 month ago

For a more stable proposed draft solution, see: