improve header stule

cambrian-mllm · Jun 25, 2024 · f74bcf1 · f74bcf1
1 parent 157ae99
commit f74bcf1
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -46,19 +46,35 @@
                     <h1 style="margin-top: 0px"><i>Cambrian-1</i></h1>
                     <h2>A Fully Open, <i>Vision-Centric</i><br>
                         Exploration of Multimodal LLMs</h2>
-                    <p style="color: #FFF7D4">
-                        Introducing Cambrian-1, a family of 
-                        <em><strong style="color: #ffe099">vision-centric</strong></em>
-                        multimodal LLMs (MLLMs).
-                        Cambrian-1 is structured around five key pillars:
-                        <ul style="color: #FFF7D4">
-                            <li><strong style="color: #ffe099">Visual Representations</strong>: We explore various vision encoders and their combinations.
-                            <li><strong style="color: #ffe099">Connector Design</strong>: We design a new dynamic and <i>spatially-aware</i> connector that integrates visual features from several models with LLMs while reducing the number of tokens.
-                            <li><strong style="color: #ffe099">Instruction Tuning Data</strong>: We curate high-quality visual instruction-tuning data from public sources, emphasizing the importance of distribution balancing. 
-                            <li><strong style="color: #ffe099">Instruction Tuning Recipes</strong>: We discuss instruction tuning strategies and practices. 
-                            <li><strong style="color: #ffe099">Benchmarking</strong>: We examine existing MLLM benchmarks and introduce a new vision-centric benchmark, "CV-Bench".
-                        </ul>
-                    </p>
+                        <p>
+                            Introducing Cambrian-1, a family of 
+                            <em><strong>vision-centric</strong></em>
+                            multimodal LLMs (MLLMs). Cambrian-1 is structured around five key pillars:
+                        </p>
+
+                        <div class="icon-container">
+                            <div class="icon-item">
+                                <img src="./static/img/icons/visual.svg" alt="Visual Representation Icon">
+                                <div><strong>Visual Representations</strong>: We explore various vision encoders and their combinations.</div>
+                            </div>
+                            <div class="icon-item">
+                                <img src="./static/img/icons/connector.svg" alt="Connector Design Icon">
+                                <div><strong>Connector Design</strong>: We design a new dynamic and <i>spatially-aware</i> connector that integrates visual features from several models with LLMs while reducing the number of tokens.</div>
+                            </div>
+                            <div class="icon-item">
+                                <img src="./static/img/icons/data.svg" alt="Instruction Tuning Data Icon">
+                                <div><strong>Instruction Tuning Data</strong>: We curate high-quality visual instruction-tuning data from public sources, emphasizing the importance of distribution balancing.</div>
+                            </div>
+                            <div class="icon-item">
+                                <img src="./static/img/icons/recipe.svg" alt="Instruction Tuning Recipes Icon">
+                                <div><strong>Instruction Tuning Recipes</strong>: We discuss instruction tuning strategies and practices.</div>
+                            </div>
+                            <div class="icon-item">
+                                <img src="./static/img/icons/eval.svg" alt="Benchmarking Icon">
+                                <div><strong>Benchmarking</strong>: We examine existing MLLM benchmarks and introduce a new vision-centric benchmark, "CV-Bench".</div>
+                            </div>
+                        </div>
+
                     <div class="button-container">
                         <!-- replace arxiv -->
                         <a href="https://arxiv.org/abs/2406.16860" class="button paper-link" target="_blank">

diff --git a/static/css/style.css b/static/css/style.css
@@ -65,20 +65,53 @@ body {
 }
 
 
+.icon-container {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.icon-item {
+    align-items: center;
+    display: flex;
+}
+
+.icon-item img {
+    width: 30px;
+    height: 30px;
+    margin-right: 1em;
+    filter: invert(87%) sepia(11%) saturate(748%) hue-rotate(340deg) brightness(110%) contrast(100%);
+}
+
+@media (max-width: 768px) {
+  .icon-item img {
+    margin-bottom: 1em;
+  }
+}
+
+.header-content strong {
+    color: #ffe099;
+}
+
+.header-content {
+    color: #FFF7D4;
+    text-align: left;
+}
 
 .header-content h1 {
-  font-size: 1.5em; /* Adjust font size for small screens */
-  margin-bottom: 0.5em;
-  line-height: 1.2;
+    font-size: 1.5em;
+    margin-bottom: 0.5em;
+    line-height: 1.2;
+    color: #FEAE6F;
 }
 
 .header-content h2 {
-  margin-bottom: 0.5em;
-  line-height: 1.2;
+    margin-bottom: 0.5em;
+    line-height: 1.2;
+    color: #FEAE6F;
 }
 
 .header-container p {
-    /* font-size: 1.06rem; */
     font-size: 1.2rem;
 }
 
@@ -89,7 +122,14 @@ body {
   }
 
   .header-content h1 {
-    font-size: 2em;
+    font-size: 3em;
+    margin-bottom: 0.125em;
+  }
+  .header-content h2 {
+    font-size: 1.7em;
+    /* text no wrap */
+    white-space: nowrap;
+    margin-top: 0;
   }
 
   .header-container p {