PrimeDAO / prime-deals-dapp

DAO to DAO negotiations facilitated, ratified, and archived.
https://www.prime.xyz/deals
3 stars 1 forks source link

Documentation: implementing the style for the <kbd> tag to style documentation instructions that refer to buttons #975

Open ogsamovar opened 2 years ago

ogsamovar commented 2 years ago

The <kbd> element (ref) allows us to implement a dedicated styling for tasks/procedure that describes how to accomplish a task by clicking a certain button.

The clarity and readability will improve if we style that part of the instructions in a distinctive way.

e.g. consider the text: Please note that you can always come back to edit your input before you click the SUBMIT button on the last step of the wizard.

Now it simply shows like this:

Screen Shot 2022-05-09 at 21 25 26

but it can be showed in a more distinct manner, like this:

Screen Shot 2022-05-09 at 21 08 31

if we style the <kbd> this way:

kbd {
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
    color: #333;
    display: inline-block;
    font-size: .85em;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
   }

Alternatively, we can render the <kbd> to look this way:

Screen Shot 2022-05-09 at 21 23 02

if we style it this way:

kbd  {
    all: initial;
    outline: none;
    padding: 11px 13px;
    font-family: Inter;
    font-size: -2px;
    font-style: normal;
    font-weight: 700;
    line-height: 0px;
    letter-spacing: 0.6px;
    text-align: center;
    text-transform: uppercase;
    border-radius: 50px;
    cursor: pointer;
    background-color: rgba(0,0,0,0);
    transform: translateY(0);
    user-select: none;
    color: #f9f6f9;
    white-space: nowrap;
    gap: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: background .25s ease-in,transform .1s ease-in;
    border: none;
    background-image: linear-gradient(45deg, #a258a7 0%, #ff497a 50%, #8668fc 100%);
    background-size: 200% auto;
    color: #f9f6f9;
}
dkent600 commented 2 years ago

I don't think we should make this look too much like a real live button. Having said that, it might be possible to create a real live button for these, for what it is worth. But not now, is too late. @BartuCulha @ogsamovar

ogsamovar commented 2 years ago

If you don't feel like mocking the real button we can keep it as a simple, more traditional <kbd> element by using these:

kbd {
    background-color: #eee;
    border-radius: 68px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
    color: #333;
    display: inline-block;
    font-size: .85em;
    font-weight: 600;
    line-height: 1;
    padding: 2px 5px;
    white-space: nowrap;
}
ogsamovar commented 2 years ago

@dkent600 as per your request on Telegram

background-color: #F9F6F9; border: 1px solid #DCDAE5;

box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;

color: #15062d;

BartuCulha commented 2 years ago

Can we change the padding to this? .markdownContainer kbd { padding: 3px 5px 2px 5px; }

Currently: It seems like to font we are using has 1px gap at its bottom. Therefore this objects looks unaligned.

Vote-on-a-Deal-Documentation-Documentation-Prime-Deals (5)

Expected: With the updated padding, it will look like this. Vote-on-a-Deal-Documentation-Documentation-Prime-Deals (4)

dkent600 commented 2 years ago

done

dkent600 commented 2 years ago

Hmm, actually didn't do. The given padding numbers did not do what was in the screenshot. I changed to 3px 6px;

dkent600 commented 2 years ago

And then I changed to this:

image