Skip to content

Commit 5c1ba23

Browse files
committed
rustdoc: even spacing in crate brand heading
Since the search bar and the crate name don't need aligned any more, the layout of the version can be a bit more natural-looking.
1 parent fd75a9c commit 5c1ba23

File tree

1 file changed

+41
-17
lines changed

1 file changed

+41
-17
lines changed

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

Lines changed: 41 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -848,26 +848,35 @@ ul.block, .block li, .block ul {
848848
z-index: 1;
849849
}
850850

851+
.sidebar {
852+
/* Align the sidebar crate link with the search bar, which have different
853+
font sizes. They should be the same height, so that the crate lockup and the
854+
main header are also the same height.
855+
856+
| | font-size | line-height | total line-height | padding/margin-y | total |
857+
|:-------|----------:|------------:|------------------:|-----------------:|-------------:|
858+
| crate | 1.375rem | 1.25 | 1.72rem | x | 4x+1.72rem |
859+
| search | 1rem | 1.15 | 1.15rem | 8px | 1.15rem+16px |
860+
861+
4x + 1.72rem = 1.15rem + 16px
862+
4x = 1.15rem + 16px - 1.72rem
863+
4x = 16px - 0.57rem
864+
x = ( 16px - 0.57rem ) / 4
865+
*/
866+
--sidebar-crate-margin-padding-y: calc( ( 16px - 0.57rem ) / 4 );
867+
}
868+
851869
.sidebar-crate h2 a {
852870
display: block;
853871
/* extend click target to far edge of screen (mile wide bar) */
854872
border-left: solid var(--sidebar-elems-left-padding) transparent;
855873
background-clip: border-box;
856-
margin: 0 calc(-24px + 0.25rem) 0 calc(-0.2rem - var(--sidebar-elems-left-padding));
857-
/* Align the sidebar crate link with the search bar, which have different
858-
font sizes.
859-
860-
| | font-size | line-height | total line-height | padding-y | total |
861-
|:-------|----------:|------------:|------------------:|----------:|-------------:|
862-
| crate | 1.375rem | 1.25 | 1.72rem | x | 2x+1.72rem |
863-
| search | 1rem | 1.15 | 1.15rem | 8px | 1.15rem+16px |
864-
865-
2x + 1.72rem = 1.15rem + 16px
866-
2x = 1.15rem + 16px - 1.72rem
867-
2x = 16px - 0.57rem
868-
x = ( 16px - 0.57rem ) / 2
869-
*/
870-
padding: calc( ( 16px - 0.57rem ) / 2 ) 0.25rem;
874+
margin:
875+
var(--sidebar-crate-margin-padding-y)
876+
calc(-24px + 0.25rem)
877+
var(--sidebar-crate-margin-padding-y)
878+
calc(-0.2rem - var(--sidebar-elems-left-padding));
879+
padding: var(--sidebar-crate-margin-padding-y) 0.25rem;
871880
padding-left: 0.2rem;
872881
}
873882

@@ -876,11 +885,26 @@ ul.block, .block li, .block ul {
876885
font-weight: normal;
877886
font-size: 1rem;
878887
overflow-wrap: break-word;
888+
margin-top: calc(-1 * var(--sidebar-crate-margin-padding-y));
889+
margin-bottom: var(--sidebar-crate-margin-padding-y);
879890
}
880891

881892
.sidebar-crate + .version {
882-
margin-top: -1rem;
883-
margin-bottom: 1rem;
893+
/* make the git commit the same height as the Since · Source line,
894+
even though these also have different font sizes
895+
896+
| | font-size | line-height | total line-height | padding-y | total |
897+
|:-------|----------:|------------:|------------------:|----------:|--------------:|
898+
| Commit | 0.875rem | 1.25 | 1.09375rem | x | 1.09375rem+2x |
899+
| Since | 1rem | 1.25 | 1.25rem | 1.25rem | 1.25rem |
900+
901+
1.09375+2x = 1.25
902+
2x = 0.15625
903+
x = 0.078125
904+
*/
905+
padding-top: 0.078125rem;
906+
margin-top: calc(-1 * var(--sidebar-crate-margin-padding-y) - 1rem);
907+
margin-bottom: calc(var(--sidebar-crate-margin-padding-y) + 1rem);
884908
}
885909

886910
rustdoc-topbar {

0 commit comments

Comments
 (0)