Skip to content

Commit 48bd29e

Browse files
committed
Mobile hero: bump tab to 80% width; banner stays right-justified
Tab was rendering at 50% on phone, which made it small and easy to miss. Bump to 80% width with a 50% max-height cap, anchored bottom: 18% with a slight right overhang. The hero photo continues to right-justify so the gray block stays under the tab; the left portion of the RNA photo gets cropped on phone widths, which is fine.
1 parent d9f86da commit 48bd29e

1 file changed

Lines changed: 8 additions & 5 deletions

File tree

assets/css/style.scss

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -183,9 +183,10 @@ hr { border: 0; border-top: 1px dotted $text-faint; margin: 2rem 0; }
183183
filter: drop-shadow(2px 2px 6px rgba(0,0,0,0.25));
184184
}
185185

186-
/* Mobile: pin the hero to a fixed height (about a person-card height) and
187-
show the right-most portion (the teal page-name tab + gray block). The
188-
left part of the photo can be cropped — it's the less-informative side. */
186+
/* Mobile: pin the hero to a fixed height and right-justify the photo so
187+
the gray block + teal tab stay visible; the photo crops from the left.
188+
The teal tab keeps its desktop proportions so it reads clearly — it's
189+
OK if it overlaps the photo. */
189190
@media (max-width: $bp-phone) {
190191
.page-hero {
191192
aspect-ratio: auto;
@@ -194,8 +195,10 @@ hr { border: 0; border-top: 1px dotted $text-faint; margin: 2rem 0; }
194195
background-position: right center;
195196
}
196197
.page-hero-tab {
197-
width: 50%;
198-
bottom: 12%;
198+
width: 80%;
199+
max-height: 50%;
200+
bottom: 18%;
201+
right: -2%;
199202
}
200203
}
201204

0 commit comments

Comments
 (0)