Change CNCF logo for dark mode (main page only)

Tim Bannister · tamilselvan1102 · Tim Bannister · commit 7bcfea6ccef8 · 2025-02-16T20:16:55.000Z
Co-authored-by: Tamilselvan Thangamony &lt;20103020+tamilselvan1102@users.noreply.github.com&gt;
diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss
@@ -462,16 +462,6 @@ $video-section-height: 200px;
   }
 }
 
-// Add logo to CNCF section
-section#cncf {
-  padding-top: 60px;
-  padding-bottom: 140px;
-  background-image: url(/images/cncf-color.svg);
-  background-position: center 100px;
-  background-repeat: no-repeat;
-  background-size: 300px;
-}
-
 // OCEAN NODES
 #oceanNodes, .td-home .k8s-overview {
 
diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
@@ -340,6 +340,30 @@ input[type="search"]{
 }
 
 
+.cncf-logo-details {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  p {
+    text-align: center;
+  }
+
+  a {
+    color: inherit;
+    background: transparent;
+    text-decoration: underline; // exception from usual convention
+  }
+
+  picture {
+    display: block;
+    > * {
+      min-height: 4em;
+      width: calc(clamp(20em,18em + 20mm,100vw));
+    }
+  }
+}
+
 /* FOOTER */
 footer {
   background-color: #202020;
diff --git a/layouts/index.html b/layouts/index.html
@@ -1,11 +1,7 @@
 {{ define "main" }}
 {{ .Content }}
 <section id="cncf">
-    <div class="main-section">
-        <center>
-        <p style="font-size: 20px">{{ T "main_cncf_project" | safeHTML }}
-        </center>
-    </div>
+    {{ partial "cncf.html" . }}
 </section>
 
 {{/* legacy kubeweekly support */}}
diff --git a/layouts/partials/cncf.html b/layouts/partials/cncf.html
@@ -0,0 +1,9 @@
+<div class="main-section">
+  <div class="cncf-logo-details">
+      <p>{{ T "main_cncf_project" | safeHTML }}</p>
+      <picture>
+          <source srcset="/images/cncf-logo-dark.svg" media="(prefers-color-scheme: dark)">
+          <img src="/images/cncf-logo-white.svg" class="cncf-img">
+      </picture>
+  </div>
+</div>
diff --git a/static/images/cncf-logo-dark.svg b/static/images/cncf-logo-dark.svg
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="a"
+   x="0px"
+   y="0px"
+   viewBox="0 0 399.1 76.1"
+   style="enable-background:new 0 0 399.1 76.1;"
+   xml:space="preserve"
+   sodipodi:docname="cncf-logo-dark.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs10" /><sodipodi:namedview
+   id="namedview10"
+   pagecolor="#ffffff"
+   bordercolor="#000000"
+   borderopacity="0.25"
+   inkscape:showpageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   inkscape:deskcolor="#d1d1d1"
+   showgrid="false"
+   inkscape:zoom="7.308945"
+   inkscape:cx="199.55"
+   inkscape:cy="38.035585"
+   inkscape:window-width="3758"
+   inkscape:window-height="2091"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="g1" />
+<style
+   type="text/css"
+   id="style1">
+	.st0{fill:#0086FF;}
+	.st1{fill:#93EAFF;}
+</style>
+<g
+   id="g3">
+	<g
+   id="g2">
+		<g
+   id="g1">
+			<path
+   d="M98.9,33.4c1.5,0,2.9-0.3,4.3-0.9c1.3-0.6,2.5-1.6,3.4-2.8l4.1,4.2c-3.2,3.6-6.9,5.4-11.3,5.4c-2,0.1-3.9-0.2-5.8-1     c-1.8-0.7-3.5-1.8-5-3.1c-1.4-1.3-2.5-3-3.2-4.7c-0.7-1.8-1.1-3.7-1-5.6c-0.1-1.9,0.3-3.9,1-5.7c0.7-1.8,1.8-3.4,3.2-4.8     c1.5-1.4,3.3-2.5,5.2-3.2c1.9-0.7,4-1,6.1-0.9c2.1,0.1,4.1,0.6,6,1.5c1.9,0.9,3.5,2.2,4.9,3.8l-3.9,4.5c-0.9-1.2-2-2.1-3.3-2.7     c-1.3-0.6-2.7-1-4.2-1c-2.2,0-4.4,0.8-6.1,2.3c-0.9,0.8-1.5,1.8-2,2.9c-0.4,1.1-0.6,2.3-0.6,3.4c-0.1,1.2,0.1,2.3,0.5,3.4     c0.4,1.1,1,2.1,1.9,2.9C94.7,32.6,96.8,33.4,98.9,33.4L98.9,33.4z M115.5,38.9V10.7h6.3v22.6h12.1v5.6H115.5z M161.5,35     c-2.9,2.7-6.6,4.2-10.6,4.2s-7.7-1.5-10.6-4.2c-1.4-1.3-2.5-2.9-3.2-4.7c-0.7-1.8-1.1-3.7-1.1-5.6c-0.1-1.9,0.3-3.9,1-5.6     c0.7-1.8,1.8-3.4,3.2-4.7c2.9-2.7,6.6-4.2,10.6-4.2s7.7,1.5,10.6,4.2c1.4,1.3,2.5,2.9,3.2,4.7c0.7,1.8,1.1,3.7,1,5.6     c0.1,1.9-0.3,3.9-1,5.6C164,32.1,162.9,33.7,161.5,35z M159.3,24.7c0-2.4-0.9-4.7-2.5-6.5c-0.8-0.8-1.7-1.5-2.7-2     c-1-0.5-2.2-0.7-3.3-0.7c-1.1,0-2.2,0.2-3.3,0.7c-1,0.5-2,1.1-2.7,2c-1.6,1.8-2.5,4.1-2.5,6.5c0,2.4,0.9,4.7,2.5,6.5     c0.8,0.8,1.7,1.5,2.7,2c1,0.5,2.2,0.7,3.3,0.7c1.1,0,2.2-0.2,3.3-0.7c1-0.5,2-1.1,2.7-2c0.8-0.9,1.5-1.9,1.9-3     C159.2,27,159.4,25.9,159.3,24.7z M178.6,31.7c0.5,0.7,1.2,1.2,1.9,1.5c0.7,0.3,1.6,0.5,2.4,0.5c0.8,0,1.6-0.1,2.3-0.5     c0.7-0.3,1.4-0.9,1.8-1.5c1.1-1.6,1.6-3.4,1.5-5.3V10.8h6.3v15.8c0,4.1-1.1,7.2-3.4,9.4c-1.2,1.1-2.5,2-4,2.5     c-1.5,0.6-3.1,0.8-4.7,0.8c-1.6,0-3.2-0.2-4.7-0.8c-1.5-0.6-2.9-1.4-4-2.5c-2.3-2.2-3.4-5.3-3.4-9.4V10.8h6.3v15.6     C176.9,28.3,177.5,30.2,178.6,31.7z M223.1,14.4c2.7,2.5,4.1,5.9,4.1,10.3s-1.3,7.9-3.9,10.5c-2.6,2.6-6.7,3.8-12,3.8h-9.8V10.7     h10C216.5,10.7,220.4,11.9,223.1,14.4z M218.5,31.2c1.5-1.4,2.3-3.6,2.3-6.4s-0.8-4.9-2.3-6.4s-3.9-2.3-7.1-2.3h-3.5v17.2h4     C214.3,33.5,216.7,32.8,218.5,31.2z M263.1,10.7h6.3v28.3h-6.3l-13.5-17.7v17.7h-6.3V10.7h5.9l13.9,18.2V10.7z M296.5,38.9     l-2.7-6.1h-11.9l-2.7,6.1h-6.8l12.2-28.3h6.1L303,38.9H296.5z M288,19.1l-3.5,8.2h7L288,19.1z M316.5,16.2V39h-6.3V16.2h-8v-5.4     h22.4v5.4C324.6,16.2,316.5,16.2,316.5,16.2z M329,10.7h6.3v28.3H329C329,38.9,329,10.7,329,10.7z M352.8,28.7l7.2-18h6.9     l-11.3,28.3h-5.3l-11.3-28.3h6.9L352.8,28.7z M390.5,10.7v5.6h-14.1v5.8h12.7v5.4h-12.7v5.9H391V39h-20.8V10.8L390.5,10.7     C390.5,10.8,390.5,10.7,390.5,10.7z M91.6,63c0.8,0,1.6-0.2,2.4-0.5c0.7-0.4,1.4-0.9,1.9-1.6l2.3,2.4c-0.8,0.9-1.7,1.7-2.9,2.2     c-1.1,0.5-2.3,0.8-3.5,0.8c-1.1,0-2.2-0.1-3.2-0.5c-1-0.4-2-1-2.8-1.8c-0.8-0.7-1.4-1.6-1.8-2.6c-0.4-1-0.6-2.1-0.6-3.2     c0-1.1,0.2-2.2,0.6-3.2c0.4-1,1-1.9,1.8-2.7c0.8-0.8,1.7-1.4,2.7-1.8c1-0.4,2.1-0.6,3.2-0.6c1.2,0,2.5,0.2,3.6,0.7     c1.1,0.5,2.1,1.3,3,2.2l-2.2,2.5c-0.5-0.7-1.1-1.2-1.8-1.6c-0.7-0.4-1.5-0.5-2.4-0.5c-1.3,0-2.5,0.5-3.4,1.3     c-0.5,0.4-0.9,1-1.1,1.6c-0.2,0.6-0.4,1.3-0.3,1.9c0,0.6,0.1,1.3,0.3,1.9c0.2,0.6,0.6,1.2,1,1.6c0.4,0.4,0.9,0.8,1.5,1     S91,63,91.6,63L91.6,63z M113.9,63.9c-1.6,1.5-3.7,2.4-5.9,2.4c-1.1,0-2.2-0.2-3.2-0.6c-1-0.4-1.9-1-2.7-1.8     c-1.5-1.5-2.4-3.6-2.4-5.8s0.9-4.3,2.4-5.8c1.6-1.5,3.7-2.4,5.9-2.4c1.1,0,2.2,0.2,3.2,0.6s1.9,1,2.7,1.8     c1.5,1.5,2.4,3.6,2.4,5.8S115.4,62.4,113.9,63.9z M112.8,58.1c0-1.3-0.4-2.6-1.3-3.6c-0.4-0.5-0.9-0.8-1.5-1.1     c-0.6-0.3-1.2-0.4-1.8-0.4c-0.6,0-1.3,0.1-1.8,0.4c-0.6,0.3-1.1,0.7-1.5,1.2c-0.5,0.5-0.8,1-1,1.7c-0.2,0.6-0.3,1.3-0.3,1.9     c0,1.3,0.5,2.6,1.3,3.6c0.4,0.5,0.9,0.8,1.5,1.1c0.6,0.3,1.2,0.4,1.8,0.4c0.6,0,1.3-0.1,1.8-0.4c0.6-0.3,1.1-0.7,1.5-1.2     C112.3,60.8,112.8,59.5,112.8,58.1L112.8,58.1z M133.5,56.1l-4.3,8.7h-2.1l-4.3-8.7v10h-3.5V50.3h4.8l4.1,8.7l4.1-8.7h4.8v15.9     h-3.5L133.5,56.1L133.5,56.1z M151.9,51.8c0.6,0.5,1.1,1.2,1.4,2c0.3,0.8,0.4,1.6,0.3,2.4c0,2-0.6,3.4-1.7,4.3     c-1.1,1-2.9,1.3-5.2,1.3h-2.1v4.4H141V50.3h5.6C149,50.3,150.7,50.8,151.9,51.8z M149.3,58c0.5-0.6,0.7-1.3,0.7-2.1     c0-0.4,0-0.7-0.2-1.1c-0.2-0.3-0.4-0.6-0.7-0.8c-0.8-0.4-1.7-0.6-2.6-0.6h-2v5.3h2.4c0.4,0,0.9,0,1.3-0.1     C148.6,58.4,149,58.2,149.3,58z M160.6,62c0.3,0.4,0.6,0.6,1.1,0.8c0.4,0.2,0.9,0.3,1.3,0.3c0.5,0,0.9-0.1,1.3-0.3     c0.4-0.2,0.8-0.5,1.1-0.8c0.6-0.9,0.9-2,0.9-3v-8.8h3.5v8.8c0.1,1-0.1,1.9-0.4,2.9c-0.3,0.9-0.8,1.8-1.5,2.5     c-1.3,1.2-3.1,1.8-4.9,1.8c-1.8,0-3.5-0.7-4.8-1.9c-0.7-0.7-1.2-1.6-1.5-2.5c-0.3-0.9-0.5-1.9-0.4-2.9v-8.8h3.5v8.8     C159.6,60,159.9,61.1,160.6,62z M180.1,53.4v12.7h-3.5V53.4h-4.5v-3h12.6v3C184.6,53.4,180.1,53.4,180.1,53.4z M187.2,50.3h3.5     v15.9h-3.5C187.2,66.2,187.2,50.3,187.2,50.3z M205.7,50.3h3.5v15.9h-3.5l-7.5-9.9v9.9h-3.5V50.3h3.3l7.8,10.2L205.7,50.3     C205.8,50.3,205.7,50.3,205.7,50.3z M223.5,58.1h3.5v5.6c-0.8,0.9-1.9,1.6-3,2c-1.1,0.5-2.4,0.7-3.6,0.6c-2.2,0-4.3-0.8-5.9-2.3     c-0.8-0.7-1.4-1.6-1.8-2.6c-0.4-1-0.6-2.1-0.6-3.2c0-1.1,0.2-2.2,0.6-3.2c0.4-1,1-1.9,1.8-2.7s1.7-1.4,2.7-1.8     c1-0.4,2.1-0.6,3.2-0.6c2.2,0,4.3,0.8,5.9,2.3l-1.8,2.7c-0.5-0.6-1.2-1-2-1.2c-0.6-0.2-1.3-0.4-1.9-0.4c-1.3,0-2.5,0.5-3.4,1.3     c-0.5,0.5-0.9,1-1.1,1.7s-0.4,1.3-0.3,2c0,1.3,0.4,2.6,1.3,3.6c0.4,0.4,0.9,0.8,1.4,1c0.5,0.2,1.1,0.3,1.7,0.3     c1.1,0.1,2.1-0.2,3-0.7v-4.5H223.5z M247,50.3v3.1h-7.3v3.4h6.9V60h-6.9v6.2h-3.5V50.3C236.1,50.3,247,50.3,247,50.3z      M263.4,63.9c-1.6,1.5-3.7,2.4-5.9,2.4c-1.1,0-2.2-0.2-3.2-0.6c-1-0.4-1.9-1-2.7-1.8c-1.5-1.5-2.4-3.6-2.4-5.8s0.9-4.3,2.4-5.8     c1.6-1.5,3.7-2.4,5.9-2.4c1.1,0,2.2,0.2,3.2,0.6s1.9,1,2.7,1.8c1.5,1.5,2.4,3.6,2.4,5.8S264.9,62.4,263.4,63.9z M262.1,58.1     c0-1.3-0.4-2.6-1.3-3.6c-0.4-0.5-0.9-0.8-1.5-1.1c-0.6-0.3-1.2-0.4-1.8-0.4c-0.6,0-1.3,0.1-1.8,0.4c-0.6,0.3-1.1,0.7-1.5,1.2     c-0.5,0.5-0.8,1-1,1.7s-0.3,1.3-0.3,1.9c0,1.3,0.5,2.6,1.3,3.6c0.4,0.5,0.9,0.8,1.5,1.1c0.6,0.3,1.2,0.4,1.8,0.4     c0.6,0,1.3-0.1,1.8-0.4c0.6-0.3,1.1-0.7,1.5-1.2c0.5-0.5,0.8-1,1-1.7S262.2,58.8,262.1,58.1L262.1,58.1z M273,62     c0.3,0.4,0.6,0.6,1.1,0.8c0.4,0.2,0.9,0.3,1.3,0.3s0.9-0.1,1.3-0.3c0.4-0.2,0.8-0.5,1.1-0.8c0.6-0.9,0.9-2,0.9-3v-8.8h3.5v8.8     c0.1,1-0.1,1.9-0.4,2.9c-0.3,0.9-0.8,1.8-1.5,2.5c-1.3,1.2-3.1,1.8-4.9,1.8c-1.8,0-3.5-0.7-4.8-1.9c-0.7-0.7-1.2-1.6-1.5-2.5     c-0.3-0.9-0.5-1.9-0.4-2.9v-8.8h3.5v8.8C272,60,272.3,61.2,273,62z M296.9,50.3h3.5v15.9h-3.5l-7.5-9.9v9.9h-3.5V50.3h3.3     l7.8,10.2L296.9,50.3C297,50.3,296.9,50.3,296.9,50.3z M316.4,52.4c0.8,0.7,1.4,1.7,1.8,2.7s0.6,2.1,0.5,3.1     c0.1,1.1-0.1,2.1-0.5,3.1c-0.4,1-1,1.9-1.7,2.7c-1.4,1.4-3.7,2.2-6.8,2.2h-5.4V50.3h5.6C312.8,50.3,315,51,316.4,52.4z      M313.8,61.9c0.4-0.5,0.8-1,1-1.6c0.2-0.6,0.3-1.3,0.3-1.9c0-0.7-0.1-1.3-0.3-1.9s-0.6-1.2-1-1.7c-0.6-0.5-1.2-0.8-1.9-1     s-1.4-0.3-2.1-0.2h-2v9.6h2.3C311.4,63.1,312.8,62.7,313.8,61.9z M332.6,66.1l-1.4-3.4h-6.7l-1.4,3.4h-3.8l6.9-15.9h3.4l6.9,15.9     H332.6z M327.8,55l-2,4.6h4L327.8,55z M343.8,53.4v12.7h-3.5V53.4h-4.6v-3h12.6v3C348.3,53.4,343.8,53.4,343.8,53.4z M350.8,50.3     h3.5v15.9h-3.5C350.8,66.2,350.8,50.3,350.8,50.3z M371.6,63.9c-1.6,1.5-3.7,2.4-5.9,2.4c-1.1,0-2.2-0.2-3.2-0.6s-1.9-1-2.7-1.8     c-1.5-1.5-2.4-3.6-2.4-5.8s0.9-4.3,2.4-5.8c1.6-1.5,3.7-2.4,5.9-2.4c1.1,0,2.2,0.2,3.2,0.6c1,0.4,1.9,1,2.7,1.8     c1.5,1.5,2.4,3.6,2.4,5.8S373.1,62.4,371.6,63.9z M370.5,58.1c0-1.3-0.5-2.6-1.3-3.6c-0.4-0.5-0.9-0.8-1.5-1.1     c-0.6-0.3-1.2-0.4-1.8-0.4c-0.6,0-1.3,0.1-1.8,0.4c-0.6,0.3-1.1,0.7-1.5,1.2c-0.5,0.5-0.8,1-1,1.7s-0.3,1.3-0.3,1.9     c0,1.3,0.5,2.6,1.3,3.6c0.4,0.5,0.9,0.8,1.5,1.1c0.6,0.3,1.2,0.4,1.8,0.4c0.6,0,1.3-0.1,1.8-0.4c0.6-0.3,1.1-0.7,1.5-1.2     C370,60.8,370.5,59.5,370.5,58.1z M388.1,50.3h3.5v15.9h-3.5l-7.5-9.9v9.9H377V50.3h3.3l7.8,10.2     C388.2,60.5,388.1,50.3,388.1,50.3z"
+   id="path1"
+   style="fill:#ffffff;fill-opacity:1" />
+		</g>
+	</g>
+</g>
+<g
+   id="g10">
+	<path
+   class="st0"
+   d="M16.2,47.3H7.5v20.3h20.3v-8.7H16.2V47.3z"
+   id="path3" />
+	<path
+   class="st0"
+   d="M59.8,47.4v11.5H48.2v8.7h20.3V47.3L59.8,47.4L59.8,47.4z"
+   id="path4" />
+	<path
+   class="st0"
+   d="M7.5,27.1h8.8L16.2,27V15.5h11.6V6.8H7.5V27.1z"
+   id="path5" />
+	<path
+   class="st0"
+   d="M48.2,6.8v8.7h11.6v11.6h8.7V6.8C68.4,6.8,48.2,6.8,48.2,6.8z"
+   id="path6" />
+	<path
+   class="st1"
+   d="M47,27.1L35.4,15.5h12.7V6.8H27.8v8.7l11.6,11.6H47z"
+   id="path7" />
+	<path
+   class="st1"
+   d="M36.6,47.3H29l9.6,9.6l1.9,2H27.8v8.7h20.4v-8.8l-5.8-5.7L36.6,47.3z"
+   id="path8" />
+	<path
+   class="st1"
+   d="M59.8,27.1v12.6l-2-2l-9.6-9.6v7.7l5.7,5.7l5.8,5.8h8.8V27.1H59.8L59.8,27.1z"
+   id="path9" />
+	<path
+   class="st1"
+   d="M27.8,38.6L16.3,27.1H7.5v20.2h8.7V34.7l11.6,11.6V38.6z"
+   id="path10" />
+</g>
+</svg>
diff --git a/static/images/cncf-logo-white.svg b/static/images/cncf-logo-white.svg
diff --git a/static/images/cncf-white.png b/static/images/cncf-white.png
