Merge pull request #1962 from insectengine/Mode_updates

Color Mode Switcher and nit fixes

_includes/about.html

@@ -9,34 +9,26 @@ <h2>Open Source Utterly and Absolutely</h2>
       <h2>What Makes Quarkus Different?</h2>
     </div>
     <div class="width-3-12 width-12-12-m">
-      <picture>
-        <source srcset="{{site.baseurl}}/assets/images/about/icon-developerjoy-dark.svg" media="(prefers-color-scheme:dark)">
-          <img src="{{site.baseurl}}/assets/images/about/icon-developerjoy.svg">
-      </picture>
+      <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>Developer Joy</h3>
       <p>Developers are critical to the success of almost every organization and they need the tools to build cloud-native applications quickly and efficiently. Quarkus provides a frictionless development experience through a combination of tools, libraries, extensions, and more. Quarkus makes developers more efficient with tools to improve the inner loop development cycle while in dev mode. <br><a href="/developer-joy/">Learn more about Developer Joy</a></p>
     </div>
     <div class="width-3-12 width-12-12-m">
-      <picture>
-        <source srcset="{{site.baseurl}}/assets/images/about/icon-kube-native-dark.svg" media="(prefers-color-scheme:dark)">
-          <img src="{{site.baseurl}}/assets/images/about/icon-kube-native.svg">
-      </picture>
+      <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>Kubernetes-native</h3>
       <p>Quarkus was built from the ground up for Kubernetes making it easy to deploy applications without having to understand all of the complexities of the platform. Quarkus allows developers to automatically generate Kubernetes resources including building and deploying container images without having to manually create YAML files. <br><a href="/kubernetes-native/">Learn more about Kubernetes-native</a></p>
     </div>
     <div class="width-3-12 width-12-12-m">
-      <picture>
-        <source srcset="{{site.baseurl}}/assets/images/about/icon-standards-dark.svg" media="(prefers-color-scheme:dark)">
-          <img src="{{site.baseurl}}/assets/images/about/icon-standards.svg">
-      </picture>
+      <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>Best of Breed Libraries and Standards</h3>
       <p>Quarkus provides a cohesive, fun to use, full-stack framework by leveraging a growing list of hundreds of best-of-breed libraries that you love and use. All wired on a standard backbone. <br><a href="/standards/">Learn more about Standards</a></p>
     </div>
     <div class="width-3-12 width-12-12-m">
-      <picture>
-        <source srcset="{{site.baseurl}}/assets/images/about/icon-reactive-dark.svg" media="(prefers-color-scheme:dark)">
-          <img src="{{site.baseurl}}/assets/images/about/icon-reactive.svg">
-      </picture>
+      <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>Imperative and reactive code</h3>
       <p>Quarkus is designed to seamlessly combine the familiar imperative style code and the non-blocking, reactive style when developing applications.</p>
       <p>This is helpful for both Java developers who are used to working with the imperative model and don’t want to switch things up, and those working with a cloud-native/reactive approach. The Quarkus development model can adapt itself to whatever app you’re developing. <br><a href="/continuum/">Learn more about Reactive</a></p>

_includes/brand-band.html

@@ -12,7 +12,7 @@ <h4>Background Color</h4>
 </div>
 
 <div class="component-wrapper brand-band">
-  <div class="width-4-12 width-12-12-m brand-block">
+  <div class="width-4-12 width-12-12-m brand-block-white">
     <img src="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_450px_default.png" alt="Quarkus vertical logo file default">
     <h4>Vertical Logo Default</h4>
     <p><a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_450px_default.png">450px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_1280px_default.png">1280px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_default.svg">SVG</a></p>
@@ -22,7 +22,7 @@ <h4>Vertical Logo Default</h4>
     <h4>Vertical Logo Reversed</h4>
     <p><a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_450px_reverse.png">450px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_1280px_reverse.png">1280px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_default.svg">SVG</a></p>
   </div>
-  <div class="width-4-12 width-12-12-m brand-block">
+  <div class="width-4-12 width-12-12-m brand-block-white">
     <img src="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_450px_black.png" alt="Quarkus vertical logo file black">
     <h4>Vertical Logo Black</h4>
     <p><a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_450px_black.png">450px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_1280px_black.png">1280px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_black.svg">SVG</a></p>
@@ -32,8 +32,7 @@ <h4>Vertical Logo Black</h4>
     <h4>Vertical Logo White</h4>
     <p><a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_450px_white.png">450px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_1280px_white.png">1280px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_vertical_white.svg">SVG</a></p>
   </div>
-
-  <div class="width-4-12 width-12-12-m brand-block">
+  <div class="width-4-12 width-12-12-m brand-block-white">
     <img src="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_450px_default.png" alt="Quarkus horizontal logo file default">
     <h4>Horizontal Logo Default</h4>
     <p><a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_450px_default.png">450px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_1280px_default.png">1280px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_default.svg">SVG</a></p>
@@ -43,7 +42,7 @@ <h4>Horizontal Logo Default</h4>
     <h4>Horizontal Logo Reversed</h4>
     <p><a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_450px_reverse.png">450px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_1280px_reverse.png">1280px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_reverse.svg">SVG</a></p>
   </div>
-  <div class="width-4-12 width-12-12-m brand-block">
+  <div class="width-4-12 width-12-12-m brand-block-white">
     <img src="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_450px_black.png" alt="Quarkus horizontal logo file black">
     <h4>Horizontal Logo Black</h4>
     <p><a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_450px_black.png">450px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_1280px_black.png">1280px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_logo_horizontal_black.svg">SVG</a></p>
@@ -58,7 +57,7 @@ <h4>Horizontal Logo Black</h4>
     <h2>Quarkus Icon Assets</h2>
   </div>
 
-  <div class="width-4-12 width-12-12-m brand-block">
+  <div class="width-4-12 width-12-12-m brand-block-white">
     <img src="{{site.baseurl}}/assets/images/brand/quarkus_icon_256px_default.png" alt="Quarkus icon file default">
     <h4>Icon Default</h4>
     <p><a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_512px_default.png">512px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_1024px_default.png">1024px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_default.svg">SVG</a></p>
@@ -68,7 +67,7 @@ <h4>Icon Default</h4>
     <h4>Icon Reversed</h4>
     <p><a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_256px_reverse.png">256px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_512px_reverse.png">512px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_1024px_reverse.png">1024px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_256px_reverse.svg">SVG</a></p>
   </div>
-  <div class="width-4-12 width-12-12-m brand-block">
+  <div class="width-4-12 width-12-12-m brand-block-white">
     <img src="{{site.baseurl}}/assets/images/brand/quarkus_icon_256px_black.png" alt="Quarkus icon file black">
     <h4>Icon black</h4>
     <p><a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_512px_black.png">512px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_1024px_black.png">1024px</a> | <a href="{{site.baseurl}}/assets/images/brand/quarkus_icon_black.svg">SVG</a></p>
@@ -89,37 +88,45 @@ <h3>Logo Spacing</h3>
     <p>The logo needs space to breath so make sure you leave at least an icon's height and width around it. </p>
   </div>
   <div class="width-6-12 width-12-12-m ">
-    <img src="{{site.baseurl}}/assets/images/brand/logo_spacing_vert.png" alt="Vertical Logo spacing">
+    <img class="light-only" src="{{site.baseurl}}/assets/images/brand/logo_spacing_vert.png" alt="Vertical Logo spacing" />
+    <img class="dark-only" src="{{site.baseurl}}/assets/images/brand/logo_spacing_vert-dark.png" alt="Vertical Logo spacing" />
   </div>
   <div class="width-6-12 width-12-12-m ">
-    <img src="{{site.baseurl}}/assets/images/brand/logo_spacing_hori.png" alt="Horizontal Logo spacing">
+    <img class="light-only" src="{{site.baseurl}}/assets/images/brand/logo_spacing_hori.png" alt="Horizontal Logo spacing">
+    <img class="dark-only" src="{{site.baseurl}}/assets/images/brand/logo_spacing_hori-dark.png" alt="Horizontal Logo spacing">
   </div>
   <div class="width-12-12 width-12-12-m">
     <h3>What NOT to do</h3>
     <p>Make sure you use the logo correctly and don't do silly stuff like...</p>
   </div>
   <div class="width-4-12 width-12-12-m ">
-    <img src="{{site.baseurl}}/assets/images/brand/logo_recolor.png" alt="Don't recolor the logo">
+    <img class="light-only" src="{{site.baseurl}}/assets/images/brand/logo_recolor.png" alt="Don't recolor the logo">
+    <img class="dark-only" src="{{site.baseurl}}/assets/images/brand/logo_recolor-dark.png" alt="Don't recolor the logo">
     <p>Don't use other colors in the logo.</p>
   </div>
   <div class="width-4-12 width-12-12-m ">
-    <img src="{{site.baseurl}}/assets/images/brand/logo_resize.png" alt="Don't resize the elements of the logo">
+    <img class="light-only" src="{{site.baseurl}}/assets/images/brand/logo_resize.png" alt="Don't resize the elements of the logo">
+    <img class="dark-only" src="{{site.baseurl}}/assets/images/brand/logo_resize-dark.png" alt="Don't resize the elements of the logo">
     <p>Don't resize individual elements of the logo.</p>
   </div>
   <div class="width-4-12 width-12-12-m ">
-    <img src="{{site.baseurl}}/assets/images/brand/logo_skew.png" alt="Don't stretch or squish the logo">
+    <img class="light-only" src="{{site.baseurl}}/assets/images/brand/logo_skew.png" alt="Don't stretch or squish the logo">
+    <img class="dark-only" src="{{site.baseurl}}/assets/images/brand/logo_skew-dark.png" alt="Don't stretch or squish the logo">
     <p>Don't squish or strech the logo to change it's proportions.</p>
   </div>
   <div class="width-4-12 width-12-12-m ">
-    <img src="{{site.baseurl}}/assets/images/brand/logo_dropshadow.png" alt="Don't add any dropshadow to the logo">
+    <img class="light-only" src="{{site.baseurl}}/assets/images/brand/logo_dropshadow.png" alt="Don't add any dropshadow to the logo"/>
+    <img class="dark-only" src="{{site.baseurl}}/assets/images/brand/logo_dropshadow-dark.png" alt="Don't add any dropshadow to the logo"/>
     <p>Don't add a dropshadow effect on the logo on a white background.</p>
   </div>
   <div class="width-4-12 width-12-12-m ">
-    <img src="{{site.baseurl}}/assets/images/brand/logo_gradient.png" alt="Don't add gradient effects to the logo">
+    <img class="light-only" src="{{site.baseurl}}/assets/images/brand/logo_gradient.png" alt="Don't add gradient effects to the logo">
+    <img class="dark-only" src="{{site.baseurl}}/assets/images/brand/logo_gradient-dark.png" alt="Don't add gradient effects to the logo">
     <p>Don't add gradient effects to interior of the logo.</p>
   </div>
   <div class="width-4-12 width-12-12-m ">
-    <img src="{{site.baseurl}}/assets/images/brand/logo_logotype.png" alt="Don't use the logo type element by itself">
+    <img class="light-only" src="{{site.baseurl}}/assets/images/brand/logo_logotype.png" alt="Don't use the logo type element by itself">
+    <img class="dark-only" src="{{site.baseurl}}/assets/images/brand/logo_logotype-dark.png" alt="Don't use the logo type element by itself">
     <p>Don't use the logotype by itself.</p>
   </div>  
 </div>

_includes/container-first.html

@@ -3,10 +3,8 @@
 <div class="full-width-bg component">
   <div class="grid-wrapper">
     <div class="width-3-12 width-12-12-m">
-    <picture>
-      <source srcset="{{site.baseurl}}/assets/images/about/icon-containerfirst-dark.svg" media="(prefers-color-scheme:dark)">
-        <img src="{{site.baseurl}}/assets/images/about/icon-containerfirst.svg">
-    </picture>
+    <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">
     </div>
     <div class="width-9-12 width-12-12-m">
       <p class="intropara">From the outset, Quarkus has been designed around a container-first philosophy. What this means in concrete terms is that Quarkus applications are optimised for low memory usage and fast startup times in the following ways:</p>

_includes/continuum.html

@@ -1,10 +1,8 @@
 <div class="full-width-bg component">
   <div class="grid-wrapper">
     <div class="width-3-12 width-12-12-m">
-    <picture>
-      <source srcset="{{site.baseurl}}/assets/images/about/icon-reactive-dark.svg" media="(prefers-color-scheme:dark)">
-        <img src="{{site.baseurl}}/assets/images/about/icon-reactive.svg">
-    </picture>
+    <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">
     </div>
     <div class="width-9-12 width-12-12-m">
       <p  class="intropara">For years, the client-server architecture has been the de-facto standard to build applications. But a significant shift happened. The <em>one model rules them all</em> age is over. A new range of applications and architectural styles have emerged and transformed how code is written and how applications are deployed and executed. HTTP microservices, reactive applications, event-driven architecture, and serverless are now central players in modern systems.</p>

_includes/developer-joy.html

@@ -1,10 +1,8 @@
 <div class="full-width-bg component">
   <div class="grid-wrapper">
     <div class="width-3-12 width-12-12-m">
-    <picture>
-      <source srcset="{{site.baseurl}}/assets/images/about/icon-developerjoy-dark.svg" media="(prefers-color-scheme:dark)">
-        <img src="{{site.baseurl}}/assets/images/about/icon-developerjoy.svg">
-    </picture>
+    <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">
     </div>
     <div class="width-9-12 width-12-12-m">
       <p class="intropara">Quarkus is not just about being great for writing Web Applications or Micro-Services. We’re focusing on more than the feature set: we make sure that every feature works well, simply, with little to no configuration, in the most intuitive way possible. It should be trivial to develop simple things, and easy to develop the more complex ones.</p>

_includes/header-navigation.html

@@ -65,6 +65,9 @@
           <li><a href="https://ja.quarkus.io{{ page.url }}">日本語</a></li>
           </ul>
       </li>
+      <li>
+        <span href="#" class="modeswitcher" id='theme-toggle'><i class="fas fa-sun"></i><i class="fas fa-moon"></i><i class="fas fa-cog"></i></span>
+      </li>
     </ul>
       </nav>
     </div>

_includes/kubernetes-native.html

@@ -1,10 +1,8 @@
 <div class="full-width-bg component">
   <div class="grid-wrapper">
     <div class="width-3-12 width-12-12-m">
-    <picture>
-      <source srcset="{{site.baseurl}}/assets/images/about/icon-kube-native-dark.svg" media="(prefers-color-scheme:dark)">
-        <img src="{{site.baseurl}}/assets/images/about/icon-kube-native.svg">
-    </picture>
+    <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">
     </div>
     <div class="width-9-12 width-12-12-m">
       <p class="intropara">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.

_includes/standards.html

@@ -1,10 +1,8 @@
 <div class="full-width-bg component">
   <div class="grid-wrapper">
     <div class="width-3-12 width-12-12-m">
-    <picture>
-      <source srcset="{{site.baseurl}}/assets/images/about/icon-standards-dark.svg" media="(prefers-color-scheme:dark)">
-        <img src="{{site.baseurl}}/assets/images/about/icon-standards.svg">
-    </picture>
+    <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">
     </div>
     <div class="width-9-12 width-12-12-m">
         <p class="intropara"> We don’t want you to spend hours learning new technologies. Instead, the Quarkus programming model builds on top of proven standards. Be it official standards such as Eclipse MicroProfile or leading frameworks in a specific domain such as Eclipse Vert.x.</p>

_includes/sticker-band.html

@@ -17,16 +17,16 @@ <h4><a href="{{site.baseurl}}/assets/stickers/stickers_quarkus_logo_horizontal.p
     <h4><a href="{{site.baseurl}}/assets/stickers/stickers_quarkus_logo_hex_light.pdf">Hex Logo Sticker - Light</a></h4>
   </div>
   <div class="width-3-12 width-6-12-m contrib-block">
-    <a href="{{site.baseurl}}/assets/stickers/stickers_quarkus_logo_hex_dark.pdf"><img src="{{site.baseurl}}/assets/images/stickers/sticker_logo_hex_dark.png"></a>
-    <h4><a href="{{site.baseurl}}/assets/stickers/stickers_quarkus_logo_hex_dark.pdf">Hex Logo Sticker - Dark</a></h4>
+    <a href="{{site.baseurl}}/assets/stickers/stickers_quarkus_logo_hex-dark.pdf"><img src="{{site.baseurl}}/assets/images/stickers/sticker_logo_hex-dark.png"></a>
+    <h4><a href="{{site.baseurl}}/assets/stickers/stickers_quarkus_logo_hex-dark.pdf">Hex Logo Sticker - Dark</a></h4>
   </div>
   <div class="width-3-12 width-6-12-m contrib-block">
     <a href="{{site.baseurl}}/assets/stickers/stickers_quarkus_icon_hex_light.pdf"><img src="{{site.baseurl}}/assets/images/stickers/sticker_icon_hex_light.png"></a>
     <h4><a href="{{site.baseurl}}/assets/stickers/stickers_quarkus_icon_hex_light.pdf">Hex Icon Sticker - Light</a></h4>
   </div>
   <div class="width-3-12 width-6-12-m contrib-block">
-    <a href="{{site.baseurl}}/assets/stickers/stickers_quarkus_icon_hex_dark.pdf"><img src="{{site.baseurl}}/assets/images/stickers/sticker_icon_hex_dark.png"></a>
-    <h4><a href="{{site.baseurl}}/assets/stickers/stickers_quarkus_icon_hex_dark.pdf">Hex Icon Sticker - Dark</a></h4>
+    <a href="{{site.baseurl}}/assets/stickers/stickers_quarkus_icon_hex-dark.pdf"><img src="{{site.baseurl}}/assets/images/stickers/sticker_icon_hex-dark.png"></a>
+    <h4><a href="{{site.baseurl}}/assets/stickers/stickers_quarkus_icon_hex-dark.pdf">Hex Icon Sticker - Dark</a></h4>
   </div>
   <div class="width-3-12 width-6-12-m contrib-block">
     <a href="{{site.baseurl}}/assets/stickers/stickers_quarkus_motto.pdf"><img src="{{site.baseurl}}/assets/images/stickers/sticker_logo_motto.png"></a>