Skip to content

Commit

Permalink
Rollup merge of rust-lang#83405 - r00ster91:deprecated_emoji, r=Guill…
Browse files Browse the repository at this point in the history
…aumeGomez

Slight visual improvements to warning boxes in the docs

First I noticed that sometimes the thumbs-down emoji in the docs is hard to see and hard to look at because the yellow emoji color and the color of the box below are so bright. Especially if you look at the screen late at night you can notice it. I thought I should change that so I added a black outline around the emoji. It works using the [`text-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow) property. It may be a bit hacky but it seems to work well and browser compatibility looks pretty good too: [browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow#browser_compatibility).
For consistency the microscope has the black border too.
Alternatively I had `drop-shadow(0px 0px 1px black);` in mind but its [browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()#browser_compatibility) doesn't look as good and the blurry shadow probably doesn't look as good either.

Then, I thought that now that I'm at it I could also try changing the purple color to a color you would rather expect to see for deprecation: red. For the red I've taken the blue and reused it as a foundation and moved it to the red color spectrum.
But then I thought that the purple color could still be reused for something else: for the boxes that tell you about portability (e.g. _only supported on Unix_). These are currently blue.

I think blue doesn't really represent danger like it should. Not being cross-platform represents a danger because if you want to compile for a different platform, your code may not compile anymore. Blue looks too friendly and is in my opinion more suitable for a box containing general information like for instance "This is available since 1.0.0". None of the current three box types (unstable, deprecated and portability) are that.

I think purple is a better fit for it because it's kind of in the middle between "use it" and "don't use it". Deprecated is definitely "don't use it". To illustrate this better, here's a color spectrum:

Blue = friendly,  "use it".
![image](https://user-images.githubusercontent.com/35064754/112139891-9a6b0f80-8bd3-11eb-94e1-dc747a3d4cf9.png)
Red = danger, "don't use it".

And the purple in the middle (the color that the portability box now has) probably represents "use it if you have to", so it's not entirely friendly and not entirely a danger. That is why I think it fits.

However I made one change to that existing purple: I made the outer color a bit brighter because it's outstandingly dark compared to the other outer colors of the other boxes.

This is all subjective but in my opinion it looks nicer. At first you might need to get used to it though. Notice the box colors and the black outlines around the emoji shapes:
![image](https://user-images.githubusercontent.com/35064754/112139327-ebc6cf00-8bd2-11eb-88ac-25219b43a1a0.png)
![image](https://user-images.githubusercontent.com/35064754/112139392-000acc00-8bd3-11eb-90c2-81feec93c521.png)
  • Loading branch information
Dylan-DPC authored Mar 23, 2021
2 parents d9dfcdc + 4fa187f commit e54a4c7
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 4 deletions.
9 changes: 9 additions & 0 deletions src/librustdoc/html/static/rustdoc.css
Original file line number Diff line number Diff line change
Expand Up @@ -858,6 +858,15 @@ body.blur > :not(#help) {
font-size: 1.5em;
}

/* Black one-pixel outline around emoji shapes */
.emoji {
text-shadow:
1px 0 0 black,
-1px 0 0 black,
0 1px 0 black,
0 -1px 0 black;
}

.module-item .stab {
border-radius: 3px;
display: inline-block;
Expand Down
4 changes: 2 additions & 2 deletions src/librustdoc/html/static/themes/dark.css
Original file line number Diff line number Diff line change
Expand Up @@ -220,8 +220,8 @@ a.test-arrow {
}

.stab.unstable { background: #FFF5D6; border-color: #FFC600; color: #2f2f2f; }
.stab.deprecated { background: #F3DFFF; border-color: #7F0087; color: #2f2f2f; }
.stab.portability { background: #C4ECFF; border-color: #7BA5DB; color: #2f2f2f; }
.stab.deprecated { background: #ffc4c4; border-color: #db7b7b; color: #2f2f2f; }
.stab.portability { background: #F3DFFF; border-color: #b07bdb; color: #2f2f2f; }
.stab.portability > code { background: none; }

#help > div {
Expand Down
4 changes: 2 additions & 2 deletions src/librustdoc/html/static/themes/light.css
Original file line number Diff line number Diff line change
Expand Up @@ -218,8 +218,8 @@ a.test-arrow {
}

.stab.unstable { background: #FFF5D6; border-color: #FFC600; }
.stab.deprecated { background: #F3DFFF; border-color: #7F0087; }
.stab.portability { background: #C4ECFF; border-color: #7BA5DB; }
.stab.deprecated { background: #ffc4c4; border-color: #db7b7b; }
.stab.portability { background: #F3DFFF; border-color: #b07bdb; }
.stab.portability > code { background: none; }

#help > div {
Expand Down

0 comments on commit e54a4c7

Please sign in to comment.