Skip to content

Commit b0d76a7

Browse files
committed
rustdoc: align crate name with search bar
Based on PR feedback.
1 parent 7c10c6f commit b0d76a7

File tree

1 file changed

+27
-5
lines changed

1 file changed

+27
-5
lines changed

src/librustdoc/html/static/css/rustdoc.css

+27-5
Original file line numberDiff line numberDiff line change
@@ -521,7 +521,9 @@ ul.block, .block li {
521521
display: flex;
522522
align-items: center;
523523
justify-content: center;
524-
margin: 10px 32px 0;
524+
/* there's a 10px padding at the top of <main>, and a 4px margin at the
525+
top of the search form. To line them up, add them. */
526+
margin: 14px 32px 0;
525527
row-gap: 10px;
526528
column-gap: 32px;
527529
flex-wrap: wrap;
@@ -538,25 +540,45 @@ ul.block, .block li {
538540
center properly) and the crate name and version need 24px on their
539541
left margin. */
540542
margin: 0 -8px;
543+
/* To align this with the search bar, it should not be centered, even when
544+
the logo is. */
545+
align-self: start;
541546
}
542547

543548
.sidebar-crate .logo-container {
544-
margin: 0 -16px;
549+
/* The logo is expected to have 8px "slop" along its edges, so we can optically
550+
center it. */
551+
margin: 0 -16px 0 -16px;
545552
text-align: center;
546553
}
547554

548555
.sidebar-crate h2 a {
549556
display: block;
550-
margin-left: -0.25rem;
551-
padding-left: 0.25rem;
552-
margin-right: -24px;
557+
margin: 0 calc(-24px + 0.25rem) 0 -0.5rem;
558+
/* Align the sidebar crate link with the search bar, which have different
559+
font sizes.
560+
561+
| | font-size | line-height | total line-height | padding-y | total |
562+
|:-------|----------:|------------:|------------------:|----------:|-------------:|
563+
| crate | 1.375rem | 1.25 | 1.72rem | x | 2x+1.72rem |
564+
| search | 1rem | 1.15 | 1.15rem | 8px | 1.15rem+16px |
565+
566+
2x + 1.72rem = 1.15rem + 16px
567+
2x = 1.15rem + 16px - 1.72rem
568+
2x = 16px - 0.57rem
569+
x = ( 16px - 0.57rem ) / 2
570+
*/
571+
padding: calc( ( 16px - 0.57rem ) / 2 ) 0.25rem;
572+
padding-left: 0.5rem;
553573
}
554574

555575
.sidebar-crate h2 .version {
556576
display: block;
557577
font-weight: normal;
558578
font-size: 1rem;
559579
overflow-wrap: break-word;
580+
/* opposite of the link padding, cut in half again */
581+
margin-top: calc( ( -16px + 0.57rem ) / 2 );
560582
}
561583

562584
.mobile-topbar {

0 commit comments

Comments
 (0)