@@ -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