Skip to content

Commit 1b13dfa

Browse files
tipsytipsy
committed
dark mode
1 parent c497cd5 commit 1b13dfa

19 files changed

Lines changed: 471 additions & 85 deletions

‎_includes/inlineCss.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ p code,
66
li code {
77
font-size: 90%;
88
letter-spacing: -0.5px;
9-
border: 1px solid #ccd;
10-
background: #f5f5f7;
9+
border: 1px solid var(--jv-color-code-border);
10+
background: var(--jv-color-code-bg);
1111
padding: 1px 3px;
1212
}
1313

‎_includes/landing.css‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,31 @@ main {
22
padding: 0;
33
}
44

5-
header nav {
5+
header.top-nav-header {
6+
position: absolute;
7+
border: 0;
8+
background: #050a12;
9+
height: 80px;
10+
}
11+
12+
header.top-nav-header nav.width-limit {
613
justify-content: center;
714
}
815

9-
header nav ul {
16+
header.top-nav-header nav ul.top-nav {
1017
display: none;
1118
}
1219

20+
header.top-nav-header #logo img {
21+
height: 40px;
22+
margin: 0;
23+
}
24+
1325
main.width-limit {
1426
max-width: 100%;
1527
padding: 0;
1628
}
1729

18-
header {
19-
position: absolute;
20-
border: 0;
21-
background: #050a12;
22-
height: 80px;
23-
}
24-
25-
header #logo img {
26-
height: 40px;
27-
margin: 0;
28-
}
29-
3030
nav ul li + li {
3131
border: 0;
3232
}
@@ -40,6 +40,11 @@ nav ul li a:hover {
4040
color: #5dade2;
4141
}
4242

43+
/* Hide header icons on landing page */
44+
.header-icons {
45+
display: none;
46+
}
47+
4348
.landing h1 {
4449
font-family: 'Rajdhani', sans-serif;
4550
text-align: center;
@@ -496,6 +501,12 @@ nav ul li a:hover {
496501
line-height: 1.7;
497502
}
498503

504+
@media (max-width: 600px) {
505+
body {
506+
padding-top: 56px !important;
507+
}
508+
}
509+
499510
@media (max-width: 480px) {
500511

501512
.bluepart h1,

‎_includes/plugins/pluginCard.css‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
display: block;
2626
font-size: 15px;
2727
font-weight: 400;
28-
color: #666;
28+
color: var(--jv-color-text-light);
2929
margin-top: 4px;
3030
}
3131

@@ -60,20 +60,34 @@
6060
display: inline-flex;
6161
align-items: center;
6262
font-weight: 500;
63-
transition: background 0.2s ease;
6463
}
6564

6665
.plugin-box-footer .view-docs-btn:hover {
6766
background: #006080;
6867
}
6968

69+
body.dark-mode .plugin-box-footer .view-docs-btn {
70+
background: rgba(91, 168, 208, 0.15);
71+
color: var(--jv-color-primary);
72+
border: 1px solid rgba(91, 168, 208, 0.3);
73+
}
74+
75+
body.dark-mode .plugin-box-footer .view-docs-btn:hover {
76+
background: rgba(91, 168, 208, 0.25);
77+
border-color: rgba(91, 168, 208, 0.4);
78+
}
79+
7080
.plugin-box-footer .view-docs-btn svg {
7181
margin-left: 6px;
7282
width: 16px;
7383
height: 16px;
7484
fill: white;
7585
}
7686

87+
body.dark-mode .plugin-box-footer .view-docs-btn svg {
88+
fill: var(--jv-color-primary);
89+
}
90+
7791
.plugin-box-footer .plugin-reports {
7892
display: inline-flex;
7993
align-items: center;
@@ -97,7 +111,7 @@
97111

98112
.plugin-box-footer .plugin-reports .r-check,
99113
.plugin-box-footer .plugin-reports .r-check svg {
100-
fill: #676767;
114+
fill: var(--jv-color-text);
101115
}
102116

103117
.plugin-box-footer .plugin-reports .r-alert,
@@ -106,7 +120,7 @@
106120
}
107121

108122
.plugin-box-footer .plugin-reports a {
109-
color: #676767;
123+
color: var(--jv-color-text);
110124
text-decoration: underline;
111125
}
112126

‎_includes/socialButtons.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,14 @@
2727
transform: translateY(-2px);
2828
box-shadow: 2px 2px red, -2px -2px cyan, 0 5px 10px rgba(0, 0, 0, 0.25);
2929
}
30+
body.dark-mode .social-btn {
31+
background: #2f3136;
32+
color: #dcddde;
33+
box-shadow: 2px 2px rgba(91, 168, 208, 0.4), -2px -2px rgba(91, 168, 208, 0.3);
34+
}
35+
body.dark-mode .social-btn:hover {
36+
box-shadow: 2px 2px rgba(91, 168, 208, 0.5), -2px -2px rgba(91, 168, 208, 0.4), 0 5px 10px rgba(0, 0, 0, 0.6);
37+
}
3038
.social-btn svg {
3139
width: 20px;
3240
height: 20px;

‎_includes/sponsorOrStar.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,13 @@
4646
}
4747
}
4848

49+
body.dark-mode .star-us {
50+
background: var(--jv-color-bg-main);
51+
border-color: var(--jv-color-border);
52+
border-bottom-color: var(--jv-color-primary);
53+
color: var(--jv-color-text);
54+
}
55+
4956
@media (max-width: 480px) {
5057
.star-us {
5158
flex-direction: column;

‎_layouts/default.html‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@
2222
<style>{% include inlineCss.css %}</style>
2323
</head>
2424
<body>
25-
{% include forkMe.html %}
2625
<header class="top-nav-header">
2726
<nav class="width-limit">
2827
<a id="logo" href="/" aria-label="Javalin">
@@ -34,6 +33,28 @@
3433
<li><a href="/plugins">Plugins</a></li>
3534
<li><a href="/community">Community</a></li>
3635
</ul>
36+
{% unless page.splash %}
37+
<div class="header-icons">
38+
<button id="dark-mode-toggle" aria-label="Toggle dark mode">
39+
<svg class="icon-sun" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
40+
<path d="M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,2L14.39,5.42C13.65,5.15 12.84,5 12,5C11.16,5 10.35,5.15 9.61,5.42L12,2M3.34,7L7.5,6.65C6.9,7.16 6.36,7.78 5.94,8.5C5.5,9.24 5.25,10 5.11,10.79L3.34,7M3.36,17L5.12,13.23C5.26,14 5.53,14.78 5.95,15.5C6.37,16.24 6.91,16.86 7.5,17.37L3.36,17M20.65,7L18.88,10.79C18.74,10 18.47,9.23 18.05,8.5C17.63,7.78 17.1,7.15 16.5,6.64L20.65,7M20.64,17L16.5,17.36C17.09,16.85 17.62,16.22 18.04,15.5C18.46,14.77 18.73,14 18.87,13.21L20.64,17M12,22L9.59,18.56C10.33,18.83 11.14,19 12,19C12.82,19 13.63,18.83 14.37,18.56L12,22Z"/>
41+
</svg>
42+
<svg class="icon-moon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="display: none;">
43+
<path d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z"/>
44+
</svg>
45+
</button>
46+
<a id="discord-link" href="https://discord.gg/sgak4e5NKv" target="_blank" aria-label="Join Discord">
47+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
48+
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
49+
</svg>
50+
</a>
51+
<a id="github-link" href="https://github.com/javalin/javalin" target="_blank" aria-label="View on GitHub">
52+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
53+
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
54+
</svg>
55+
</a>
56+
</div>
57+
{% endunless %}
3758
</nav>
3859
</header>
3960
<main class="width-limit{% if page.rightmenu %} has-right-menu{% endif %}">

‎_layouts/news.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ <h1 class="no-margin-top" itemprop="name headline">Javalin {{ page.version }} re
3232
font-style: italic;
3333
margin-top: 16px;
3434
font-size: 18px;
35+
color: var(--jv-color-text-light);
3536
}
3637

3738
.red-notice {

‎_layouts/tutorial.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,11 @@ <h1 class="no-margin-top" itemprop="name headline">{{ page.title }}</h1>
3131
{{ content }}
3232
</div>
3333
<h3>Thanks for reading</h3>
34-
If you find any errors, please <a href="{{site.repourl}}/blob/master/{{page.path}}">edit this page on GitHub</a>.
35-
<br>
34+
<p>If you find any errors, please <a href="{{site.repourl}}/blob/master/{{page.path}}">edit this page on GitHub</a>.
3635
{% if page.github %}
36+
<br>
3737
The full source code for this tutorial can also be found on <a href="{{page.github}}">GitHub</a>.
3838
{% endif %}
39+
</p>
3940
</article>
4041
{% include socialButtons.html %}

‎_posts/news/pre-7.0/2024-01-10-javalin-6.0.0-released.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ summary: We're happy to announce the release of Javalin 6.0!
1313

1414
<h1 style="font-size:44px;display:flex;justify-content:space-between;align-items:center;margin-top:44px">
1515
<span>Javalin 6 is finally here!</span>
16-
<small style="font-weight:400;font-size:60%;color:rgba(0,0,0,0.5);">(January 28th, 2024)</small>
16+
<small class="news-date">(January 28th, 2024)</small>
1717
</h1>
1818
Javalin is a Java and Kotlin web framework which focuses on simplicity and Java/Kotlin interoperability.
1919
It's a thin layer on top of the excellent Jetty webserver and focuses primarily on the web layer.

0 commit comments

Comments
 (0)