diff --git a/_includes/about.html b/_includes/about.html index 7b3b7d8843..ca98ba02ad 100644 --- a/_includes/about.html +++ b/_includes/about.html @@ -9,34 +9,26 @@

Open Source Utterly and Absolutely

What Makes Quarkus Different?

- - - - + +

Developer Joy

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.
Learn more about Developer Joy

- - - - + +

Kubernetes-native

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.
Learn more about Kubernetes-native

- - - - + +

Best of Breed Libraries and Standards

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.
Learn more about Standards

- - - - + +

Imperative and reactive code

Quarkus is designed to seamlessly combine the familiar imperative style code and the non-blocking, reactive style when developing applications.

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.
Learn more about Reactive

diff --git a/_includes/brand-band.html b/_includes/brand-band.html index b5ccf65790..29d5624d78 100755 --- a/_includes/brand-band.html +++ b/_includes/brand-band.html @@ -12,7 +12,7 @@

Background Color

-
+
Quarkus vertical logo file default

Vertical Logo Default

450px | 1280px | SVG

@@ -22,7 +22,7 @@

Vertical Logo Default

Vertical Logo Reversed

450px | 1280px | SVG

-
+
Quarkus vertical logo file black

Vertical Logo Black

450px | 1280px | SVG

@@ -32,8 +32,7 @@

Vertical Logo Black

Vertical Logo White

450px | 1280px | SVG

- -
+
Quarkus horizontal logo file default

Horizontal Logo Default

450px | 1280px | SVG

@@ -43,7 +42,7 @@

Horizontal Logo Default

Horizontal Logo Reversed

450px | 1280px | SVG

-
+
Quarkus horizontal logo file black

Horizontal Logo Black

450px | 1280px | SVG

@@ -58,7 +57,7 @@

Horizontal Logo Black

Quarkus Icon Assets

-
+
Quarkus icon file default

Icon Default

512px | 1024px | SVG

@@ -68,7 +67,7 @@

Icon Default

Icon Reversed

256px | 512px | 1024px | SVG

-
+
Quarkus icon file black

Icon black

512px | 1024px | SVG

@@ -89,37 +88,45 @@

Logo Spacing

The logo needs space to breath so make sure you leave at least an icon's height and width around it.

- Vertical Logo spacing + Vertical Logo spacing + Vertical Logo spacing
- Horizontal Logo spacing + Horizontal Logo spacing + Horizontal Logo spacing

What NOT to do

Make sure you use the logo correctly and don't do silly stuff like...

- Don't recolor the logo + Don't recolor the logo + Don't recolor the logo

Don't use other colors in the logo.

- Don't resize the elements of the logo + Don't resize the elements of the logo + Don't resize the elements of the logo

Don't resize individual elements of the logo.

- Don't stretch or squish the logo + Don't stretch or squish the logo + Don't stretch or squish the logo

Don't squish or strech the logo to change it's proportions.

- Don't add any dropshadow to the logo + Don't add any dropshadow to the logo + Don't add any dropshadow to the logo

Don't add a dropshadow effect on the logo on a white background.

- Don't add gradient effects to the logo + Don't add gradient effects to the logo + Don't add gradient effects to the logo

Don't add gradient effects to interior of the logo.

- Don't use the logo type element by itself + Don't use the logo type element by itself + Don't use the logo type element by itself

Don't use the logotype by itself.

diff --git a/_includes/container-first.html b/_includes/container-first.html index e0d3118d07..7bcd3d05f4 100644 --- a/_includes/container-first.html +++ b/_includes/container-first.html @@ -3,10 +3,8 @@
- - - - + +

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:

diff --git a/_includes/continuum.html b/_includes/continuum.html index 6eceeea08f..16baaaf274 100644 --- a/_includes/continuum.html +++ b/_includes/continuum.html @@ -1,10 +1,8 @@
- - - - + +

For years, the client-server architecture has been the de-facto standard to build applications. But a significant shift happened. The one model rules them all 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.

diff --git a/_includes/developer-joy.html b/_includes/developer-joy.html index c8630fc6ff..704cd2accd 100644 --- a/_includes/developer-joy.html +++ b/_includes/developer-joy.html @@ -1,10 +1,8 @@
- - - - + +

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.

diff --git a/_includes/header-navigation.html b/_includes/header-navigation.html index d8a449cc44..e2210fc2f3 100644 --- a/_includes/header-navigation.html +++ b/_includes/header-navigation.html @@ -65,6 +65,9 @@
  • 日本語
    • +
  • + +
    • diff --git a/_includes/kubernetes-native.html b/_includes/kubernetes-native.html index a2076bcaad..c04eca873c 100644 --- a/_includes/kubernetes-native.html +++ b/_includes/kubernetes-native.html @@ -1,10 +1,8 @@
    - - - - + +

    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. diff --git a/_includes/standards.html b/_includes/standards.html index d32d5c46b6..6a8c5747cd 100644 --- a/_includes/standards.html +++ b/_includes/standards.html @@ -1,10 +1,8 @@

    - - - - + +

    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.

    diff --git a/_includes/sticker-band.html b/_includes/sticker-band.html index c92de26e40..977d7e47a9 100755 --- a/_includes/sticker-band.html +++ b/_includes/sticker-band.html @@ -17,16 +17,16 @@

    Hex Logo Sticker - Light

    - -

    Hex Logo Sticker - Dark

    + +

    Hex Logo Sticker - Dark

    Hex Icon Sticker - Light

    - -

    Hex Icon Sticker - Dark

    + +

    Hex Icon Sticker - Dark

    diff --git a/_includes/support-help-band.html b/_includes/support-help-band.html index 5c635292d0..7d9537d9b8 100644 --- a/_includes/support-help-band.html +++ b/_includes/support-help-band.html @@ -3,27 +3,21 @@

    Getting Help from the Community

    - - - - + +

    Documentation

    We have a lot of documentation. Be sure to check our Getting started page, and all our guides. Also check out our FAQ section and Quarkus Tips Playlist.

    - - - - + +

    Stack Overflow

    Ask your questions on Stack Overflow. After the documentation, it’s probably the best place to look for answers. We actively monitor the Quarkus tag.

    - - - - -

    Discussions and Collaboration

    + + +

    Discussions and Collaboration

    Check out our GitHub Discussions collaboration area to interact with other Quarkus users and developers.

    diff --git a/_layouts/base.html b/_layouts/base.html index 06e612bcb4..69327d0a4f 100755 --- a/_layouts/base.html +++ b/_layouts/base.html @@ -31,7 +31,7 @@ {{ page.title }}{{ page_title_version_suffix }}{% unless page_title_starts_with_quarkus or page_title_ends_with_quarkus %} - Quarkus{% endunless %} - @@ -73,6 +73,8 @@ {% if search_wc %} {% endif %} + + diff --git a/_sass/colormode.scss b/_sass/colormode.scss index a0791c42fb..8af80058d3 100644 --- a/_sass/colormode.scss +++ b/_sass/colormode.scss @@ -18,28 +18,31 @@ html { --card-background-color: #FFFFFF; --card-background-color-hover: #e4edf7; + // image change // + .dark-only {display: none;} + .light-only {display: inline-block;} } -/* @media (prefers-color-scheme: dark) { */ -@media screen and (max-width: 1px) { - html { - --link-color: #9BCAFA; - --link-color-hover: #CC0000; - --link-color-visited: #AA4494; - --main-background-color: #121212; - --main-text-color: #B5B5B5; - --main-code-color: #F59B00; - --sec-background-color: #333333; - --title-background-color: #0e0e0e; - --breadcrumb-background-color: #0d1c2c; - - --table-head-background-color: #0d1c2c; - --table-row-stripe: #0e0e0e; - - --card-outline: #555555; - --card-background-color: #0f0f0f; - --card-background-color-hover: #333333; - } +html.dark { + --link-color: #9BCAFA; + --link-color-hover: #CC0000; + --link-color-visited: #AA4494; + --main-background-color: #121212; + --main-text-color: #B5B5B5; + --main-code-color: #F59B00; + --sec-background-color: #333333; + --title-background-color: #0e0e0e; + --breadcrumb-background-color: #0d1c2c; + + --card-outline: #555555; + --card-background-color: #0f0f0f; + --card-background-color-hover: #333333; + + --img-background-color: #c8c8c8; + + // image change // + .dark-only {display: inline-block;} + .light-only {display: none;} // code highlighting overrides // .hljs-built_in, .hljs-selector-tag, .hljs-section, .hljs-link, .hljs-function, .hljs-params { color: #6a9fb5 !important;} @@ -57,4 +60,39 @@ html { background-image: none !important; background-color: var(--title-background-color) !important; } + // giscus overrides // + .giscus { + background-color: var(--img-background-color) !important; } + + // Post and Guides - backup for no alt image // + .post .doc-content img { + background-color: var(--img-background-color) !important; + padding: 1rem; } + + .guides .imageblock img, .guides .image img { + background-color: var(--img-background-color) !important; + padding: .25rem; } + + .share-page a img { + padding: 0 !important; } + + ul.related-content li { + + &:before { + &.tutorial { + background: url($baseurl + '/assets/images/documentation/docsicon-tutorials-dark.svg') no-repeat !important; } + + &.guide, &.howto { + background: url($baseurl + '/assets/images/documentation/docsicon-guides-dark.svg') no-repeat !important; } + + &.concepts { + background: url($baseurl + '/assets/images/documentation/docsicon-concepts-dark.svg') no-repeat !important; } + + &.pdf { + background: url($baseurl + '/assets/images/documentation/docsicon-pdf-dark.svg') no-repeat !important; } + + &.reference { + background: url($baseurl + '/assets/images/documentation/docsicon-referencedocs-dark.svg') no-repeat !important; } + } + } } diff --git a/_sass/includes/asciidoc-tabs.css b/_sass/includes/asciidoc-tabs.css index 40f3aba7fd..518c18f21b 100644 --- a/_sass/includes/asciidoc-tabs.css +++ b/_sass/includes/asciidoc-tabs.css @@ -5,7 +5,7 @@ .asciidoc-tabs-switch { border-width: 1px 0 0 1px; border-style: solid; - border-color: var(--sec-background-color); + border-color: var(--sec-border-color); margin-bottom: -1px; display: inline-block; } @@ -15,7 +15,7 @@ background-color: var(--main-background-color); display: inline-block; cursor: pointer; - border-right: 1px solid var(--sec-background-color); + border-right: 1px solid var(--sec-border-color); } .asciidoc-tabs-switch--item.selected { diff --git a/_sass/includes/brand.css b/_sass/includes/brand.css index d0335cab0a..b391743e00 100644 --- a/_sass/includes/brand.css +++ b/_sass/includes/brand.css @@ -1,10 +1,15 @@ /* Styles for Brand Page */ .brand-band { - .brand-block { + .brand-block-white { padding: 4rem; + background-color: $white; text-align: center; + h4, a { + color: $black; + } + img { max-width: 12rem; @media screen and (max-width: $breakpoint-m) { diff --git a/_sass/includes/header-navigation.scss b/_sass/includes/header-navigation.scss index 846b072ce7..8ecca80c99 100644 --- a/_sass/includes/header-navigation.scss +++ b/_sass/includes/header-navigation.scss @@ -214,6 +214,11 @@ div.nav-wrapper { } } } + + .modeswitcher { + padding-left: 0px !important; + padding-right: 0px !important; + } } } @@ -256,3 +261,41 @@ div.nav-wrapper { } } + +/* Hide/show the color mode switcher icons */ + +html #theme-toggle { + i.fa-sun { + display: none; + } + i.fa-moon { + display: none; + } + i.fa-cog { + display: inline-block; + } +} + +html[data-stored-theme="light"] #theme-toggle { + i.fa-sun { + display: inline-block; + } + i.fa-moon { + display: none; + } + i.fa-cog { + display: none; + } +} + +html[data-stored-theme="dark"] #theme-toggle { + i.fa-sun { + display: none; + } + i.fa-moon { + display: inline-block; + } + i.fa-cog { + display: none; + } +} \ No newline at end of file diff --git a/_sass/layouts/blog.scss b/_sass/layouts/blog.scss index e7b19a48bf..fcffce9770 100644 --- a/_sass/layouts/blog.scss +++ b/_sass/layouts/blog.scss @@ -33,6 +33,7 @@ body.post { .headshot { max-width: 4rem; margin-right: 1rem; + padding: 0; } .line-through { text-decoration:line-through; diff --git a/_sass/quarkus.scss b/_sass/quarkus.scss index 79f20c347b..16f4f64e00 100644 --- a/_sass/quarkus.scss +++ b/_sass/quarkus.scss @@ -461,11 +461,12 @@ pre { } pre.highlight, .literalblock pre, .listingblock > .content > pre { - border: 1px solid var(--sec-border-color); + border: 1px solid var(--sec-border-color); +; padding: 1rem; line-height: 1.2em; overflow-x: auto; - color: $grey-4; + color: var(--main-text-color); } .sidebarblock { @@ -473,7 +474,8 @@ pre.highlight, .literalblock pre, .listingblock > .content > pre { } .sidebarblock > .content { - border: 1px solid var(--sec-background-color); + border: 1px solid var(--sec-border-color); + background-color: var(--sec-background-color); padding: 1rem; line-height: 1.2em; overflow-x: auto; diff --git a/assets/images/brand/logo_dropshadow-dark.png b/assets/images/brand/logo_dropshadow-dark.png new file mode 100644 index 0000000000..1ac45f5f2e Binary files /dev/null and b/assets/images/brand/logo_dropshadow-dark.png differ diff --git a/assets/images/brand/logo_gradient-dark.png b/assets/images/brand/logo_gradient-dark.png new file mode 100644 index 0000000000..07d7ddcfba Binary files /dev/null and b/assets/images/brand/logo_gradient-dark.png differ diff --git a/assets/images/brand/logo_logotype-dark.png b/assets/images/brand/logo_logotype-dark.png new file mode 100644 index 0000000000..1dd1099311 Binary files /dev/null and b/assets/images/brand/logo_logotype-dark.png differ diff --git a/assets/images/brand/logo_recolor-dark.png b/assets/images/brand/logo_recolor-dark.png new file mode 100644 index 0000000000..4bfd217bec Binary files /dev/null and b/assets/images/brand/logo_recolor-dark.png differ diff --git a/assets/images/brand/logo_resize-dark.png b/assets/images/brand/logo_resize-dark.png new file mode 100644 index 0000000000..97e39ebcad Binary files /dev/null and b/assets/images/brand/logo_resize-dark.png differ diff --git a/assets/images/brand/logo_skew-dark.png b/assets/images/brand/logo_skew-dark.png new file mode 100644 index 0000000000..783c1a5232 Binary files /dev/null and b/assets/images/brand/logo_skew-dark.png differ diff --git a/assets/images/brand/logo_spacing_hori-dark.png b/assets/images/brand/logo_spacing_hori-dark.png new file mode 100644 index 0000000000..35cc924a3b Binary files /dev/null and b/assets/images/brand/logo_spacing_hori-dark.png differ diff --git a/assets/images/brand/logo_spacing_vert-dark.png b/assets/images/brand/logo_spacing_vert-dark.png new file mode 100644 index 0000000000..a1f1b97793 Binary files /dev/null and b/assets/images/brand/logo_spacing_vert-dark.png differ diff --git a/assets/javascript/colormode.js b/assets/javascript/colormode.js new file mode 100644 index 0000000000..971de2df8f --- /dev/null +++ b/assets/javascript/colormode.js @@ -0,0 +1,40 @@ +function setTheme() { + const storedTheme = localStorage.getItem('color-theme') || 'light'; + document.documentElement.dataset.storedTheme = storedTheme; + let theme_color = "#fafafa"; + if (storedTheme === 'dark' || (storedTheme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) { + document.documentElement.classList.add('dark'); + theme_color = "#1e1e1e"; + } else { + document.documentElement.classList.remove('dark'); + } + return theme_color; +} +function toggleTheme() { + const themeOrder = ['light', 'dark', 'system']; + const storedTheme = localStorage.getItem('color-theme') || 'system'; + const newTheme = themeOrder[(themeOrder.indexOf(storedTheme) + 1) % themeOrder.length]; + localStorage.setItem('color-theme', newTheme); + document.querySelector('meta[name="theme-color"]').content = setTheme(); + updateButton(); +} +function updateButton() { + const button = document.getElementById('theme-toggle'); + const storedTheme = localStorage.getItem('color-theme') || 'system'; + const themeTitles = { + 'dark': 'Color scheme: dark; next: light', + 'light': 'Color scheme: light; next: system preferences', + 'system': 'Color scheme: system preferences; next: dark' + }; + button.setAttribute('aria-label', storedTheme); + button.setAttribute('title', themeTitles[storedTheme]); + return button; +} +const meta = document.createElement('meta'); +meta.name = "theme-color"; +meta.content = setTheme(); +document.head.appendChild(meta); +window.onload = function() { + const button = updateButton(); + button.addEventListener('click', toggleTheme); +}; \ No newline at end of file