Prepare site main page for dark mode

Co-authored-by: Tamilselvan Thangamony <[email protected]>
kubernetes · Jan 29, 2025 · 10d6fbc · 10d6fbc
1 parent 5d0d752
commit 10d6fbc
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 29 deletions.
diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
@@ -444,41 +444,87 @@ footer {
 
 // Home page dark-mode
 @media (prefers-color-scheme: dark) {
-  .cid-home main {
-    background-color: $dark-bg-color-2;
-    color:$dark-text-color-1;
-  }
+  body.cid-home {
+    main {
+      background-color: $dark-bg-color-2;
+      color:$dark-text-color-1;
+
+      section:not(#video):not(#cncf) {
+        background-color: $dark-bg-color-1;
+        color:$dark-text-color-1;
+      }
 
-  .cid-home main section:not(#video):not(#cncf) {
-    background-color: $dark-bg-color-1;
-    color:$dark-text-color-1;
-  }
+      section#video #desktopShowVideoButton {
+        background-color: $dark-bg-color-1;
+      }
 
-  .cid-home .feature-box div {
-    background-color: $dark-bg-color-2;
-    color:$dark-text-color-1;
-  }
+      section#video #desktopShowVideoButton {
+        color: $white;
+        background-color: $primary;
 
-  .cid-home main section:is(#video) #desktopShowVideoButton {
-    background-color: $dark-bg-color-1;
-  }
+        &:hover {
+          color: $primary;
+          background-color: $white;
+        }
 
-  .cid-home main section:is(#video) #desktopShowVideoButton:hover {
-    color: $dark-text-color-2;
-  }
+        &::before {
+          border-color: transparent transparent transparent $white;
+        }
 
-  .cid-home main section:is(#video) #desktopKCButton:hover {
-    background-color: $dark-bg-color-1;
-  }
+        &:hover::before {
+          border-color: transparent transparent transparent $primary;
+        }
+      }
 
-  .cid-home main section:is(#talkToUs) img {
-    filter: invert(100%);
-    -webkit-filter: invert(100%);
-  }
+      section#video #desktopKCButton:hover {
+        background-color: $dark-bg-color-1;
+      }
+
+      section#cncf {
+        background-color: $dark-bg-color-2;
+      }
 
-  .cid-home main section:is(#cncf) {
-    background-color: $dark-bg-color-2;
-    background-image: url(/images/cncf-white.png);
+      section.features-container .k8s-features-heading {
+        color: $white;
+        background-color: $dark-bg-color-1;
+      }
+
+      section.features-container > div > .feature-box {
+        background-color: $dark-bg-color-2;
+        color:$dark-text-color-1;
+
+        h3 a, h4 a, h5 a {
+          color: $white;
+          background: transparent;
+        }
+
+        h3 a:hover, h4 a:hover, h5 a:hover {
+          text-decoration: underline;
+        }
+      }
+
+      .search-bar {
+        background-color: #d3d3d3;
+        color: #ffffff;
+        > * {
+          color: #ffffff;
+        }
+      }
+
+      input.search-input, input.email {
+        background-color: #D3D3D3 !important;
+        color: #000 !important;
+      }
+
+      input.search-input::placeholder, input.email::placeholder{
+        color: #000;
+      }
+
+      #mc_embed_signup_scroll input.email {
+        color: #ffffff !important;
+        background-color: #a9a9a9 !important;
+      }
+    }
   }
 }
 

diff --git a/layouts/case-studies/list.html b/layouts/case-studies/list.html
@@ -39,7 +39,13 @@ <h4>"{{ .Params.quote | html }}"</h4>
 	<h3>{{ .Title }}</h3>
 	<div id="usersGrid">
 		{{ range $pages.ByTitle }}
-		{{ $logo := .Resources.GetMatch "**{feature,logo}*.svg" }}
+		{{ $logo := .Resources.GetMatch "**_featured_logo.svg" }}
+		{{ if not $logo }}
+			{{ $logo = .Resources.GetMatch "**_featured_logo.png" }}
+		{{ end }}
+		{{ if not $logo }}
+			{{ $logo = .Resources.GetMatch "**logo*.svg" }}
+		{{ end }}
 		{{ if not $logo }}
 			{{ $logo = .Resources.GetMatch "**logo*.png" }}
 		{{ end }}