Skip to content

Commit ea99798

Browse files
chore: polish /content/detail layout -- drop header underline, bigger title, spacing around diagram
Adam's feedback: the teal border-bottom under the entity name read as a separator that suggested another section was meant to follow it, when really it was just the page title. Also the download bar and diagram were jammed against the Overview's Summation text. All overrides scoped to ::ng-deep cr-description-tab inside the website's detail card -- the pathway-browser's details panel keeps the existing compact styling. - .header gets `border-bottom: none` and tighter padding/margin; name bumps to 28px h1 weight so it reads as the page title. - app-detail-download-bar gets a 28px top margin to separate it from the Summation row. - app-detail-diagram gets a 16px top + 8px bottom margin so it breathes between the download bar and the next section divider.
1 parent ff4b1d3 commit ea99798

1 file changed

Lines changed: 31 additions & 0 deletions

File tree

projects/website-angular/src/app/content/detail/detail.component.scss

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,37 @@
106106
background: unset;
107107
}
108108

109+
// The pathway-browser's details panel uses a teal underline under the
110+
// entity name as a tab separator. On the standalone website detail
111+
// page the title is the page header, not a tab, so the underline
112+
// reads as visual noise. Drop it and give the name h1 weight to
113+
// match other top-level page titles on the site.
114+
.header.header {
115+
border-bottom: none;
116+
padding: 0;
117+
margin: 0 0 8px;
118+
height: auto;
119+
align-items: baseline;
120+
}
121+
.header.header .name {
122+
font-size: 28px;
123+
font-weight: 600;
124+
line-height: 1.25;
125+
}
126+
127+
// Breathing room around the projected download bar + diagram.
128+
// Description-tab puts both inside the Overview slot; on the panel
129+
// version they're absent, so we only need to space them on the
130+
// standalone page.
131+
app-detail-download-bar {
132+
display: block;
133+
margin: 28px 0 0;
134+
}
135+
app-detail-diagram {
136+
display: block;
137+
margin: 16px 0 8px;
138+
}
139+
109140
#details {
110141
.content {
111142
min-width: 0;

0 commit comments

Comments
 (0)