Skip to content

Commit be57384

Browse files
gsmetgsmet
authored
Merge pull request #1983 from insectengine/HomePage_modeupdate
add light/dark mode to homepage
2 parents a5b8370 + d1e871d commit be57384

27 files changed

+52
-39
lines changed

‎_includes/homepage-features-icon-band.html

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,32 @@ <h2>Quarkus Features</h2>
66
</div>
77
<div class="grid-container">
88
<div class="width-4-12 width-12-12-m contrib-block">
9-
<img src="{{site.baseurl}}/assets/images/home/icon-rev-containerfirst.svg">
9+
<img class="light-only" src="{{site.baseurl}}/assets/images/about/icon-containerfirst.svg">
10+
<img class="dark-only" src="{{site.baseurl}}/assets/images/about/icon-containerfirst-dark.svg">
1011
<h3><a href="/container-first">Container First</a></h3>
1112
<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>
1213
</div>
1314
<div class="width-4-12 width-12-12-m contrib-block">
14-
<img src="{{site.baseurl}}/assets/images/home/icon-rev-reactive.svg">
15+
<img class="light-only" src="{{site.baseurl}}/assets/images/about/icon-reactive.svg">
16+
<img class="dark-only" src="{{site.baseurl}}/assets/images/about/icon-reactive-dark.svg">
1517
<h3><a href="/continuum">Unifies imperative and reactive</a></h3>
1618
<p>Combine both the familiar imperative code and the reactive style when developing applications.</p>
1719
</div>
1820
<div class="width-4-12 width-12-12-m contrib-block">
19-
<img src="{{{site.baseurl}}/assets/images/home/icon-rev-standards.svg">
21+
<img class="light-only" src="{{site.baseurl}}/assets/images/about/icon-standards.svg">
22+
<img class="dark-only" src="{{site.baseurl}}/assets/images/about/icon-standards-dark.svg">
2023
<h3><a href="/standards">Community and Standards</a></h3>
2124
<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>
2225
</div>
2326
<div class="width-4-12 width-12-12-m contrib-block">
24-
<img src="{{site.baseurl}}/assets/images/home/icon-rev-kube-native.svg">
27+
<img class="light-only" src="{{site.baseurl}}/assets/images/about/icon-kube-native.svg">
28+
<img class="dark-only" src="{{site.baseurl}}/assets/images/about/icon-kube-native-dark.svg">
2529
<h3><a href="/kubernetes-native">Kube-Native</a></h3>
2630
<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>
2731
</div>
2832
<div class="width-4-12 width-12-12-m contrib-block">
29-
<img src="{{site.baseurl}}/assets/images/home/icon-rev-developerjoy.svg">
33+
<img class="light-only" src="{{site.baseurl}}/assets/images/about/icon-developerjoy.svg">
34+
<img class="dark-only" src="{{site.baseurl}}/assets/images/about/icon-developerjoy-dark.svg">
3035
<h3><a href="/developer-joy">Developer Joy</a></h3>
3136
<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>
3237
</div>

‎_includes/homepage-performance-band.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
<h2>Quarkus offers unequaled performance </h2>
55
</div>
66
<div class="width-12-12 block-content">
7-
<img src="{{site.baseurl}}/assets/images/quarkus_metrics_graphic_bootmem_wide.png">
7+
<img class="light-only" src="{{site.baseurl}}/assets/images/home/quarkus_metrics_graphic_bootmem_wide.png">
8+
<img class="dark-only" src="{{site.baseurl}}/assets/images/home/quarkus_metrics_graphic_bootmem_wide-dark.png">
89
</div>
910
</div>
1011
</div>

‎_includes/homepage-userstory-callout.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@
22
<div class="full-width-bg component homepage-callout">
33
<div class="grid-wrapper">
44
<div class="grid__item width-3-12 width-12-12-m quote-image">
5-
<a href="{{site.baseurl}}/blog/aviatar-experiences-significant-savings/"><img src="{{site.baseurl}}/assets/images/home/userstories_lufthuansa.png"></a>
5+
<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>
66
</div>
77
<div class="grid__item width-3-12 width-12-12-m quote-image">
8-
<a href="{{site.baseurl}}/blog/logicdrop-customer-story/"><img src="{{site.baseurl}}/assets/images/home/userstories_logicdrop.png"></a>
8+
<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>
99
</div>
1010
<div class="grid__item width-3-12 width-12-12-m quote-image">
11-
<a href="{{site.baseurl}}/blog/banco-do-brasil-open-banking-user-story/"><img src="{{site.baseurl}}/assets/images/home/userstories_bancodobrasil.png"></a>
11+
<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>
1212
</div>
1313
<div class="grid__item width-3-12 width-12-12-m quote-image">
14-
<a href="{{site.baseurl}}/blog/adoptium-customer-story/"><img src="{{site.baseurl}}/assets/images/home/userstories_adoptium.png"></a>
14+
<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>
1515
</div>
1616
</div>
1717
<div class="grid-wrapper quote-spacer">
@@ -24,4 +24,4 @@
2424
<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>
2525
</div>
2626
</div>
27-
</div>
27+
</div>

‎_includes/recent-posts-band.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="component recent-posts-band full-width-bg dark-bg alt-background">
1+
<div class="component recent-posts-band full-width-bg alt-background">
22
<div class="grid-wrapper">
33
<div class="width-12-12">
44
<h2 class="text-centered">{{site.data.recent-posts-band.texts.recent_blog_posts}}</h2>

‎_sass/colormode.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ html {
88
--main-code-color: #943000;
99
--sec-border-color: #aaa;
1010
--sec-background-color: #EFEFEF;
11+
--blue-background-color: #e4edf7;
1112
--title-background-color: #0d1c2c;
1213
--breadcrumb-background-color: #4695EB;
1314

@@ -25,6 +26,10 @@ html {
2526
// image change //
2627
.dark-only {display: none;}
2728
.light-only {display: inline-block;}
29+
30+
// blue tile with text //
31+
--tile-text-color: #121212;
32+
--tile-background-color: #ffffff;
2833
}
2934

3035
html.dark {
@@ -35,6 +40,7 @@ html.dark {
3540
--main-text-color: #B5B5B5;
3641
--main-code-color: #F59B00;
3742
--sec-background-color: #333333;
43+
--blue-background-color: #0D1C2C;
3844
--title-background-color: #0e0e0e;
3945
--breadcrumb-background-color: #0d1c2c;
4046

@@ -47,6 +53,11 @@ html.dark {
4753

4854
--img-background-color: #c8c8c8;
4955

56+
// blue tile with text //
57+
--tile-text-color: #ffffff;
58+
--tile-background-color: #205894;
59+
60+
5061
// search.quarkus.io colors:
5162
// no search results background
5263
--empty-background-color: #333333;

‎_sass/includes/homepage-features-band.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.homepage-features-band {
2-
background-color: $black !important;
2+
background: var(--main-background-color);
33

44
.contrib-block img {
55
max-width: 14rem;

‎_sass/includes/homepage-hero-band.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,12 @@
3030
font-weight: 600;
3131
line-height: 3rem;
3232
margin-top: 1rem;
33+
color: $white;
3334
}
3435
p {
3536
font-size: 1.5rem;
3637
margin-bottom: .5rem;
38+
color: $white;
3739
}
3840
}
3941

@@ -44,6 +46,7 @@
4446
font-weight: 400;
4547
line-height: 6.5rem;
4648
margin: 0;
49+
color: $white;
4750
}
4851

4952
.light-blue { color:$quarkus-blue; }
@@ -104,12 +107,14 @@
104107
font-weight: 600;
105108
line-height: 2.5rem;
106109
margin: .5rem 0;
110+
color: $white;
107111
}
108112

109113
p {
110114
font-size: 1.5rem;
111115
line-height: 1.5rem;
112116
margin: 0;
117+
color: $white;
113118
}
114119

115120
.nowavailable {

‎_sass/includes/homepage-userstory-callout.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.homepage-callout {
2-
background-color: $dark-blue-alt !important;
3-
2+
background-color: var(--blue-background-color);
3+
color: var(--main-text-color);
4+
45
.quote-image {
56
display: flex;
67
justify-content: center;
@@ -26,7 +27,6 @@
2627
}
2728

2829
.callout-quote {
29-
color: $light-blue;
3030
font-size: 2rem;
3131
line-height: 2.5rem;
3232
margin-top: 0 !important;

‎_sass/includes/recent-posts-band.scss

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,33 @@
11
.recent-posts-band {
22

33
.block-item {
4-
background-color: $dark-blue-1;
4+
background: var(--tile-background-color);
55
padding: 2rem;
66
margin: .5rem 0;
77

8+
p {
9+
color: var(--tile-text-color);
10+
}
11+
812
h6 > a {
9-
color: $white !important;
13+
color: var(--tile-text-color);
1014
font-family: inherit;
1115
font-weight: 600;
1216
font-size: 1.5rem;
1317
line-height: 2rem;
1418
}
1519

1620
.datetag {
17-
color: $white !important;
18-
font-size: .75rem;
19-
margin: 0;
20-
padding: 0;
21+
color: var(--tile-text-color);
22+
font-size: .75rem;
23+
margin: 0;
24+
padding: 0;
25+
26+
a { color: var(--tile-text-color); }
2127
}
2228

2329
.byline {
24-
color: $white !important;
30+
color: var(--tile-text-color);
2531
font-size: 1rem;
2632
margin: 0;
2733
padding: 0;

‎_sass/quarkus.scss

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,7 @@
66
html,
77
body {
88
font-family: 'Open Sans', Arial, sans-serif;
9-
background-color: $black;
10-
}
11-
12-
body:not(.homepage):not(.error-page) {
139
background: var(--main-background-color);
14-
15-
}
16-
17-
.homepage {
18-
* { color: $white;
19-
}
2010
}
2111

2212
* {
@@ -719,7 +709,7 @@ ol.bibliography li {
719709
}
720710

721711
.alt-background {
722-
background-color: var(--title-background-color) !important;
712+
background-color: var(--blue-background-color) !important;
723713
}
724714

725715
.admonitionblock td.icon .icon-tip::before {

0 commit comments

Comments
 (0)