@@ -521,7 +521,9 @@ ul.block, .block li {
521
521
display : flex;
522
522
align-items : center;
523
523
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 ;
525
527
row-gap : 10px ;
526
528
column-gap : 32px ;
527
529
flex-wrap : wrap;
@@ -538,25 +540,45 @@ ul.block, .block li {
538
540
center properly) and the crate name and version need 24px on their
539
541
left margin. */
540
542
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;
541
546
}
542
547
543
548
.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 ;
545
552
text-align : center;
546
553
}
547
554
548
555
.sidebar-crate h2 a {
549
556
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 ;
553
573
}
554
574
555
575
.sidebar-crate h2 .version {
556
576
display : block;
557
577
font-weight : normal;
558
578
font-size : 1rem ;
559
579
overflow-wrap : break-word;
580
+ /* opposite of the link padding, cut in half again */
581
+ margin-top : calc ( ( -16px + 0.57rem ) / 2 );
560
582
}
561
583
562
584
.mobile-topbar {
0 commit comments