Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

portico_css: Keep targeted elements below menu bar. 

This PR ensure that all elements targeted by URL fragments will
remain visible below the portico's menu bar at all viewport
sizes and also when a user zooms in, provided the target is on a
page with the menu bar, which will have the `portico-landing`
class.

Whether a quirk or a bug, Chrome appears to ignore the padding on
ancestral containing elements when calculating the offset for
`scroll-margin-top`, which is why padding has been moved to
`.inner-content` for `.why-page` and `.case-studies-page`, which
are the two unique class names for portico pages where the targeted-
element scrolling behavior is used.
This commit is contained in:
Karl Stolley 2023-05-10 14:02:23 -05:00 committed by Tim Abbott
parent e8498fd857
commit f1db7c1d72
1 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/styles/portico/landing_page.css
View File

@ -222,6 +222,23 @@ button {
&.show {
opacity: 1;
}
&.why-page,
&.case-studies-page {
.padded-content {
padding-top: 0; /* No padded content on portico why and case-studies pages... */
}
.inner-content {
padding-top: 50px; /* ...instead, pad inner content to aid with proper scroll positions on URL fragments. */
}
}
:target {
/* Keep elements targeted by URL fragments visible below the
floating top menu; coordinate the value here with the menu's height. */
scroll-margin-top: 60px;
}
}
.portico-landing.features-app {
@ -2044,7 +2061,7 @@ button {
.portico-landing.why-page .photo-description {
position: relative;
top: -40px;
top: 10px; /* Place in padding gap below photo */
height: 0;
font-size: 0.8em;