add light/dark mode to homepage

quarkusio · May 17, 2024 · 019234b · 019234b
1 parent 705ccc9
commit 019234b
Show file tree

Hide file tree

Showing 27 changed files with 52 additions and 39 deletions.
diff --git a/_includes/homepage-features-icon-band.html b/_includes/homepage-features-icon-band.html
@@ -6,27 +6,32 @@ <h2>Quarkus Features</h2>
   </div>
   <div class="grid-container">
     <div class="width-4-12 width-12-12-m contrib-block">
-      <img src="{{site.baseurl}}/assets/images/home/icon-rev-containerfirst.svg">
+      <img class="light-only" src="{{site.baseurl}}/assets/images/about/icon-containerfirst.svg">
+      <img class="dark-only" src="{{site.baseurl}}/assets/images/about/icon-containerfirst-dark.svg">
       <h3><a href="/container-first">Container First</a></h3>
       <p>Quarkus tailors your application for GraalVM and HotSpot. Amazingly fast boot time, incredibly low RSS memory (not just heap size!) offering near instant scale up and high density memory utilization in container orchestration platforms like Kubernetes. We use a technique we call compile time boot.</p>
     </div>
     <div class="width-4-12 width-12-12-m contrib-block">
-      <img src="{{site.baseurl}}/assets/images/home/icon-rev-reactive.svg">
+      <img class="light-only" src="{{site.baseurl}}/assets/images/about/icon-reactive.svg">
+      <img class="dark-only" src="{{site.baseurl}}/assets/images/about/icon-reactive-dark.svg">
       <h3><a href="/continuum">Unifies imperative and reactive</a></h3>
       <p>Combine both the familiar imperative code and the reactive style when developing applications.</p>
     </div>
     <div class="width-4-12 width-12-12-m contrib-block">
-      <img src="{{{site.baseurl}}/assets/images/home/icon-rev-standards.svg">
+      <img class="light-only" src="{{site.baseurl}}/assets/images/about/icon-standards.svg">
+      <img class="dark-only" src="{{site.baseurl}}/assets/images/about/icon-standards-dark.svg">
       <h3><a href="/standards">Community and Standards</a></h3>
       <p>Quarkus provides a cohesive, fun to use, full-stack framework by leveraging a growing list of over fifty best-of-breed libraries that you love and use. All wired on a standard backbone.</p>
     </div>
     <div class="width-4-12 width-12-12-m contrib-block">
-      <img src="{{site.baseurl}}/assets/images/home/icon-rev-kube-native.svg">
+      <img class="light-only" src="{{site.baseurl}}/assets/images/about/icon-kube-native.svg">
+      <img class="dark-only" src="{{site.baseurl}}/assets/images/about/icon-kube-native-dark.svg">
       <h3><a href="/kubernetes-native">Kube-Native</a></h3>
       <p>The combination of Quarkus and Kubernetes provides an ideal environment for creating scalable, fast, and lightweight applications. Quarkus significantly increases developer productivity with tooling, pre-built integrations, application services, and more.</p>
     </div>
     <div class="width-4-12 width-12-12-m contrib-block">
-      <img src="{{site.baseurl}}/assets/images/home/icon-rev-developerjoy.svg">
+      <img class="light-only" src="{{site.baseurl}}/assets/images/about/icon-developerjoy.svg">
+      <img class="dark-only" src="{{site.baseurl}}/assets/images/about/icon-developerjoy-dark.svg">
       <h3><a href="/developer-joy">Developer Joy</a></h3>
       <p>A cohesive platform for optimized developer joy with unified configuration and no hassle native executable generation. Zero config, live reload in the blink of an eye and streamlined code for the 80% common usages, flexible for the remainder 20%.</p>
     </div>

diff --git a/_includes/homepage-performance-band.html b/_includes/homepage-performance-band.html
@@ -4,7 +4,8 @@
       <h2>Quarkus offers unequaled performance </h2>
     </div>
     <div class="width-12-12 block-content">
-      <img src="{{site.baseurl}}/assets/images/quarkus_metrics_graphic_bootmem_wide.png">
+      <img class="light-only" src="{{site.baseurl}}/assets/images/home/quarkus_metrics_graphic_bootmem_wide.png">
+      <img class="dark-only" src="{{site.baseurl}}/assets/images/home/quarkus_metrics_graphic_bootmem_wide-dark.png">
     </div>
   </div>
 </div>
diff --git a/_includes/homepage-userstory-callout.html b/_includes/homepage-userstory-callout.html
@@ -2,16 +2,16 @@
 <div class="full-width-bg component homepage-callout">
   <div class="grid-wrapper">
     <div class="grid__item width-3-12 width-12-12-m quote-image">
-     <a href="{{site.baseurl}}/blog/aviatar-experiences-significant-savings/"><img src="{{site.baseurl}}/assets/images/home/userstories_lufthuansa.png"></a>
+     <a href="{{site.baseurl}}/blog/aviatar-experiences-significant-savings/"><img class="light-only" src="{{site.baseurl}}/assets/images/home/userstories_lufthuansa.png"><img class="dark-only" src="{{site.baseurl}}/assets/images/home/userstories_lufthuansa-dark.png"></a>
     </div>
     <div class="grid__item width-3-12 width-12-12-m quote-image">
-     <a href="{{site.baseurl}}/blog/logicdrop-customer-story/"><img src="{{site.baseurl}}/assets/images/home/userstories_logicdrop.png"></a>
+     <a href="{{site.baseurl}}/blog/logicdrop-customer-story/"><img class="light-only" src="{{site.baseurl}}/assets/images/home/userstories_logicdrop.png"><img class="dark-only" src="{{site.baseurl}}/assets/images/home/userstories_logicdrop-dark.png"></a>
     </div>
     <div class="grid__item width-3-12 width-12-12-m quote-image">
-     <a href="{{site.baseurl}}/blog/banco-do-brasil-open-banking-user-story/"><img src="{{site.baseurl}}/assets/images/home/userstories_bancodobrasil.png"></a>
+     <a href="{{site.baseurl}}/blog/banco-do-brasil-open-banking-user-story/"><img class="light-only" src="{{site.baseurl}}/assets/images/home/userstories_bancodobrasil.png"><img class="dark-only" src="{{site.baseurl}}/assets/images/home/userstories_bancodobrasil-dark.png"></a>
     </div>
     <div class="grid__item width-3-12 width-12-12-m quote-image">
-     <a href="{{site.baseurl}}/blog/adoptium-customer-story/"><img src="{{site.baseurl}}/assets/images/home/userstories_adoptium.png"></a>
+     <a href="{{site.baseurl}}/blog/adoptium-customer-story/"><img class="light-only" src="{{site.baseurl}}/assets/images/home/userstories_adoptium.png"><img class="dark-only" src="{{site.baseurl}}/assets/images/home/userstories_adoptium-dark.png"></a>
     </div>
   </div>
   <div class="grid-wrapper quote-spacer">
@@ -24,4 +24,4 @@
       <p class="callout-links"><a href="{{ site.data.callout-quotes.usecaselink }}">Read this User Story</a> | <a href="{{site.baseurl}}/blog/tag/user-story/">See All User Stories</a></p>
     </div>
   </div>
-</div>
+</div>
diff --git a/_includes/recent-posts-band.html b/_includes/recent-posts-band.html
@@ -1,4 +1,4 @@
-<div class="component recent-posts-band full-width-bg dark-bg alt-background">
+<div class="component recent-posts-band full-width-bg alt-background">
   <div class="grid-wrapper">
     <div class="width-12-12">
       <h2 class="text-centered">Recent Blog Posts</h2>

diff --git a/_sass/colormode.scss b/_sass/colormode.scss
@@ -8,6 +8,7 @@ html {
 	--main-code-color: #943000;
 	--sec-border-color: #aaa;
 	--sec-background-color: #EFEFEF;
+	--blue-background-color: #e4edf7;
 	--title-background-color: #0d1c2c;
 	--breadcrumb-background-color: #4695EB;
 
@@ -25,6 +26,10 @@ html {
   // image change //
 	.dark-only {display: none;}
 	.light-only {display: inline-block;}
+
+	// blue tile with text //
+	--tile-text-color: #121212;
+	--tile-background-color: #ffffff;
 }
 
 html.dark {
@@ -35,6 +40,7 @@ html.dark {
  	--main-text-color: #B5B5B5;
 	--main-code-color: #F59B00;
  	--sec-background-color: #333333;
+	--blue-background-color: #0D1C2C;
  	--title-background-color: #0e0e0e;
 	--breadcrumb-background-color: #0d1c2c;
 
@@ -47,6 +53,11 @@ html.dark {
 
 	--img-background-color: #c8c8c8;
 
+	// blue tile with text //
+	--tile-text-color: #ffffff;
+	--tile-background-color: #205894;
+
+
 	// search.quarkus.io colors:
 	// no search results background
 	--empty-background-color: #333333;

diff --git a/_sass/includes/homepage-features-band.scss b/_sass/includes/homepage-features-band.scss
@@ -1,5 +1,5 @@
 .homepage-features-band {
-  background-color: $black !important;
+  background: var(--main-background-color);
 
   .contrib-block img {
     max-width: 14rem;

diff --git a/_sass/includes/homepage-hero-band.scss b/_sass/includes/homepage-hero-band.scss
@@ -30,10 +30,12 @@
       font-weight: 600;
       line-height: 3rem;
       margin-top: 1rem;
+      color: $white;
     }
     p {
       font-size: 1.5rem;
       margin-bottom: .5rem;
+      color: $white;
     }
   }
 
@@ -44,6 +46,7 @@
       font-weight: 400;
       line-height: 6.5rem;
       margin: 0;
+      color: $white;
     }
 
     .light-blue { color:$quarkus-blue; }
@@ -104,12 +107,14 @@
       font-weight: 600;
       line-height: 2.5rem;
       margin: .5rem 0;
+      color: $white;
     }
 
     p {
       font-size: 1.5rem;
       line-height: 1.5rem;
       margin: 0;
+      color: $white;
     }
 
     .nowavailable {

diff --git a/_sass/includes/homepage-userstory-callout.scss b/_sass/includes/homepage-userstory-callout.scss
@@ -1,6 +1,7 @@
 .homepage-callout {
-  background-color: $dark-blue-alt !important;
-
+  background-color: var(--blue-background-color);
+  color: var(--main-text-color);
+
   .quote-image {
       display: flex;
       justify-content: center;
@@ -26,7 +27,6 @@
   }
 
   .callout-quote {
-    color: $light-blue;
     font-size: 2rem;
     line-height: 2.5rem;
     margin-top: 0 !important;

diff --git a/_sass/includes/recent-posts-band.scss b/_sass/includes/recent-posts-band.scss
@@ -1,27 +1,33 @@
 .recent-posts-band {
 
   .block-item {
-    background-color: $dark-blue-1;
+    background: var(--tile-background-color);
     padding: 2rem;
     margin: .5rem 0;
 
+    p {
+    color: var(--tile-text-color);
+    }
+
     h6 > a {
-      color: $white !important;
+      color: var(--tile-text-color);
       font-family: inherit;
       font-weight: 600;
       font-size: 1.5rem;
       line-height: 2rem;
     }
 
     .datetag {
-    color: $white !important;
-    font-size: .75rem;
-    margin: 0;
-    padding: 0;
+      color: var(--tile-text-color);
+      font-size: .75rem;
+      margin: 0;
+      padding: 0;
+
+      a { color: var(--tile-text-color); }  
     }
 
     .byline {
-    color: $white !important;
+    color: var(--tile-text-color);
     font-size: 1rem;
     margin: 0;
     padding: 0;

diff --git a/_sass/quarkus.scss b/_sass/quarkus.scss
@@ -6,17 +6,7 @@
 html,
 body {
   font-family: 'Open Sans', Arial, sans-serif;
-  background-color: $black;
-}
-
-body:not(.homepage):not(.error-page) {
   background: var(--main-background-color);
-
-}
-
-.homepage {
-  * { color: $white; 
-  }
 }
 
 * {
@@ -719,7 +709,7 @@ ol.bibliography li {
 }
 
 .alt-background {
-  background-color: var(--title-background-color) !important;
+  background-color: var(--blue-background-color) !important;
 }
 
 .admonitionblock td.icon .icon-tip::before {

diff --git a/assets/images/home/icon-rev-containerfirst.svg b/assets/images/home/icon-rev-containerfirst.svg
diff --git a/assets/images/home/icon-rev-developerjoy.svg b/assets/images/home/icon-rev-developerjoy.svg
diff --git a/assets/images/home/icon-rev-kube-native.svg b/assets/images/home/icon-rev-kube-native.svg