Home banner mobile: right-align bg, drop overlay; bars seam -5%; visible flag

Mobile / iPhone-mini home banner:
- Drop the .home-banner-tab overlay (was duplicating the teal tab that
  is already baked into logo_home.png), and remove the cropped
  icon_home.png + logo_home_top.png assets it depended on.
- Mobile .home-banner now uses aspect-ratio: 1.96/1 with
  background-size: auto 200%; background-position: 100% 0. Shows the
  right ~2/3 of the source on any phone width (math: container width =
  (2/3) * 2.94 * container height -> aspect 1.96), so iPhone mini
  portrait sees the gray block + the 'RNA fold & function from scratch'
  tab + a sliver of the photo on the left edge.
- New @media (max-width: 480px) and (orientation: portrait) shrinks
  callouts + divider bars + institutional logos by ~50% (mission text
  kept at ~75% to stay readable) so the page feels proportional to the
  smaller banner.

Home divider bars:
- .home-divider-bars .bar-dark: flex-basis 70.45% -> 65.45%. Per user's
  screenshot, the bar seam was sitting ~5% past the photo/gray seam in
  the rendered banner; this aligns them.

Hide-without-archive support:
- Add 'visible: false' frontmatter flag for _people/*.md. people.md
  filters both current and alumni with where_exp: 'p.visible != false'
  so people without the field stay visible (default true), and anyone
  with visible: false drops out without needing to be moved to
  status: alumnus.
- CONTRIBUTING.md: documented under 'Hiding someone temporarily' and
  added to the optional-fields list.

Author: rhiju

CONTRIBUTING.md

@@ -44,9 +44,20 @@ The `last_name` is used for sorting (alphabetical, case-insensitive) — write i
 - `cv_url:` — link to a CV (e.g., a Dropbox link)
 - `profile_url:` — link to a Stanford profile page
 - `pi: true` — pins this person to the end of the current-members list. Only the principal investigator should have this.
+- `visible: false` — temporarily hides this person from the people page without deleting the file or moving them to alumni. Useful for, e.g., a rotation student who hasn't decided whether to stay long-term. Remove the line (or set to `true`) to show them again.
 
 ---
 
+## Hiding someone temporarily (without making them alumni)
+
+If you need to hide someone from the people page but they're not alumni — say a rotation student who hasn't decided whether to stay — open their `_people/<name>.md` file and add this line to the frontmatter:
+
+```yaml
+visible: false
+```
+
+The page will leave them out on the next rebuild. To bring them back, delete that line (or change to `visible: true`). This works for both current members and alumni.
+
 ## Moving someone to alumni
 
 When a lab member leaves, you only edit one file — no need to move it between folders.

assets/css/style.scss

@@ -288,13 +288,6 @@ hr { border: 0; border-top: 1px dotted $text-faint; margin: 2rem 0; }
   border-radius: 2px;
 }
 
-/* Teal "RNA fold & function from scratch" tab — only used on mobile,
-   where the home banner is treated like other-page heroes (photo on
-   the left, fixed height, right cut off, separate teal tab overlay
-   on the right). On desktop the tab text is already part of the
-   logo_home.png background, so this overlay is hidden. */
-.home-banner-tab { display: none; }
-
 /* Circular teal "research →" tab anchored to the banner's left edge */
 .home-research-arrow {
   position: absolute;
@@ -320,7 +313,10 @@ hr { border: 0; border-top: 1px dotted $text-faint; margin: 2rem 0; }
   max-width: none;
   height: 39px;
 }
-.home-divider-bars .bar-dark  { flex: 0 0 70.45%; }
+/* The dark/light seam sits ~5% to the left of where the photo/gray seam
+   actually lands in the rendered banner — set to 65.45% so the bar
+   seam visually aligns with the banner seam. */
+.home-divider-bars .bar-dark  { flex: 0 0 65.45%; }
 .home-divider-bars .bar-light { flex: 1 1 auto; }
 .home-divider-bars .bar-dark,
 .home-divider-bars .bar-light {
@@ -368,6 +364,28 @@ hr { border: 0; border-top: 1px dotted $text-faint; margin: 2rem 0; }
   .callout-break { display: none; }
 }
 
+/* Small-phone portrait: the home banner is much smaller proportionally,
+   so shrink the elements directly underneath it (callouts + bars +
+   institutional logos) to keep the overall page feeling balanced.
+   Mission paragraph kept at ~75% (full 50% would be unreadable). */
+@media (max-width: 480px) and (orientation: portrait) {
+  .home-callout-left  { font-size: 1.3rem; }
+  .home-callout-right { font-size: 0.75rem; }
+  .home-mission       { font-size: 0.7rem; }
+
+  .home-divider-bars,
+  .home-divider-bars .bar-dark,
+  .home-divider-bars .bar-light {
+    height: 20px;
+  }
+
+  .institutional-logos .logo-stanford-university,
+  .institutional-logos .logo-stanford-medicine,
+  .institutional-logos .logo-hhmi {
+    height: 22px;
+  }
+}
+
 /* ---------- people ---------- */
 
 .people-grid {
@@ -912,27 +930,17 @@ details.show-more {
      edge of logo_home.png anchored to the right of the viewport — matches
      the .page-hero approach used on interior pages. */
   .home-banner {
-    /* Mobile: same treatment as the interior page-heros. Fixed 200px
-       height, image scaled to fill height and aligned left so the photo
-       (Crystal / Prediction RNA) stays in view; the right side of the
-       source (gray block + baked-in teal tab) is cropped off the right
-       edge of the viewport. The teal tab is rendered separately as
-       .home-banner-tab below — anchored right, scaled to fit. */
-    aspect-ratio: auto;
-    height: 200px;
+    /* Mobile: right-align the source image so the gray block + the
+       baked-in 'RNA fold & function from scratch' teal tab stay visible;
+       the left side of the photo is cropped at the viewport edge.
+       aspect-ratio 1.96/1 + background-size auto 200% means the visible
+       viewport equals exactly 2/3 of the rendered image width — so on
+       any phone width (including iPhone mini at 375px) the right ~2/3
+       of the source is in view. */
+    aspect-ratio: 1.96 / 1;
+    height: auto;
     background-size: auto 200%;
-    background-position: 0 0;
-  }
-
-  .home-banner-tab {
-    display: block;
-    position: absolute;
-    right: -2%;
-    bottom: 15%;
-    height: 45%;
-    width: auto;
-    z-index: 2;
-    filter: drop-shadow(2px 2px 6px rgba(0,0,0,0.25));
+    background-position: 100% 0;
   }
   /* Drop the desktop 5% breakout — at narrow viewports it caused horizontal
      overflow / scroll. */

assets/images/site/public/icon_home.png

@@ -7,7 +7,6 @@ slug: home
 <div class="home-stage">
   <a class="home-research-arrow" href="{{ '/research/' | relative_url }}" aria-label="Research">research</a>
   <div class="home-banner" role="img" aria-label="Das Lab — RNA fold and function from scratch"></div>
-  <img class="home-banner-tab" src="{{ '/assets/images/site/public/icon_home.png' | relative_url }}" alt="RNA fold and function from scratch">
 </div>
 
 <div class="home-divider-bars">

assets/images/site/public/logo_home_top.png

@@ -6,7 +6,7 @@ hero_slug: people
 permalink: /people/
 ---
 
-{% assign all_current = site.people | where: "status", "current" %}
+{% assign all_current = site.people | where: "status", "current" | where_exp: "p", "p.visible != false" %}
 {% assign non_pi = all_current | where_exp: "p", "p.pi != true" | sort_natural: "last_name" %}
 {% assign pi     = all_current | where: "pi", true %}
 {% assign current = non_pi | concat: pi %}
@@ -16,7 +16,7 @@ permalink: /people/
   within each year. Liquid's sort isn't reliably stable, so we group by
   year explicitly and concat in order.
 {% endcomment %}
-{% assign all_alumni = site.people | where: "status", "alumnus" %}
+{% assign all_alumni = site.people | where: "status", "alumnus" | where_exp: "a", "a.visible != false" %}
 {% assign years = all_alumni | map: "end_year" | uniq | compact | sort | reverse %}
 {% assign alumni = "" | split: "" %}
 {% for y in years %}