Change CNCF logo for dark mode (main page only)

Co-authored-by: Tamilselvan Thangamony <[email protected]>
kubernetes · Jan 28, 2025 · 4710274 · 4710274
1 parent efb0708
commit 4710274
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 5 deletions.
diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
@@ -284,6 +284,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>
 
 <section id="kubeweekly">

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
diff --git a/static/images/cncf-color.svg → static/images/cncf-logo-white.svg b/static/images/cncf-color.svg → static/images/cncf-logo-white.svg
diff --git a/static/images/cncf-white.png b/static/images/cncf-white.png