chore: 2026 Collab Summit temp header move to live header (#10217)

rmackinnon · Pessimistress · commit 2cd1b7feeeb3 · 2026-04-13T14:42:27.000-07:00
diff --git a/website/static/events/zurich-summit-2026/index.html b/website/static/events/zurich-summit-2026/index.html
@@ -8,26 +8,18 @@
         <meta name="description" content="Come together with the deck.gl, kepler.gl, GeoDa, and Cosmos community to discuss the present & future of the leading open source libraries for visualization applications in the Web.">
         <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,800|Open+Sans:400,600,700" rel="stylesheet">
         <link rel="stylesheet" href="./style.css">
-        <style>
-            .header_img {
-                width:100%; height:100%; background-size:cover; background-position:center;
-                background-repeat: no-repeat;
-            }
-
-            @media screen and (max-width: 480px) {
-                 .header_img { background-size: contain; }
-                 #where_text { order: 1; }
-            }
+        <style type="text/css">
         </style>
     </head>
     
     <body class="is-bgWhite" cz-shortcut-listen="true">
         <header class="section">
-           <div class="header" style="width:100%;height:100%;background-image:url(https://raw.githubusercontent.com/visgl/deck.gl-data/master/events/zurich-summit-2026/banner_summit-2026-zurich.png);" >
-            <!-- div class="container">
-              <img src="https://raw.githubusercontent.com/visgl/deck.gl-data/master/events/zurich-summit-2026/openjs_foundation-logo-horizontal-white.png" />
-              <h1><b>Open Visualization</b><br/>Collaborator Summit 2026</h1>
-            </div-->
+           <img class="header_bg_img" width="100%" height="100%" srcset="https://raw.githubusercontent.com/visgl/deck.gl-data/master/events/zurich-summit-2026/header_bg_800.jpg 800w, https://raw.githubusercontent.com/visgl/deck.gl-data/master/events/zurich-summit-2026/header_bg_1200.png 1200w, https://raw.githubusercontent.com/visgl/deck.gl-data/master/events/zurich-summit-2026/header_bg_2400.jpg 2400w" style="object-fit: cover" />
+           <div class="header" style="width:100%;height:100%;" >
+            <div class="container">
+              <img src="https://raw.githubusercontent.com/visgl/deck.gl-data/master/images/logos/openjsf-color-textw-logow.svg" />
+              <h1><b>Open Visualization</b><br/><nobr>Collaborator Summit</nobr> 2026</h1>
+            </div>
            </div>
         </header>
         
@@ -59,7 +51,7 @@ <h1><b>Open Visualization</b><br/>Collaborator Summit 2026</h1>
                             <a href="https://vis.gl/" target="_blank" rel="noopener noreferrer">vis.gl</a>/<a
                                 href="https://deck.gl/" target="_blank" rel="noopener noreferrer">deck.gl</a>
                             community to discuss the present &amp; future of the leading open source
-                            library for visualization in the Web.
+                            library for visualization on the web.
                         </p>
                     </div>
                 </div>
diff --git a/website/static/events/zurich-summit-2026/style.css b/website/static/events/zurich-summit-2026/style.css
@@ -2638,18 +2638,20 @@ a {
 }
 
 header {
+    position: relative;
     height: 628px;
     background-color: #202020;
 }
 
 .header {
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
     display: flex;
     flex-direction: column;
     color: #fff;
     justify-content: center;
+
+    position: absolute;
+    top: 0;
+    height: 100%;
 }
 
 .header .container {
@@ -2684,4 +2686,38 @@ h1 b {
         width: 260px;
         max-width: 50%;
     }
+
+    .top-paragraphs {
+        padding-top: 45px;
+    }
+
+    header h1 {
+        font-size: calc(1em + 3vw);
+    }
+
+    header .container {
+        margin-left: calc(1em - 1.5vw);
+    }
+
+    header  {
+        height: 410px;
+    }
+}
+
+@media (max-width:400px) {
+    header h1 {
+        font-size: calc(1em + 3vw);
+    }
+    header .container {
+        margin-left: calc(1em - 3.5vw);
+    }
+}
+
+@media (max-width:360px) {
+    .top-paragraphs {
+        padding-top: 20px;
+    }
+    header .container {
+        margin-left: calc(1em - 6.25vw);
+    }
 }
