From a74b8c3d4fc4ac5edf4b04528c8af5b5276738ee Mon Sep 17 00:00:00 2001
From: Robert Calef <robert.calef@gmail.com>
Date: Tue, 17 Dec 2024 11:18:42 -0800
Subject: [PATCH] Make website more viewable on mobile

---
 docs/index.html | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index c2478ce..69fcdf1 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -52,7 +52,7 @@
       <div class="container is-max-desktop">
         <div class="columns is-centered">
           <div class="column has-text-centered">
-            <img src="static/images/ProCyon-02-cropped.png" alt="ProCyon banner" style="height: 20%; width: auto;">
+            <img src="static/images/ProCyon-02-cropped.png" alt="ProCyon banner" style="height: auto; max-width: 80vw;">
             <h1 class="title is-1 publication-title">A multimodal foundation model for protein phenotypes</h1>
             <div class="is-size-5 publication-authors">
               <!-- Paper authors -->
@@ -182,7 +182,7 @@ <h1 class="title is-1 publication-title">A multimodal foundation model for prote
 <section class="hero teaser">
   <div class="container is-max-desktop">
     <div class="hero-body">
-      <img src="static/images/model_use_cases.png" alt="ProCyon capabilities" style=" width: auto;">
+      <img src="static/images/model_use_cases.png" alt="ProCyon capabilities" style="height: auto; max-width: 60vw;">
       <h2 class="subtitle has-text-left">
         We present <strong>ProCyon, a foundation model for modeling, generating, and predicting protein phenotypes</strong>.
         ProCyon supports flexible queries with interleaved protein and natural text inputs, enabling a vast array of applications, including:
@@ -252,7 +252,7 @@ <h2 class="title is-3">Abstract</h2>
       <!-- Paper video. -->
       <h2 class="title is-2 has-text-centered">ProCyon Model</h2>
       <div class="container is-centered has-text-centered">
-        <img src="static/images/detailed_arch.png" alt="ProCyon model architecture" style="height: 500px; width: auto;">
+        <img src="static/images/detailed_arch.png" alt="ProCyon model architecture" style="height: auto; max-width: 60vw;">
           <section class="section hero is-light">
             <h2 class="subtitle" style="max-width: 75%; margin: 0 auto; text-align: left;">
                 ProCyon is an 11-billion parameter multimodal model fusing state-of-the-art large language models
@@ -277,10 +277,10 @@ <h2 class="subtitle" style="max-width: 75%; margin: 0 auto; text-align: left;">
       <h2 class="title is-2 has-text-centered">ProCyon-Instruct Dataset</h2>
       <div id="results-carousel" class="carousel results-carousel has-text-centered" data-autoplay-speed=100000>
          <div class="item">
-          <img src="static/images/figure2a.png" alt="Schematic of instruction construction" style="height: 500px; padding-bottom: 60px;  width: auto"/>
+          <img src="static/images/figure2a.png" alt="Schematic of instruction construction" style="height: auto; padding-bottom: 60px;  max-width: 60vw"/>
         </div>
         <div class="item">
-          <img src="static/images/figure2c.png" class="centered-image" alt="Statistics on dataset size" style="height: 500px; width: auto"/>
+          <img src="static/images/figure2c.png" class="centered-image" alt="Statistics on dataset size" style="height: auto; width: 40vw"/>
         </div>
       </div>
       <div class="hero-body content">
@@ -310,7 +310,7 @@ <h2 class="subtitle has-text-weight-normal is-size-5" style="max-width: 75%; mar
     <div class="container">
       <h2 class="title is-2 has-text-centered">Performance Comparison</h2>
       <div class="container is-centered has-text-centered">
-        <img src="static/images/baselines_for_website.png" alt="ProCyon benchmarking results" style="height: 500px; width: auto;">
+        <img src="static/images/baselines_for_website.png" alt="ProCyon benchmarking results" style="height: auto; max-width: 60vw;">
         <section class="section hero is-light">
           <h2 class="subtitle" style="max-width: 75%; margin: 0 auto; text-align: left;">
             ProCyon shows strong performance on a benchmark of fourteen biologically-relevant tasks constructed from ProCyon-Instruct and framed
@@ -335,7 +335,7 @@ <h2 class="title is-2 has-text-centered">ProCyon Capabilities</h2>
       <!-- Retrieval/STING -->
       <div class="container is-centered has-text-centered">
         <h2 class="title is-3 has-text-centered">Free-text protein retrieval</h2>
-        <img src="static/images/sting_fig_v2.png" alt="ProCyon STING figure" style="height: 400px; width: auto;">
+        <img src="static/images/sting_fig_v2.png" alt="ProCyon STING figure" style="height: auto; max-width: 70vw;">
         <section class="section hero is-light">
           <h2 class="subtitle" style="max-width: 75%; margin: 0 auto; text-align: left;">
             ProCyon is able to successfully retrieve the STING protein given functional queries related to neuronal inflammatory stress response,
@@ -356,7 +356,7 @@ <h2 class="subtitle" style="max-width: 75%; margin: 0 auto; text-align: left;">
       <!-- Captioning/QA filtering AKNAD1 -->
       <div class="container is-centered has-text-centered">
         <h2 class="title is-3 has-text-centered">Functional annotation of under-studied proteins</h2>
-        <img src="static/images/aknad1.png" alt="ProCyon AKNAD1 figure" style="height: 400px; width: auto;">
+        <img src="static/images/aknad1.png" alt="ProCyon AKNAD1 figure" style="height: auto; max-width: 60vw;">
         <section class="section hero is-light">
           <h2 class="subtitle" style="max-width: 75%; margin: 0 auto; text-align: left;">
             We generate a UniProt-style description for AKNAD1, a poorly-characterized protein that does not appear in the training data for
@@ -376,7 +376,7 @@ <h2 class="subtitle" style="max-width: 75%; margin: 0 auto; text-align: left;">
       <!-- Zero-shot task transfer -->
       <div class="container is-centered has-text-centered">
         <h2 class="title is-3 has-text-centered">Zero-shot task transfer</h2>
-        <img src="static/images/cross_kd.png" alt="ProCyon cross-KD figure" style="height: 500px; width: auto;">
+        <img src="static/images/cross_kd.png" alt="ProCyon cross-KD figure" style="height: auto; max-width: 40vw;">
         <section class="section hero is-light">
           <h2 class="subtitle" style="max-width: 75%; margin: 0 auto; text-align: left;">
            We show that ProCyon exhibits <strong>zero-shot task transfer and cross-knowledge domain reasoning</strong>, exhibiting the