Align logo with the text beneath it

app.py

@@ -916,14 +916,25 @@ preload_model()
 
 
 CSS = f"""
-.dm-header {{ margin: 2px 0 10px; }}
+.dm-header {{ margin: 2px 0 14px; }}
+.dm-header h1 {{ margin: 0 0 10px; }}
+.dm-header h1 img {{
+    max-width: 340px;
+    width: 100%;
+    height: auto;
+    display: block;
+}}
 .dm-tagline {{
-    margin: 0;
+    margin: 0 0 10px;
     font-size: 15px;
     font-weight: 600;
     line-height: 1.35;
 }}
-.dm-intro p {{ max-width: 74ch; }}
+.dm-intro {{
+    margin: 0;
+    max-width: 74ch;
+    line-height: 1.55;
+}}
 .dm-inline-action {{ align-self: flex-end; margin-bottom: 0; }}
 body, .gradio-container, .gradio-container * {{
     font-family: {FONT_STACK} !important;
@@ -946,40 +957,35 @@ BLOCKS_KWARGS = {} if _LAUNCH_ACCEPTS_THEME else {"theme": _THEME, "css": CSS}
 
 
 with gr.Blocks(title="DeepMutate-3D", **BLOCKS_KWARGS) as demo:
-    # One header block, left-aligned to match every other element on the page.
-    # The logo carries the wordmark, so it IS the heading rather than sitting
-    # above a duplicate text title; wrapping it in an <h1> with alt text keeps
-    # the document outline a screen reader expects while the name appears once
-    # on screen. The tagline sits immediately beneath it on the same left edge,
-    # so the two read as a single unit instead of two competing axes.
+    # Logo, tagline and intro live in ONE html block. Splitting them across a
+    # gr.HTML and a gr.Markdown gave each its own container padding, so the
+    # three lines started at three different left edges. One block, one edge.
+    intro = (
+        "ESM-2 scores every possible point mutation as a log-likelihood ratio "
+        "against the wildtype residue. Positions the model refuses to change "
+        "are evolutionarily constrained, likely structural or functional cores, "
+        "and glow <strong>red</strong>. Positions it happily swaps glow "
+        "<strong>blue</strong>."
+    )
     if LOGO_DATA_URI:
         gr.HTML(
             '<div class="dm-header">'
-            '<h1 style="margin:0 0 8px">'
-            f'<img src="{LOGO_DATA_URI}" alt="DeepMutate-3D" '
-            'style="max-width:340px;width:100%;height:auto;display:block"></h1>'
+            '<h1><img src="' + LOGO_DATA_URI + '" alt="DeepMutate-3D"></h1>'
             '<p class="dm-tagline">Protein language model mutation scanning, '
             "painted onto the AlphaFold fold.</p>"
+            f'<p class="dm-intro">{intro}</p>'
             "</div>"
         )
     else:
-        gr.Markdown(
-            "# DeepMutate-3D\n"
-            "**Protein language model mutation scanning, painted onto the "
-            "AlphaFold fold.**"
+        gr.HTML(
+            '<div class="dm-header">'
+            "<h1>DeepMutate-3D</h1>"
+            '<p class="dm-tagline">Protein language model mutation scanning, '
+            "painted onto the AlphaFold fold.</p>"
+            f'<p class="dm-intro">{intro}</p>'
+            "</div>"
         )
 
-    # The explanation of how to read the colours is guidance, not identity, so
-    # it is set below the header in muted body text rather than competing with
-    # the tagline for emphasis.
-    gr.Markdown(
-        "ESM-2 scores every possible point mutation as a log-likelihood ratio "
-        "against the wildtype residue. Positions the model refuses to change "
-        "are evolutionarily constrained, likely structural or functional cores, "
-        "and glow **red**. Positions it happily swaps glow **blue**.",
-        elem_classes="dm-intro",
-    )
-
     with gr.Row(equal_height=True):
         example_dropdown = gr.Dropdown(
             choices=list(EXAMPLE_PROTEINS.keys()),

scripts/make_logo_assets.py

@@ -33,8 +33,13 @@ HEADER_CSS_WIDTH = 340
 BANNER_CSS_WIDTH = 620
 
 
-def content_box(rgb: np.ndarray, background: np.ndarray, pad: int = 40) -> tuple:
-    """Bounding box of everything meaningfully different from the backdrop."""
+def content_box(rgb: np.ndarray, background: np.ndarray, pad: int = 0) -> tuple:
+    """Bounding box of everything meaningfully different from the backdrop.
+
+    `pad` defaults to 0 deliberately. Padding baked into a transparent asset is
+    invisible but still occupies layout width, which indents the artwork
+    relative to the text beneath it.
+    """
     diff = np.abs(rgb.astype(int) - background.astype(int)).sum(axis=2)
     ys, xs = np.where(diff > 30)
     h, w, _ = rgb.shape
@@ -79,9 +84,11 @@ def main() -> int:
     # The dark artwork sits on near-black, so brightness alone finds the content.
     lum = np.array(dark_src).sum(axis=2)
     ys, xs = np.where(lum > 120)
-    dark = dark_src.crop((max(int(xs.min()) - 40, 0), max(int(ys.min()) - 40, 0),
-                          min(int(xs.max()) + 40, dark_src.width),
-                          min(int(ys.max()) + 40, dark_src.height)))
+    # The dark variant keeps a small margin: its backdrop is opaque, so the
+    # padding reads as part of the panel rather than as dead space.
+    dark = dark_src.crop((max(int(xs.min()) - 30, 0), max(int(ys.min()) - 30, 0),
+                          min(int(xs.max()) + 30, dark_src.width),
+                          min(int(ys.max()) + 30, dark_src.height)))
 
     written = []
     for name, img, width in [