Issues: style intro-shelf

[Poorchop]

I wasn't sure how to style this element. It normally has a background gradient:

background-image: linear-gradient(180deg, rgba(255,255,255,0) 60%, #fff),linear-gradient(70deg, #e0f1ff 32%, #fffae3)

I tried yellow but it didn't look right, and I took a look at the various gradients that already exist, but those didn't look good either, so I stuck with blue. Let me know what you think. You can find the unstyled element if you go to the main GitHub page after signing in (not your profile page). It's the page that shows your news feed.

[Mottie]

Hmm, the only .js-notice class I see on that page is the broadcast.

I don't see any elements with a class name of shelf or intro-shelf. Would you share a screenshot?

[Poorchop]

[Mottie]

I think that might look better with a solid grey background since it appears to take up the entire page. What do you think @silverwind?

[silverwind]

Hmm, I'm not getting this, here's the full original style from GitHub's stylesheet:

.intro-shelf {
    margin-top:0;
    color:#234766;
    background-image:-webkit-linear-gradient(270deg, rgba(255,255,255,0) 60%, #fff),-webkit-linear-gradient(20deg, #e0f1ff 32%, #fffae3);
    background-image:linear-gradient(180deg, rgba(255,255,255,0) 60%, #fff),linear-gradient(70deg, #e0f1ff 32%, #fffae3);
    border-bottom:#fff
}

That border-bottom is an invalid style, by the way.

The blue might be fine as we use it for various other notice-boxes, only suggestion I have is to reduce the selector to just .intro-shelf.

[Mottie]

@Poorchop Oh, you went with plain blue? We can keep the gradient if you want.

[Poorchop]

That's initially what I went with because none of the other colors or gradients looked good. I think I tried a gray gradient but it looked kind of sloppy. I'll leave it up to you to change it and if you need me to test it out and send a screenshot, I wouldn't mind since you're missing the element.

[Mottie]

Actually, I'll leave it to you since you can see it! You are a collaborator, so feel free to do stuff.

[silverwind]

Just saw that box. I think some transparency like this might look good:

.shelf {
  background-color: rgba(0,0,0,.2) !important;
  border-bottom: 1px solid #343434 !important;
}
.pricing-shelf {
  background-image: none !important;
}

[Poorchop]

Is this supposed to be on top of the existing .intro-shelf rule? It just looks like regular dark gray on my end when I add those selectors. The way that it's styled by default, it just seamlessly transitions into the main background color so that it doesn't exactly appear as a distinct notification, so I agree that blue probably isn't the best choice. Something like this but cleaner:

That 70 degree gradient looks weird though, even in the default stylesheet. Silverwind's rules look fine to me.

[Mottie]

Odd, I just saw a .pricing-shelf... I think we it might be better to use .js-notice since that might be the common selector

[Mottie]

Hmm, ok, I think I like @silverwind's suggestion. I'll go ahead and make the change but you guys feel free to tweak it!