Change CNCF logo for dark mode (main page only)

Co-authored-by: Tamilselvan Thangamony <[email protected]>

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 {
 

assets/scss/_custom.scss

@@ -313,6 +313,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;

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>
 
 <section id="kubeweekly">

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>