From cc50f0ab5e74db88ada71373254c1c8c71bc1d56 Mon Sep 17 00:00:00 2001 From: Holly Cummins Date: Thu, 18 Apr 2024 14:04:05 +0100 Subject: [PATCH 1/6] Revert "Revert "css changes to fix usability in darkmode"" This reverts commit 0864e77b48bbdce41049da3ba0fa400ddf2ebccb. --- _includes/about.html | 20 ++++- _includes/container-first.html | 5 +- _includes/continuum.html | 5 +- _includes/developer-joy.html | 5 +- _includes/get-started-guides-nextsteps.html | 2 +- _includes/insights-band.html | 2 +- _includes/kubernetes-native.html | 5 +- _includes/standards.html | 12 ++- _includes/support-help-band.html | 17 +++- _layouts/post.html | 2 +- _sass/colormode.scss | 47 +++++++++++ _sass/includes/asciidoc-tabs.css | 12 ++- _sass/includes/copycode.css | 4 +- _sass/includes/whitecards.scss | 14 ++-- _sass/layouts/blog.scss | 10 ++- _sass/layouts/documentation.scss | 77 +++++++++++++++-- _sass/layouts/guide.scss | 6 +- _sass/project-colors.scss | 2 +- _sass/quarkus.scss | 38 ++++----- assets/css/main.scss | 1 + .../images/about/icon-containerfirst-dark.svg | 51 ++++++++++++ .../images/about/icon-developerjoy-dark.svg | 20 +++++ assets/images/about/icon-kube-native-dark.svg | 59 +++++++++++++ assets/images/about/icon-reactive-dark.svg | 36 ++++++++ assets/images/about/icon-standards-dark.svg | 82 +++++++++++++++++++ assets/images/about/microprofile-dark.svg | 61 ++++++++++++++ .../documentation/docsicon-concepts-dark.svg | 35 ++++++++ .../documentation/docsicon-guides-dark.svg | 36 ++++++++ .../documentation/docsicon-pdf-dark.svg | 27 ++++++ .../docsicon-referencedocs-dark.svg | 24 ++++++ .../documentation/docsicon-tutorials-dark.svg | 17 ++++ .../images/support/icon-discussion-dark.svg | 46 +++++++++++ .../support/icon-documentation-dark.svg | 37 +++++++++ assets/images/support/icon-mail-dark.svg | 31 +++++++ .../support/icon-stackoverflow-dark.svg | 30 +++++++ 35 files changed, 812 insertions(+), 66 deletions(-) create mode 100644 _sass/colormode.scss create mode 100644 assets/images/about/icon-containerfirst-dark.svg create mode 100644 assets/images/about/icon-developerjoy-dark.svg create mode 100644 assets/images/about/icon-kube-native-dark.svg create mode 100644 assets/images/about/icon-reactive-dark.svg create mode 100644 assets/images/about/icon-standards-dark.svg create mode 100644 assets/images/about/microprofile-dark.svg create mode 100644 assets/images/documentation/docsicon-concepts-dark.svg create mode 100644 assets/images/documentation/docsicon-guides-dark.svg create mode 100644 assets/images/documentation/docsicon-pdf-dark.svg create mode 100644 assets/images/documentation/docsicon-referencedocs-dark.svg create mode 100644 assets/images/documentation/docsicon-tutorials-dark.svg create mode 100644 assets/images/support/icon-discussion-dark.svg create mode 100644 assets/images/support/icon-documentation-dark.svg create mode 100644 assets/images/support/icon-mail-dark.svg create mode 100644 assets/images/support/icon-stackoverflow-dark.svg diff --git a/_includes/about.html b/_includes/about.html index 95914fe262c..7b3b7d88439 100644 --- a/_includes/about.html +++ b/_includes/about.html @@ -9,22 +9,34 @@

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/container-first.html b/_includes/container-first.html index 540379898a3..e0d3118d070 100644 --- a/_includes/container-first.html +++ b/_includes/container-first.html @@ -3,7 +3,10 @@
- + + + +

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 66820af575e..6eceeea08f8 100644 --- a/_includes/continuum.html +++ b/_includes/continuum.html @@ -1,7 +1,10 @@
- + + + +

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 7a9004353b6..c8630fc6ff7 100644 --- a/_includes/developer-joy.html +++ b/_includes/developer-joy.html @@ -1,7 +1,10 @@
- + + + +

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/get-started-guides-nextsteps.html b/_includes/get-started-guides-nextsteps.html index 1133cdb6d8e..698233582ca 100644 --- a/_includes/get-started-guides-nextsteps.html +++ b/_includes/get-started-guides-nextsteps.html @@ -1,4 +1,4 @@ -
+

{{ site.data.getstarted-nextsteps.headline }}

diff --git a/_includes/insights-band.html b/_includes/insights-band.html index f61c8a263cb..bff7d690b8d 100644 --- a/_includes/insights-band.html +++ b/_includes/insights-band.html @@ -1,4 +1,4 @@ -
+

{{ site.data.insights-videos.sectiontitle }}

diff --git a/_includes/kubernetes-native.html b/_includes/kubernetes-native.html index d2bde009461..a2076bcaade 100644 --- a/_includes/kubernetes-native.html +++ b/_includes/kubernetes-native.html @@ -1,7 +1,10 @@
- + + + +

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 5728f2eec43..d32d5c46b6d 100644 --- a/_includes/standards.html +++ b/_includes/standards.html @@ -1,7 +1,10 @@

- + + + +

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.

@@ -33,7 +36,12 @@

Quarkus implements the following Specifications:

- + + + + + +
MicroProfile Config 3.0 diff --git a/_includes/support-help-band.html b/_includes/support-help-band.html index 2f15f67b3da..5c635292d03 100644 --- a/_includes/support-help-band.html +++ b/_includes/support-help-band.html @@ -3,17 +3,26 @@

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

. +

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

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

diff --git a/_layouts/post.html b/_layouts/post.html index 692762cc90a..9c98607730a 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -53,7 +53,7 @@

{{ page.title }}

data-mapping="og:title" data-reactions-enabled="1" data-emit-metadata="0" - data-theme="light" + data-theme="preferred_color_scheme" data-lang="en" crossorigin="anonymous" async> diff --git a/_sass/colormode.scss b/_sass/colormode.scss new file mode 100644 index 00000000000..bce041c710d --- /dev/null +++ b/_sass/colormode.scss @@ -0,0 +1,47 @@ + +html { + --link-color: #1259A5; + --link-color-hover: #CC0000; + --link-color-visited: #AA4494; + --main-background-color: #FFFFFF; + --main-text-color: #121212; + --main-code-color: #943000; + --sec-background-color: #B5B5B5; + --title-background-color: #0d1c2c; + --breadcrumb-background-color: #4695EB; + + --card-outline: #AAAAAA; + --card-background-color: #FFFFFF; + --card-background-color-hover: #e4edf7; + +} + +@media (prefers-color-scheme: dark) { + 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: #0a131e; + --breadcrumb-background-color: #0d1c2c; + + --card-outline: #555555; + --card-background-color: #333333; + --card-background-color-hover: #0f0f0f; + } + + // code highlighting overrides // + .hljs-built_in, .hljs-selector-tag, .hljs-section, .hljs-link, .hljs-function, .hljs-params { color: #6a9fb5 !important;} + .hljs-title, .hljs-attr { color: #d28445 !important; } + .hljs-string, .hljs-meta, .hljs-name, .hljs-type, .hljs-symbol, .hljs-bullet, .hljs-addition, .hljs-variable, .hljs-template-tag, .hljs-template-variable { color: #90a959 !important; } + .hljs-comment, .hljs-quote, .hljs-deletion { color: #75b5aa !important; } + .hljs-literal, .hljs-number { color: #d28445 !important; } + + // Table overrides // + table.tableblock tbody tr:nth-child(even) { background-color: transparent !important; } + table.tableblock thead th { background-color: #333333 !important; } + +} diff --git a/_sass/includes/asciidoc-tabs.css b/_sass/includes/asciidoc-tabs.css index a1ac0ad9cb1..40f3aba7fd3 100644 --- a/_sass/includes/asciidoc-tabs.css +++ b/_sass/includes/asciidoc-tabs.css @@ -5,25 +5,23 @@ .asciidoc-tabs-switch { border-width: 1px 0 0 1px; border-style: solid; - border-color: $grey-1; + border-color: var(--sec-background-color); margin-bottom: -1px; display: inline-block; } .asciidoc-tabs-switch--item { padding: .75rem 2.5rem; - background-color: $light-blue; - color: $dark-blue-alt; + background-color: var(--main-background-color); display: inline-block; cursor: pointer; - border-right: 1px solid $grey-1; + border-right: 1px solid var(--sec-background-color); } .asciidoc-tabs-switch--item.selected { - background-color: $white; - color: $dark-blue-alt; + background-color: var(--sec-background-color); font-weight: 600; - border-bottom: 1px solid $white; + border-bottom: 1px solid var(--sec-background-color); } .asciidoc-tabs-switch ~ .content pre.highlight { diff --git a/_sass/includes/copycode.css b/_sass/includes/copycode.css index 2494c9bf42d..a31caf12345 100644 --- a/_sass/includes/copycode.css +++ b/_sass/includes/copycode.css @@ -4,13 +4,13 @@ font-family: FontAwesome; padding: 0rem; line-height: .5rem; - color: $grey-4 !important; + color: var(--main-text-color) !important; background-color: transparent !important; border: transparent !important; cursor: pointer; } .btn-copy:hover { - color: $quarkus-blue !important; + color: var(---link-color-hover); } .btn-copy[float-right] { float: right; diff --git a/_sass/includes/whitecards.scss b/_sass/includes/whitecards.scss index 4222b163ba4..3aec79188d9 100644 --- a/_sass/includes/whitecards.scss +++ b/_sass/includes/whitecards.scss @@ -1,6 +1,6 @@ .whitecard-outline { -background-color: $white; -outline: 1px solid $gray-1; +background-color: var(--sec-background-color); +outline: 1px solid var(--card-outline); padding: 1rem; position: relative; height: calc(100% - 2rem); @@ -24,7 +24,7 @@ grid-column: span 3; } .whitecard { -background-color: $white; +background-color: var(--sec-background-color); padding: 1rem 1rem 1rem 0rem; position: relative; height: calc(100% - 2rem); @@ -77,7 +77,7 @@ grid-column: span 3; } .card { - border: 1px solid $gray-1; + border: 1px solid var(--card-outline); border-radius: 10px; padding: 1rem; position: relative; @@ -132,13 +132,13 @@ grid-column: span 3; } &:hover, &:focus { - background-color: $light-blue; - border:1px solid $light-blue; + background-color: var(--card-background-color-hover); + border:1px solid var(--card-background-color-hover); } } .card-static { - border: 1px solid $gray-1; + border: 1px solid var(--card-outline); border-radius: 10px; padding: 1rem; position: relative; diff --git a/_sass/layouts/blog.scss b/_sass/layouts/blog.scss index 1d8f175fe15..e7b19a48bf5 100644 --- a/_sass/layouts/blog.scss +++ b/_sass/layouts/blog.scss @@ -10,8 +10,8 @@ body.post { } h1, h2, h3, h4, h5, h6, p, blockquote, table tr th, table tr td, li, dt, .title, .paragraph, .footnote, b { - color: $dark-blue-alt; } + small, strong, em, i { color: inherit; } @@ -27,7 +27,6 @@ body.post { overflow: auto; } .post-date { - color: $dark-blue-alt; text-align: left; font-size: 1rem; } @@ -35,11 +34,14 @@ body.post { max-width: 4rem; margin-right: 1rem; } - .line-through{ color: $dark-blue-alt; text-decoration:line-through} + .line-through { + text-decoration:line-through; + } .post-title { margin: 1.5rem 0; } + .tags { a { display: inline-block; @@ -82,7 +84,7 @@ body.post { &:not(:last-child):after { content: ""; display: block; - border-bottom: 2px solid $grey-0; + border-bottom: 2px solid var(--card-outline); height: 1rem; grid-column: 5 / span 4; @media screen and (min-width: $breakpoint-m) { diff --git a/_sass/layouts/documentation.scss b/_sass/layouts/documentation.scss index f8818a735df..f499273373d 100644 --- a/_sass/layouts/documentation.scss +++ b/_sass/layouts/documentation.scss @@ -1,6 +1,6 @@ -/* +/* -Styles for the documentation index page +Styles for the documentation index page */ @@ -36,7 +36,7 @@ Styles for the documentation index page flex: 1 0 150px; position: relative; display:flex; - + select { flex: 1 0 150px; background-color: $white; @@ -134,7 +134,7 @@ Styles for the documentation index page } @media only screen and (max-width: 1244px) { - + .flexlabel { display: none; } @@ -187,7 +187,7 @@ Styles for the documentation index page .flexlabel { display: none; } - + .search, .pulldown, .guidepulldown, .returnlink, .docslink { flex-basis: auto; } @@ -256,9 +256,74 @@ Styles for the documentation index page background-size: 25px 25px; height: 25px; width: 25px; - position: absolute; + position: absolute; left: 90px; } + span.highlighted { + font-weight: bold; + color: inherit; + line-height: inherit; + } + } + + .tutorialbkg { + background: url($baseurl + '/assets/images/documentation/docsicon-tutorials.svg') no-repeat; + background-size: 80px 80px; + + @media (prefers-color-scheme: dark) { + background: url($baseurl + '/assets/images/documentation/docsicon-tutorials-dark.svg') no-repeat; + background-size: 80px 80px; + } + } + + .guidebkg { + background: url($baseurl + '/assets/images/documentation/docsicon-referencedocs.svg') no-repeat; + background-size: 80px 80px; + + @media (prefers-color-scheme: dark) { + background: url($baseurl + '/assets/images/documentation/docsicon-referencedocs-dark.svg') no-repeat; + background-size: 80px 80px; + } + } + + .howtobkg { + background: url($baseurl + '/assets/images/documentation/docsicon-guides.svg') no-repeat; + background-size: 80px 80px; + + @media (prefers-color-scheme: dark) { + background: url($baseurl + '/assets/images/documentation/docsicon-guides-dark.svg') no-repeat; + background-size: 80px 80px; + } + } + + .conceptsbkg { + background: url($baseurl + '/assets/images/documentation/docsicon-concepts.svg') no-repeat; + background-size: 80px 80px; + + @media (prefers-color-scheme: dark) { + background: url($baseurl + '/assets/images/documentation/docsicon-concepts-dark.svg') no-repeat; + background-size: 80px 80px; + } + } + + .pdfbkg { + background: url($baseurl + '/assets/images/documentation/docsicon-pdf.svg') no-repeat; + background-size: 80px 80px; + + @media (prefers-color-scheme: dark) { + background: url($baseurl + '/assets/images/documentation/docsicon-pdf-dark.svg') no-repeat; + background-size: 80px 80px; + } + } + + .referencebkg { + background: url($baseurl + '/assets/images/documentation/docsicon-referencedocs.svg') no-repeat; + background-size: 80px 80px; + + @media (prefers-color-scheme: dark) { + background: url($baseurl + '/assets/images/documentation/docsicon-referencedocs-dark.svg') no-repeat; + background-size: 80px 80px; + } } } diff --git a/_sass/layouts/guide.scss b/_sass/layouts/guide.scss index 1f4b0a6dc38..dee90d2fe1c 100644 --- a/_sass/layouts/guide.scss +++ b/_sass/layouts/guide.scss @@ -10,7 +10,7 @@ body.guides-configuration-reference div.guides-configuration-reference { } h1, h2, h3, h4, h5, h6, p, blockquote, table tr th, table tr td, li, dt, .title, .paragraph, .footnote, .icon { - color: $dark-blue-alt; + color: var(--main-text-color); } small, strong, em, i { color: inherit; @@ -18,7 +18,7 @@ body.guides-configuration-reference div.guides-configuration-reference { .note, .colist { overflow: auto; } - .line-through{ color: $dark-blue-alt; text-decoration:line-through} + .line-through{ color: var(--main-text-color); text-decoration:line-through} .tocwrapper { display: flex; @@ -29,7 +29,7 @@ body.guides-configuration-reference div.guides-configuration-reference { top: 1rem; padding: 1rem 1.5rem 1rem 0rem; margin: 1rem; - background-color: $grey-0; + background-color: var(--sec-background-color); word-wrap: break-word; max-height: 90vh; overflow-y: auto; diff --git a/_sass/project-colors.scss b/_sass/project-colors.scss index 62f25aac876..f68aca8b22e 100755 --- a/_sass/project-colors.scss +++ b/_sass/project-colors.scss @@ -18,4 +18,4 @@ $cta-hover: $link-hover; $nav-cta-hover: #1259a5; $light-blue: #e4edf7; -$red: #FF004A; +$red: #FF004A; \ No newline at end of file diff --git a/_sass/quarkus.scss b/_sass/quarkus.scss index 200921830cf..465f31c844e 100644 --- a/_sass/quarkus.scss +++ b/_sass/quarkus.scss @@ -10,7 +10,7 @@ body { } body:not(.homepage):not(.error-page) { - background: $white; + background: var(--main-background-color); } @@ -21,7 +21,7 @@ body:not(.homepage):not(.error-page) { * { font-family: 'Open Sans', Arial, sans-serif; - color: $grey-4; + color: var(--main-text-color); line-height: 1.5rem; font-weight: 400; } @@ -131,12 +131,12 @@ a { font-weight: 400; cursor: pointer; text-decoration: underline; - color: $link; + color: var(--link-color); &:hover, &:active, &:focus { color: $link-hover; } i { - color: $link; + color: var(--link-color); padding-left: .3rem; } } @@ -230,12 +230,12 @@ a.button-cta-white { a.button-cta.secondary { background: transparent; - border: 2px solid $link; - color: $link; + border: 2px solid var(--link-color); + color: var(--link-color); font-weight: 300; &:hover, &:active, &:focus { - background-color: $link; - border-color: $link; + background-color: var(--link-color); + border-color: var(--link-color); color: $white; } @@ -448,12 +448,12 @@ dl dt:not(:first-child) { /* Over gray in text */ code { - color: #943000; + color: var(--main-code-color); } /* Over black in code blocks */ pre, pre span { - color: #be9100; + color: var(--main-code-color); } code, pre, pre span { @@ -472,13 +472,13 @@ code, pre, pre span { } pre { - background: $grey-0; + background: var(--sec-background-color); overflow: inherit; padding: 0 3rem; } pre.highlight, .literalblock pre, .listingblock > .content > pre { - border: 1px solid $grey-1; + border: 1px solid var(--sec-background-color); padding: 1rem; line-height: 1.2em; overflow-x: auto; @@ -490,7 +490,7 @@ pre.highlight, .literalblock pre, .listingblock > .content > pre { } .sidebarblock > .content { - border: 1px solid $grey-1; + border: 1px solid var(--sec-background-color); padding: 1rem; line-height: 1.2em; overflow-x: auto; @@ -632,12 +632,12 @@ i.conum + b, b.conum { .hljs-keyword, .hljs-tag, .hljs-tag .hljs-name { - color: $link; + color: var(--link-color); } .hljs, .hljs-subst { - color: $gray-4; + color: var(--main-text-color); } .hljs-title, @@ -730,7 +730,7 @@ ol.bibliography li { } .alt-background { - background-color: $dark-blue-alt !important; + background-color: var(--title-background-color) !important; } .admonitionblock td.icon .icon-tip::before { @@ -829,7 +829,7 @@ li { .full-width-version-bg { margin: 0 -13rem 2rem -13rem; padding: .75rem 13rem; - background-color: $quarkus-blue; + background-color: var(--breadcrumb-background-color); @media screen and (max-width: 1366px) { margin: 0 -4rem 2rem -4rem; @@ -849,7 +849,7 @@ li { .full-width-breadcrumb-bg { margin: 0 -13rem 2rem -13rem; padding: .75rem 13rem; - background-color: $quarkus-blue; + background-color: var(--breadcrumb-background-color); @media screen and (max-width: 1366px) { margin: 0 -4rem 2rem -4rem; @@ -920,7 +920,7 @@ li { @extend .full-width-bg; @extend .component; @extend .alt-background; - background: $dark-blue-alt !important; + background: var(--title-background-color) !important; position: relative; padding-bottom: 3rem; diff --git a/assets/css/main.scss b/assets/css/main.scss index 4c7fbc895b7..902aec12aac 100755 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -26,6 +26,7 @@ $baseurl: "{{ site.baseurl }}"; @import "core/includes/download-release-band"; @import "core/includes/contact-form-band"; +@import "colormode"; @import "project-colors"; @import "quarkus"; @import "asciidoc"; diff --git a/assets/images/about/icon-containerfirst-dark.svg b/assets/images/about/icon-containerfirst-dark.svg new file mode 100644 index 00000000000..d01e6209fbb --- /dev/null +++ b/assets/images/about/icon-containerfirst-dark.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/about/icon-developerjoy-dark.svg b/assets/images/about/icon-developerjoy-dark.svg new file mode 100644 index 00000000000..0c69f0de101 --- /dev/null +++ b/assets/images/about/icon-developerjoy-dark.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + diff --git a/assets/images/about/icon-kube-native-dark.svg b/assets/images/about/icon-kube-native-dark.svg new file mode 100644 index 00000000000..054dee006af --- /dev/null +++ b/assets/images/about/icon-kube-native-dark.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + diff --git a/assets/images/about/icon-reactive-dark.svg b/assets/images/about/icon-reactive-dark.svg new file mode 100644 index 00000000000..5a48d62c579 --- /dev/null +++ b/assets/images/about/icon-reactive-dark.svg @@ -0,0 +1,36 @@ + + + + + + + + + + diff --git a/assets/images/about/icon-standards-dark.svg b/assets/images/about/icon-standards-dark.svg new file mode 100644 index 00000000000..5c73ea1ab48 --- /dev/null +++ b/assets/images/about/icon-standards-dark.svg @@ -0,0 +1,82 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/about/microprofile-dark.svg b/assets/images/about/microprofile-dark.svg new file mode 100644 index 00000000000..a42b7ebb7d8 --- /dev/null +++ b/assets/images/about/microprofile-dark.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/documentation/docsicon-concepts-dark.svg b/assets/images/documentation/docsicon-concepts-dark.svg new file mode 100644 index 00000000000..c76b59887fd --- /dev/null +++ b/assets/images/documentation/docsicon-concepts-dark.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/documentation/docsicon-guides-dark.svg b/assets/images/documentation/docsicon-guides-dark.svg new file mode 100644 index 00000000000..58d76b0bc2e --- /dev/null +++ b/assets/images/documentation/docsicon-guides-dark.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + diff --git a/assets/images/documentation/docsicon-pdf-dark.svg b/assets/images/documentation/docsicon-pdf-dark.svg new file mode 100644 index 00000000000..c360245507d --- /dev/null +++ b/assets/images/documentation/docsicon-pdf-dark.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + diff --git a/assets/images/documentation/docsicon-referencedocs-dark.svg b/assets/images/documentation/docsicon-referencedocs-dark.svg new file mode 100644 index 00000000000..025fb3f63a0 --- /dev/null +++ b/assets/images/documentation/docsicon-referencedocs-dark.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + diff --git a/assets/images/documentation/docsicon-tutorials-dark.svg b/assets/images/documentation/docsicon-tutorials-dark.svg new file mode 100644 index 00000000000..b52cd22bba7 --- /dev/null +++ b/assets/images/documentation/docsicon-tutorials-dark.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + diff --git a/assets/images/support/icon-discussion-dark.svg b/assets/images/support/icon-discussion-dark.svg new file mode 100644 index 00000000000..30979052326 --- /dev/null +++ b/assets/images/support/icon-discussion-dark.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/support/icon-documentation-dark.svg b/assets/images/support/icon-documentation-dark.svg new file mode 100644 index 00000000000..acca82a8f07 --- /dev/null +++ b/assets/images/support/icon-documentation-dark.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + diff --git a/assets/images/support/icon-mail-dark.svg b/assets/images/support/icon-mail-dark.svg new file mode 100644 index 00000000000..3b55377bab9 --- /dev/null +++ b/assets/images/support/icon-mail-dark.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + diff --git a/assets/images/support/icon-stackoverflow-dark.svg b/assets/images/support/icon-stackoverflow-dark.svg new file mode 100644 index 00000000000..bd6588f48e3 --- /dev/null +++ b/assets/images/support/icon-stackoverflow-dark.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + From d606cbf72f4a5aec729a4e520b95d00a21514b35 Mon Sep 17 00:00:00 2001 From: Holly Cummins Date: Thu, 18 Apr 2024 14:04:17 +0100 Subject: [PATCH 2/6] Revert "Revert "change title band color on dark mode to grey"" This reverts commit 4b22bac75c3dfd8cf94335b3ce58bef74db20c69. --- _sass/colormode.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_sass/colormode.scss b/_sass/colormode.scss index bce041c710d..5bd525ae325 100644 --- a/_sass/colormode.scss +++ b/_sass/colormode.scss @@ -25,7 +25,7 @@ html { --main-text-color: #B5B5B5; --main-code-color: #F59B00; --sec-background-color: #333333; - --title-background-color: #0a131e; + --title-background-color: #0e0e0e; --breadcrumb-background-color: #0d1c2c; --card-outline: #555555; From d20a6c06d3a1e6b9c26d93448bbfe2d69473a541 Mon Sep 17 00:00:00 2001 From: Holly Cummins Date: Thu, 18 Apr 2024 14:04:27 +0100 Subject: [PATCH 3/6] Revert "Revert "update card hover and background colors"" This reverts commit ffa9f9681060cfc4442cf53015e30be791fb56bc. --- _sass/colormode.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_sass/colormode.scss b/_sass/colormode.scss index 5bd525ae325..1d81d09a7b8 100644 --- a/_sass/colormode.scss +++ b/_sass/colormode.scss @@ -29,8 +29,8 @@ html { --breadcrumb-background-color: #0d1c2c; --card-outline: #555555; - --card-background-color: #333333; - --card-background-color-hover: #0f0f0f; + --card-background-color: #0f0f0f; + --card-background-color-hover: #000000; } // code highlighting overrides // From f1a1fe2f31bd21a01647494279ddd4bacfc19ff2 Mon Sep 17 00:00:00 2001 From: Holly Cummins Date: Thu, 18 Apr 2024 14:04:42 +0100 Subject: [PATCH 4/6] Revert "Revert "sync card color with extensions pages"" This reverts commit ad38c2de16f8645998147d559309164ebe87de14. --- _sass/colormode.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_sass/colormode.scss b/_sass/colormode.scss index 1d81d09a7b8..f9149f02c17 100644 --- a/_sass/colormode.scss +++ b/_sass/colormode.scss @@ -30,7 +30,7 @@ html { --card-outline: #555555; --card-background-color: #0f0f0f; - --card-background-color-hover: #000000; + --card-background-color-hover: #333333; } // code highlighting overrides // From f2618adb83d835457260aea308d0088b959b6b74 Mon Sep 17 00:00:00 2001 From: Holly Cummins Date: Thu, 18 Apr 2024 14:04:53 +0100 Subject: [PATCH 5/6] Revert "Revert "remove background image in project footer during dark mode"" This reverts commit 0eedd496907f2e446c7d09bd3bd83f2cd8a87941. --- _sass/colormode.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/_sass/colormode.scss b/_sass/colormode.scss index f9149f02c17..6680aa610bf 100644 --- a/_sass/colormode.scss +++ b/_sass/colormode.scss @@ -44,4 +44,9 @@ html { table.tableblock tbody tr:nth-child(even) { background-color: transparent !important; } table.tableblock thead th { background-color: #333333 !important; } + // project footer // + .project-footer { + background-image: none !important; + background-color: var(--title-background-color) !important; } + } From 78c902ecdd394301dee9bace1b5d4e9950480a36 Mon Sep 17 00:00:00 2001 From: Holly Cummins Date: Thu, 18 Apr 2024 14:33:32 +0100 Subject: [PATCH 6/6] Disable dark mode and correct code block colour --- _sass/colormode.scss | 6 ++++-- _sass/quarkus.scss | 3 ++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/_sass/colormode.scss b/_sass/colormode.scss index 6680aa610bf..0435a73aa9b 100644 --- a/_sass/colormode.scss +++ b/_sass/colormode.scss @@ -6,7 +6,8 @@ html { --main-background-color: #FFFFFF; --main-text-color: #121212; --main-code-color: #943000; - --sec-background-color: #B5B5B5; + --sec-border-color: #aaa; + --sec-background-color: #EFEFEF; --title-background-color: #0d1c2c; --breadcrumb-background-color: #4695EB; @@ -16,7 +17,8 @@ html { } -@media (prefers-color-scheme: dark) { +/* @media (prefers-color-scheme: dark) { */ +@media screen and (max-width: 1px) { html { --link-color: #9BCAFA; --link-color-hover: #CC0000; diff --git a/_sass/quarkus.scss b/_sass/quarkus.scss index 465f31c844e..e31ac26ebad 100644 --- a/_sass/quarkus.scss +++ b/_sass/quarkus.scss @@ -449,6 +449,7 @@ dl dt:not(:first-child) { /* Over gray in text */ code { color: var(--main-code-color); + background-color: var(--main-code-background-color); } /* Over black in code blocks */ @@ -478,7 +479,7 @@ pre { } pre.highlight, .literalblock pre, .listingblock > .content > pre { - border: 1px solid var(--sec-background-color); + border: 1px solid var(--sec-border-color); padding: 1rem; line-height: 1.2em; overflow-x: auto;