Ecosystem website: design updated (#632)

### Summary This PR updates the design of the ecosystem webpage, following the changes detailed in #574. Thank you, @mackinziblank, for the cool changes and the mockups! Link to preview the changes: https://arnaucasau.github.io/ecosystem/ Closes #574
Qiskit · Dec 11, 2023 · 431ea2c · 431ea2c
1 parent 14fcc3a
commit 431ea2c
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 95 deletions.
diff --git a/ecosystem/html_templates/webpage.html.jinja b/ecosystem/html_templates/webpage.html.jinja
@@ -41,36 +41,37 @@
   <body class="cds-theme-zone-white">
     <header>
       <div class="inside-header cds--grid layout-lead-space-fixed__container">
-        <img
-          class="ecosystem-logo"
-          src="ecosystem-logo.svg"
-          alt="Qiskit Ecosystem logo"
-        />
-        <p class="title-description">
-          Explore projects and hardware providers that use the open-source
-          Qiskit toolkit or are built on top of it.
-        </p>
+        <div class="header-content">
+          <h1 class="ecosystem-title"><span class="header-qiskit-word">Qiskit</span> ecosystem</h1>
+          <p class="title-description">
+            Explore projects and hardware providers that use the open-source
+            Qiskit toolkit or are built on top of it.
+          </p>
 
-        <cds-button href="https://github.com/qiskit-community/ecosystem">
-          Add your project
-          <span slot="icon" style="margin: 2px 0 -2px 0">
-            <svg
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="currentColor"
-              width="16"
-              height="16"
-              viewBox="0 0 32 32"
-              aria-hidden="true"
-              data-v-bdc8f36d=""
-            >
-              <path
-                d="M16,2a14,14,0,0,0-4.43,27.28c.7.13,1-.3,1-.67s0-1.21,0-2.38c-3.89.84-4.71-1.88-4.71-1.88A3.71,3.71,0,0,0,6.24,22.3c-1.27-.86.1-.85.1-.85A2.94,2.94,0,0,1,8.48,22.9a3,3,0,0,0,4.08,1.16,2.93,2.93,0,0,1,.88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4,5.4,0,0,1,1.44-3.76,5,5,0,0,1,.14-3.7s1.17-.38,3.85,1.43a13.3,13.3,0,0,1,7,0c2.67-1.81,3.84-1.43,3.84-1.43a5,5,0,0,1,.14,3.7,5.4,5.4,0,0,1,1.44,3.76c0,5.38-3.27,6.56-6.39,6.91a3.33,3.33,0,0,1,.95,2.59c0,1.87,0,3.38,0,3.84s.25.81,1,.67A14,14,0,0,0,16,2Z"
-              ></path>
-            </svg>
-          </span>
-        </cds-button>
+          <cds-button href="https://github.com/qiskit-community/ecosystem">
+            Add your project
+            <span slot="icon" style="margin: 2px 0 -2px 0">
+              <svg
+                focusable="false"
+                preserveAspectRatio="xMidYMid meet"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+                width="16"
+                height="16"
+                viewBox="0 0 32 32"
+                aria-hidden="true"
+                data-v-bdc8f36d=""
+              >
+                <path
+                  d="M16,2a14,14,0,0,0-4.43,27.28c.7.13,1-.3,1-.67s0-1.21,0-2.38c-3.89.84-4.71-1.88-4.71-1.88A3.71,3.71,0,0,0,6.24,22.3c-1.27-.86.1-.85.1-.85A2.94,2.94,0,0,1,8.48,22.9a3,3,0,0,0,4.08,1.16,2.93,2.93,0,0,1,.88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4,5.4,0,0,1,1.44-3.76,5,5,0,0,1,.14-3.7s1.17-.38,3.85,1.43a13.3,13.3,0,0,1,7,0c2.67-1.81,3.84-1.43,3.84-1.43a5,5,0,0,1,.14,3.7,5.4,5.4,0,0,1,1.44,3.76c0,5.38-3.27,6.56-6.39,6.91a3.33,3.33,0,0,1,.95,2.59c0,1.87,0,3.38,0,3.84s.25.81,1,.67A14,14,0,0,0,16,2Z"
+                ></path>
+              </svg>
+            </span>
+          </cds-button>
+        </div>
+        <div class="header-logo cds--grid layout-lead-space-fixed__container">
+          <img src="Qiskit_gradient.svg"><img/>
+        </div>
       </div>
     </header>
 

diff --git a/website/Qiskit_gradient.svg b/website/Qiskit_gradient.svg